一、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)正确使用内容容器，比如段落

，列表

,
,

,

;

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

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

，表头，表格主体(正文)，表注(页脚)。定义表格行，定义表头，定义表格单元。

(9)表单域使用

标签，并且标签为定义标题；

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

html语义化面试题,前端面试题-HTML结构语义化相关推荐

html的语义化面试题,前端面试题-HTML结构语义化
一.HTML语义化的背景 HTML结构语义化,是近几年才提出来的,对比之前的 HTML 结构,大多是一堆没有语义的标签.用的最多的就是 DIV+CSS,为了改变这种现状,开发者们和官方提出了 HTML ...
vue 面试题前端面试题--vue 第六弹
时隔两个月后的面试题(捂脸跑ing) 1. vue中的路由拦截器的作用这道题之前总结了但是网上说的都是axios拦截器的作用,于是我毫不犹豫的记错了下面说说我自己对于路由拦截器的作用: 路由拦截器 ...
【前端】前端面试题整理
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离关于浏览器内核(渲染引擎) 浏览 ...
2018最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)--转载
版权声明:本文为转载文章,感谢博主小胖梅的博客,如有侵权,请联系我删除,谢谢转载链接: https://blog.csdn.net/xm1037782843/article/details/8070 ...
2023最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
近期总结一一些面试题都是企业的面试题笔记题感觉薪资10k-15k的常见面试题个人录制的最新Vue项目学习视频:B站小胖梅-的个人空间_哔哩哔哩_Bilibili 红色为常见面试题 ====== ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
前端面试题整理（定期更新）
前言因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
java 前端页面传过来的值怎么防止篡改_答对这40道经典web前端面试题，想不拿到offer都难！...
想成功就业web前端工程师,想要能高薪就业,那么除了好的web前端技能以外,还得有好的面试技巧,如果提前就了解更多企业的面试要求及面试题目,那么可以让我们的面试成功的几率大大的提高. 今天小编就整理了 ...
Web前端面试题集锦
Web前端面试题集锦前端开发面试知识点大纲: 注意转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...

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

；

html语义化面试题,前端面试题-HTML结构语义化相关推荐

最新文章

热门文章