<!--书籍资料：《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:[email protected]">发送邮件给我</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>
时间： 2024-10-05 08:59:26