实验二 HTML5新增的语义标签
1. 实验内容
分别设计实例，学习新增的结构元素：Section、article、aside、header、hgroup、footer、figure等语义标签的使用方法。
2. 实验过程
HTML5新增加了一些新的元素和属性，反映典型的现代网站的用法。其中有些是技术上类似<div>和<span>标签，但有一定的含义，例如<nay>（网站导航块）和<footer>，这种语义标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。也提供了新的功能标签，如媒体播放器<audio><video>标记。还有一些过时的HTML4标记将取消，包括纯粹用作显示效果的标记，如和。因为它们已经被CSS取代。
曾经，网页编写会频繁使用<table>这样的没有任何语义的布后，不过最终还是慢慢的接受了相对更语义化的<div> 布后替代了，并且开始调用外部样式表。
但不幸的是，代码中大量:使用<div>标记又太单- 了，而复杂的网页没计需要大量不同的标签结构代码，我们把它叫做“<div>-soup”综合症。
现在，HTML5利CSS3正跃跃欲试的等待大家，新增加了和布后相关的多种语义标记。
元素名
说明
section
表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用标记文档结构。
article
表示页面中的一块与上下文不相关的独立内容，例如博客中的一篇文章
    aside
表示article元素内容之外的，与article元素内容相关的辅助信息。
header
表示页面中一个内容区块或整个页面的标题。
hgroup
用于整个页面或页面中一个内容区块的标题进行组合。
footer
表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名，创建日期及创作者联系信息。
nav
表示页面中导航链接的部分
figure
表示一段独立的流内容，一般表示文档主体流内容中的一不独立单元，便用figcaption元素为figure元素组添加标题。
实例：
<article>
<header>
<h1>Div 布局示范</h1>
<p>发表于2015年01月10日</p>
</header>
<section>
<p>内容文本等等.</p>
<p>内容文本等等.</p>
<p>内容文本等等.</p>
</section>
<footer>
<p>Tags:HMTL,代码，演示</p>
</footer>
</article>
尽管这有些勉强，但这个实例还是可以说明使用HTML4对于一个复杂的页面设计进行，代码化后依然过于臃肿。
不过HTML5元素富有更细致的语义，可以代替那些毫无语义<div>标签，并同时为CSS的调用提供了“自然”的CSS钩子。这种语义化的特性不仅提升了我们网页的质量和语义，并且.大量减少了曾经代码中用于CSS必须调用的class 和id属性。
事实上，后面课程中介绍的CSS3也是可以忽略掉所有class 和id 的。现在布局中结合了富有新的语义化标记的HTML5、CSS3为web设计师们的网页提供了神一般的力量。
让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript, Opera, FireFox
等其他非IE浏览器就会忽视这段代码，也不会存在http请求。<!-[if IE]>
<script src="http://yun.itxdl/js/htm15.js"></script>
<![endif]>
上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必多在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。
使用HTML5编写一下代码并测试：
<!DOCTYPE html>
<html>
<head>
  <title>万能搜索——网络百科全书</title>
</head>
<body>
<body bgcolor="#CCCCCC">
<article>
<header>
  <h1>万能搜索</h1>
  <a href="/点此搜索帮助/">点此搜索  帮助</a>
</header>
</article>
<aside>
<h4>NetEase cloud music</h4>
<p>The NetEase cloud music is a theme park in Disney World.</p>
</aside>
<hgroup>
<h3>The rest of </h3>
</hgroup>
<figure>
  <p>There</p>
</figure>
<nav>
<a href="/发现音乐/">发现音乐</a> |
<a href="/我的音乐/">我的音乐</a> |
<a href="/朋友/">朋友</a> |
<a href="/商城/">商城</a>
</nav>
<section>
<h3>网易云音乐</h3>
</section>
<style>
body{text-align:center}
#footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%} 
footer{ background:#B8860B;border-top:1px solid #000; padding:10px 0 30px 0; width:100script在html中的用法
%}
.color-F00{ color:#F00} 
.STYLE2 {font-size: 16px}
.STYLE3 {color: #333333}
</style>
<footer class="color-F00">
  <p>网易云音乐</p>
  <p>Contact information: <a href="mailto:music.163/">music.163/</a>.</p>
</footer>
<form action="/demo/demo_form.asp">
Account:<br>
<input type="text" name="Account" value="Lay">
<br>
Password:<br>
<input type="text" name="Password" value="******">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交，您的信息将被提交至服务器，我们保证不会泄露。</p>
</body>
</html>
测试结果：
在Chrome中的测试结果：
在Opera，IE11、Safari、Firefox浏览器中均可使用。
3. 实验分析
通过实验，可以看出HTML5的兼容性更好，编写更为简洁，HTML5新增加新的元素和属性，反映典型的现代网站的用法。从使用的特点上来看，HTML5相对与前版本来看，给人的感觉就是更加人性化。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。