前端：HTML5学习之路（四）
第4章 HTML5列表和超链接
4.1 HTML5列表
1）无序列表
使用<ul>标签可以定义无序列表，在<ul>标签中可以包含一个或多个<li>标签，用来定义列表项目。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <nav id="menu"> 9 <h1>企业网站导航</h1> 10 <ul> 11 <li><a href="#" title="">首页</a></li> 12 <li><a href="#" title="">公司新闻</a></li> 13 <li><a href="#" title="">产品信息</a></li> 14 <li><a href="#" title="">媒体互动</a></li> 15 <li><a href="#" title="">关于</a></li> 16 </ul> 17 </nav> 18 </body> 19 </html>
2）有序列表
使用<ol>标签定义有序列表，在<ol>中可以包含一个或多个<li>列表项目。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <div class="music_sort"> 10 <h1>音乐排行榜</h1> 11 <ol> 12 <li><h2>沙漠骆驼</h2> <span>展展与罗罗</span></li> 13 <li><h2>往后余生</h2> <span>马良/孙茜茹</span></li> 14 <li><h2>卡路里</h2> <span>火箭少女101</span></li> 15 <li><h2>只要平凡</h2> <span>张杰/张碧晨</span></li> 16 <li><h2>无问西东</h2> <span>王菲</span></li> 17 </ol> 18 </div> 19 </body> 20 </html>
3）项目编号
<ol>标签包含3个较实用的属性：reversed（定义列表降序，如5、4、3···）、start（定义列表起始值）、type（定义列表使用的标记类型，如1、A、a、I、i）。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>排行榜</h1> 9 <ol> 10 <li>张三<span>100</span> </li> 11 <li>李四<span>98</span> </li> 12 <li value="2">王五<span>98</span> </li> 13 <li value="4">赵六<span>96.5</span> </li> 14 <li>侯七<span>94</span> </li> 15 </ol> 16 </body> 17 </html>
4）嵌套列表
有序列表和无序列表都可以创建嵌套列表。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <nav role="navigation"> 10 <ul class="nav"> 11 <li><a href="#">首页</a></li> 12 <li><a href="#">产品</a> 13 <ul class="subnav"> 14 <li><a href="#">手机</a></li> 15 <li><a href="#">配件</a></li> 16 </ul> 17 </li> 18 <li><a href="#">支持</a> 19 <ul class="subnav"> 20 <li><a href="#">社区</a></li> 21 <li><a href="#">联系</a></li> 22 </ul> 23 </li> 24 <li><a href="#">关于</a></li> 25 </ul> 26 </nav> 27 </body> 28 </html>
5）描述列表
描述列表可以是一种特殊的列表结构，它可以是术语和定义、元数据主题和值、问题和答案等名/值对。用<dl>定义一个描述列表，名/值对分别放到<dl>的<dt>、<dd>标签中。使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5使用描述列表</title> 6 </head> 7 8 <body> 9 <h2>中药词条列表</h2> 10 <dl> 11 <dt>丹皮</dt> 12 <dd>为毛茛科多年生落叶小灌木植物牡丹的根皮。产于安徽、山东等地。秋季采收，晒干。生用或炒用。</dd> 13 </dl> 14 15 </body> 16 </html>
6）菜单列表
使用<menu>标签可以定义命令的列表或菜单，如上下文菜单、工具栏，以及列出表单控件和命令。<menu>标签中可包含<command>、<menuitem>标签，用于定义命令和项目。使用代码示例：（用火狐浏览器Firefox8+版本浏览）
a.使用<menu>和<command>标签定义一个命令，单击命令时，弹出提示对话框，显示内容为”Hello World“。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <menu> 10 <command onclick="alert('Hello World')">命令</command> 11 </menu> 12 </body> 13 </html>
b.使用<command>定义一个单选按钮命令组。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <menu> 10 <command icon="images/1.png" onclick="alert('男士')" type="radio" radiogroup="group1" label="男士">男士</command> 11 <command icon="images/2.png" onclick="alert('女士')" type="radio" radiogroup="group1" label="女士">女士</command> 12 <command icon="images/3.png" onclick="alert('未知')" type="radio" radiogroup="group1" label="未知">未知</command> 13 </menu> 14 </body> 15 </html>
c.<menu>标签包含两个专用属性：label（定义菜单的可见标签）、type（定义显示哪种菜单类型，如list、context、toolbar），使用type属性定义两组工具条按钮，如下。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <menu type="toolbar"> 10 <li> 11 <menu label="File" type="toolbar"> 12 <button type="button" onclick="file_new()">新建...</button> 13 <button type="button" onclick="file_open()">打开...</button> 14 <button type="button" onclick="file_save()">保存</button> 15 </menu> 16 </li> 17 <li> 18 <menu label="Edit" type="toolbar"> 19 <button type="button" onclick="edit_cut()">剪切</button> 20 <button type="button" onclick="edit_copy()">复制</button> 21 <button type="button" onclick="edit_paste()">粘贴</button> 22 </menu> 23 </li> 24 </menu> 25 </body> 26 </html>
7）快捷菜单
<menuitem>标签用来定义菜单项目，这些菜单项目仅用来弹出菜单的命令，方便快捷调用。目前仅Firefox8+版本浏览器支持该标签。
a.使用<menu>和<menuitem>标签，将把新的菜单合并到本地的上下文菜单中，使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 html, body{ height:100%;} 8 </style> 9 </head> 10 11 <body contextmenu="new-context-menu"> 12 13 <menu id="new-context-menu" type="context"> 14 <menuitem>Hello World</menuitem> 15 </menu> 16 </body> 17 </html>
b.在特定元素上给contextmenu属性赋值来限制新菜单项的作用区域，使用代码示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <h1 contextmenu="new-context-menu">使用<menuitem>标签设计弹出菜单</h1> 10 <menu id="new-context-menu" type="context"> 11 <menuitem>Hello World</menuitem> 12 </menu> 13 </body> 14 </html>
8）添加命令
设计：使用JavaScript实现为快捷菜单命令添加功能。当点击图像时，旋转图像，使用CSS3的transform和transition，在浏览器中实现真实的旋转功能。
思路：
a.通过menu创建旋转图像菜单项，并通过menuitem为它添加4个子菜单，点击子菜单时分别实现旋转90度、旋转180度、水平翻转、垂直翻转。
b.对应的在页面头部区域定义一个JavaScript函数，并在内部样式表中定义4个类样式，分别设计将图像旋转指定度数，在JavaScript中写相应函数将这些样式应用到图像。
c.依次把函数和每一个menuitem的onclick事件处理函数捆绑在一起，并且传递参数（旋转度数）。
代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script> 7 function imageRotation(name) { 8 document.getElementById('image').className = name; 9 } 10 </script> 11 <style> 12 .rotate-90 { 13 -webkit-transform: rotate(90deg); 14 transform: rotate(90deg) 15 } 16 .rotate-180 { 17 -webkit-transform: rotate(180deg); 18 transform: rotate(180deg) 19 } 20 .flip-horizontal { 21 -webkit-transform: scaleX(-1); 22 -moz-transform: scaleX(-1); 23 -o-transform: scaleX(-1); 24 transform: scaleX(-1) 25 } 26 .flip-vertical { 27 -webkit-transform: scaleY(-1); 28 -moz-transform: scaleY(-1); 29 -o-transform: scaleY(-1); 30 transform: scaleY(-1) 31 } 32 </style> 33 </head> 34 <body> 35 <img src="images/pic1.png" width="500" contextmenu="demo-image" id="image" /> 36 <menu id="demo-image" type="context"> 37 <menu label="旋转图像"> 38 <menuitem icon="images/icon1.png" onclick="imageRotation('rotate-90')" >旋转90度</menuitem> 39 <menuitem icon="images/icon2.png" onclick="imageRotation('rotate-180')">旋转180度</menuitem> 40 <menuitem icon="images/icon4.png" onclick="imageRotation('flip-horizontal')">水平翻转</menuitem> 41 <menuitem icon="images/icon3.png" onclick="imageRotation('flip-vertical')">垂直翻转</menuitem> 42 </menu> 43 </menu> 44 </body> 45 </html>
注意*：每一个函数都必须添加到相应的menuitem中，必须传递参数（旋转度数），建议在Firefox浏览器中预览。
9）设计快捷命令
设计：设计一个分享功能，右击页面中的文本，在弹出的快捷菜单中选择“下载文件”命令，可以下载文本相关作者的画像；选择“查看源文件”命令，可以在新窗口中直接浏览作者画像；选择“我要分享”->“反馈”命令，可以询问是否向指定网址反馈信息；选择“我要分享”->“Email”命令，可以在地址栏中发送信息，也可以向指定邮箱发送信息。代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script> 7 var post = { 8 "source" : "images/liuyong.rar", 9 "demo" : "images/liuyong.jpg", 10 "feed" : "http://www.weibo.com/" 11 }; 12 function downloadSource() { 13 window.open(post.source, '_self'); 14 } 15 function viewDemo() { 16 window.open(post.demo, '_blank'); 17 } 18 function getFeed() { 19 window.prompt('发送地址:', post.feed); 20 } 21 function sendEmail() { 22 var url = document.URL; 23 var body = '分享地址: ' + url +''; 24 window.location.href = 'mailto:?subject='+ document.title +'&body='+ body +''; 25 } 26 </script> 27 <style> 28 29 </style> 30 </head> 31 <body> 32 33 <section id="on-a-blog" contextmenu="download"> 34 <header class="section-header"> 35 <h3>雨霖铃</h3> 36 </header> 37 <p>寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处，兰舟催发。执手相看泪眼，竟无语凝噎。念去去，千里烟波，暮霭沉沉楚天阔。 多情自古伤离别，更那堪，冷落清秋节。今宵酒醒何处?杨柳岸，晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说? </p> 38 </section> 39 40 <menu id="download" type="context"> 41 <menuitem onclick="downloadSource()" icon="images/icon1.png">下载文件</menuitem> 42 <menuitem onclick="viewDemo()" icon="images/icon2.png">查看源文件</menuitem> 43 <menu label="我要分享..."> 44 <menuitem onclick="getFeed()" icon="images/icon3.png">反馈</menuitem> 45 <menuitem onclick="sendEmail()" icon="images/icon4.png">Email</menuitem> 46 </menu> 47 </menu> 48 </body> 49 </html>
10）设计任务列表
设计：设计动态添加列表项目的功能，右击项目列表文本，在弹出的快捷菜单中选择“添加新任务”命令，可以快速为当前列表添加新的列表项目。代码如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script> 7 function addNewTask() { 8 var list = document.createElement('li'); 9 list.className = 'task-item'; 10 list.innerHTML = '<input type="checkbox" name="" value="done">新任务'; 11 var taskList = document.getElementById('task'); 12 taskList.appendChild(list); 13 } 14 </script> 15 </head> 16 <body> 17 <section id="on-web-app" contextmenu="add_task"> 18 <header> 19 <h3>任务列表</h3> 20 </header> 21 <ul id="task"> 22 <li class="task-item"><input type="checkbox" name="" value="done">任务一</li> 23 <li class="task-item"><input type="checkbox" name="" value="done">任务二</li> 24 <li class="task-item"><input type="checkbox" name="" value="done">任务三</li> 25 </ul> 26 </section> 27 <menu id="add_task" type="context"> 28 <menuitem onclick="addNewTask()" icon="images/add.png">添加新任务</menuitem> 29 </menu> 30 </body> 31 </html>
4.2 HTML超链接
1）普通链接
使用<a>标签来定义超链接，定义超链接的基本方法如下：
1 <a href="目标链接">载体</a>
href：超文本引用，它的值可以是相对URL，也可以是绝对URL。相对URL即站内链接，绝对URL即站外链接。
简单示例：
1 <a href="https://www.baidu.com/" target="_blank">百度一下</a>
载体：载体种类很多，比如一段文本、一张图片或一块区域等。示例：当点击一张图片，在新的标签页显示百度首页。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <a href="https://www.baidu.com/" target="_blank"><img src="images/logo.png" width="300" alt=""/></a> 10 </body> 11 </html>
2）块链接
HTML5允许在链接内包含任意对象，如段落、列表、整篇文章和区块。但不能够包含其他链接、视频、音频、表单元素、iframe等交互式内容。使用示例：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <a href="pages.html"> 10 <h1>标题文本</h1> 11 <p>段落文本.</p> 12 <p>更多信息</p> 13 </a> 14 15 </body> 16 </html>
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 8 <body> 9 <a href="pioneer-valley.html"> 10 <h1>标题文本</h1> 11 <img src="images/1.jpg" width="143" height="131" alt="1" /> 12 <img src=" images/2.jpg" width="202" height="131" alt="2" /> 13 <p>段落文本</p> 14 </a> 15 16 </body> 17 </html>
3）锚点链接
这一类链接时指定向同一页面或其他页面的特定位置的链接，起位置指示和方便查看的作用。比如，在一个很长的页面里，可以在页面底部设置一个锚点，单击后跳转到页面顶部，这样可以避免上下滚动消耗大量时间。
创建锚点链接，首先创建用于链接的锚点，然后定义链接，为<a>标签设置href属性，属性值为“#+锚点标记”。实际上锚点标记的值就是那些在页面中被定义了ID值的元素的ID了，在<a>标签中通过为href属性设置属性值“#+锚点标记”，即可实现锚点链接指向页面的特定位置了。使用示例：
a.指向同一页面特定位置。点击“查看图片4”，可以跳转到页面底部的图片4所在位置。这里href属性值设为“#p4”。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p><a href="#p4">查看图片4</a> </p> 9 <h2>图片1</h2> 10 <p><img src="images/1.jpg" /></p> 11 <h2>图片2</h2> 12 <p><img src="images/2.jpg" /></p> 13 <h2>图片3</h2> 14 <p><img src="images/3.jpg" /></p> 15 <h2 id="p4">图片4</h2> 16 <p><img src="images/4.jpg" /></p> 17 <h2>图片5</h2> 18 <p><img src="images/5.jpg" /></p> 19 <h2>图片6</h2> 20 <p><img src="images/6.jpg" /></p> 21 </body> 22 </html>
b.指向其他页面特定位置。首先创建两个html文件：test.html和test1.html。分别为它们添加内容：
》test.html:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p><a href="#p4">查看图片4</a> </p> 9 <h2>图片1</h2> 10 <p><img src="images/1.jpg" /></p> 11 <h2>图片2</h2> 12 <p><img src="images/2.jpg" /></p> 13 <h2>图片3</h2> 14 <p><img src="images/3.jpg" /></p> 15 <h2 id="p4">图片4</h2> 16 <p><img src="images/4.jpg" /></p> 17 <h2>图片5</h2> 18 <p><img src="images/5.jpg" /></p> 19 <h2>图片6</h2> 20 <p><img src="images/6.jpg" /></p> 21 <p><a href="test1.html#p2">查看图片2</a> </p> 22 </body> 23 </html>
》test1.html:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p><a href="#p4">查看图片4</a> </p> 9 <h2 id="p1">图片1</h2> 10 <p><img src="images/1.jpg" /></p> 11 <h2 id="p2">图片2</h2> 12 <p><img src="images/2.jpg" /></p> 13 <h2>图片3</h2> 14 <p><img src="images/3.jpg" /></p> 15 <h2 id="p4">图片4</h2> 16 <p><img src="images/4.jpg" /></p> 17 <h2>图片5</h2> 18 <p><img src="images/5.jpg" /></p> 19 <h2>图片6</h2> 20 <p><img src="images/6.jpg" /></p> 21 <p><a href="#p1">查看图片1</a> </p> 22 </body> 23 </html>
点击test.html页面中的“查看图片2”时会指向test1.html页面的图片2所在位置。原理很简单：就是在为<a>标签中href属性设置属性值时，先指定另一个页面，这里属性值设置为：“test1.html#+锚点标记”，即“test1.html#p2”，其他地方大家在用的时候同理。
4）目标链接
超链接指向的的目标可以实网页、页面位置、图片、电子邮件地址、文件、FTP服务器，甚至是应用程序或一段JavaSc脚本等。href指向的链接目标如果是浏览器能够识别的类型，则直接显示；如果不能识别，会弹出“文件下载”对话框，允许下载到本地。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <p><a href="images/1.jpg">链接到图片</a> </p> 9 <p><a href="demo.html">链接到网页</a> </p> 10 <p><a href="demo.docx">链接到Word文档</a> </p> 11 12 </body> 13 </html>
5）电子邮件链接
使用<a>标签创建电子邮件链接如下：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="mailto:namee@mysite.cn">namee@mysite.cn</a> 9 </body> 10 </html>
6）下载链接
当被链接的文件不能被浏览器解析时，如二进制文件、压缩文件等，则会直接下载到本地计算机中，这种链接形式即称为下载链接。对于能被浏览器解析的目标，也可以使用download强制浏览器执行下载操作。download属性目前被Firefox和Chrome浏览器支持。
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p><a href="images/1.jpg" download >下载图片</a></p> 10 <p><a href="images/1.jpg" >浏览图片</a></p> 11 12 </body> 13 </html>
7）图像热点
图像热点就是为图像的局部区域定义链接，当单击该热点区域时，则会触发链接。定义图像热点，需要<map>和<area>标签配合使用。使用示例如下：
a.<map>定义热点区域，它必须包含id属性/name属性，来作为句柄与热点图像进行绑定。<img>中的usemap属性可引用这一id/name属性（因浏览器而异）。
b.<area>定义图像映射中的区域，它必须嵌套在<map>标签中。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <img src="images/china.jpg" width="618" height="499" border="0" usemap="#Map"> 9 <map name="Map"> 10 <area shape="circle" coords="221,261,40" href="show.php?name=青海"> 11 <area shape="poly" coords="411,251,394,267,375,280,395,295,407,299,431,307,436,303,429,284,431,271,426,255" href="show.php?name=河南"> 12 <area shape="poly" coords="385,336,371,346,370,375,376,385,394,395,403,403,410,397,419,393,426,385,425,359,418,343,399,337" href="show.php?name=湖南"> 13 </map> 14 </body> 15 </html>
8）框架链接
HTML5已经不支持frameset框架，但支持iframe浮动框架。使用iframe创建浮动框架的用法如下，我们可以通过CSS来修改浮动框架的大小、位置等。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <iframe src="http://www.baidu.com"></iframe> 9 </body> 10 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 html, body { 8 padding: 0; 9 margin: 0; 10 height: 100%; 11 overflow: hidden; 12 } 13 iframe { 14 height: 100%; 15 width: 100%; 16 } 17 </style> 18 </head> 19 <body> 20 <iframe src="http://www.baidu.com"></iframe> 21 </body> 22 </html>
4.3 项目实战
1）设计九宫格版式
设计：模仿携程旅游网首页，设计一个九宫格页面布局。
步骤：
a.新建index.html文档，使用HTML5标签构建网页结构。思路：主体结构分为顶部、中部、底部和侧边栏。顶部（<header>）放广告图片；中部（<nav>）放多个图片链接；底部（<footer>）放置多个导航链接；侧边栏（<aside>）放矩形按钮。
b.关键点：设计中部区域的九宫格的HTML结构。该结构包含在<nav>容器里，内部由一个无序列表<ul>包含9个列表项目<li>构成。其中每个<li>里包含一个二级标题（用来放置图片超链接）。
c.关于样式设计，需要用到common.css和main.css两个文件，一些图片单独存放在和上述文件同级的images文件夹里。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta charset="utf-8" /> 6 <link rel="dns-prefetch" href="http://res.m.ctrip.com/" /> 7 <title>酒店预订,机票预订查询,旅游度假-携程旅行网无线版官网</title> 8 <meta name="description" content="携程旅行网是中国领先的在线旅行服。" /> 9 <meta name="keywords" content="酒店预订,特价酒,携程旅行" /> 10 <meta name="viewport" content="width=320.1,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" /> 11 <meta name="apple-mobile-web-app-title" content="携程旅行" /> 12 <meta name="apple-mobile-web-app-capable" content="yes" /> 13 <meta content="telephone=no" name="format-detection" /> 14 <meta name="baidu-tc-cerfication" content="ba07d70ead40fe3171a72dc4099ed4e5" /> 15 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" /> 16 <link href="css/common.css" rel="stylesheet" type="text/css" media="screen" /> 17 <link href="css/main.css" rel="stylesheet" type="text/css" media="screen" /> 18 </head> 19 <body> 20 <header> 21 <div class="img-item img-size"> <a href="#"><img src="images/01.jpg" title="携程旅行" /></a> </div> 22 </header> 23 <nav> 24 <ul class="nav-list"> 25 <li class="nav-flight" onclick=""> 26 <h2><a title="机票" href="#" data-href="">机票</a></h2> 27 </li> 28 <li class="nav-train" onclick=""> 29 <h2><a title="火车票" href="#" data-href="">火车票</a></h2> 30 </li> 31 <li class="nav-car" onclick=""> 32 <h2><a title="用车" href="#" data-href="">用车</a></h2> 33 </li> 34 <li class="nav-hotel" onclick=""> 35 <h2><a title="酒店" href="#" data-href="">酒店</a></h2> 36 </li> 37 <li class="nav-fortun" onclick=""> 38 <h2><a title="财富中心" href="#">财富中心</a></h2> 39 </li> 40 <li class="nav-strategy" onclick=""> 41 <h2><a title="攻略" href="#" data-href="">攻略</a></h2> 42 </li> 43 <li class="nav-trip" onclick=""> 44 <h2><a title="旅游" href="#" data-href="">旅游</a></h2> 45 </li> 46 <li class="nav-ticket" onclick=""> 47 <h2><a title="门票" href="#" data-href="">门票</a></h2> 48 </li> 49 <li class="nav-week" onclick=""> 50 <h2><a title="周末游" href="#" data-href="">周末游</a></h2> 51 </li> 52 </ul> 53 </nav> 54 <footer class="tool-box"> 55 <div class="tool-cn"> <a href="tel:4000086666" class="link-tel">400 008 6666</a> <a href="#" class="link-down">下载客户端</a> <a href="#" class="link-mc">我的携程</a> </div> 56 <div class="tool-ver"> <a href="#" class="english">ENGLISH</a> <a href="#" class="computer">电脑版</a> <a href="#" class="wap">意见反馈</a> </div> 57 <p>© 58 <label id="label1">2018</label> 59 携程旅行</p> 60 </footer> 61 <aside class="c_pop_wrap"> 62 <div class="c_pop"> <i class="c_pop_trigon"></i> 63 <div class="c_pop_cont"> 单击下方图标，选择“添加至主屏幕” </div> 64 </div> 65 </aside> 66 </body> 67 </html>
2）设计导航页面
设计：模仿设计一个简单得手机搜狐网得名站导航网页。
步骤：
a.新建index.html文件，使用HTML5标签构建网页结构。思路：主体结构分为顶部、中部、底部。顶部放置标题文本，使用<header class="hd">定义标题栏；中部包括多个热点网站的链接按钮和多行分类网站导航链接；底部包括多个导航链接和版权信息。
b.关键点：在中部，需要在<main class="tab-content">主容器中，使用<section>设计一个热点导航模块（一个列表框包含多个热点导航图标和文字），设计一个普通文本导航模块（设计结构和样式同热点导航模块）。
c.独立留出一行用于设计“返回顶部”按钮，显示在普通文本导航模块的下面，居中显示。
d.底部页脚设计，使用<nav class="foo">设计一个导航条，再用两个<p>标签把留言合作、版权所有等信息显示在最下方。
e.关于样式设计，用到了common.css和main.css两个文件，一些图片单独存放在和上述文件同级的images文件夹里。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta http-equiv="Cache-Control" content="no-cache" /> 6 <meta name="viewport" content="width=device-width" /> 7 <meta name="MobileOptimized" content="320" /> 8 <meta name="copyright" content="Copyright © 2013 Sohu.com Inc. All Rights Reserved." /> 9 <meta name="description" content="手机搜狐" /> 10 <meta name="keywords" content="名站" /> 11 <link rel="apple-touch-icon-precomposed" href="images/logo-icon.png" /> 12 <title>名站-手机搜狐</title> 13 <link rel="stylesheet" href="css/common.css" media="all" /> 14 <link rel="stylesheet" href="css/main.css" media="all" /> 15 </head> 16 <body> 17 <header class="hd"> 18 <div class="h2"> 19 <div class="cTtl" style="padding-left: 15px;"> <a id="top"></a>名站导航 </div> 20 </div> 21 </header> 22 <main class="tab-content"> 23 <section class="common_block famous"> 24 <ul pbflag="famous"> 25 <li pbtag="1"> <a href="http://m.sohu.com/?_once_=000025_topdh_mz_01" class="fsohu">搜狐</a> </li> 26 <li pbtag="2"> <a href="http://m.sohu.com/f/AjUVzma/?_once_=000025_topdh_mz_03" class="fsogou">搜狗</a> </li> 27 <li pbtag="3"> <a href="http://m.sohu.com/f/nyQfuia/?_once_=000025_topdh_mz_02" class="fbaidu">百度</a> </li> 28 <li pbtag="4"> <a href="http://m.sohu.com/f/bIFnEza/?_once_=000025_topdh_mz_04" class="fsina">新浪</a> </li> 29 <li pbtag="5"> <a href="http://m.sohu.com/f/3YzAvea/?_once_=000025_topdh_mz_05" class="fqq">腾讯</a> </li> 30 <li pbtag="6"> <a href="http://m.sohu.com/f/a22ai2a/?_once_=000025_topdh_mz_06" class="f163">网易</a> </li> 31 <li pbtag="7"> <a href="http://m.sohu.com/f/QrEjeua/?_once_=000025_topdh_mz_07" class="fifeng">凤凰</a> </li> 32 <li pbtag="8"> <a href="http://m.sohu.com/f/fQnYN3a/?_once_=000025_topdh_mz_08" class="fvip">唯品会</a> </li> 33 <li pbtag="10"> <a href="http://m.sohu.com/f/iyErEra/?_once_=000025_topdh_mz_09" class="ftaobao">淘宝</a> </li> 34 </ul> 35 </section> 36 <div class="nav-urls"> 37 <ul class="urls"> 38 <li class="url sort"><a href="javascript:void(0);" class="btn"><b>·新闻</b></a></li> 39 <li class="url"> <a href="http://m.sohu.com/f/z6jiQfa/?_once_=000025_topdh_fl_1_1" class="btn"><b>人民</b></a> </li> 40 <li class="url"> <a href="http://m.sohu.com/f/nM7FNna/?_once_=000025_topdh_fl_1_2" class="btn"><b>新华</b></a> </li> 41 <li class="url"> <a href="http://m.sohu.com/f/BzE3Ina/?_once_=000025_topdh_fl_1_3" class="btn"><b>央视</b></a> </li> 42 <li class="url"> <a href="http://m.sohu.com/f/mUzi6ba/?_once_=000025_topdh_fl_1_4" class="btn"><b>环球</b></a> </li> 43 </ul> 44 <ul class="urls"> 45 <li class="url sort"><a href="javascript:void(0);" class="btn"><b>·体育</b></a></li> 46 <li class="url"> <a href="http://m.sohu.com/f/InI7jqa/?_once_=000025_topdh_fl_2_1" class="btn"><b>直播</b></a> </li> 47 <li class="url"> <a href="http://m.sohu.com/f/AZFrqua/?_once_=000025_topdh_fl_2_2" class="btn"><b>NBA</b></a> </li> 48 <li class="url"> <a href="http://m.sohu.com/f/IJzMR3a/?_once_=000025_topdh_fl_2_3" class="btn"><b>足球</b></a> </li> 49 <li class="url"> <a href="http://m.sohu.com/f/QJRZRva/?_once_=000025_topdh_fl_2_4" class="btn"><b>虎扑</b></a> </li> 50 </ul> 51 <ul class="urls"> 52 <li class="url sort"><a href="javascript:void(0);" class="btn"><b>·购物</b></a></li> 53 <li class="url"><a href="http://m.sohu.com/f/iyErEra/?_once_=000025_topdh_fl_4_1" class="btn"><b>淘宝</b></a></li> 54 <li class="url"><a href="http://m.sohu.com/f/yMR3Eza/?_once_=000025_topdh_fl_4_2" class="btn"><b>京东</b></a></li> 55 <li class="url"><a href="http://m.sohu.com/f/nueaQra/?_once_=000025_topdh_fl_4_3" class="btn"><b>唯品会</b></a></li> 56 <li class="url"><a href="http://m.sohu.com/f/m2MVbya/?_once_=000025_topdh_fl_4_4" class="btn"><b>美团</b></a></li> 57 </ul> 58 <ul class="urls"> 59 <li class="url sort"><a href="javascript:void(0);" class="btn"><b>·音乐</b></a></li> 60 <li class="url"><a href="http://m.sohu.com/f/mUNvYja/?_once_=000025_topdh_fl_11_1" class="btn"><b>百度</b></a></li> 61 <li class="url"><a href="http://m.sohu.com/f/RNNjUja/?_once_=000025_topdh_fl_11_2" class="btn"><b>酷狗</b></a></li> 62 <li class="url"><a href="http://m.sohu.com/f/jY73Aja/?_once_=000025_topdh_fl_11_3" class="btn"><b>酷我</b></a></li> 63 <li class="url"><a href="http://m.sohu.com/f/v2yuuea/?_once_=000025_topdh_fl_11_4" class="btn"><b>搜歌</b></a></li> 64 </ul> 65 <!--返回顶部--> 66 <section class="reTop"> <a href="#top" class="btn btn1"><i class="i iF iF1"></i>返回顶部</a> 67 <!--单击时为按钮a增加class：on--> 68 </section> 69 <!--返回顶部--> 70 <footer class="site"> 71 <nav class="foo" style="background-color:#333333;"> <a href="http://m.sohu.com/">首页</a> <a href="http://m.sohu.com/c/2/">新闻</a> <a href="http://m.sohu.com/c/3/">体育</a> <a href="http://m.sohu.com/c/4/">娱乐</a> <a href="http://m.sohu.com/c/395/">导航</a> </nav> 72 <p class="inf"> <a href="http://m.sohu.com/help/">留言</a><i class="hyp">-</i> <a href="http://m.sohu.com/c/432/">合作</a> </p> 73 <p class="cop">Copyright © 2018 Sohu.com</p> 74 </footer> 75 </div> 76 </main> 77 </body> 78 </html>
总结：关于HTML5列表和超链接这一块儿的内容，基本上在所有HTML文档里都会出现而且是大量出现，需要把它列入HTML5必须掌握的知识点。
HTML5
浙公网安备 33010602011771号