外链工具:前端工程师必须知道SEO提示（2）：制作比设计更美丽的代码（内容和语义代码）

目前的web设计不仅需要美学，前端代码往往起着重要作用。这意味着大部分搜索引擎优化或搜索引擎优化责任应该落在设计师身上。但是，有很多网页设计师不了解这个问题，如何在构建网站的早期实现这个问题是全面的搜索引擎优化。当然，要达到这个高度，必须与学习密不可分。这需要时间。

A.制作比设计更美丽的代码（语义代码）实际上是在正确的位置使用适当的代码。

接下来，我'将给你几个例子来理解：

H1〜H6标签用于标题。

UL标签用于无序列表。

OL标签用于有序列表。

DL标签用于定义数据列表。

Stong和EM的意思是告诉爬行者这一点。

根据内容的结构（内容语义），选择正确的标签（代码语义）可以让开发人员阅读和编写更优雅的代码，同时允许浏览器爬行器和机器很好地解析。

两个。语义标记有什么好处？为什么语义标记？

网页就像房子，HTML结构是墙上的一面，标签是一块砖块，砖块应放置有序，整齐，墙壁牢固。最后，CSS是装饰材料，美丽在她身上。所以我们'要有一个优秀的网页，有必要提供一个干净清晰的HTML结构，与CSS的极端美密不可分。

从上面也解释了标签语义是非常重要的，每个标签的HTML都有自己的语义，有自己的应用范围。但是它经常被我们忽视或滥用，例如：一页中数十或数百个，

这是一个无意义的标签，只是一层，对后者的维护非常有害，以及

标签是一个数据标签，时间的使用，我们将大胆使用。

标记语义的好处

1. 删除或丢失样式时，可以使页面以清晰的结构显示：

HTML本身不是性能，例如

粗体，不认为这是HTML的表达，这些实际上是HTML默认的CSS样式，所以删除或丢失样式可以使页面结构清晰不是语义HTML结构的优势，但浏览器有默认样式，默认样式的目的也是为了更好地表达HTML的语义，可以说浏览器'默认样式和语义HTML结构是不可分割的。

2. 屏幕阅读器（如果访问者有视觉障碍）将"阅读"您的页面完全根据您的标签。

例如，如果您使用语义标签，屏幕阅读器将"拼出"您的单词，而不是尝试完全发音。

3.PDA，手机和其他设备可能无法像普通计算机浏览器那样呈现网页（通常是因为这些设备对CSS的支持较弱）。

使用语义标签确保这些设备以有意义的方式呈现网页。理想情况下，查看设备的任务是根据设备本身的条件渲染网页。

语义标记为设备提供所需信息，无需考虑所有可能的显示（包括现有或未来的新设备）。对于example，电话可以选择制作标签标题的文本以粗体显示。手持式可以以更大的字体显示。无论哪种方式，一旦您将文本标记为标题，您可以确信阅读设备将根据自己的标准适当显示页面。

4. 搜索引擎爬行器还依靠标签来确定单个关键字的上下文和权重。

过去您可能没有考虑过搜索引擎爬行器是该网站's"访问者"，但现在他们实际上是非常有价值的用户。没有它们，搜索引擎将无法为您的网站索引，然后普通用户将很难来访问。

5. 爬行者很容易理解您的页面非常重要，因为爬行者在很大程度上忽略了性能标记，只关注语义标记。

因此，如果标记了页面文件的标题而不是，则可以比较搜索结果中页面的位置。除了提高易用性之外，语义标记还有助于正确使用CSS和JavaScript，因为它提供了许多"钩子"应用页面的样式和行为。
SEO主要由网站和外部链接。

6. 促进团队发展和维护

我们制定了一个非常好的标准，在团队中我们都遵循这个标准，可以减少大量差异化的事情，方便开发和维护，提高开发效率，甚至实现模块化开发。

三。我们应该怎么做？

1. 尽可能不使用语义标签：div和span 188

2. 当语义不明显时，可以使用DIV或P、 尽可能使用P，因为P在默认情况下具有上下间距，这对于兼容的特殊终端是有利的;

3. 不要使用普通样式标签：b，font，u，i，del，使用CSS设置。

4. 需要强调的是文本，可以包含在strong或EM标签中（浏览器预设样式，可以使用CSS指定而不使用它们），强默认样式为粗体（不要使用B），EM为斜体（不使用i）;

5. 使用表格，标题使用标题，标题为AD的深圳蚂蚁站群最新桌面，Tbody包围的主要部分，tfoot包围的尾部。表格标题和一般单元格以区分打开的表格，带有th的表格头，带有TD的单元格;

6. 表单字段用字段集标签包装，图例标签用于解释表单的使用;

7. 每个输入标签的描述文本需要使用标签标签，并且通过设置输入的ID属性，在标签标签中设置=someld以将解释性文本与相应的输入相关联。

外链工具

前端工程师必须知道SEO提示（2）：制作比设计更美丽的代码（内容和语义代码）