整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

html5 表格代码写课程表

lt;!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>使用表格写课程表代码</title>

</head>

<body>

<table

border="1"

width="90%"

cellspacing="0"

cellpadding="5"

align="center"

>

<!-- caption标签是用于为表格提供简短的标题，如标题或简短描述。

caption标签是插在开始标记之后，应该始终是表的第一个子项。

然后我们就可以使用caption-side属性更改其在表中的位置。 -->

<!-- caption-side属性值说明： -->

<!-- top：可以将标题定位在表格上方。 -->

<!-- bottom：可以将标题定位在表格下方。 -->

<!-- inherit ：从父级的标题位置继承标题位置。 -->

<caption>

<h3>二年级6班课程表</h3>

</caption>

<!-- 表头 -->

<thead>

<tr bgcolor="lightcyan">

<!-- th:是添加了居中和加粗样式的td,是th的加版版 -->

<th>时 间</th>

<th>课 时</th>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th>

<th>星期六</th>

<th>星期日</th>

</tr>

</thead>

<!-- 表主体上半部份 -->

<tbody align="center">

<tr>

<th rowspan="4">上午</th>

<th>第一节</th>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<td>星期日</td>

</tr>

<tr>

<!-- <th>时 间</th> -->

<th>第二节</th>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<td>星期日</td>

</tr>

<tr>

<!-- <th>时 间</th> -->

<th>第三节</th>

<td rowspan="2">大课</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td rowspan="2">大课</td>

<td>星期日</td>

</tr>

<tr>

<!-- <th>时 间</th> -->

<th>第四节</th>

<td>星期一</td>

<!-- <td>星期二</td> -->

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<!-- <td>星期六</td> -->

<td>星期日</td>

</tr>

</tbody>

<!-- 表主体 中半部份-->

<tbody align="center">

<tr>

<!-- <th>时 间</th> -->

<th colspan="9">中午午休时间</th>

<!-- <td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<td>星期日</td> -->

</tr>

</tbody>

<!-- 表主体 下面部份-->

<tbody align="center">

<tr>

<th rowspan="3">下午</th>

<th>第一节</th>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<td rowspan="3">放假</td>

</tr>

<tr>

<!-- <th>时 间</th> -->

<th>第二节</th>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<!-- <td>星期日</td> -->

</tr>

<tr>

<!-- <th>时 间</th> -->

<th>第三节</th>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<!-- <td>星期日</td> -->

</tr>

</tbody>

<!-- 表尾 下面部份-->

<tfoot>

<tr>

<th colspan="2">备注</th>

<!-- <th>时 间</th> -->

<th colspan="7">注意打扫卫生</th>

<!-- <td>星期二</td> -->

<!-- <td>星期三</td> -->

<!-- <td>星期四</td> -->

<!-- <td>星期五</td> -->

<!-- <td>星期六</td> -->

<!-- <td>星期日</td> -->

</tr>

</tfoot>

</table>

</body>

</html>

用HTML5制作表格，是特别容易的事情，下面介绍一下制作方法。

1、HTML5表格的主要元素：

HTML5的表格包括table、caption、tr、td、th五个主要元素：

table元素：定义一个表格；

caption元素：定义表格的标题；

tr元素：定义表格的一行，tr是table row的缩写；

td元素：定义表格单元，td是table data的缩写；

th元素：定义表头，th是table head的缩写。

2、制作一个简单的表格

下面这个HTML文档，制定了一个学生常用的课表：

<!DOCTYPE html>
<html>
<head>
<title>table001</title>
<meta charset="utf-8" />
</head>
<body>
<table>
<tr>
<th>节次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第1节课</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>第2节课</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>第3节课</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<td>第4节课</td>
<td>英语</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td>第5节课</td>
<td>数学</td>
<td>生物</td>
<td>信息</td>
<td>数学</td>
<td>化学</td>
</tr>
<tr>
<td>第6节课</td>
<td>体育</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>第7节课</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
</tr>
</table>
</body>
</html>

使用浏览器打开这个文档时，效果如下：

这个表格一点都不好看，因为没有表格线。

3、给<table>元素设置border属性的值，为表格加上表格线。

对HTML文档进行修改，设置<table>元素的border值为1，修改后的HTML文档为：

<!DOCTYPE html>
<html>
<head>
<title>table002</title>
<meta charset="utf-8" />
</head>
<body>
<table border="1">
<tr>
<th>节次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第1节课</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>第2节课</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>第3节课</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<td>第4节课</td>
<td>英语</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td>第5节课</td>
<td>数学</td>
<td>生物</td>
<td>信息</td>
<td>数学</td>
<td>化学</td>
</tr>
<tr>
<td>第6节课</td>
<td>体育</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>第7节课</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
</tr>
</table>
</body>
</html>

使用浏览器打开这个文档，效果如下：

现在的表格好看一些了，但是还有个缺点，就是没有标题。

4、添加<caption>元素，为表格添加标题

这里修改HTML文档，加上“华南师大附中初二（12）班课程表”标题，修改后的HTML文档如下：

<!DOCTYPE html>
<html>
<head>
<title>table003</title>
<meta charset="utf-8" />
</head>
<body>
<table border="1">
<caption>华南师大附中初二（12）班课程表</caption>
<tr>
<th>节次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td>第1节课</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>第2节课</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>第3节课</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<td>第4节课</td>
<td>英语</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td>第5节课</td>
<td>数学</td>
<td>生物</td>
<td>信息</td>
<td>数学</td>
<td>化学</td>
</tr>
<tr>
<td>第6节课</td>
<td>体育</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>第7节课</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
</tr>
</table>
</body>
</html>

使用浏览器打开这个文档，效果如下：

5、现在我们加上“上午、下午”的信息。

为加上“上午、下午”的信息，我们需要增加一列，并使用<td>元素的rowspan属性对行进行合并。修改后的HTML文档如下：

<!DOCTYPE html>
<html>
<head>
<title>table004</title>
<meta charset="utf-8" />
</head>
<body>
<table border="1">
<caption>华南师大附中初二（12）班课程表</caption>
<tr>
<th>上午/下午</th>
<th>节次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第1节课</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>第2节课</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>第3节课</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<td>第4节课</td>
<td>英语</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第5节课</td>
<td>数学</td>
<td>生物</td>
<td>信息</td>
<td>数学</td>
<td>化学</td>
</tr>
<tr>
<td>第6节课</td>
<td>体育</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>第7节课</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
<td>社团活动</td>
</tr>
</table>
</body>
</html>

使用浏览器打开该HTML文件，效果如下：

6、为了让课表更美观，我们将“上午/下午”和节次合并，将“社团活动”合并。

我们通过设置<td>元素的colspan属性，实现这个目标。修改后的HTML文档如下：

<!DOCTYPE html>
<html>
<head>
<title>table005</title>
<meta charset="utf-8" />
</head>
<body>
<table border="1">
<caption>华南师大附中初二（12）班课程表</caption>
<tr>
<th colspan="2">节次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第1节课</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>第2节课</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>第3节课</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<td>第4节课</td>
<td>英语</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第5节课</td>
<td>数学</td>
<td>生物</td>
<td>信息</td>
<td>数学</td>
<td>化学</td>
</tr>
<tr>
<td>第6节课</td>
<td>体育</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>第7节课</td>
<td colspan="5">社团活动</td>
</tr>
</table>
</body>
</html>

使用浏览器打开该文件，效果如下：

7、现在表格内容基本上完整了，就是显得有点小。

修改一下HTML文档，添加一下列宽的信息，修改后的HTML文档如下：

<!DOCTYPE html>
<html>
<head>
<title>table006</title>
<meta charset="utf-8" />
</head>
<body>
<table border="1" style="width:800px;text-align:center">
<caption>华南师大附中初二（12）班课程表</caption>
<tr>
<th colspan="2">节次</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>第1节课</td>
<td>语文</td>
<td>语文</td>
<td>英语</td>
<td>英语</td>
<td>语文</td>
</tr>
<tr>
<td>第2节课</td>
<td>语文</td>
<td>数学</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
</tr>
<tr>
<td>第3节课</td>
<td>英语</td>
<td>数学</td>
<td>物理</td>
<td>化学</td>
<td>物理</td>
</tr>
<tr>
<td>第4节课</td>
<td>英语</td>
<td>政治</td>
<td>地理</td>
<td>物理</td>
<td>政治</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第5节课</td>
<td>数学</td>
<td>生物</td>
<td>信息</td>
<td>数学</td>
<td>化学</td>
</tr>
<tr>
<td>第6节课</td>
<td>体育</td>
<td>化学</td>
<td>语文</td>
<td>语文</td>
<td>美术</td>
</tr>
<tr>
<td>第7节课</td>
<td colspan="5">社团活动</td>
</tr>
</table>
</body>
</html>

使用浏览器打开这个文件，效果如下：

其实，在HTML5中，除了上面五个主要元素，还有三个较常用的的元素：

tbody元素：定义表格主体；

thead元素：定义表格头；

tfoot元素：定义表格脚。

这三个元素主要用于将表格分为表头、表尾、表体三个部分，便于进行编程控制，使用起来非常简单，这里就不介绍了。

.1列表

1.1.1列表及其应用

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

2. 列表的分类及其应用

无序列表，语法：

<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>

有序列表，语法：

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表，语法：

<dl>
    <dt>标题</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
    <dt>标题二</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

无序列表| 无序列表由ul标签和li标签组成，使用ul标签作为无序列表的声明，使用li标签作为每个列表项的起始。无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容

有序列表| 有序列表由ol标签和li标签组成，使用ol标签作为有序列表的声明，使用li标签作为每个列表项的起始，有序列表嵌套同无序列表一样，只能ol标签里面嵌套li标签。有序列表ol-li一般用于显示带有顺序编号的特定场合

定义列表|定义列表是一种很特殊的列表形式，它是标题及列表项的结合。定义列表的语法相对于无序和有序列表不太一样，它使用dl标签作为列表的开始，使用dt标签作为每个列表项的起始，而对每个列表项的定义则使用dd标签来完成。定义列表一般适用于带有标题和标题解释性内容的场合

列表的注意事项：
1.无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的页面内容。有序列表会依据列表项的顺序进行显示。
2.在实际的网页应用中，无序列表比有序列表应用更加广泛，有序列表ol-li一般用于显示带有顺序编号的特定场合。
3.定义列表一般适用于带标题和标题解释性内容的场合。

1.1.2列表练习

示例：有序列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>有序列表的应用</h2>
<p>注意：有序列表列表项标记默认是1,有序的数字，可以使用type属性进行更改列表项标记</p>
<p>可选择的列表项标记有：a，A，i，I，1</p>
<ol type="a">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
<ol type="i">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
<ol type="1">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>
</body>
</html>

示例：无序列表：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>无序列表的应用</h2>
<p>注意：无序列表列表项标记默认是黑色圆点，可以使用type属性进行更改</p>
<p>可选择的列表项标记有：小黑点:disc（默认值）；方块:square；空心圆:circle。</p>
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<ul type="square">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
<ul type="circle">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>
</body>
</html>

示例：定义列表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>定义列表的应用</h2>
<p>一般应用于带有标题和内容，标签dt声明标题，dd声明内容</p>
<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dd>西瓜</dd>
</dl>
</body>
</html>

2.1表格

2.1.1为什么使用表格

1.简单通用
由于表格行列结构简单，以及在生活中使用广泛，因此对它的理解和编写都很方便。
2.结构稳定
表格通常每行的列数一致，同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐这种严格的约束形成了一个不易变形的合资结构，堆叠排列起来结构很稳定。

2.1.2 表格的基本语法

表格的基本结构：

单元格 | 单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格

行 | 一个或多个单元格堆叠成了行

列 | 由于表格单元格的宽度必须一致，因此单元格纵向列表形成了列

表格的语法结构：

<table>
    <tr>
        <!--th表示表头-->
        <th>星期</th>
        <th>科目</th>
    </tr>
    <tr>
        <td>周一</td>
        <td>语文</td>
    </tr>
    <tr>
        <td>周二</td>
        <td>数学</td>
    </tr>
    </table>

创建表格的步骤：
1.创建表格标签table
2.在表格标签table创建行标签tr可以有多行
3.在第一行标签tr里创建单元格标签th可以创建表格标题
4.在行标签tr里创建单元格标签td可以有多个单元格
为了显示表格的轮廓，一般还需要设置table标签的border边框属性，指定边框的宽度,如下：

<table border="1" cellpadding="0" cellspacing="0">
<!--border：表格边框；cellpadding：指定表格各单元格之间的空隙；cellspacing：代表单元格边框到内容之间的距离-->

2.1.3 表格的跨行和跨列

-> 跨列：跨列是指单元格的横向合并

<table>
    <!--col为column的缩写，span为跨度，所以colspan的意思是跨列-->
    <tr>
        <td colspan="所垮的列数">单元格的内容</td>
    </tr>
</table>

-> 跨行：跨列是指单元格的纵向合并

<table>
    <!--row为行的意思，rowspan即跨行-->
    <tr>
        <td rowspan="所挎的行数">单元格内容</td>
    </tr>
</table>

示例：表格跨行和跨列的应用：课表制作

<table border=1 align="center">
<!--align='center':设置表格内容居中显示-->
<caption align="center"><strong>成绩表</strong></caption>
<tr>
    <th></th>
    <th colspan=5 align="center">课程</th>
    <th colspan=2 align="center">周末</th>
</tr>
<tr>
    <th>星期</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
    <th>星期六</th>
    <th>星期天</th>
</tr>
<tr>
    <td rowspan="3">上午</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
    <td rowspan=6 align="center" colspan="2">休息</td>
</tr>
<tr>
    <td>数学</td>
    <td>数学</td>
    <td>地理</td>
    <td>历史</td>
    <td>化学</td>
</tr>
<tr>
    <td>化学</td>
    <td>语文</td>
    <td>体育</td>
    <td>计算机</td>
    <td>英语</td>
</tr>
<tr>
    <td rowspan=2>下午</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
    <td>英语</td>
    <td>物理</td>
</tr>
<tr>
    <td>化学</td>
    <td>语文</td>
    <td>体育</td>
    <td>计算机</td>
    <td>英语</td>
</tr>

</table>

3.1 HTML的媒体元素

3.1.1媒体元素概述

网络发展日新月异，用计算机，平板，手机打开网页就可以浏览视频，听音乐。
在HTML5问世前，要在网页上展示视频、音频、动画等，除了使用第三方自主开发的播放器外，使用最多的工具应该算是Flash了，但是它需要在浏览器上安装各种插件才能使用，有时候速度也会非常慢。HTML5的出现改变了这一状况，在页面中使用HTML5来播放音频、视频再也不需要安装插件，只需要一个支持HTML5的浏览器就可以了。

视频元素

HTML5中的video元素是用来播放视频文件的，支持Ogg、MPEG4、WebM等视频格式。

格式 | IE | Firefox | Opera | chrome | Safari --- |---|---|---|---|--- Ogg | No |3.5+ | 10.5+ |5.0+|NO MPEG 4 | 9.0+ |No | No |5.0+|3.0+ WebM | No |4.0+ | 10.6+ |6.0+ |NO

Ogg ： 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 ： 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM ： 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

应用：

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

其中src属性用于指定要播放的视频文件的路径，controls属性用于提供播放，暂停和音量控件，此外，还可以使用width和height设置视频的宽度和高度，如果浏览器不支持video元素，可以在video元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户看。具体操作如下：

<!DOCTYPE HTML>
<html>
<body>
<video src="movie.ogg" width="320" height="240" controls="controls">
您的浏览器不支持！
</video>
</body>
</html>

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">   
    您的浏览器不支持！
</video>
</body>
</html>

video标签的属性

属性 | 值 | 描述

autoplay | autoplay|如果出现该属性，则视频在就绪后马上播放。

controls|controls|如果出现该属性，则向用户显示控件，比如播放按钮。

height| pixels|设置视频播放器的高度。

loop| loop| 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload| preload|如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src| url|要播放的视频的 URL。

width| pixels|设置视频播放器的宽度。

音频元素

直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。

当前，audio 元素支持三种音频格式：

格式 | IE 9|Firefox 3.5 | Opera 10.5|Chrome 3.0|Safari 3.0 ---|---|---|---|---|--- Ogg Vorbis| |√|√|√| MP3| √|||√|√ Wav| |√|√||√

应用：

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

其中src属性用于指定要播放的音频文件的路径，controls属性用于提供播放、暂停和音量控制，此外，还可以用width和height设置音频的宽度和高度。 如果浏览器不支持audio元素，那么可以在audio元素中间插入一段文字用于提示，这样，旧的浏览器就可以显示这段文字给用户

<audio src="音频路径" controls="controls">你的浏览器不支持audio标签</audio>

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

<audio controls="controls">
    <source src="song.ogg" type="audio/ogg">
    <source src="song.mp3" type="audio/mpeg">
你的浏览器不支持audio标签
</audio>

audio标签的属性

属性 | 值 | 描述

---|---|---

autoplay | autoplay|如果出现该属性，则音频在就绪后马上播放。

controls|controls|如果出现该属性，则向用户显示控件，比如播放按钮。

loop| loop| 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload| preload|如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。

src| url|要播放的音频的 URL。

4.1 HTML5的结构元素

4.1.1 页面布局分析

当要制作一个页面时，如何入手来进行页面布局呢？
大家容易产生的错误做法如下：自上而下用相应 的标签把内容添加进去。
这样做为什么不对呢？
正确的做法如下：先不用像上面一样直接用标签去写内容，而是先分析页面的大体结构。不难发现，大部分网站都是分成上中下结构，三部分。即页面头部，页面主体，页面底部。分好结构后再向这三块里加入对应的内容。
可能到这里有人就会疑惑了，为什么要在它外面套层壳再写内容？直接写不是更省事？给大家举例子：“一个人到超市买了很多东西，他就开始一样一样地往家里搬，搬了好久才搬完。另外一个人也买了很多东西，这个人就买了个购物袋，把这些东西放到购物袋中一次性就提回家了”。其实网页布局之所以要先划分结构，就是为了后面更容易地将一大块的内容移动到想要放的位置，而不是每个元素都要分别移动，这样能提高开发效率，降低开发难度。

4.1.2 HTML5提供了新的元素来创建更好的页面结构

标签 | 描述

---|---

header|定义了文档的头部区域

nav|定义导航链接的部分。

article| 定义页面独立的内容区域。

aside| 定义页面的侧边栏内容。

section | 定义文档中的节（section、区段）。

footer| 定义 section 或 document 的页脚。

bdi | 允许您设置一段文本，使其脱离其父元素的文本方向设置。

command| 定义命令按钮，比如单选按钮、复选框或按钮

details| 用于描述文档或文档某个部分的细节

dialog| 定义对话框，比如提示框 summary| 标签包含 details 元素的标题

figure| 规定独立的流内容（图像、图表、照片、代码等等）。

figcaption| 定义 figure 元素的标题 mark| 定义带有记号的文本。

meter| 定义度量衡。仅用于已知最大和最小值的度量。

progress| 定义任何类型的任务的进度。

ruby |定义 ruby 注释（中文注音或字符）。

rt |定义字符（中文注音或字符）的解释或发音。

rp| 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

time|定义日期或时间。 wbr|规定在文本中的何处适合添加换行符。

4.1.3 iframe框架

frame 元素会创建包含另外一个文档的内联框架（即行内框架）。 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。 提示：您可以把需要的文本放置在 iframe 标签之间，这样就可以应对无法理解 iframe 的浏览器。

<iframe width=500 height=250 frameborder=0 scrolling=auto src="URL"></iframe>

iframe属性的使用： iframe内联框架的常用属性包括name、width、height。其中name属性可以和前面 学过的锚链接结合起来实现页面间的相互跳转。具体步骤如下:

1.在被打开的框架上name属性，关键代码如下：

 <iframe name="mainFram" src="subframe/the_second.html"/>

2.在超链接上设置target目标窗口属性为希望显示框架窗口名，关键代码如下：

<a href="subframe/the_second.html"target="mainFram">下边显示第二页</a>

4.1.4 iframe应用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>iframe的使用</title>
</head>
<body>  
<h1>使用iframe嵌套网页</h1>
<p><a href="http://www.baidu.com" target="mainFrame">点击打开百度</a><br /><br />
<a href="https://www.yuntuzhilian.com/" target="mainFrame">点击打开云图智联</a><br /><br />
<a href="subframe/the_first.html" target="mainFrame">点击打开另一个HTML页面</a><br />
</p>
<iframe name="mainFrame" width="1000px" height="700px"  src="subframe/the_first.html" />
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>page1</title>
</head>
<body>
我是另外一个HTML页面
</body>
</html>

5.1 总结

1、 无序列表由ul和li标签组成，使用无序列表的内容没有顺序之分，每个列表项独占一行，列表前默认有实心小黑圆点；

2、有序列表由ol和li标签组成，使用有序列表排列的内容通过显示顺序编写，每个列表项独占一行；

3、定义里标由dl、dt、dd标签组成，通常用于带有标题和标题解释性内容的场合，dt表示标题，dd表示标题主实行内容；

4、掌握表格的基本使用方法：
1.使用table、tr、td创建表格
2.制作跨列、跨行的表格
1.跨列：colspan="横向跨的单元格数"
2.跨行：rowspan="纵向跨的单元格数"

5、网页中的媒体元素包括video视频元素和audio音频元素；

6、媒体元素共有的属性：src（链接地址）、controls（控件播放控件）；

7、可以让媒体元素在不同浏览器下都支持播放的元素（source）；

8、语义化结构元素（header、section、article、nav、aside、footer）的使用；

9、常用的框架技术iframe内联框架；

10、配合使用a标签和target属性及iframe标签的name属性，可以实现窗口间的关联。

(想要了解更多的职场,职业规划方面的经验,文章第一时间发布于云图智联官网)


在线咨询
上一篇：译 - JavaScript函数的6个基本术语
下一篇：script 的三种加载模式：默认加载、defer、async

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 墉桥区 长阳土家族自治县 桃源县 海阳 潜山县 朔州 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服