目录
一、列表
列表分为有序列表、无序列表和自定义列表
1.有序列表
<ol>
<li>范雪雪演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
有序列表特性：
- 有顺序，每个<li>标签独占一行（块元素）
- 默认<li>标签项前面有顺序标记
- 一般用于排序类型的列表，如试卷、问卷选项等
有序列表标签，默认在网页中会以 1. 2. 3.往下排，但在 ol 后边加上 type= “1/a/A/i/I ”，他就会以指定的排序方式往下排（共五种排序方式，我写的/在笔记 中代表的是或者的意思，结束符不算哈），在 ol 后边加上 reversed=“reversed”，则 以倒序排列，在 ol 后边加上 start=“2”，则以第二个往下排，引号里可以只写数字， 写数字几，则从第几个开始往下排。ol 和 li 在实际开发中基本上不用。
2.无序列表（重要）
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
无序列表特性：
- 没有顺序，每个<li>标签独占一行（块元素）
- 默认<li>标签项前面有个实心小圆点
- 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块
无序列表标签，默认前边为小黑点，即属性为 type=“disc”，小方块为 type= “square”，小圆圈为 type=“circle”
ul 和 li 致力于做一些功能，有一些功能特别符合 ul 和 li 的父子结构，比如说有一个 功能，这个功能由许多的功能子项来组成，每一个功能子项的功能和样式基本上都是 相同的，只不过他们的内容有一些差异，很多的功能子项组成了一个大功能，这样的 东西我们就用 ul 和 li 来展示，因为 ul 和 li 更符合他天生的结构。
3.自定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>黄瓜</dd>
<dd>西红柿</dd>
</dl>
定义列表特性：
- 没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
- 默认没有标记
- 一般用于一个标题下有一个或多个列表项的情况（使用较少）
二、表格（主要用于数据显示）
<table border="1" ><!--border="1" 边框为1-->
<tr>
<td colspan="3">学生成绩</td> <!-- colspan="3" 跨3列-->
</tr>
<tr>
<td rowspan="2">张三</td> <!-- rowspan="2" 跨2行-->
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
效果图：
三、媒体元素
视频 video 音频audio
<!--视频-->
<video controls autoplay><!--autoplay自动播放-->
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
你的浏览器不支持video元素
</video>
<!-- 音频-->
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
四、html5的结构元素
|
元素名 |
描 述 |
|
header |
标题头部区域的内容（用于页面或页面中的一块区域） |
|
footer |
标记脚部区域的内容（用于整个页面或页面的一块区域） |
|
section |
Web页面中的一块独立区域 |
|
article |
独立的文章内容 |
|
aside |
相关内容或应用（常用于侧边栏） |
|
nav |
导航类辅助内容 |
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>网易邮箱页面布局</title>
<!--此段代码只是让大家能更好的看到每块元素的位置，后面在CSS中会具体讲解-->
<style>
header,section,footer{
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>
效果图： 
五、本章小结
