03-功能元素

1.功能元素

1.1列表标签

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

HTML中列表标签的分类

​ 无序列表(最多)(unordered list)
​ 有序列表(最少)(ordered list)
​ 定义列表(其次)(definition list)

1.1.1 无序列表

有先后之分：排行榜

无先后之分：新闻列表 商品列表

无序列表格式：

<ul>
  <li>需要显示的条目内容</li>
</ul>

无序列表样式：

<ul type="value"></ul>
disc    默认值 实心圆
circle  空心圆
square  实心方块
虽然通过标签属性也能修改样式, 但是在企业开发中千万不要这么干 

注意：

1.一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的

​ 2.ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
​ 3.由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签

应用场景：

新闻列表 商品列表 导航条

1.1.2有序列表

有序列表格式：

<ol>
    <li></li>
</ol>

有序列表样式：

<ol type="A"></ol>
1   默认值。数字有序列表。（1、2、3、4）
a   按字母顺序排列的有序列表，小写。（a、b、c、d）
A   按字母顺序排列的有序列表，大写。（A、B、C、D）
i   罗马字母，小写。（i, ii, iii, iv）
I   罗马字母，大写。（I, II, III, IV）

应用场景：

奥运会奖牌榜

1.1.3定义列表

定义列表的格式：

<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

应用场景：

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

注意点：

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

1.2表格标签

作用：用来给一堆数据添加表格语义

表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

表格标签格式：

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>身高</td>
  </tr>