HTML语义化的理解

2018-06-24 01:15:33来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、什么是HTML语义化?

“语义化”指的是在需要更少的人类干预的情况下,能够研究和手机信息,让网页能够被机器理解,最终让人类受益。

语义化的目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。很明显Hx系列看起来很像标题,因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

2、HTML语义化有什么好处?

语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。
语义 Web 技术有助于利用基于开放标准的技术,从数据、文档内容或应用代码中分离出意义。
3、为什么要HTML语义化?
  • 在没有css的情况下,页面也能呈现出比较好的内容结构、代码结构。
  • 用户体验较好:例如:label标签的活用、title、alt用于解释名词或解释图片。
  • 方便其他设备解析(阅读器、移动设备)以意义的方式来渲染网页。
  • 便于团队维护:语义化的HTML更具可读性,团队遵循W3C标准。
  • 有利于SEO:和搜索引擎建立友好的交流,有利于爬虫抓取更多的有效信息。
4、HTML语义化标签
  • header元素

 该元素是网页或者section的页眉部分,通常包含h标签,包括网站标志、全局导航、全站链接、搜索框等。

也可以包含一节的目录或者nav或者相关的logo。

一个页面可以有多个header标签。

eg、

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>
  • title元素

该元素用来简短的描述网页内容,在页面中唯一存在。

搜索引擎会将title作为判断页面主要内容的指标,有效的title应该包含几个与页面内容密切相关的关键字,建议将title核心内容放在前60个字符中。

  • foot元素

该元素代表网页或section的页脚,通常包含该节内容的基本信息,或者代表附录、索引、许可协议、标签类别等信息。

一个页面中可以有多个footer,可以是任何网页或section的底部。

eg、

eg、
<footer>
    COPYRIGHT@浮川之畔
</footer>
  • hgroup元素

该元素代表网页或section的标题。可以将h1到h6的标签放在里面。

注:如果只有一个h标签,就不用hgroup。

如果有多个连续的h标签就用hgroup。

eg、

eg、
<hgroup>
    <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
    <h2>HTML 5</h2>
</hgroup>
  • nav标签

该元素是页面的导航链接区域,仅对页面中重要的链接群使用。

用来定义页面的主要导航部分。

eg、

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>
  • aside元素

该元素用来指定附注栏,通常被包含在article元素中作为主要内容的附属部分,其中的内容可以是与当前文章有关的相关资料、标签、名词解释等,是特殊的section。

 eg、

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>浮川之畔,新入门码农</p>
    </aside>
</article>
  • main元素

该元素是页面的主体内容,一个页面只能使用一次。

  •  article元素

该元素包含一个报纸一样的东西,代表一个在文档、页面或网站中自成一体的内容。

如果在article中再嵌套article就代表内嵌的article中的内容和外部的是有关系的。

eg、

<article>

    <header>
        <h1>一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>

    <p>文章内容..</p>

    <article>
        <h2>评论</h2>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈哈哈</p>
        </article>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈?哈?哈?</p>
        </article>

    </article>

</article>

article内部还可以嵌套section 

eg、

<article>

    <h1>前端技术</h1>
    <p>前端技术有那些</p>

    <section>
        <h2>CSS</h2>
        <p>样式..</p>
    </section>

    <section>
        <h2>JS</h2>
        <p>脚本</p>
    </section>

</article>

section 内部嵌套article。article是大主体,section是构成这个大主体的一部分。

eg、

<section>
    
    <h1>介绍: 网站制作成员配备</h1>

    <article>
        <h2>设计师</h2>
        <p>设计网页的...</p>
    </article>

    <article>
        <h2>程序员</h2>
        <p>后台写程序的..</p>
    </article>

    <article>
        <h2>前端工程师</h2>
        <p>给楼上两位打杂的..</p>
    </article>

</section>

使用注意:

自身独立使用:article

相关内容使用:section

无语义使用:div

  • section元素

该元素代表网页中的‘节或段。“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

section标签内通常带有标题。

一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页,最好用article。section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。

article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div

eg、

<section>
    <h1>section是啥?</h1>
    <article>
        <h2>关于section</h1>
        <p>section的介绍</p>
        <section>
            <h3>关于其他</h3>
            <p>关于其他section的介绍</p>
        </section>
    </article>
</section>
  • small元素

该元素指定细则,输入免责声明、注解、署名、版权等。只能用于短语,不能用在长的法律声明。

  • address元素

该元素用来表示作者、相关人士或组织的联系信息。

  • del元素

该元素表示被移除的内容。

  • ins元素

该元素表示被添加的内容。

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:【响应式】foundation栅格布局的“尝鲜”与“填坑”

下一篇:XML语言学习随笔