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

一、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)尽可少使用无语义的标签 <div> 和 <span>;

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

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

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

(6)正确使用内容容器,比如段落 <p>,列表 <ul>, <ol>, <li>, <dl>, <dt>, <dd>;

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

(8)表格注意使用,标题 <caption>,表头 <thead>,表格主体(正文)<tbody>,表注(页脚)<tfoot>。<tr> 定义表格行,<th> 定义表头,<td> 定义表格单元。

(9)表单域使用 <fieldset>标签,并且<legend> 标签为 <fieldset> 定义标题;

(10)每个 <input> 标签对应的说明文本都需要使用 <label> 标签,通过为 <input> 设置 id 属性,并且在 <lable> 标签中设置 for=id 使说明文本和对应的 <input> 关联。

阅读更多

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

总有一款适合你的协同设计工具

协同设计是当下技术行业技术更新的一个重要方向,也是设计类工具软件发展的必然趋势。它,不单是一个设计类的专业术语,更是一种商业化的服务模式。

11220
来自专栏前端学习归纳总结

CSS盒模型及边距问题

盒模型是CSS的基石之一,页面的每一个元素都被看作一个矩形框,分别由外边距,边框,内边距,内容组成,

10520
来自专栏无原型不设计

Sketch 和 PS中的设计图如何实现“自动切图”?

切图是很多UI设计师的一项日常工作。平时做完设计图,要将设计稿切成便于制作成页面的图片,并标注好尺寸和间距,交付给前端来完成html+css布局的静态页面,有利...

14820
来自专栏javascript趣味编程

2.3.1 基于easyUI框架写加法器

easyUI是一个第三方控件库,内容很全面。比如我们做一个加法计算程序,打开其官网,找到示例修改到自己想要的结果。先找到其相关内容:

16710
来自专栏TheOneGIS空间站

使用Maven构建JavaFX程序(HelloWorld示例)

本工程包含一个main入口函数类,一个controller类,资源文件包括一个fxml文件,一个css样式文件。 工程目录如下:

36710
来自专栏TheOneGIS空间站

JavaFX入门(五):使用CSS样式美化你的UI控件

CSS(层叠样式表,Cascading Style Sheets)原来是被用来在网页开发中表现HTML元素样式的一种文本标记语言。HTML用来展现内容,CSS被...

80550
来自专栏前端学习归纳总结

CSS定位概述

如果对一个元素进行相对定位,它将出现在它所在的位置上,然后可以通过设置垂直或者水平位置,让这个元素“相对于”它原来的位置进行移动,这时元素依然占据原来的位置,但...

15620
来自专栏前端桃园

另外的视角来看 antd 这件事儿

今天圣诞节,所以在 type 是 primary 的 Button 上都加上了雪花。

37940
来自专栏业余草

Ext4.0中window窗体使用详解(常用属性)

<link rel="stylesheet" type="text/css" href="<%= path %>/extJs/resources/css/ext...

44110
来自专栏无原型不设计

2018年最值得关注的11个网页开发博客

网络开源和技术创新使得Web开发领域正在迅速变化,网络开发技术迭代更新也非常快速。网络时代,所谓的“专家”通常都是善于学习的那一批人。因此,随时关注和跟进行业最...

12330

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励