摘要：语义化概念官方解释语义化是指用合理的标记以及其特有的属性去格式化文档内容。大家知道中的也可以加粗文字，的标签也可以加粗文字，但是腾讯都没有使用。常用的语义化标签大部分拥有文本格式化的作用把文本定义为强调的内容。
HTML语义化 概念
官方解释：
语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。
我的理解：
在我的理解中语义化就是让我们写的每一行代码都有其意义，不仅仅是程序实现和功能上而言，还必须能被人和机器很好的理解。简单的说就是你写的代码应该是两全其美的，既要让人读懂也要让机器读懂。在HTML中就是告诉大家，每一个标签都是有它独特的意义的和应用场景的，而不是随便想用就用，想用什么替换就用什么替换。
我认为最好的理解就是将office中的Word与其对比。Word中从头部页眉、标题、正文再到页脚都有多带带的样式和设置，所以HTML也大同小异，就是为了将网页内容通过这些设置来呈现出来。包括我现在写的文章是用Markdown来完成的，也是语义化的体现。
我将HTML的语义化分为两部分，一个是结构语义化，一个是标签语义化，虽然这样分会有点问题，但更有利于理解。
结构语义化先从网页的整个结构来说，最早的网页就是来展现最基础的新闻、文章之类的，只是现在的网页设计更厉害了，在样式上看着更加炫酷和多样化，但本质上都是从最基本的结构做起的。可以先看看世界上最早的网页是什么样子：
一般来说我们网页的结构大致上可以从下面这个图来理解（当然布局是可以改变的）：
代码展现：
标签语义化
结构语义化不也就是将标签语义化吗？是的，但是多带带拉出来说是因为除了整个网页结构，其他更多的细节我们需要注意语义化。举个例子,下面是腾讯某新闻版块的网页：
现在我们去掉其所有样式后是这样的：
再看看它的源代码：
不难发现，在我们将其网页的所有样式都去掉之后，还是能清晰地读完整篇文章，并且是层次分明的。这就是为什么要将标签语义化。可以看到文章的标题用到了标签，全文就这一个大标题。然后整篇文章用
标签将文段分开，没有用 就代表一个段落，而 这样的例子还有很多很多，比如W3C的官方网站，在去掉所有CSS样式之后，还是能清楚地找到网页的各个部分，浏览所需的内容，这就是一个优秀的网站应该做到的。 常用的语义化标签（大部分拥有文本格式化的作用）：
把文本定义为强调的内容。
把文本定义为语气更强的强调的内容。
定义一个定义项目。
定义样本文本。
定义键盘文本。
定义变量。
定义引用。
定义段落。
定义文档作者或拥有者的联系信息。
定义长的引用。
定义有记号的文本。
定义短的引用。
定义日期/时间。
更多请参考W3C：http://www.w3school.com.cn/ta... 让我们的网页结构更加清晰，让电脑和浏览器轻易地识别哪一部分是导航，哪一部分是正文，即使在没有CSS修饰的情况下，我们也能清楚地看到整个网页的结构。 对于SEO更加友好，利于搜索引擎对网站的收录和评分。 利于人更好地理解代码意思，因为是W3C标准，只要你按照语义化使用标签，全球任何国家的程序员都能看懂。 践行HTML语义化最好的方法就是秉承以下两点： 如果没有CSS样式，网站内容是否能完整且清晰地展现出来，并准确表达各部分的意思。 如果看代码的人不是我自己，别人是否能看懂我写的标签都是什么意思。 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/59281.html 摘要：可读性，提高代码的可读性，便于多人的修改维护，提高开发效率。主流浏览器都兼容的新标签，对于及以下版本不认识的新元素，可以使用创建一个没用的元素来解决，例如，也可以使用来解决兼容性问题，详情可参考
概览
showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050);
文档章节
导航
表示和主要内容不相关的区域
表示一个独... 摘要：可读性，提高代码的可读性，便于多人的修改维护，提高开发效率。主流浏览器都兼容的新标签，对于及以下版本不认识的新元素，可以使用创建一个没用的元素来解决，例如，也可以使用来解决兼容性问题，详情可参考
概览
showImg(https://segmentfault.com/img/bV5JXT?w=1880&h=1050);
文档章节
导航
表示和主要内容不相关的区域
表示一个独... 摘要：语义化简单来说，我们可以理解为用正确的标签做正确的事情。正确使用语义标签可以带来很多好处。一些语义类标签介绍用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。表示小时制时间。表示术语的一个定义。
本文最初于 2018-09-21 发布于 知乎 ，后在 《重学前端》 专栏的学习中，重新复习整理，发布于 Github 上，并计划写一系列前端学习相关的文章。欢迎 star 。
... 摘要：规定元素的上下文菜单。上下文菜单在用户点击元素时显示。规定元素仍未或不再相关。规定是否对元素进行拼写和语法检查。规定元素的行内样式。
一些说明
写在前面：HTML和CSS，当你了解所有规则后，你应该多写页面并记录你出现的问题，这才是学习HTML和CSS的最佳方法
这是我学习一段时间之后，再次回顾HTML，希望大家也对HTML有不一样的认识
我把HTML标签分成两大类，重要的和不重要的，...，因为
什么都不代表。强调的部分用了标签。大家知道CSS中的font-wight也可以加粗文字，HTML的标签也可以加粗文字，但是腾讯都没有使用。因为CSS在没有样式的时候就不管用了，标签没有强调的意思，而的语义更明显。
to
定义 HTML 标题。
相关文章
前端复习笔记--1.html标签复习速查
前端复习笔记--1.html标签复习速查
HTML 语义化
HTML+CSS复习之HTML基础篇
发表评论
0条评论
阅读 2752·2021-11-23 09:51
阅读 1338·2021-11-15 11:36
阅读 2723·2021-10-13 09:40
阅读 1249·2021-09-28 09:35
阅读 12284·2021-09-22 15:00
阅读 1231·2019-08-29 13:56
阅读 2816·2019-08-29 13:04
阅读 2580·2019-08-28 18:06
