HTML5学习（二）

一、列表

1、无序列表

语法：

<ul>
	<li>内容XX</li>
	<li>内容YY</li>
</ul>

展示效果：

• 内容XX
• 内容YY

2、有序列表

语法：

<ol>
	<li>内容XX</li>
	<li>内容YY</li>
</ol>

展示效果：

1. 内容XX
2. 内容YY

3、定义列表

一般用于一个标题下有一个或多个列表项的情况
语法：

<dl>
	<dt>标题1</dt>
		<dd>标题1的内容XX</dd>
		<dd>标题1的内容YY</dd>
	<dt>标题2</dt>
		<dd>标题2的内容AA</dd>
		<dd>标题2的内容BB</dd>
</dl>

展示效果：

标题1

标题1的内容XX

标题1的内容YY

标题2

标题2的内容AA

标题2的内容BB

类型	说明	项目符号
无序列表	以<ul>标签来实现 以<li>标签表示列表项	无序列表中的每项都是平级的，没有级别之分， 并且列表中的内容一般都是相对简单的标题性质的网页内容
有序列表	以<ol>标签来实现 以<li>标签表示列表项	有序列表ol-li一般用于显示带有顺序编号的特定场合
定义类表	以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容	定义列表一般适用于带有标题和标题解释性内容的场合

备注：
1、列表元素都是块元素，都是独占一行
2、定义元素中，dt与dd是同级标签，不是父子标签，以下写法是错误的

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

二、表格

1、语法：

<table>
	<tr>
		<td>第一行第一列</td><td>第一行第二列</td>...<td>第一行第M列</td>
	<tr/>
	...
	<tr>
		<td>第N行第一列</td><td>第N行第二列</td>...<td>第N行第M列</td>
	<tr/>
</table>

2、示例：

<table>
	<tr>
		<td>第一行第一列</td><td>第一行第二列</td><td>第一行第M列</td>
	<tr/>
	<tr>
		<td>第N行第一列</td><td>第N行第二列</td><td>第N行第M列</td>
	<tr/>
</table>

展示效果：

第一行第一列	第一行第二列	第一行第M列
第N行第一列	第N行第二列	第N行第M列

跨行跨列：在<td>标签中添加属性

跨行：rowspan=“行数”
跨列：colspan=“列数”

三、媒体元素

1、视频：

<video src="视频路径" controls/>
<!--也可以使用-->
<video controls>
	<source src="视频路径"/>
</video>

2、音频：

<audio src="音频路径" controls/>
<!--也可以使用-->
<audio controls>
	<source src="音频路径"/>
</audio>

四、网页结构：

元素名	描 述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section Web	页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容