整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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制作表格，是特別容易的事情，下面介紹一下制作方法。
HTML5的表格包括table、caption、tr、td、th五個主要元素：
table元素：定義一個表格；
caption元素：定義表格的標題；
tr元素：定義表格的一行，tr是table row的縮寫；
td元素：定義表格單元，td是table data的縮寫；
th元素：定義表頭，th是table head的縮寫。
下面這個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>使用瀏覽器打開這個文檔時，效果如下：
這個表格一點都不好看，因為沒有表格線。
對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>使用瀏覽器打開這個文檔，效果如下：
現在的表格好看一些了，但是還有個缺點，就是沒有標題。
這里修改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>使用瀏覽器打開這個文檔，效果如下：
為加上“上午、下午”的信息，我們需要增加一列，并使用<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文件，效果如下：
我們通過設置<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>使用瀏覽器打開該文件，效果如下：
修改一下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. 什么是列表
簡單來說，列表就是信息資源的一種展示形式。它可以使信息結構化和條理化，并以列表的樣式顯示出來。
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.定義列表一般適用于帶標題和標題解釋性內容的場合。
示例：有序列表
<!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.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.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.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>
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屬性，可以實現窗口間的關聯。
(想要了解更多的職場,職業規劃方面的經驗,文章第一時間發布于云圖智聯官網)
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
