百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> 什么是HTML语义化?html语义化的益处(总结)
分享文章到:

什么是HTML语义化?html语义化的益处(总结)

发布时间:09/01 来源:未知 浏览: 关键词:
本章给大家介绍什么是HTML语义化?html语义化的好处(总结),有必然的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。

什么是HTML语义化?

根本上都是环绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等

按照内容的构造化(内容语义化),选中适宜的标签(代码语义化)便于开发者阅读和写出更文雅的代码的同时让阅读器的爬虫和机器很好地解析。

语义化的HTML构造到底有什么好处?

我们知道HTML5新增的标签,比方<header>和<footer>,html正在朝着愈加强健的语义化的HTML构造开展,xhtml2在这点上没html5先进,这也是xhtml2死亡的一个缘由,这一点也说明了语义化的HTML构造是html的开展趋势。

  1. 为了在没有CSS的状况下,页面也能显现出很好地内容构造、代码构造:为了裸奔时好看;

  2. 会员体验:例如title、alt用于说明名词或说明图片信息、label标签的活用;

  3. 有益于SEO:和搜索引擎创立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依靠于标签来肯定上下文和各个关键字的权重;

  4. 利便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

  5. 便于团队开发和保护,语义化更具可读性,是下一步吧网页的重要动向,遵照W3C标准的团队都遵照这个标准,可以减少差别化。

写HTML代码时应留意什么?

  1. 尽大概少的使用无语义的标签div和span;

  2. 在语义不明显时,既可以使用div或者p时,尽量用p, 由于p在默许状况下有上下间距,对兼容非凡终端有益;

  3. 不要使用纯样式标签,如:b、font、u等,改用css设定。

  4. 需要强调的文本,可以包括在strong或者em标签中(阅读器预设样式,能用CSS指定就不消他们),strong默许样式是加粗(不要用b),em是歪体(不消i);

  5. 使用表格时,标题要用caption,表头用thead,主体部分用tbody包抄,尾部用tfoot包抄。表头和一样单元格要区分开,表头用th,单元格用td;

  6. 表单域要用fieldset标签包起来,并用legend标签说明表单的用处;

  7. 每个input标签对应的说明文本都需要使用label标签,并且通过为input设定id属性,在lable标签中设定for=someld来让说明文本和相对应的input关联起来。

HTML5新增了语义标签

HTML 5的革新之一:语义化标签一节元素标签。

在HTML 5出来此前,我们用div来表示页面章节,但是这些div都没有实际意义。(即便我们用css样式的id和class形容这块内容的意义)。这些标签只是我们供给给阅读器的指令,只是定义一个网页的某些部分。但此刻,那些此前没“意义”的标签由于由于html5的显现消逝了,这就是我们平常说的“语义”。

看下图没有用div标签来规划

1.png

W3C定义了这些语义标签,不成能完全相符我们有时的设计目标,就像拟定出来的法律不成能流传100年都不改动,更何况它才拟定没多久,不成能这些语义标签对所以设计目标的顺应。只是必然程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不克不及由于有了HTML 5标签就弃用了div,每个事物都有它的独占作用的。

节点元素标签因使用的地方不一样,他们可分为:节元素标签、文本元素标签、分组元素标签分开来讲解HTML5中新增添的语义化标签和使用总结。

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h1>网站副标题</h1>
    </hgroup>
</header>

以上就是啥是HTML语义化?html语义化的好处(总结)的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板