学习html5 0基础速学2

列表、表格与媒体元素

1.列表

---

1.1列表的定义

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以

便浏览者能更快捷地获得相应的信息

1.2 列表的分类

• 无序列表
• 有序列表
• 定义列表

1.3 无序列表

<ul>  # 声明无序列表
    <li>范冰冰演藏族女孩</li>
    <li>撞死两个人后自拍</li>
    <li>诗隆甜蜜出游</li>
    <li>一线城市楼市退烧</li>
  </ul>

1.4 无序列表的特性

1. 没有顺序，每个

2. 标签独占一行（块元素）

3. 默认

4. 标签项前面有个实心小圆点

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

1.5 有序列表

<ol>  #声明有序列表
    <li>范冰冰演藏族女孩</li>
    <li>撞死两个人后自拍</li>
    <li>诗隆甜蜜出游</li>
    <li>一线城市楼市退烧</li>
  </ol>

1.6 有序列表的特性

1. 有顺序，每个

2. 标签独占一行（块元素）

   扫描二维码关注公众号，回复： 11539659 查看本文章

3. 默认

4. 标签项前面有顺序标记

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

1.7 定义列表

<dl>   # 声明定义列表
    <dt>水果</dt>  # 列表项
    <dd>苹果</dd>
    <dd>桃子</dd>  # 列表项的内容
    <dd>李子</dd>
  </dl>

1.8 定义列表的特性

1. 没有顺序，每个 标签、 标签独占一行（块元素）

2. 默认没有标记

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

1.9 列表的对比

2.表格

---

2.1表格的组成

1. 行
2. 列
3. 单元格

2.2语法

<table border="1"> #border边框线
      <tr>  #行
        <td>第1个单元格的内容</td>  #单元格
        <td>第2个单元格的内容</td>
        .....
      </tr>
      <tr>
        <td>第1个单元格的内容</td>
        <td>第2个单元格的内容</td>
        ....
      </tr>
    </table>

2.3跨行

rowspan 属性

<table border="1">
      <tr>
        <td rowspan="2">单元格1</td> #跨2行
        <td>单元格2</td>
        <td>单元格2</td>
      </tr>
      <tr>
        <td>单元格4</td>
        <td>单元格2</td>
      </tr>
      <tr>
        <td>单元格5</td>
        <td>单元格6</td>
        <td>单元格2</td>
      </tr>
      <tr>
        <td>单元格5</td>
        <td>单元格6</td>
        <td>单元格2</td>
      </tr>
    </table>

2.4跨列

colspan 属性

<table border="1">
      <tr>
        <td colspan="2">单元格2</td> # 跨2列
      </tr>
    </table>

3.视屏与音频

---

3.1视屏

video 标签

<!-- 视屏播放 -->
    <video src="视屏地址" controls></video>

    controls # 提供播放、暂停音量的控件
    loop # 实现视频的循环播放
    autoplay # 自动播放，有些浏览器不兼容。

3.2音频

audio 标签

<!-- 音频播放 -->
    <audio src="music/music.mp3" controls></audio>
    
    controls # 提供播放、暂停音量的控件

4.内联框架

---

<a href="http://www.baidu.com.cn" target="a">百度网址</a>
    <iframe src="" frameborder="1" name="a" width="400px" height="500px"></iframe>
    # 注意：name属性的值和target的值要一样。

VeTrvs-1596598828934)]

<a href="http://www.baidu.com.cn" target="a">百度网址</a>
    <iframe src="" frameborder="1" name="a" width="400px" height="500px"></iframe>
    # 注意：name属性的值和target的值要一样。