HTML标签总结

一、表单标签：表单标签主要用于收集用户输入的数据

  1. form标签：用来创建一个表单

         例:<form aciton="xxx" method="get"></form>  把用户输入的内容提交到某个地方，action表示数据提交到的地方，  method表示提交数据的方式，通常有GET提交， 和POST提交。

  2.input标签：表单元素

 

         input标签有多种形式，通过type就可以指定的形式。例：

           <input type="text" />  普通的文本框，用户名
            <input type="password" />  普通的密码框
            <input type="redio" />  单选框 如果有两个单选框，你要二选一，你需要加上name属性，name属性值需要一样。
            <input type="checkbox" />  复选框 
            <input type="file" />  文件上传
            <input type="submit" />  提交按钮，具备提交的功能
            <input type="button" />  普通按钮，没有提交的功能
            <input type="image" />  图片按钮
            <input type="hidden" />  隐藏区域，看不见，传递数据
        HTML5版本中常见的type:  有兼容性问题，在不同的浏览器下，长的不一样
            <input type="email" />  表示写的数据，需要符合邮箱的格式
            <input type="url" />   表示写的数据，需要符合网站的格式
            <input type="number" />  表示写的数据，必须是数字
            <input type="range" />  不是一个输入框，范围的选择器
            <input type="search" />  输入框后面多一个x  
            <input type="color" />  不是一个输入框，颜色的选择器

  3.select标签：下拉菜单

 

          <select>// 很多的option也是通过for循环渲染出来的

            <optin value="" select="ture">1</optin>  // value是往后端提交的数据，通过是数字或单词

        </select>

4.textarea标签：文本域  

        输入大量的文本，贴吧中的输入框，QQ空间中的输入框...

二、常用标签

1、标题标签：h1~h6

        场景：新闻，博客，文章的标题 / 网站的logo

        基本上任何一个网站都有，标题标签是有利于SEO。

2、图片标签：img

        场景：就向网页插入一张图片。

        属性：

            src: 图片的地址（相对地址，绝对地址）

            alt: 1）当图片路径出错时，显示提示内容 2）有利于SEO

            widht: 设置图片的宽度

            height:设置图片的高度

        一个图片也可以当成一个链接，进行点击。

3、段落标签：p

        场景：语文中的段落， 使用它进行分隔内容

4、超链接标签：a

     场景：形成一个链接  站外链接  站内链接   锚点链接

        ./  ../  ./表示当前目录    ../表示上一级目录

        站外链接  <a href="http://www.baidu.com">百度一下</a>

        站内链接  <a href="./about.html">关于我们</a>

        锚点连接：先打锚点   连接到锚点

                 <a name="xxx"></a>     <a href="#xxx">连接到某个锚点</a>

                 特殊的锚点：top   <a href="#top">返回顶部</a>

                    top可以不写   <a href="#">返回顶部</a>

        重要的属性：

            href: 表示一个连接的地址  href="http://www.baidu.com"

            target: _blank 表示以一个新的选项卡打开链接

                    _self  表示在当前的选项卡中打开链接

            name: 用于设置锚点

            title: 设置提示内容，鼠标放上去显示提示内容。

        注意：

            A，如果是站外链接，需要加上http://   https://

    DIV和SPAN：

        DIV肯定是核心，一个网站中使用最多的标签就是DIV。

三、列表标签

1、分类：

        无序列表：用的相当多，用来列表或导航，基本上任何一个网站都有列表

        有序列表：使用较少，只有在强调语义化时，才会使用有序列表

        自定义列表：对一个事件，时间，术语，名词解释时。

2、各类列表用法

    无序列表：

        ul+li    默认情况下，每一个li前面有一个小黑点，在CSS中通常都会直接去掉

    有序列表：

        ol+li   默认情况下，会有一个标签，在CSS中也会去掉，通过自己设置标识

    自定义列表：

        dl+dt+dd

    强调：新闻列表，电影列表，导航.....

四、表格标签

      场景：带有表格的网站，或者是后台管理系统。

     table：

        thead:

            tr:

                th:

        tbody:

            tr:

                td:

    属性：  

        border, widht, height, aligin, cellspcing, cellpadding, rowspan, colspan...