第二章-列表，表格与媒体元素

· 前言介绍：

列表在网页制作中占据十分重要的地位，很多精美，漂亮的网页中都使用的了列表。

对于排列整齐有行有列的布局，表格是一种不可或缺的数据展示工具，使用表格可以灵活的实现数据的展示。

如今的HTML5，如果你想在网页中插入喜欢的音乐，或者播放视频，只要使用相应的媒体元素将变得很简单。

· 用到的单词：

Table 表格

Video 视频

Audio 音频

Section 部分

Article 文章

Aside 一边

Iframe 内联框架

· 列表：

列表是信息资源的一种展示形式。

它可以是信息结构化和条理化，并以列表的形式展示出来，让浏览者能够更快捷的获得相应的信息。

HTML5的列表可以分为：无序列表，有序列表，定义列表。

无序列表

由 <ul></ul>和 <li></li>标签组成
使用 <ul></ul> 作为无序列表的声明，
使用 <li></li> 作为每个列表项的起始。
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
特点是没有顺序，每个<li></li>都是块元素，独占一行。
默认前面标签项都有一个默认的黑色小圆点。

有序列表
由 <ol></ol>和 <li></li>标签组成，
使用 <ol></ol> 作为有序列表的声明
使用 <li></li> 作为每个列表项的起始
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
特点是有顺序，每个<li></li>都是块元素，独占一行。
默认前面标签项都有一个顺序标记。

定义列表
定义列表是一个特殊的列表形式，它是标题及列表项的结合
使用 <dl></dl> 作为列表的开始
使用 <dt></dt> 作为每个列表项的起始
使用 <dd></dd> 作为每个列表项的定义。
<dl>
    <dt>标题一</dt>
    <dd>列表项一</dd>
    <dd>列表项二</dd>
    <dt>标题二</dt>
    <dd>列表项一</dd>
    <dd>列表项二</dd>
</dl>
特点是没有顺序，每个 <dt></dt>,<dd></dd> 都是块元素，独占一行。
默认没有标记

l 表格

表格是块状元素，用于显示表格数据。

比如常见的考试成绩单，选修课课表，工资账单等。

表格的行列的结构简单，同常每行的列数一致和高度一致且水平对齐。

以下就是两行两列的结构

<table>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
</table>

· 视频元素

Web上的视频播放没有一个固定的标准，大多数都是通过 Flash 这样的插件来显示，不同的浏览器拥有不同的插件。

HTML5 中的 video元素是现在播放视频的一种标准方法。

其中的 src 属性用于指定要播放的视频文件的路径，controls属性用于提供播放和暂停，以及音量控件

· 音频元素

Web上的音频播放也没有一个固定的标准，大家在访问各种网站时会遇到各种的插件

而 HTML5 到来后，终于使音频播放领域实现了统一的标准，让使用者告别了插件的繁琐

其中的各个属性和视频元素是一样的。

并且都可以使用autoplay属性实现自动播放

使用 loop属性实现循环播放

· HTML5结构元素

前面已经讲过HTML的作用就是为网页搭建结构框架的。

像 <p></p>,<a href=""></a>,<ul></ul>,<li></li>,等等这些元素

就行结构中的“砖“，”瓦“一样，但是一个漂亮的网页并不是把这些“砖“，”瓦“随便堆砌上去的

它更需要规矩的布局，和排列。

· HTML5的结构元素包括

Header 标题头部的区域，

Footer 标记脚步的区域

Section 页面中的一块独立区域

Article 独立的文章内容

Aside 相关的内容或应用

Nav 导航类辅助内容

· Iframe框架

Iframe框架的主要作用是使页面中的部分内容用框架实现，一般用于在页面中引用站外的页面内容，使用比较方便，灵活。

· <div>
本章总结；

    1.无序列表由 <ul> </ul> 和 <li></li> 组成
    无序列表没有顺序之分，默认前面有一个黑圆点。

    2.有无序列表由 <ol> </ol> 和 <li></li> 组成
    有序列表有顺序之分，默认前面有一个顺序编写。

    3.定义列表由 <dl></dl>,<dt></dt>,<dd></dd>组成
    <dt></dt>表示标题，<dd></dd>表示解释性内容。

    4.表格使用 <table></table> , <tr></tr>,<td></td>创建表格

    5.网页中的媒体元素包括
    <video src=""></video>视频元素
    <audio src=""></audio>音频元素

    6.语义化结构元素:
    Header        标题头部的区域，
    Footer    标记脚步的区域
    Section       页面中的一块独立区域
    Article       独立的文章内容
    Aside     相关的内容或应用
    Nav          导航类辅助内容

    7.<iframe src="" frameborder="0"></iframe>经常用的内联框架
</div>

第二章-列表，表格与媒体元素

猜你喜欢