首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 生活随笔 > 正文

    HTML5,语义化结构化规范化:语义化

    时间：2018-08-10来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

     HTML结构更加清晰、规范，学习HTML5优化结构的思路。

    HTML 5 添加了一些新元素，用来标识常用的结构，是html更具语义化，可是我们无法直接使用，即使可能用到还要等他个十年八年的。

    那就像微格式一样，使用class代替，或者随意点，使用id和class名来代替，让自己的结构更加清晰化，可以推广为规范，让团队协作更加顺畅。

    一些新增的结构标记

    ◎ section：这可以是书中的一章或一节，实际上可以是在 HTML 4 中有自己的标题的任何东西
    ◎ header：页面上显示的页眉；与 head 元素不一样
    ◎ footer：页脚；可以显示电子邮件中的签名
    ◎ nav：指向其他页面的一组链接
    ◎ article：blog、杂志、文章汇编等中的一篇文章

    一些例子

    HTML5的文档结构

    <header>...</header>
     <nav>...</nav>
     <article>
     <section> ... </section>
     </article>
     <aside>...</aside>

     <footer>...</footer>

    XHTML的文档结构

    <div id="header">header</div>
    <div id="nav">nav</div>
    <div class="article">
      <div class="section">section</div>
    </div>
    <div id="aside">aside</div>
    <div id="footer">footer</div>

    HTML5的图片结构

    <figure id="fig2">
      <legend>Figure 2. Install Mozilla XForms dialog</legend>
      <img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
    </figure>

    XHTML的图片结构

    <div class="figure">
      <h4 class="legend">Figure 2. Install Mozilla XForms dialog</h4>
      <img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
    </div>
     
    HTML5的加上标记
      
    m 元素表示文本被 “加上标志”，但是不一定要强调。可以把它想像成书中突出显示的一节。
    Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本，搜索词就被加上标志。例如，如果搜索 “Egret”，那么缓存的 Google 页面可能像下面这样：

    The Great <m>Egret</m> (also known as the American <m>Egret</m>)  is a large white wading bird found worldwide.The Great <m>Egret</m> flies with slow wing beats. The scientific name of the Great <m>Egret</m> isCasmerodius albus.XHTML的加上标记The Great <span class="m">Egret</span> (also known as the American <span class="m">Egret</span>)  is a large white wading bird found worldwide.The Great <span class="m">Egret</span> flies with slow wing beats. The scientific name of the Great <span class="m">Egret</span> isCasmerodius albus.

    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文HTML5,语义化结构化规范化:语义化由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.