• HTML学习速记


    HTML结构导图

    先看HTML结构示意图
    HTML导图

    本文主要讲解HTML当中的一些html标签,css样式,javascript方法

    html

      html的标签有各式各样的数不胜数,但是常用的并不多,总结下我目前最常用的html标签有:div标签,ul标签,a标签,span标签,img标签,button标签,input标签,select标签。在网页上这些标签的主要功能都是通过css样式以及js方法相结合才能实现的。

    div标签

      这是一个块状元素,也是我们最常用的,可以毫不夸张的说,任何网页都会用到它,它主要是搭配样式以及方法使用,你可以把它看成一个箱子,它主要的作用就是用来包住其他标签,限制其他标签。

    span标签

      这是一个行内元素,和div一样,它也是一个箱子,和div的不同的是,一般我们会拿span标签来包裹文本内容

    ul标签

      ul标签是列表标签的一种,列表标签包括有序列表ol,无序列表ul,自定义列表dl。不过常用的还是ul标签,我们比较少用到单纯用html书写的ul,一般我们都会结合css样式以及js方法实现各种功能,比如:导航栏,轮播图片等。

    a标签

      超链接标签,主要用于实现超链接功能

    img标签

      用于插入图片

    button标签

      按钮标签,在网页中多多少少都会出现一些按钮,这就要用到我们的button标签了,button标签一般比较多用于表单里面,但是也会有一些特殊的用法,比如按钮式下拉菜单。

    input标签

      表单标签的一种,主要用于输入文本框,和密码文本框,是表单中最常用到一种标签

      

    select标签

      下拉选项,主要是做二级联动和多级联动使用

    CSS样式

      对于样式的理解,我是这样理解的,一个网页你想让它是什么样子的,那它的样子就是样式,也就是说,我们要通过css样式来美化我们的网页以及通过css样式结合js来实现我们想要的功能。

      样式对于html文档来说还是很重要的,就像我我们学习HTML一样,如果我们只学习了html标签,我们是很难做出一个网页来的,但是学习了css样式之后,我们可以通过css样式来制作网页,虽然少了js,但是不影响我网页的制作。

      在这我不会像html标签一样,给你们列举一些常用的样式,我更多的是讲解如何知道自己要使用什么样式,即使样式代码忘记了,也可以通过百度查询。

    首先

      我们要清楚我们要做的这个html文档的整体结构,整个html文档是由多少个部分构成的。

    然后

      在我们了解了整体结构之后,我们开始理解没一部分它是要长什么样子的(也就是它的样式是什么),比如:宽高多少,是否要添加背景颜色或者背景图片,文字颜色是什么等等······

    最后

      我们在调试样式的时候,最好给对象加个边框,这样会比较方便我们调试外边距,内填充,以及整个的布局。

    javascript方法

      在html中我最喜欢的就是js了,原因很简单,就是它的实现需要你运用你的逻辑思维,往往一个动作一个功能的实现都会让你绞尽脑汁才会想出来。

      当然,js方法的逻辑思维还是有方法的,我一般使用的是逆向思维思考

      1) 一般我书写js的思路首先是先了解这个功能完成后会得到什么结果?

      2) 通过这个结果去考虑如何才能得到这个结果(这就是要思考有哪些方法可以实现这个方法),在这里我给实现这个结果的动作称为方法1,

      3)然后思考要如何才能实现方法1,实现方法1的动作称为方法2,

      ·················

      n)中间省略了很多,因为这是一个逆向思维的方法,知道了要实现的功能然后一级一级往上推,直到最后,这一功能的方法就被你推出来了,当然前提是要对js方法比较熟悉,因为如果你都不熟悉,那你怎么知道有哪些方法可以实现这个动作呢?

    资源推荐

    HTML结构导图(全)推荐

  • 相关阅读:
    C++的XML编程经验――LIBXML2库使用指南
    C/C++:sizeof('a')的值为什么不一样?
    Linux core dump file详解
    非阻塞socket的连接
    Java环境设置、HelloWorld例子、Ant环境及运行
    linux下杀死进程命令
    IP协议详解
    内置函数(上)
    异常处理
    递归函数与二分法
  • 原文地址:https://www.cnblogs.com/dapenson/p/12822564.html
Copyright © 2020-2023  润新知