HTML 5入门学习，源码中全部使用HTML 5标签
生活随笔
收集整理的這篇文章主要介紹了
HTML 5入门学习，源码中全部使用HTML 5标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!--
書籍資料：《MHTL & CSS 設計與構建網站》作者：Jon Duckett
說明：本源碼是按照書籍教學順序編寫，僅HTML 5部分，不含CSS部分，亦不含被HTML 5舍棄的老標簽，代碼中的文件夾和媒體文件請讀者自己建立
下面是源碼：
-->
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="ceshi" />
<meta name="keywords" content="ceshi" />
<meta name="robots" content="nofollow" />
<meta http-equiv="author" content="zmc" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="*/*">
<title>主測試頁</title>
</head>
<body>
<em><b>2016.08.03</b></em><a id="dingbu" href="#dibu"> 轉到頁末</a><hr />
<h1><b>hello world</b></h1>
<h2>hello</h2>
<h6><i>hello</i></h6>
<p>H<sub>2</sub>O<br />2<sup>8</sup></p><hr />
<abbr title="華麗分割線">華線</abbr>
<p><ins>修改</ins> <del>刪除</del></p>
<p>原價：<s>￥1998</s> 現價：￥998</p>
<ul>
<li>1</li>
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>yi</li>
<li>er</li>
<li>san</li>
</ol>
<dl>
<dt>ZMC</dt>
<dd>zhaomiancheng</dd>
<dt>ZJ</dt>
<dd>zhaojun</dd>
</dl>
<a href="a.html">這是一個測試鏈接</a><br />
<a href="ceshi/ceshi.html">跳轉到測試頁</a>
<address><a href="http://www.baidu.com" target="_blank">zmc 2016</a></address><!--target為<a>標簽的特性，_blank值代表在新的一頁打開-->
<a href="mailto:102721@qq.com">發送郵件給我</a><!--無郵件客戶端，無法調用-->
<a id="dibu" href="#dingbu"> 轉到頁首</a>
<hr />
<em><b>2016.08.04</b></em>
<img src="image/www.ico.la_5efa4a71cbcb7f6a2483c6573d07ec5a_64X64.ico" alt="xx圖標" title="xx" height="30" width="30">
<figure>
<img src="image/示例圖片.jpg" height="80%" width="80%">
<br />
<figcaption>這是上面圖片的說明</figcaption>
</figure>
<table>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>4 </td>
<td>5 </td>
<td>6 </td>
</tr>
<tr>
<td>7 </td>
<td>8 </td>
<td>9 </td>
</tr>
</table>
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>￥600</td>
<td>￥675</td>
</tr>
</table>
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm~7pm</th>
<th rowspan="2">Movie</th>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm~8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>2st January</td>
<td>285</td>
<td>48</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td>7824</td>
<td>1241</td>
</tfoot>
</table>
<form action="https://192.168.0.173/reborn" method="post">
<p>This is where the form controls will appear</p>
</form>
<form action="https://192.168.0.173/reborn" method="post">
<p>
Username:
<input type="text" name="username" maxlength="30" />
</p>
<p>
Password:
<input type="password" name="password" maxlength="30" />
</p>
<p>
What did you think of this gig?
</p>
<textarea name="comments">Enter you comments...</textarea>
<p>
Please select your favorite genre:<br />
<input type="radio" name="genre" value="Rock" checked="checked" />Rock
<input type="radio" name="genre" value="Pop" />Pop
<input type="radio" name="genre" value="Jazz" />Jazz
</p>
<p>
Please select you favorite music service(s):<br />
<input type="checkbox" name="service" value="iTunes">iTunes
<input type="checkbox" name="service" value="Last.fm">Last.fm
<input type="checkbox" name="service" value="Spotify">Spotify
</p>
<p>What device do you listen to music on?</p>
<select name="device">
<option value="iPod">iPod</option>
<option value="Radio">Radio</option>
<option value="Computer">Computer</option>
</select>
<p>
Do you play any of the following instruments?
</p>
<select name="instruments" size="3" multiple="multiple">
<option value="Guitar">Guitar</option>
<option value="Drums">Drums</option>
<option value="Keyboard">Keyboard</option>
<option value="Bass">Bass</option>
</select>
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="Subscribe" value="Subscribe" />
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="image/www.ico.la_5efa4a71cbcb7f6a2483c6573d07ec5a_64X64.ico" width="30" height="30">
<button><img src="image/www.ico.la_5efa4a71cbcb7f6a2483c6573d07ec5a_64X64.ico" alt="add" width="30" height="30" />Add</button>
<input type="hidden" name="bookmark" value="lyrics" />
<br />
<label>Age:<input type="text" name="age" /></label>
<br />
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Gender:</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br/>
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br/>
<!--<input type="text" name="mobile" required="required" /></label><br/>-->
<label>Telephone:<br />
<input type="text" name="telephone" /></label><input type="submit" value="Submit">
</fieldset>
<label>Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit">
<hr />
<em><b>2016.08.05</b></em>
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" name="Submit">
</form>
<form action="https:192.168.0.173/reborn">
<p>Search:</p>
<input type="search" name="search" placeholder="Enter keyword">
<input type="submit" value="Submit">
</form>
<p class="important admittance">This is a important information! Please attention it!</p><!--class屬性并不能改變外觀，需配合CSS使用-->
<!--<h1><p><ul><li>等會另起一行的元素稱為塊級元素,<a><b><em><img>這些與它的臨近元素出現在同一行的稱為內聯元素-->
<div id="header"><!--元素塊方式集中-->
<img src="image/示例圖片02.jpg" alt="示例圖片02">
<ul>
<li><a href="#dingbu">Home</a></li>
<li>Biography</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div><!--end of header-->
<p>Anish Kapoor won the Turner Prize in 1991 and exhibited at the
<span class="gallery">Tate Modern</span>gallery in London in 2003.</p>
<iframe width="450" height="350" src="http://www.baidu.com" frameborder="0" scrolling="auto"></iframe>
<video src="video/視頻一.mp4" poster="image/示例圖片02.jpg" width="300" height="225" preload="metadata" controls loop></video>
<!--加入：autoplay字段可自動播放，poster特性提供播放器播放之前顯示的圖像-->
<video poster="image/示例圖片02.jpg" width="300" height="225" preload="metadata" controls loop>
<source src="video/視頻二.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"' />
</video>
<br /><br /><br />
<audio src="audio/音頻1.mp3" preload="metadata" loop controls></audio>
<!--上一句代碼添加controls元素以顯示播放器-->
<audio autoplay controls>
<source src="audio/音頻2.mp3">
</audio>
</body>
</html>
書籍資料：《MHTL & CSS 設計與構建網站》作者：Jon Duckett
說明：本源碼是按照書籍教學順序編寫，僅HTML 5部分，不含CSS部分，亦不含被HTML 5舍棄的老標簽，代碼中的文件夾和媒體文件請讀者自己建立
下面是源碼：
-->
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="ceshi" />
<meta name="keywords" content="ceshi" />
<meta name="robots" content="nofollow" />
<meta http-equiv="author" content="zmc" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="*/*">
<title>主測試頁</title>
</head>
<body>
<em><b>2016.08.03</b></em><a id="dingbu" href="#dibu"> 轉到頁末</a><hr />
<h1><b>hello world</b></h1>
<h2>hello</h2>
<h6><i>hello</i></h6>
<p>H<sub>2</sub>O<br />2<sup>8</sup></p><hr />
<abbr title="華麗分割線">華線</abbr>
<p><ins>修改</ins> <del>刪除</del></p>
<p>原價：<s>￥1998</s> 現價：￥998</p>
<ul>
<li>1</li>
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
</ul>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>yi</li>
<li>er</li>
<li>san</li>
</ol>
<dl>
<dt>ZMC</dt>
<dd>zhaomiancheng</dd>
<dt>ZJ</dt>
<dd>zhaojun</dd>
</dl>
<a href="a.html">這是一個測試鏈接</a><br />
<a href="ceshi/ceshi.html">跳轉到測試頁</a>
<address><a href="http://www.baidu.com" target="_blank">zmc 2016</a></address><!--target為<a>標簽的特性，_blank值代表在新的一頁打開-->
<a href="mailto:102721@qq.com">發送郵件給我</a><!--無郵件客戶端，無法調用-->
<a id="dibu" href="#dingbu"> 轉到頁首</a>
<hr />
<em><b>2016.08.04</b></em>
<img src="image/www.ico.la_5efa4a71cbcb7f6a2483c6573d07ec5a_64X64.ico" alt="xx圖標" title="xx" height="30" width="30">
<figure>
<img src="image/示例圖片.jpg" height="80%" width="80%">
<br />
<figcaption>這是上面圖片的說明</figcaption>
</figure>
<table>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
<tr>
<td>4 </td>
<td>5 </td>
<td>6 </td>
</tr>
<tr>
<td>7 </td>
<td>8 </td>
<td>9 </td>
</tr>
</table>
<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Tickets sold:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total sales:</th>
<td>￥600</td>
<td>￥675</td>
</tr>
</table>
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm~7pm</th>
<th rowspan="2">Movie</th>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm~8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>Date</th>
<th>Income</th>
<th>Expenditure</th>
</tr>
</thead>
<tbody>
<tr>
<td>2st January</td>
<td>285</td>
<td>48</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr><tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
<tr>
<td>1st January</td>
<td>250</td>
<td>36</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td>7824</td>
<td>1241</td>
</tfoot>
</table>
<form action="https://192.168.0.173/reborn" method="post">
<p>This is where the form controls will appear</p>
</form>
<form action="https://192.168.0.173/reborn" method="post">
<p>
Username:
<input type="text" name="username" maxlength="30" />
</p>
<p>
Password:
<input type="password" name="password" maxlength="30" />
</p>
<p>
What did you think of this gig?
</p>
<textarea name="comments">Enter you comments...</textarea>
<p>
Please select your favorite genre:<br />
<input type="radio" name="genre" value="Rock" checked="checked" />Rock
<input type="radio" name="genre" value="Pop" />Pop
<input type="radio" name="genre" value="Jazz" />Jazz
</p>
<p>
Please select you favorite music service(s):<br />
<input type="checkbox" name="service" value="iTunes">iTunes
<input type="checkbox" name="service" value="Last.fm">Last.fm
<input type="checkbox" name="service" value="Spotify">Spotify
</p>
<p>What device do you listen to music on?</p>
<select name="device">
<option value="iPod">iPod</option>
<option value="Radio">Radio</option>
<option value="Computer">Computer</option>
</select>
<p>
Do you play any of the following instruments?
</p>
<select name="instruments" size="3" multiple="multiple">
<option value="Guitar">Guitar</option>
<option value="Drums">Drums</option>
<option value="Keyboard">Keyboard</option>
<option value="Bass">Bass</option>
</select>
<p>Upload your song in MP3 format:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Upload" />
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="submit" name="Subscribe" value="Subscribe" />
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src="image/www.ico.la_5efa4a71cbcb7f6a2483c6573d07ec5a_64X64.ico" width="30" height="30">
<button><img src="image/www.ico.la_5efa4a71cbcb7f6a2483c6573d07ec5a_64X64.ico" alt="add" width="30" height="30" />Add</button>
<input type="hidden" name="bookmark" value="lyrics" />
<br />
<label>Age:<input type="text" name="age" /></label>
<br />
Gender:
<input id="female" type="radio" name="gender" value="f">
<label for="female">Gender:</label>
<input id="male" type="radio" name="gender" value="m">
<label for="male">Male</label>
<fieldset>
<legend>Contact details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br/>
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br/>
<!--<input type="text" name="mobile" required="required" /></label><br/>-->
<label>Telephone:<br />
<input type="text" name="telephone" /></label><input type="submit" value="Submit">
</fieldset>
<label>Departure date:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit">
<hr />
<em><b>2016.08.05</b></em>
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" name="Submit">
</form>
<form action="https:192.168.0.173/reborn">
<p>Search:</p>
<input type="search" name="search" placeholder="Enter keyword">
<input type="submit" value="Submit">
</form>
<p class="important admittance">This is a important information! Please attention it!</p><!--class屬性并不能改變外觀，需配合CSS使用-->
<!--<h1><p><ul><li>等會另起一行的元素稱為塊級元素,<a><b><em><img>這些與它的臨近元素出現在同一行的稱為內聯元素-->
<div id="header"><!--元素塊方式集中-->
<img src="image/示例圖片02.jpg" alt="示例圖片02">
<ul>
<li><a href="#dingbu">Home</a></li>
<li>Biography</li>
<li>Works</li>
<li>Contact</li>
</ul>
</div><!--end of header-->
<p>Anish Kapoor won the Turner Prize in 1991 and exhibited at the
<span class="gallery">Tate Modern</span>gallery in London in 2003.</p>
<iframe width="450" height="350" src="http://www.baidu.com" frameborder="0" scrolling="auto"></iframe>
<video src="video/視頻一.mp4" poster="image/示例圖片02.jpg" width="300" height="225" preload="metadata" controls loop></video>
<!--加入：autoplay字段可自動播放，poster特性提供播放器播放之前顯示的圖像-->
<video poster="image/示例圖片02.jpg" width="300" height="225" preload="metadata" controls loop>
<source src="video/視頻二.mp4" type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"' />
</video>
<br /><br /><br />
<audio src="audio/音頻1.mp3" preload="metadata" loop controls></audio>
<!--上一句代碼添加controls元素以顯示播放器-->
<audio autoplay controls>
<source src="audio/音頻2.mp3">
</audio>
</body>
</html>
轉載于:https://www.cnblogs.com/tyhjtz-std/p/5742062.html
總結
以上是生活随笔為你收集整理的HTML 5入门学习，源码中全部使用HTML 5标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： B--Bookshelf 2
- 下一篇： 移动前端开发总结