常用HTML标签及语义化

一、HTML标签类型

1.1 HTML标签分类

HTML标签的类型可分为三种：块级标签、行内块标签、行内标签。

**块级标签：**独占一行，可指定宽高和四边外间距。多用于页面结构布局

**行内块标签：**多个行内块标签可显示于一行，可指定宽高和四边外间距

**行内标签：**多个行内标签可显示于一行，不可指定宽高和上下外边距。

1.2 常用的HTML标签

2.1 常用块级标签：

div、p、ul、ol、li、dl、dt、dd、form、h1、h2、h3、h4、h5、h6、nav、section、header、footer、aside、canvas、audio、table、tr

2.2 常用的行内标签

span、a、b、i

2.3 常用行内块标签

img、input、select、textarea、video

二、HTML标签及其语义

HTML标签语义化就是给每块内容用上最恰当的标签，让人和浏览器都能够很好的理解网页的结构。

从搜索引擎的工作原理中，已经可以看出，标签语义化对爬虫的爬取以及索引器处理起着很大的作用。不管是在爬虫爬取时，或者是在索引器对网页进行分析处理时，让机器更加准确的将网页的内容分析并存储下来，这就需求我们用合理HTML标记以及其特有的属性去格式化文档内容。

总结下来，HTML语义化的好处有以下几点：

• HTML文档结构清晰。
• 代码可读性好，便于后期维护
• 搜索引擎可以根据标签的语言确定上下文和权重问题

<header>

<header> 元素为文档或节规定页眉。<header> 元素应该被用作介绍性内容的容器。一个文档中可以有多个 <header> 元素。

<nav>

<nav> 元素定义导航链接集合。<nav>元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中

<article>

规定独立的自包含内容，文档有其自身的意义，并且可以独立于网站其他内容进行阅读

<section>

文档中的节，是有主题的内容组，通常具有标题
<main>

规定文档的主内容

<aside>

<aside> 元素页面主内容之外的某些内容（比如侧栏）,aside 内容应该与周围内容相关

<footer>

<footer> 元素为文档或节规定页脚。<footer> 元素应该提供有关其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

<h1>~<h6>

搜索引擎使用标题为网页的结构和内容编制索引，用标题来呈现文档结构，应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推

<p>

文字段落

三、SEO

3.1 搜索引擎原理

SEO（Search Engine Optimization），搜索引擎优化。百度百科对其的解释是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

搜索引擎是怎么工作的呢？主要分为以下三个步骤：

1、爬行抓取，网络爬虫通过特定规则跟踪网页的链接，从一个链接爬到另一个链接，把爬行的数据存入本地数据库

2、使用索引器对数据库中重要信息进行处理，如标题、关键字、摘要，或者进行全文索引，在索引数据库中，网页文字内容，关键词出现的位置、字体、颜色、加粗、斜体等相关信息都有相应记录。

3、索引器将用户提交的搜索词与数据中的信息进行匹配，从索引数据库中找出所有包含搜索词的网页，并且根据排名算法计算出哪些网页应该排在前面，然后按照一定格式返回给用户

将检索的结果返回给用户，这就有一个先后顺序，搜索引擎的排序主要由以下方面共同确定。

3.2 SEO中常用的语义化标签

规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
　　搜索引擎是怎么工作的呢？主要分为以下三个步骤：
　　1、爬行抓取，网络爬虫通过特定规则跟踪网页的链接，从一个链接爬到另一个链接，把爬行的数据存入本地数据库
　　2、使用索引器对数据库中重要信息进行处理，如标题、关键字、摘要，或者进行全文索引，在索引数据库中，网页文字内容，关键词出现的位置、字体、颜色、加粗、斜体等相关信息都有相应记录。
　　3、索引器将用户提交的搜索词与数据中的信息进行匹配，从索引数据库中找出所有包含搜索

• strong标签的使用
• title 网站SEO标题
• meta name=“description” content=“网站描述”
• meta name=“keywords” content=“网站关键词”
• a href=“链接地址” title=“链接说明”
• img src=“图片链接地址” alt=“图片说明”
• div id=“copyright” 版权部分加上网站名称和链接