无序列表
什么是列表标签
列表标签的作用
给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体
HTML 中列表标签的分类
- 无序列表（最多）：unordered list
- 有序列表（最少）：ordered list
- 定义列表（其次）：definition list
无序列表的作用
给一堆数据添加列表语义，并且这一堆数据中所有的数据都没有先后之分
- 什么叫有先后之分
例如排行榜 - 什么叫没有先后之分
例如中国有哪些城市
无序列表的格式
<ul>
<li>需要显示的条目内容
</li>
</ul>
li 其实是英文里 list item 的缩写
list 是列表
item 是条目
结合起来就是列表条目
注意点
- 一定要记住 ul 标签是用来给一堆数据添加列表语义的，而不是给他们添加小圆点的
- ul 标签和 li 标签是一个整体一个组合，所以一般情况下 ul 标签和 li 标签都是一起出现的，不会单个出现，也就是说不会单独使用一个 ul 标签或者单独使用一个 li 标签，都是结合一起使用
- 由于 ul 标签和 li 标签是一个组合，所以 ul 标签中不推荐包含其他标签，也就是说以后你在 ul 标签中只会看到 li 标签
无序列表应用场景
新闻列表
商品列表
导航条
<h2>中国的城市有哪些</h2>
<ul>
<li>广州</li>
<li>北京</li>
<li>上海</li>
<li>武汉</li>
</ul>
**
强调
虽然通过标签属性也能修改样式，但是在企业开发中千万不要这么干
**
- 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 标签中还可以继续放其他标签
有序列表
什么是有序列表
有序列表的作用
给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后之分
有序列表的格式
<ol>
<li></li>
</ol>
其它用法和 ul 都差不多，也即使应用场景/注意点和 ul 差不多
定义列表
定义列表的作用
- 给一堆数据添加列表语义
- 先通过 dt 标签定义列表中的所有标题，然后再通过 dd 标签给每个标题添加描述信息
定义列表的格式
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
其实 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 标签中继续添加其它的标签
<dl>
<dt>北京</dt>
<dd>中国首都</dd>
<dt>上海</dt>
<dd>富人集中地</dd>
</dl>
表格标签的基本使用
其实在过去表格标签用的非常非常的多，绝大多数的网站都是使用表格标签来制作的，也就是说表格标签是一个时代的代表
什么是表格标签
表格标签的作用
用来给一堆数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式
表格标签格式
<table>
<tr>
<td>需要显示的内容
</td>
</tr>
</table>
- 其实表格标签中的 table 代表整个表格，也就是一堆数据，table 标签就是一个表格。其实表格标签中的 tr 标签代表整表格中的一行数据，也就是说一对 tr 标签就是表格中的一行
- 其实表格标签中的 td 标签嗲表表格中一行中的一个单元格，也就是会所一对 td 标签就是一行中的一个单元格
注意点
- 表格标签有一个边框属性，这个属性决定了边框的宽度，默认情况下这个属性的值是0，所以看不到边框
<table border="1">
-
表格标签和列表标签一样，它是一个组合标签，所以 table/tr/td 要么一起出现，要么一起不出现，不会单个出现
-
table 标签的几个属性
-
cellspacing 外边距
-
cellpadding 内边距
-
align 对齐方式
-
width 表格宽度
-
height 表格高度
-
tr 的几个属性
-
align 水平对齐
-
valign 垂直对齐
<table border="1" width="500" height="250" align="center" cellspacing="0"
cellpadding="0">
<tr valign="top">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td valign="bottom">4</td>
<td align="right">5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
网友评论