`

html5 新标签: 布局

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

在讲这些新标签之前,我们先看一个普通的页面的布局方式:

上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,而我们是通过class进行区分,并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范,搜索引擎只能去猜测某部分的功能,另外就是此页面程序交给视力障碍人士来阅读的话,文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况:



相关的HTML代码是:
 <body>
  <header>...</header>
  <nav>...</nav>
  <article>
   <section>...</section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
 </body>


 有了上面的直接的感官的认识后,我们下面一一来介绍HTML5中的相关结构标签。

section标签
  <section>标签,定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容,会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块,通常由内容及其标题组成。但section元素标签并非一个普通的容器元素,它表示一段专题性的内容,一般会带有标题。

  当我们描述一件具体的事物的时候,通常鼓励使用article来代替section;当我们使用section时,仍然可以使用h1来作为标题,而不用担心它所处的位置,以及其它地方是否用到;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非section。

 <section>
   <h1>section是什么?</h1>
   <h2>一个新的章节</h2>
   <article>
    <h2>关于section</h1>
    <p>section的介绍</p>
    ...
   </article>
 </section>


article标签
  <article>是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面其它内容使用。例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等等。一般来说,article会有标题部分(通常包含在header内),有时也会包含footer。article可以嵌套,内层的article对外层的article标签有隶属关系。例如,一篇博客的文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。
 <article>
  <header>
   <hgroup>
    <h1>这是一篇介绍HTML 5结构标签的文章</h1>
    <h2>HTML 5的革新</h2>
   </hgroup>
   <time datetime="2011-03-20">2011.03.20</time>
  </header>
  <p>文章内容详情</p>
 </article>


nav标签
   nav标签代表页面的一个部分,是一个可以作为页面导航的链接组,其中的导航元素链接到其它页面或者当前页面的其它部分,使html代码在语义化方面更加精确,同时对于屏幕阅读器等设备的支持也更好。
<nav>
 <ul>
  <li>厚德IT</li>
  <li>FlyDragon</li>
  <li>J飞龙天惊</li>
 </ul>
</nav>


aside标签
   aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告,成组的链接,侧边栏等等。

 <aside>
  <h1>作者简介</h1>
  <p>厚德IT</p>
 </aside>


header标签
  <header>标签定义文档的页眉,通常是一些引导和导航信息。它不局限于写在网页头部,也可以写在网页内容里面。通常<header>标签至少包含(但不局限于)一个标题标记(<h1>-<h6>),还可以包括<hgroup>标签,还可以包括表格内容、标识、搜索表单、<nav>导航等。
<header>
 <hgroup>
  <h1>网站标题</h1>
  <h1>网站副标题</h1>
 </hgroup>
</header>


footer标签
   footer标签定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。作为页面的页脚时,一般包含了版权、相关文件和链接。它和<header>标签使用基本一样,可以在一个页面中多次使用,如果在一个区段的后面加入footer,那么它就相当于该区段的页脚了。
 <footer>
   COPYRIGHT@厚德IT
 </footer>


hgroup标签
   hgroup标签是对网页或区段section的标题元素(h1-h6)进行组合。例如,在一区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来
 <hgroup>
  <h1>这是一篇介绍HTML 5结构标签的文章</h1>
  <h2>HTML 5的革新</h2>
 </hgroup>


figure 标签
   用于对元素进行组合。多用于图片与图片描述组合。
 <figure>
  <img src="img.gif" alt="figure标签" title="figure标签" />
  <figcaption>这儿是图片的描述信息</figcaption>
 </figure>


总结:
   有了新的结构性的标签的标准,让HTML文档更加清晰,可阅读性更强,更利于SEO,也更利于视障人士阅读。
分享到:
评论

相关推荐

    html和html5网站布局

    HTML5则进一步增强了布局能力,引入了一些新的标签,旨在更好地描述页面内容的结构,例如: 1. `&lt;article&gt;`:用于定义独立的内容块,可以脱离上下文单独理解。 2. `&lt;aside&gt;`:通常用来放置与主要内容相关的辅助信息...

    html5布局大全

    HTML5的新特性之一是增加了许多新的标签,如、、、、和等,这些元素为网页内容提供了更好的结构化表示。它们帮助搜索引擎更好地理解页面内容,同时对无障碍访问也提供了支持。例如,常用于定义页面或区域的头部,...

    HTML5布局之路

    主要内容包括:HTML5入门知识,网页整体布局,盒模型,浮动布局,定位布局,代码语义性,扩展性,文本样式的处理,表格表单,PC端网站开发实战与复习方法,移动端开发方法,HTML5新增结构标签,CSS3新增 资源太大,...

    HTML5全兼容九宫格布局

    在HTML5中,我们通常会利用新的标签如`&lt;section&gt;`、`&lt;article&gt;`和`&lt;div&gt;`来结构化页面,并结合CSS3的Flexbox或Grid布局来创建灵活的布局。 1. **Flexbox布局**:Flexbox(弹性盒模型)允许开发者轻松创建一维布局,...

    《HTML5布局之路》配套代码

    在HTML5中,新的标签如`&lt;header&gt;`, `&lt;nav&gt;`, `&lt;main&gt;`, `&lt;article&gt;`, `&lt;aside&gt;`和`&lt;footer&gt;`等,为结构化文档提供了更好的语义支持,使页面内容的组织更为清晰,也更利于搜索引擎优化(SEO)。 CSS(层叠样式表)在...

    HTML静态页面的标签

    5. 描述标签:、、,用于定义描述列表,dt 标签定义标题,dd 标签定义描述内容。 6. 表格标签:、、,用于定义表格,表格的数据存储在单元格里面。 7. 表单标签:、、、,用于定义表单,实现动态交互,通过查看,...

    HTML5+CSS3从新手到高手网页设计与网站布局一书的所有源码和实例

    HTML5是超文本标记语言的最新版本,它引入了许多新特性,如语义化标签(例如、、和),使得网页内容更加结构化;离线存储(localStorage和applicationCache)让网页可以在离线状态下运行;以及多媒体元素(和)使得...

    详解HTML5布局和HTML5标签

    一、新的文档类型声明...a,新增的HTML5标签-结构标签 结构标签:(块状元素) 有意义的div   标记定义一篇文章   标记定义一个页面或一个区域的头部  &lt;nav&gt; 标记定义导航链接   标记定义一个区域  &lt;aside&gt; 标

    html5新增标签和属性

    HTML5 新增标签和属性 HTML5 中新增了许多标签和属性,使得开发者可以更快速地了解和掌握 HTML5 技术,并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局,提高浏览器的解析速度,并且提供了更...

    html5 css3响应式布局介绍及设计流程 实现响应式布局的3种手段.zip_html5响应式布局怎么写

    首先,HTML5 在响应式布局中的作用主要体现在新增的语义化标签上,如`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`等。这些标签有助于构建清晰的页面结构,为CSS3提供更准确的样式应用基础。 CSS3是实现响应式...

    DIV+CSS网页布局基础-常用HTML标签介绍

    本教程将深入讲解`DIV+CSS`网页布局基础,特别是常用的HTML标签。 首先,我们要了解HTML的基础结构,这包括头部(`&lt;head&gt;`)、主体(`&lt;body&gt;`)和元信息(如`&lt;meta&gt;`标签)等。在`&lt;body&gt;`部分,我们经常会用到以下...

    html5 标签球

    综上所述,创建"HTML5 标签球"需要结合HTML5的新特性、CSS3的动画与布局技术,以及JavaScript的交互功能。通过合理运用这些工具和技术,可以构建出富有创新和用户体验的网页元素。压缩包中的index.html可能是项目的...

    html 文字布局 html 文字布局

    - **使用`&lt;p&gt;`标签**: `&lt;p&gt;`标签主要用于定义段落,当一个段落结束时,默认会在下一行开始新的段落。例如: ```html 这是第一段。 这是第二段。 ``` 上述代码将在两段文字之间自动插入空白行。 - **使用` ...

    可视化布局_html5_js_beganth5_css_可视化布局js_

    HTML5是现代Web开发的基础,它的新特性如语义化标签(如、、等)、离线存储、拖放功能、媒体元素等,极大地提升了网页的用户体验和开发者的工作效率。在这个练习中,你会学习如何使用HTML5创建结构清晰、内容丰富的...

    白色简约布局html5模板

    - 简约布局有利于视觉障碍用户使用屏幕阅读器,而HTML5的语义化标签更是提升了可访问性。 - 保证色彩对比度符合WCAG标准,方便色盲用户识别信息。 综上所述,"白色简约布局html5模板"不仅在视觉设计上体现了简约...

    HTML基本标签属性总结

    常用布局标签 有序:ol-li 无序:ul-li 定义描述:dl-dt-dd 分区:div 表格:table-tr-td 表格+表单:form-table-tr-td 行及标签: 换行:br 范围:span 图片:img&gt;、 超链接:a 连接地址:href ...

    纯DIV+CSS布局的标签云,扩展性好

    当新的标签加入时,只需要在HTML中添加对应的`&lt;div&gt;`元素,CSS和JavaScript可以自动适应这些变化。此外,通过模块化和组件化的开发方式,可以将标签云作为一个独立的组件复用在不同的页面或项目中。 总结来说,纯...

    05-HTML5实战

    资源名称:05-HTML5实战资源目录:1、HTML5实战:图片与标签配合制作页面2、HTML实战-极客学院播放视频页面布局3、HTML5开发项目实战:照片墙4、HTML5开发项目实战:列表切换5、HTML实战-标签切换效果6、HTML5开发...

    HTML5课程总结,新增标签

    HTML5 课程总结,新增标签 HTML5 是新一代的 HTML 标准,2014 年 10 月由万维网联盟(W3C)完成标准制定。HTML5 在狭义上是指新一代的 HTML 标准,在广义上是指整个前端。 HTML5 的优势包括: 1. 针对 JavaScript...

    HTML5+CSS3前端开发教程flex布局项目实战1

    在本教程的第一部分,我们将学习HTML5的基本知识,包括HTML5的新标签和API,以及HTML5的基本结构和布局。在第二部分,我们将学习CSS3的flex布局的基本知识,包括flex布局的基本概念和应用。在第三部分,我们将学习...

Global site tag (gtag.js) - Google Analytics