81_h5笔记5_列表标签 + 表格标签 + 表单标签

一，列表标签

1，无序列表(unordered list)

作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后

使用：

 

        
北京
        
上海
        
广州
        
铁岭

注意点：

1.  ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
2. ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
3. 由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
4. 虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签

2，有序列表(ordered list)

作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分

使用：

 

        
北京
        
上海
        
广州
        
铁岭
    

注意点：

1. ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
2. 其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号

3，定义列表(definition list)

作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述

        dl：definition list，定义列表
        dt：definition title,定义标题
        dd：definition description, 定义描述信息

使用：

    

        
北京
        
国家的首都, 看升国旗的地方
        
上海
        
魔都, 遍地是黄金的地方
    

注意点：

 

1. 由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
2. dd和dt和li标签一样是容器标签, 里面可以添加任意标签
3. 定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

 二，表格标签

作用:以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

使用： 

•        table定义表格
•        tr定义行
•        td定义单元格
•       th标签: 给每一列设置标题, 单元格中的内容会自动加粗，居中
•       caption标签:给整个表格设置标题
•  

表结构：

 

1. thead标签:用来存放当前列的表头, 如果没有加css页面默认将表头中的高度设置变小
2. tbody标签:一般用来存放页面中的主体数据, 如果不写会自动加上
3. tfoot标签:用来存放表格的页脚（脚注或表注), 如果没有加css页面默认将表头中的高度设置变小, 一般不会出现
4. 表格结构的意义主要是用于SEO, 便于搜索引擎指定哪部分的内容是需要抓取的重要内容, 一般情况下搜索引擎会优先抓取tbody中的内容

5. 
       
   表格的标题
       
   
           
   
               
   每一列的标题
           
       
       
   
           
   
               
   数据
           
       
       
   
           
   
               
   数据
           
       
   
   
   

   示例：

 三，表单标签

1，form表单：

作用: 用于收集用户信息, 让用户填写、选择相关信息

    所有的表单内容，都要写在form标签里面

2，input标签：

type属性：

1. text明文：
2. password暗文：
3. radio单选框： 
4. checkbox多选框： 
5. button按钮：
6. image图片按钮：
7. reset重置按钮：
8. submit提交按钮：
9. hidden隐藏域：
10. color取色器：
11. date日期选择器：

value属性：默认值

maxlength属性：最长显示

账号:
密码:

3，label标签：

作用: label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
注意事项:
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定

账号:



 男



篮球

4，数据列表

• 作用: 给输入框绑定待选项

请输入你的车型: 

5，下拉列表

• 作用: select标签和ul、ol、dl一样，都是组标签. 用于创建表单中的待选列表, 可以从选择某一个带选项

    北京
    河北
    河南
    山东
    山西
    湖北
    贵州

6，多行文本框

作用: textarea标签用于在表单中定义多行的文本输入控件

注意：

• cols属性表示columns“列”, 规定文本区内的可见宽度
• rows属性表示rows“行”, 规定文本区内的可见行数

• 可以通过cols和rows来指定输入框的宽度和高度
• 默认情况下输入框是可以手动拉伸的

使用：

 

参考链接：https://www.jianshu.com/p/e4a36feadc64