HTML 5 基础知识（2）

一 .列表

1.无序列表

语法

<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>

运行后：

• 列表项1
• 列表项2
• 列表项3
• ...

注意：< li >与< /li >之间相当于一个容器，因此可以嵌套其他标签。但是< ul >与< /ul >之间只能嵌套< li >标签。

2.有序列表

语法

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>

运行后：

1. 列表项1
2. 列表项2
3. 列表项3
4. ...

注意：有序列表有顺序 列表项使用数字来标记

3.定义列表

语法：

<dl>
<dt>名词1</dt>
<dd>名词1的解释-第1项</dd>
<dd>名词1的解释-第2项</dd>
...
<dt>名词2</dt>
<dd>名词2的解释-第1项</dd>
<dd>名词2的解释-第2项</dd>
</dl>

运行后：

名词1

名词1的解释-第1项

名词1的解释-第2项

... 名词2

名词2的解释-第1项

名词2的解释-第2项

...

注意：定义列表没有顺序 默认没有标记

二.表格

1.语法

<table border=1>
   <tr>
     <td>一行一列</td>
     <td>一行二列</td>
   </tr>
   <tr>
     <td>二行一列</td>
     <td>二行二列</td>
</tr>
</table>

一行一列	一行二列
二行一列	二行二列

解释：table定义表格 tr=行 td=列 table的属性 border是为了将表格的轮廓显示出来 用来指定边框的宽度

2.表格的表头

<table border=1>
   <tr>
   <th>标题1</th>
   <th>标题2</th>
   </tr>
   <tr>
     <td>一行一列</td>
     <td>一行二列</td>
   </tr>
   <tr>
     <td>二行一列</td>
     <td>二行二列</td>
</tr>
</table>

标题1	标题2
一行一列	一行二列
二行一列	二行二列

th等于表格的表头 会显示为粗体居中的文本 ## 3.表格的跨行与跨列 ### 1.表格的跨行

<table border=1>
   <tr>
      <td rowspan="所跨的行数">单元格</td>
   </tr>
   </table>

rowspan=跨的行数

<table border=1>
   <tr>
      <td colspan="所跨的列数">单元格</td>
   </tr>
   </table>

colspan=跨的列数

三.HTML5媒体元素

1.< video >标签

语法:

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

video属性

1. width 设置视频的宽度
2. height 设置视频的高度
3. src 要播放视频的URL
4. controls 显示控件 如播放按钮
5. autoplay 视频就绪后马上播放
6. loop 完成播放后再次开始播放
7. muted 视频的音频输出为静音
8. poster 规定视频正在下载时的显示的图像 直到用户单击播放按钮
9. preload 视频在页面加载时进行加载 并预备播放 如果使用"autoplay" 则忽略该属性

video 支持WebM和Ogg的视频格式

2.标签

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

< audio >的属性

1. src 音频的URL
2. controls 显示控件 如播放按钮
3. autoplay 音频就绪后马上播放
4. loop 音频结束后再次开始播放
5. muted 音频输出为音频
6. preload 规定当网页加载时 音频是否默认被加载及如何被加载

四.HTML5 结构标签

1.结构标签:

1.< header >:定义文档的头部区域
2.< nav >:定义导航链接的部分
3.< section >: 定义文档中的节 其包含一组内容及标题
4.< article >:定义独立的部分
5.< aside >:定义页面主区域内容之外的内容
6.< footer >:定义文档的底部区域

五.< iframe >框架

1.语法

 <iframe src="页面地址" width"宽度" height="高度" name="名称"></iframe>

可以在页面任何一个位置嵌入另一个网页

2.< iframe >框架与超链接结合使用

实现页面互相的切换