HTML中的列表、表格、媒体元素和内联框架

HTML中的列表、表格、媒体元素和内联框架

本章目标

• 会使用有序列表、无序列表和定义列表实现数据展示（重点）
• 会使用表格实现数据
• 会使用媒体元素在网页中播放视频（重点）
• 会使用html5结构元素进行网页布局（重点）

一、列表

1.无序列表

ul:unordered list

快捷键：ul>li*5>a ul>li>img+p

语法

<ul>
    <li>...<li>
    <li>...<li>
    <li>...<li>
</ul>    

注意：ul里面第一层只能是li，如果有其他标签应该放在li里面
无序列表特性：

• 无序列表是没有顺序的，每一个

• 标签都独占一行（块元素）

• 默认

• 标签前面是一个实心圆点

• 一般用于无序类型的列表如：导航栏、侧边栏新闻、有规律的图文组合的模块等

案例

2.有序列表

ol:ordered list

语法

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

案例

有序列表特性：

• 有顺序，每一个

• 标签独占一行（块元素）

• 默认

• 标签前面有顺序标记

• 一般用于排序类型的列表，如：试卷、问卷选项等

3.定义列表

dl:definition list

语法

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

案例

定义列表特性：

• 没有顺序，每个

  标签 标签都独占一行（块元素）

• 默认没有标记

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

二、表格

1.为什么要用表格

• 简单通用
• 结构稳定

2.语法

<table>
    <tr>
        <td>单元格中的内容</td>
        <td>单元格中的内容</td>
        ...
    </tr>
    <tr>
        <td>单元格中的内容</td>
        <td>单元格中的内容</td>
        ...
    </tr>
    ...
</table>

table：表格标签

tr：行标签

td：单元格标签 ps：td可以改为th加粗

3.table的基本语法结构

4.表格中的跨行和跨列

4.1表格跨列

<!-- 跨列的语法 -->
<table>
    <tr>
        <td colspan="所跨的列数"></td>
    </tr>
</table>   

col:column 列

span：距离

4.2表格跨行

<!-- 跨行的语法 -->
<table>
    <tr>
        <td rowspan="所跨的行数"></td>
    </tr>
</table>   

row: 行

span：距离

三、媒体元素

网页中播放的音频和视频

1.视频

语法

<video src="视频路径" controls></video>

推荐的写法

<video controls>
    <source src="" type=""/>
    <source src="" type=""/>
    <source src="" type=""/>
</video>

video支持的视频格式

	Edge	FireFox	Opera	Safari	Chrom
Ogg	不支持	3.5+	10.5+	5.0+	支持
MPEG4(mp4)	9.0+	不支持	不支持	5.0+	3.0+
WebM	不支持	10.6+	10.6+	6.0	支持

2.音频

语法

<audio src="音频路径" contorls></audio>

推荐写法

<!-- 推荐写法 -->
<audio controls>
    <source src="video/xxxx.ogg" type="audio/ogg" />
    <source src="video/qt.mp3" type="audio/mpeg"/>
</audio>

支持的格式

ogg、mp3、wav

四、页面结构

1.页面结构分析

2.HTML5中的结构元素

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11网易邮箱页面布局</title>
</head>
<body>
    <header>
        <h2>网页头部</h2>
    </header>
    <section>
        <h2>网页主题部分</h2>
    </section>
    <footer>
        <h2>网页底部</h2>
    </footer>
</body>
</html>

3.内联框架

3.1语法

<iframe src="引用页面地址" name="框架标识名"></iframe>

3.2案例

<iframe src="https://fanyi.baidu.com/" name="fanyi" width="1000" height="600"></iframe>

3.3target属性

五、总结