本章目标
什么是列表
列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息
列表的分类：无序列表，有序列表，自定义列表
无序列表
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
无序列表的特性
无序列表的特性
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
有序列表
<ol>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
有序列表的特性
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等
自定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
自定义列表的特性
没有顺序，每个<dt> 标签 <dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况
列表对比
| 类型 | 说明 | 项目符号 |
|---|---|---|
| 无序列表 | 以<ul>标签来实现以<li>标签表示列表项 | 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容 |
| 有序列表 | 以<ol>标签来实现以<li>标签表示列表项 | 有序列表ol-li一般用于显示带有顺序编号的特定场合 |
| 自定义列表 | 以<dl>标签来实现以<dt>标签定义列表项以<dd>标签定义内容 | 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容 |
表格
为什么使用表格
简单通用
结构稳定
基本结构：单元格，行，列
表格的基本语法
<!-- table 表格标签，配置表格使用、border="1" 添加表格框架 -->
<table border="1">
<!-- thead 设置表头 -->
<thead>
<!-- tr 指定表行标签-->
<tr>
<!-- th 设置表头内容，默认加粗-->
<th>
1行1列的标题
</th>
<th>
1行2列的标题
</th>
<th>
1行3列的标题
</th>
</tr>
</thead>
<!-- tbody 设置表内容 -->
<tbody>
<!-- tr 指定报表行标签-->
<tr>
<!-- td 指定表列标签-->
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
<td>1行3列的单元格</td>
</tr>
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
<td>2行3列的单元格</td>
</tr>
<tr>
<td>3行1列的单元格</td>
<td>3行2列的单元格</td>
<td>3行3列的单元格</td>
</tr>
</tbody>
</table>
表格的跨行 rowspan
<table border="1">
<tr>
<td rowspan="2">张三</td>
<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>
表格的跨行和跨列
<table border="1" >
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<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>
HTML5的媒体元素
视频元素video
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
你的浏览器不支持video元素
</video>
音频元素audio
<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>
内联框架
<section>
<iframe name="mainFrame" width="800px" height="650px" src="连接" />
</section>
扫一扫
940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
