列表 表格与媒体元素
列表、表格与媒体元素
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
一、列表的分类
无序列表
有序列表
定义列表
单词记忆：
ul: unordered lists 无序列表
ol: ordered lists 有序列表
li: list item 列表项
definition list
definition title
definition description
li的属性
type：有三个值，分别为disc、 square和circle
无序列表：
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
无序列表的特性：
1.没有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有个实心小圆点
3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
有序列表：
<ol>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
有序列表的特性：
1.有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有顺序标记
3.一般用于排序类型的列表，如试卷、问卷选项等
定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
定义列表的特性:
1.没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
2.默认没有标记
3.一般用于一个标题下有一个或多个列表项的情况
| 类型 |
说明 |
项目符号 |
| 无序列表
|
以<ul>标签来实现 以<li>标签表示列表项
|
无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容
|
| 有序列表
|
以<ol>标签来实现 以<li>标签表示列表项
|
有序列表ol-li一般用于显示带有顺序编号的特定场合
|
| 定义类表
|
以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容
|
定义列表一般适用于带有标题和标题解释性内容的场合
|
二、表格
表格作用：1.简单通明 2.结构稳定
<table></table>:
属性：
border:表格边框（html5中已经弃用）
width:表格的宽度
align:表格的对齐方式（<tr align="center">单元格里面的内容居中对齐<tr>）
bgcolor:背景颜色
<tr></tr>: 代表行
<td></td>：代表单元格
属性：
colspan:列合并 column
rowspan:行合并
跨列：指单元格的横向合并；
跨行：指单元格在垂直方向上的合并；
<th></th>：相等于<td>, 只是内置样式加粗居中
<caption></caption>：表格的标题，即表头
<tr>是定义表格中的一行
table row
<td>是定义一个表格
table data cell
<th>是定义单元格中的一个单元格
table head
<th>和<td>差不多，只不过<th>单元格中的字体是居中加粗的
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内
<tr>...</tr> 定义一行标签，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格
<td>...</td> 定义单元格标签，一组<td>标签将将建立一个单元格，<td>标签必须放在<tr>标签内
表格的作用：
(1)简单的实现一个表格样式
(2)进行页面布局
示例：
<table>
<tr><!--行-->
<th>表格标头</th>
<td>普通单元格</td>
</tr>
</table>