html5常用标签

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

- header&footer
- section
- article
- aside
- hgroup
- nav
- figure
- dialog
- meter &progress
- time
- menu
- type
- datalist

1.header&footer

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

header相当于div中的 <div id="header" >
footer相当于div中的 <div id="footer" >
是简化方式写，但是更便于查看

2.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>

注意：（section和div）

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
通常不推荐为那些没有标题的内容使用section元素

3.article
article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分，有时也会包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。
“在文档，页面，应用或是站点上的一个独立部分，并且大体上，是可独立分配，或是重复使用的，例如在发布时。这个可以是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。

<article class="post">
<header>
<h1>This is Blog Post Title</h1>
<div class="post-meta">
<ul>
<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>

3.aside
标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

aside字面理解为“旁边”，在html5中范围更广一点，是跟主内容相关，但是又可以独立的内容，可以是广告、引用、侧边栏等等。

aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其它类似的有别与主要内容的部分。

html5站的例子就是新闻的内容页或者列表页，以列表页为例，主要内容为新闻的分页列表，右侧的则为aside，显示为新闻列表相关的最新新闻

在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。
<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>

4.hgroup
组合网页或区段的标题，修改hgroup样式后，被他包围的h1、h4之类的标题元素就会同时继承他设置的样式。
<hgroup> 标签用于对网页或区段（section）的标题进行组合。

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

5.nav
<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>

6.figure 最多用于图文并茂
<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>
<dl>
<dt>这是我们的最新的商品</dt>
<dd><img src="images/adv.jpg"></dd>
</dl>
<figure>
<figcaption>这是我们的最新的商品</figcaption>
<figcaption><img src="images/adv.jpg"></figcaption>
</figure>

7.dialog

8.meter &progress

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

----------

9.time

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

----------

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

10.menu
<menu> 标签定义菜单列表。当希望列出表单控件时使用该标签。

11.type

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

定义显示那种类型的菜单。默认值是 "list"。

12.datalist
<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 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">

posted @ 2015-08-09 22:25 柒柒701 阅读(1416) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

柒柒701

html5常用标签

公告