前端语义化

NSFish 发布于2019-08-26 10:18 / 1052人阅读

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

一、什么是语义化？

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

二、如何理解语义化?

语义化的意图主要在于能让人和机器快熟的理解内容或者代码的含义，用中国的一句俗语来理解就是"见人说人话，见鬼说鬼话"。例如我们在页面寻找一个标题

// 非语义化标签查找
if（this == "这可能是一个内容是标题的标签"）{
 if(this == "这个标签里面是标题") {
  console.log("找到了")
 }
}
// 语义化
if（this == "这是一个标题标签"）{
 console.log("找到了")
}

三、有哪些语义化标签?

标签	含义
	用于规定文档或节的页眉
	定义导航链接
	规定文档的主内容
	定义文档或节的页脚
	定义文档中的节
	定义文章
	定义页面内容以外的内容
	定义用户能够查看或隐藏的额外细节
	定义元素的可见标题
	定义元素的标题
	定义日期/时间
	规定自包含内容，比如图示、图表、照片、代码清单等
	定义重要的或强调的文本

四、语义化有什么优点？

优点：

标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。

有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读

有利于构建清晰的结构，有利于团队的开发、维护

私有云服务器托管语义化标签语义化 html 标签语义化语义分析

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

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

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

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

chuyao 2019-08-30 14:13 评论0 收藏0
前端面试题-HTML结构语义化

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

booster 2019-08-01 18:43 评论0 收藏0
前端语义化

摘要：一什么是语义化语义化是指根据内容的结构化内容语义化，选择合适的标签代码语义化，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。一、什么是语义化？语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。二、如何理解语义化? 语义化的意图主要在于能让人和机器快熟的理解内容或...

MarvinZhang 2019-08-02 15:36 评论0 收藏0
前端进阶系列(一):SEO和HTML语义化

摘要：语义化和的重要性约定，对所列出来的标签进行解析。比如，会根据某些特定的指令，直接给出针对性的结果，现在在搜索引擎可以直接查天气，查航班。我觉得这就是语义化标签出现的意义吧。基本概念 SEO：(Search Engine Optimization)意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传，从而获取收益。 HTM...

songjz 2019-08-29 16:56 评论0 收藏0