资讯专栏INFORMATION COLUMN

前端面试题-HTML结构语义化

chuyao / 661人阅读

摘要:一语义化的背景结构语义化,是近几年才提出来的,对比之前的结构,大多是一堆没有语义的标签。用的最多的就是,为了改变这种现状,开发者们和官方提出了结构语义化的概念,并且在添加了很多语义化标签。

一、HTML语义化的背景

HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签。用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML结构语义化的概念,并且在 HTML5 添加了很多语义化标签。

二、HTML语义化的概念

语义化是指根据内容的结构,选择合适的标签,便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析。

三、HTML语义化的必要

随着互联网的发展,WEB承载越来越多的信息(图片,音频,视频等),人们开始用机器来处理网络信息,就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘,所以让机器能够更好地读懂WEB上内容就变得越来越重要。

传统的Web由文档组成,W3C希望通过一组技术支撑 “数据的Web”,即 Web of Data,将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环,帮助人们创建数据并存储在Web上,创建相关的词汇表及数据的处理规则。
四、HTML语义化的作用 4.1 页面结构清晰

去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。

4.2 支持更多设备

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

4.3 利于SEO优化

和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

4.4 便于团队开发和维护

在团队中大家都遵循W3C标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

五、HTML语义化的方法

(1)根据文档上下文结构合理的选用最适合表达当前语义的标签;

(2)尽可少使用无语义的标签

(3)不要使用带有样式的标签,比如: 等,使用 CSS 设置;

(4)标题标签的使用应该根据重要性逐级递减,没有断层,并且一个页面只能有一个

(5)提高关键词密度,如图像的替代文本 alt,提示文本 title;

(6)正确使用内容容器,比如段落

,列表

    ,
      ,
    1. ,
      ,
      ,
      ;

      (7)需要强调的文本,可以使用 标签(浏览器默认样式,能用 CSS 设置就不用), 默认样式是加粗(不用 ), 是斜体(不用 );

      (8)表格注意使用,标题 ,表头 ,表格主体(正文),表注(页脚)。 定义表格行, 定义表头, 定义表格单元。

      (9)表单域使用

      标签,并且 标签为
      定义标题;

      (10)每个 标签对应的说明文本都需要使用

      阅读更多

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115862.html

相关文章

  • 前端面试-HTML结构语义

    摘要:一语义化的背景结构语义化,是近几年才提出来的,对比之前的结构,大多是一堆没有语义的标签。用的最多的就是,为了改变这种现状,开发者们和官方提出了结构语义化的概念,并且在添加了很多语义化标签。 一、HTML语义化的背景 HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签。用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTM...

    booster 评论0 收藏0
  • Web前端经典面试(一)

    摘要:本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案。网页的行为层负责回答内容应该如何对事件做出反应这一问题。 本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案。眼看新的一年马上就要开始了,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。(如有错误或更好的答案,欢迎指正,水平有限,望...

    princekin 评论0 收藏0
  • Web前端经典面试(一)

    摘要:本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案。网页的行为层负责回答内容应该如何对事件做出反应这一问题。 本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案。眼看新的一年马上就要开始了,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。(如有错误或更好的答案,欢迎指正,水平有限,望...

    Batkid 评论0 收藏0
  • Web前端经典面试(一)

    摘要:本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案。网页的行为层负责回答内容应该如何对事件做出反应这一问题。 本篇收录了一些面试中经常会遇到的经典面试题,并且都给出了我在网上收集的答案。眼看新的一年马上就要开始了,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。(如有错误或更好的答案,欢迎指正,水平有限,望...

    chanthuang 评论0 收藏0

发表评论

0条评论

chuyao

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<