欢迎光临!中国网页设计提供最新的免费网页制作教程,网页设计技术,HTML5+DIV3...中国站长必上的网站。
加入收藏设为首页广告合作
您当前位置:网站首页 >> 网页制作 >> HTML/HTML5 >> HTML5语义化标记使用示例
  • 网页配色
  • 网页布局
  • 设计欣赏
  • 网页设计理论
  • HTML/HTML5
  • CSS
  • Javascript
  • Dreamweaver
  • FLASH
  • HTML5语义化标记使用示例

    来源:中国网页设计 浏览:588

    内容提要:介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    article

    -- 解释 
    article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

    -- 示列 
    <article>
    <h1>文章标题</h1>
    这是一篇文章
       <article>评论1...</article>
        <article>评论2...</article>
    </article>

    section

    -- 解释 
    section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    -- 示列 
    <body>
    <section>
       <h1>章节一</h1>
        <p>详细内容...</p>
    </section>
    <section>
       <h1>章节二</h1>
        <p>详细内容...</p>
    </section>
    </body>

    aside

    -- 解释 
    aside 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

    -- 示列 
    <body>
    <aside>
    热门文章
    </aside>
    <aside>
    广告
    </aside>
    <article>
    <h1>文章标题</h1>
    这是一篇文章
       <article>评论1...</article>
        <article>评论2...</article>
    </article>
    </body>

    hgroup

    -- 解释 
    hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

    -- 示列 
    <hgroup>
    <h1>The reality dysfunction</h1>
    <h2>Space is not the only void</h2>
    </hgroup> <hgroup>
    <h1>Dr. Strangelove</h1>
    <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
    </hgroup>

    time

    -- 解释 
    time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样, 举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。

    -- 示列 
    <p>我们在每天早上 <time>9:00</time> 开始营业。</p> 
    <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

    mark

    -- 解释 
    mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

    -- 示列 
    <p>Do not forget to buy <mark>milk</mark> today.</p>

    figure

    -- 解释 
    figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    -- 示列 
    <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

    figcaption

    -- 解释 
    figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    -- 示列 
    <figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

    发表评论 共有0人对本文发表评论
    网名:
    评论:
    验证:
    (网友评论仅供表达个人看法,并不表明本站同意其观点或证实其描述)
    联系我们 - 网站调查 - 免责声明 - 站长简介 - 站点综合查询 - 课件习题 - 友情链接 - 站长统计