HTML5技术

我们服务的客户:1086个 其中:网站521 seo266 设计307 软件68

HTML5技术
首页 > 新技术>HTML5

网站制作技术之HTML5标签解析(一)

发布时间:2012-10-16

面的规划

Header区

Header区的例子包含了页面标题和副标题,< header>标签被用来创建页面的Header区的内容。除了网页本身之外,< header>标签还可以包含关于< section>和< article>的公开信息。这里创建的网页有该页面的一个Header区,这在高层设计中有给出,以及一个位于Article和Section区内部的Header区。清单1提供了一个< header>标签标记的例子。

清单1. < header>标签的例子

<header>
<h1>标题文字</h1>
<p> 文本或是图像可放在这里</p>
<p> Logo通常也放在这个地方</p>
</header>

< header>标签还可以包含一个< hgroup>标签,如清单2所示。< hgroup>标签把标题分组放在一起,使用< h1>到< h6>这些标题分级来在此处显示主标题和子标题。

清单2. < hgroup>标签的例子

<header>
<hgroup>
<h1>主标题</h1>
<h2>子标题 </h2>
</hgroup>
<p> 文本或是图像可放在这里</p>
</header>

Navigation区

你可以使用< nav>标签来创建页面的Navigation区。< nav>元素定义了一个专门用于导航的区域,< nav>标签应该用做主站点的导航,而不是用来放置被包含在页面的其他区域中的链接。Navigation区可以包含诸如清单3所示的代码。

清单3. < nav>标签的例子

<nav>
<ul>
<li>< a href="#" kesrc="#">Home</a></li>
<li>< a href="#" kesrc="#">About Us<a></li>
<li>< a href="#" kesrc="#">Our Products</a></li>
<li>< a href="#" kesrc="#">Contact Us</a></li>
</ul>
</nav>

Article和Section区

你设计的页面包含了一个Article区,该区域存放了页面的实际内容。你使用< article>标签来创建这一区域,该标签定义的内容可独立于页面中的其他内容使用。例如,如果想创建一个RSS源(RSS feed)的话,那么你可以使用< article>来唯一标识该内容。< article>标签标识了可被删除、可被放置在另一上下文中,并且是可被完全理解的内容。

Acme United规划中的Article区包含了三个Section区,可使用< setction>标签来创建这几个区域。< section>包含了web内容的相关组件区域,< section>标签——以及< article>标签——可以包含页眉、页脚,或是其他需要用来完成该部分内容的组件。< section>标签用于分组的内容,< section>标签和< article>标签通常以一个< header>为开始并以一个< footer>结束,标签的内容则放在这两者之间。

< section>标签也可以包含< article>标签,就像< article>标签可以包含< section>标签一样。< section>标签应该用来分组相类似的信息,而< article>标签则应该是用来放置诸如一篇文章或是博客一类的信息,这些内容可在不影响内容含义的情况下被删除或是被放置到新的上下文中。< article>标签,正如它的名称所暗示的那样,提供了一个完整的信息包。相比之下,< section>标签包含的是有关联的信息,但这些信息自身不能被放置到不同的上下文中,因为这样的话其所代表的含义就会丢失。

<article>和<section>标签的用法例子请参见清单4。

清单4. < article>标签和< section>标签的例子

<article>
<section>
Content
</section>
<section>
Content
</section>
</article>
<section>
<article>
Content
</article>
<article>
Content
</article>
</section>

图像元素

<section>和< article>标签这两者,以及< header>和< footer>标签都可以包含< figure>标签,你使用该标签来加入图像、图表和照片。

<figure>标签可以包含<figcaption>,该标签相应的包含了包含在< figure>标签中的图形的标题,其允许你输入描述,把图形和内容更加紧密的关联起来。清单5提供了一个< figure>和< figcaption>标签结构的例子。

清单5. < figure>和< figcaption>标签的例子

<figure>
<img src="/figure.jpg" kesrc="/figure.jpg" width="304" height="228" alt="Picture">
<figcaption>Caption for the figure</figcaption>
</figure>

易势科技总公司官方网站 易势科技CMS网站