HTML5新格式

来源：互联网发布：淘宝网买飞机是真是假编辑：程序博客网时间：2024/05/28 15:35

在之前的HTML页面中，大家基本上都是用了Div+CSS的布局方式。而搜索引擎去抓取页面的内容的时候，它只能猜测你的某个Div内的内容是文章内容容器，或者是导航模块的容器，或者是作者介绍的容器等等。也就是说整个HTML文档结构定义不清晰，HTML5中为了解决这个问题，专门添加了：页眉、页脚、导航、文章内容等跟结构相关的结构元素标签。

<section>标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或输出到word文档中。

<section>
<h1>这是我自己的section测试</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>

注意他和div

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。

通常不推荐为那些没有标题的内容使用section元素组合网页或区段的标题，修改hgroup样式后，被他包围的h1、h4之类的标题元素就会同时继承他设置的样式。

<hgroup> 标签用于对网页或区段（section）的标题进行组合。

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

HTML5中的新元素标签<nav>用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。
一直以来，我们习惯于使用形如<div id="nav">或<ul id="nav">这样的代码来写页面的导航；在HTML5中，我们可以直接将导航链接列表放到<nav>标

<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>________________________________________________________________
一个页面中可以拥有多个<nav>元素，作为页面整体或不同部分的导航；下面是W3C给出的一个代码示例：

<body>
<h1>The Wiki Center Of Exampland</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/events">Current Events</a></li>
...more...
</ul>
</nav>
<article>
<header>
<h1>Demos in Exampland</h1>
<p>Written by A. N. Other.</p>

</header>

<nav>
<ul>
<li><a href="#public">Public demonstrations</a></li>
<li><a href="#destroy">Demolitions</a></li>
...more...
</ul>
</nav>
<div>
<section id="public">
<h1>Public demonstrations</h1>
<p>...more...</p>
</section>
<section id="destroy">
<h1>第一章：出山</h1>
<p>...more...</p>
<h1>第二章：威震武林</h1>
<p>...more...</p>
</section>
...more...

</div>

<footer>
<p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p>
</footer>
</article>
<footer>
<p><small>? copyright 1998 Exampland Emperor</small></p>
</footer>

</body>

在这个示例中，我们可以看到<nav>不仅可以用来作为页面全局导航，也可以放在<article>标签内，作为单篇文章内容的相关导航链接到当前页面的其他位置。
__________________________________________________________________

注意他和selection的区别
section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。
article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分，有时也会包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

Article

“在文档，页面，应用或是站点上的一个独立部分，并且大体上，是可独立分配，或是重复使用的，例如在发布时。这个可以是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。”

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul> r
<li class="author">Author Name</li>
<li class="categories">Save in Categories</li>
</ul>
</div>
</header>
<div class="post-content">
Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
halvah gummies danish biscuit applicake gingerbread jelly-o pastry.
</div>
</article>

<aside> 标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
aside字面理解为“旁边”，在html5中范围更广一点，是跟主内容相关，但是又可以独立的内容，可以是广告、引用、侧边栏等等。
aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其它类似的有别与主要内容的部分。
html5站的例子就是新闻的内容页或者列表页，以列表页为例，主要内容为新闻的分页列表，右侧的则为aside，显示为新闻列表相关的最新新闻。
在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

<aside>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
</aside>

案例：
<!doctype html>
<header>
' ....
</header>
<article>
<h2>新闻列表</h2>
<ul>
主内容
</ul>
</article>
<aside>
<section>
<h3>Html5最新动态</h3>
</section>
<section>
<h3>Html5新增元素</h3>
</section>
<section>
<h3>Html5新增Api</h3>
</section>
<section>
<h2>Html5文章推荐</h2>
</section>
</aside>
<footer>

</footer>

最多用于图文并茂
<figure>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</figure>
以前的写法
<li>
<img src="" /><p>title</P>
</li>
而在html5中有了新标签更能语义化的定义出这中图片列表，那就是figure标签
w3c赋予的定义：figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figure>
<figcaption>小猫猫</figcaption>
<img src="?？？" width="350" height="234" />
案例
</figure>
<dl>
<dt>这是我们的最新的商品</dt>
<dd><img src="images/adv.jpg"></dd>
</dl>
<figure>
<figcaption>这是我们的最新的商品</figcaption>
<figcaption><img src="images/adv.jpg"></figcaption>
</figure>

dialog
<dialog>
<dt>老师</dt>
<dd>2+2 等于？</dd>
<dt>学生</dt>
<dd>4</dd>
<dt>老师</dt>
<dd>答对了！</dd>
</dialog>

<meter value="9" min="0" max="10"></meter><br>
<meter value="0.6">60%</meter>

progress
<progress max=10 min=0 value=4>

</progress>

进度条

<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>

<p>
我在<time datetime="2008-02-14">情人节</time>有个约会。
</p>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

menu
<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签。
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

type
1）context：上下文；
2）toolbar：工具栏；
3）list：列表

定义显示那种类型的菜单。默认值是 "list"。
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。

<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

补充1：
DTD 是一套关于标记符的语法规则。它是XML1.0版规格得一部分,是html文件的验证机制,属于html文件组成的一部分。
DTD 是一种保证html文档格式正确的有效方法，可以通过比较html文档和DTD文件来看文档是否符合规范，元素和标签使用是否正确。一个DTD文档包含：元素的定义规则，元素间关系的定义规则，元素可使用的属性，可使用的实体或符号规则。

XML文件提供应用程序一个数据交换的格式,DTD正是让html文件能够成为数据交换的标准,因为不同的公司只需定义好标准的DTD,各公司都能够依照DTD建立html文件,并且进行验证,如此就可以轻易的建立标准和交换数据，这样满足了网络共享和数据交互。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

0 0