一个前端面的试题-HTML结构语义化记录
杨成江 2018-03-29 来源 : 阅读 482 评论 0

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

一、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. ,

    2. ,

      • ,
      • ,

      • ;

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

(8)表格注意使用,标题

,表格主体(正文),表注(页脚)。定义表格行,

,表头
定义表头,定义表格单元。

(9)表单域使用

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

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

本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 1 不喜欢 | 0
看完这篇文章有何感觉?已经有1人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

青春为马 不负韶华

  • 95
    文章
  • 4780
    人气
  • 85%
    受欢迎度

已有13人表明态度,85%喜欢该老师!

进入TA的空间
名师指导 直通车
  • 索取资料 索取资料 索取资料
  • 答疑解惑 答疑解惑 答疑解惑
  • 技术交流 技术交流 技术交流
  • 职业测评 职业测评 职业测评
  • 面试技巧 面试技巧 面试技巧
  • 高薪秘笈 高薪秘笈 高薪秘笈
TA的其他文章 更多>>
web前端经典面试题汇总
经验技巧 89% 的用户喜欢
微信小程序跳坑指南
经验技巧 75% 的用户喜欢
web前端后半场-大前端概念究竟是怎么样的?
经验技巧 100% 的用户喜欢
绝密-web前端大公司面试题二
职场感悟 100% 的用户喜欢
WEB前端如何提升页面渲染效率
经验技巧 100% 的用户喜欢
其他海同名师 更多>>
刘新华
刘新华 联系TA
实力型。激情饱满,对专业充满热情
吴翠红
吴翠红 联系TA
独创“教、学、练、测”循环教学模式
吕益平
吕益平 联系TA
熟悉企业软件开发的产品设计及开发
黄泽民
黄泽民 联系TA
擅长javase核心技术
程钢
程钢 联系TA
擅长大型企业商业网站开发和管理
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:13167058313
小职老师的微信号:13167058313

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计