html5 学习笔记20170210 pm

无序列表

什么是列表标签

列表标签的作用
给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体

HTML 中列表标签的分类

无序列表（最多）：unordered list
有序列表（最少）：ordered list
定义列表（其次）：definition list

无序列表的作用

给一堆数据添加列表语义，并且这一堆数据中所有的数据都没有先后之分

什么叫有先后之分
例如排行榜
什么叫没有先后之分
例如中国有哪些城市

无序列表的格式


  需要显示的条目内容

li 其实是英文里 list item 的缩写
list 是列表
item 是条目
结合起来就是列表条目

注意点

一定要记住 ul 标签是用来给一堆数据添加列表语义的，而不是给他们添加小圆点的
ul 标签和 li 标签是一个整体一个组合，所以一般情况下 ul 标签和 li 标签都是一起出现的，不会单个出现，也就是说不会单独使用一个 ul 标签或者单独使用一个 li 标签，都是结合一起使用
由于 ul 标签和 li 标签是一个组合，所以 ul 标签中不推荐包含其他标签，也就是说以后你在 ul 标签中只会看到 li 标签

无序列表应用场景

新闻列表
商品列表
导航条

中国的城市有哪些

      广州
      北京
      上海
      武汉

**
强调
虽然通过标签属性也能修改样式，但是在企业开发中千万不要这么干
**

ul 中最好只放 li 标签，但是在企业开发中，li 标签中的内容可能会很复杂，所以我们可以继续在 li 标签中添加其他的标签来丰富我们的界面
无序列表中的 li 标签中除了可以添加其它标签来丰富我们的界面以外，还可以添加 ul 标签来丰富我们的界面，也就是说 ul 中有 li，li 中又可以有 ul
在 webstorm 中如何快速编写一个 ul 格式

ul>li

含义：生成一对 ul 标签，然后在这对 ul 标签中再生成一对 li 标签

ul>li*3

含义：生成一对 ul 标签，然后在这对 ul 标签中再生成3对 li 标签

总结

一定要记住 ul 标签中最好只放 li 标签
但是 li 标签中还可以继续放其他标签

有序列表

什么是有序列表
有序列表的作用
给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后之分
有序列表的格式

其它用法和 ul 都差不多，也即使应用场景/注意点和 ul 差不多

定义列表

定义列表的作用

给一堆数据添加列表语义
先通过 dt 标签定义列表中的所有标题，然后再通过 dd 标签给每个标题添加描述信息

定义列表的格式

其实 dt 和 dd 都是英文的缩写，dt是英文 definition title的缩写，dd 是 definition discription 的缩写， dt 的含义就是用来定义列表中的标题，dd 的含义就是用来定义标题对应的描述

定义列表的应用场景

做网站尾部的相关信息
做图文混排

定义列表的注意点

和 ul/ol 一样， dl 和 dt/dd 是一个整体，所以他们一般情况下不会单独出现，都是一起出现
和 ul/ol一样，由于 dl 和 dt/dd 是一个组合标签，所以 dl 中建议只放 dt 和 dd 标签
一个 dt 可以没有对应的 dd ，也可以又多个对应的 dd ，但是无论有或者没有 dd 都不推荐使用，推荐一个 dt 对应一个 dd
和 li 标签一样，当需要丰富界面时，我们可以在 dt 和 dd 标签中继续添加其它的标签


        北京
        中国首都
        上海
        富人集中地

表格标签的基本使用

其实在过去表格标签用的非常非常的多，绝大多数的网站都是使用表格标签来制作的，也就是说表格标签是一个时代的代表

什么是表格标签
表格标签的作用
用来给一堆数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式

表格标签格式


          
                需要显示的内容

其实表格标签中的 table 代表整个表格，也就是一堆数据，table 标签就是一个表格。其实表格标签中的 tr 标签代表整表格中的一行数据，也就是说一对 tr 标签就是表格中的一行
其实表格标签中的 td 标签嗲表表格中一行中的一个单元格，也就是会所一对 td 标签就是一行中的一个单元格