常用HTML标签及语义化

古城微笑少年丶 2022-11-18 04:55 155阅读 0赞

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

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

![seo权重][seo]

#### 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” 版权部分加上网站名称和链接

[seo]: /images/20221022/f819122606f94b0aabd650d5a6d1f993.png