HTML第二章总结
1.列表
无序列表
语法:
< ul>
< li>列表项< li>
< li>列表项< li>
< li>列表项< li>
......
< ul>
有顺列表
语法:< ol>
< li>列表项< li>
< li>列表项< li>
< li>列表项< li>
......
< ol>
定义列表
语法:
< dl>
<dt>名词1</dt>
<dd>名词1的解释-第1项</dd>
<dd>名词1的解释-第2项</dd>
......
<dt>名词2</dt>
<dd>名词2的解释-第1项</dd>
<dd>名词2的解释-第2项</dd>
......
< dl>
2.表格
语法:
<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2.cell 2</td>
<tr/>
</table>
2.1表格的表头
一个表格都会有表头,也是表格标题,它可以< th>标签进行定义。在多数浏览器中都会把表头显示为粗体居中的文本。
2.2表格的跨行与跨列
1.跨行是指单元格在垂直方向向上的合并,使用< td>标签的rowspan属性实现单元格的跨合操作。
语法:
<table border=“1”>
<tr>
<td rowspan=“所跨的换数”> 单元格</td>
</td>
</table>
2.跨列是指单元格的横向合并,使用< td>标签的colspan属性实现单元格的跨列操作。
语法:
<table border=“1”>
<tr>
<td colspan=“所跨的列数”>单元格</td>
</td>
</table>
2.3HTML5媒体元素
随着时代的发展,大多数人是使用计算机,平板计算机,手机等设备打开网页观看视频和听音乐
2.3.1< video>标签
HTML5规定了一种通过< video>标签播放视频的方法
语法:
<video src=“视频路径” controls=“controls”></video>
< video>标签的通常属性
属性 | 值 | 描述 |
---|---|---|
width | 像素 | 设置视频播放器的宽度 |
height | 像素 | 设置视频播放器的高度 |
src | URL | 要播放的视频的URL |
controls | controls | 如果出现属性,则向用户显示控件,如播放按钮 |
autoplay | autoplay | 如果出现属性,则视频在就绪后马上播放 |
ioop | loop | 如果出现该属性,则当媒介文件完成后播放后再次开始播放 |
muted | muted | 如果出现该属性,则视频的音频输出为金庸 |
poster | URL | 规定视频正在下载时显示的图像,直到用户单击播放按钮 |
preload | auto,metadata,none | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用“autoplay”,则忽然该属性。 |
2.3.2< audio>标签
在HTML5中,使用标签播放音频文件,其支持的格式包括MP3,Ogg,WAV这3种格式
语法:
< audip src="音频路径” controls="controls"></audio>
< audio>标签的常用属性
属性 | 值 | 描述 |
---|---|---|
src | URL | 音频文件的URL |
controls | contrpls | 如果出现该属性,则向用户显示控件,如播放按钮 |
autoplay | autoplay | 如果出现该属性,则音频在就绪后马上播放 |
loop | loop | 如果出现该属性,则每当音频结束时重新开始播放 |
muted | muted | 如果出现该属性,则音频输出为静音 |
preload | auto,metadata,none | 规定当加载时,音频是否默认被加载及任何被加载 |
2.4HTML5结构标签
页面结构分析
1.< header>:定义文档的头部区域
2.< nav>: 定义导航链接的部分
3. < section>定义单独的节,其包括一组内容及其标题。
4.< article>:定义页面主区域内容之外的内容。
5.< aside>;定义页面区域内容之外的内容
6.< footer>:定义文档的底部区域
2.5< ifame>框架
< ifame>框架用于在页面中任意的位置嵌入另一个网页,如在自己制作的页面中引入淘宝商品等等。
语法:
<iframe src="页面地址” width=“宽度” height=“高度” name=“名称”></iframe>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="https://www.taobao.com/"width="1000" height="500"></iframe>>
</body>
</html>
效果如下: