搜索引擎抓取的html标签,《前端开发从零学起》Lesson.5 HTML标签与搜索引擎的人机交互...

在Lesson.3 HTML页面布局常用的基础标签中讲到过HTML的常用标签，并提供了一个HTML标签的参考手册。

从手册中大家应该已经了解到HTML中包含许多的标签，并且标签所呈现出文字与布局的样式都各不相同。其实在真正的前端开发中，为了避免布局样式出现一些不必要的BUG，对一些特殊标签的使用都比较少，因为标签的各类样式都可以通过CSS进行定义，使基础的div标签可以实现各式各样的外观形式。

但是不是这样一来，HTML中的各色标签就失去意义了呢？答案当然是否定的，存在即有它的意义。很多前端开发者只是为了实现页面而写代码，忽视了HTML页面中标签对于机器的意义。可能你现在会有疑问了；会有机器人来阅读我的HTML文档吗？实际上像百度、谷歌、bing、360等搜索引擎，他们都是通过爬行蜘蛛对网站的HTML文档内容进行抓取与解译，然后将页面内容收录到数据库中，供搜索的人查阅。因此我们需要将HTML写的更利于搜索引擎理解，从而让网站在搜索引擎中获得更大的流量。

由于HTML标签每个自身都含有一定的意义，这种含义会被搜索引擎记住，并按照这些含义解读HTML文档中的内容。从而识别出哪些是这个页面的主题，哪些是正文，哪个部分是重要内容，哪个部分是次要内容。如果我们没有做这些特殊标记辅助蜘蛛理解页面内容，可能蜘蛛就会按照自己的想法胡乱猜想了，其结果就不解释了，你懂的。

基本的概念理解以后，本课就来为大家列出一些常用的人机交互的标签。

HTML 标题

HTML标题是页面最重要的部分，在该标签内的内容会被定义为该页面的重要部分。

HTML标题是由

至

标签组成，h1 为主标题(最重要的)， h2(次重要的)，再其次是 h3、h4、h5、h6以此类推。

请记住，页面标题heading只用在标题部分，不要用来框选大量的文本。也不要因为它可以使文字变得粗大而拿它来布局。

HTML 水平线

---

可以在HTML页面中创建水平线，其意义是作为内容小节的分段。其对于搜索引擎的意义不大，重要是提高文章的可读性，提升阅读者的体验，可以根据情况使用。

HTML 注释

HTML文档中，处于注释标记中的代码不会在页面中显示出来。书写方式为“”

其主要作用是便于代码编写人员快速理解某部分代码的含义。大家在书写代码的时候最好能够养成良好的注释习惯，便于他人快速的、读懂代码与页面的修改维护。

HTML 折行

在前面的课程中有提到过，其功能是使文档或布局换行。

在HTML中，直接在代码中使用“回车”是无法使一行文字换行的。因此我们需要在文档需要换行的地方使用
进行换行。

Lesson.3中提到过，尽量避免使用
的写法，而使用
的写法更加符合规范。

HTML强调

强调，在文档中也可以理解为加重语气。

使用strong标签的文字会与b标签一样，字体变为粗体。但是请不要仅仅是为了页面布局而随意的使用strong，因为strong标签会被搜索引擎理解，认为这部分是被强调的内容。因此策略性的使用strong标签是有必要的。

格式化文本标签标签

描述

定义粗体文本。

定义大号字。

定义着重文字。

定义斜体字。

定义小号字。

定义下标字。

定义上标字。

定义插入字。

定义删除字。

不赞成使用。使用 代替。

不赞成使用。使用 代替。

不赞成使用。使用样式(style)代替。

计算机代码标签标签

描述

定义计算机代码。

定义键盘码。

定义计算机代码样本。

定义打字机代码。

定义变量。

定义预格式文本。

不赞成使用。使用

 代替。

不赞成使用。使用

 代替。

不赞成使用。使用

 代替。

引用和术语定义标签

描述

定义缩写。

定义首字母缩写。

定义地址。

定义文字方向。

定义长的引用。

定义短的引用语。

定义引用、引证。

定义一个定义项目。

结语：通过本节的学习，希望大家对HTML中的人机交互形成一定的概念。

为了尽量的避免使用标签而影响布局的BUG，建议将代码开发工作分为两个阶段。第一步，使用纯DIV对页面进行布局，每个对应的特殊样式都使用class定义来实现(关于class的定义本节只需了解，相应内容会在后面的课程中讲到)。第二步，根据SEO的需求，策略性的将div标签更换为对用于人机交互的特殊标签。

通过以上两个步骤，使页面适合用户浏览的同时也更适合搜索引擎理解。这样的HTML代码才是优质、合格的HTML前端代码。