3.1 前端入门之html标签和属性之标题和段落标签、div标签以及html5特性详解

6、网页三要素¶

title: 网页的标题
- 文字会显示在浏览器的标题栏上
- title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理的标题设置有利于SEO优化
keywords: 网页的关键词
description: 网页的描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>艾编程-为每个互联网人提供高质量的终身学习平台</title>
    <meta name="Keywords" content="艾编程,WEB前端,Java架构师,Python课程"/>
    <meta name="description" content="艾编程连接了国内外一线互联网公司整合一线师资和企业项目研发解决方案，面向互联网企业开发者提供Web前端、Java、Python、大数据、人工智能等技术在实际企业应用中的项目研发解决方案体系化在线课程。"/>
</head>
<body>
</body>
</html>

7、SEO 搜索引擎网页代码优化¶

SEO 优化的好处¶

利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，为自己的网站获取免费流量；
以用户体验为核心，为目标用户提供高质量的内容；
对页面的代码和网页阅读体验，网站性能等进行优化，符合搜索引擎的规则，提升搜索引擎网页的自然排名。

（1）网页三要素的基础优化规范¶

TIP：深入浅出 SEO 优化规范

页面标题（Title）30 字以内¶

网站首页：

<title>品牌名-正品低价、品质保障、配送及时、轻松购物 ！</title>

list 页面：

<title>广州装修公司排行，联系地址-品牌词</title>

detail 页面：

<title>广州番禺区百姓装潢设计_收费标准-品牌词</title>

注：

强调重点即可，重要的关键词出现不要超过 2 次，而且要靠前；
不同页面的 title 要有所不同。

（2）页面描述（Description）150 字以内¶

不超过 150 个字符，描述内容要和页面内容相关；
对页面内容的高度概括，不可过分堆砌关键词；
不同页面的 description 要有所不同。

<meta
  name="description"
  content="品牌名-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"
/>

（3）页面关键字（Keywords）¶

TIP：Keywords 为产品名、专题名、专题相关名词，之间用英文半角逗号,隔开，告诉搜索引擎本页的重点、关键词。

<meta
  name="Keywords"
  content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜"
/>

（4）总结¶

书写顺序：

代码顺序按照 标题 -> 描述 -> 关键字 依次排列。

8、Vscode 中 HTML 模板代码解读¶

meta 标签及属性的含义¶

① X-UA-Compatible 设置 IE 浏览器渲染模式¶

<!-- IE8 及以上的版本按照最新的标准去渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

X-UA-Compatible 是什么？

X-UA-Compatible 是 IE8 的一个专有 <meta>属性，它告诉 IE8 采用何种 IE 版本去渲染网页，在 html 的 <head>标签中使用，IE8 以下版本不识别；
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响；
简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。

最佳的兼容模式方案：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

添加 "chrome=1"将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响；
百度目前也是使用该模式。

② viewport 主要用作移动端适配¶

width：用来设置 layout viewport 的宽度；
device-width：设置成设备的实际宽度；
initial-scale=1.0：防止浏览器对页面进行缩放 1:1 显示，即不缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

完整 HTML 代码示例解读¶

<!-- 声明当前文档类型为 html5 标准 -->
<!DOCTYPE html>
<!-- 声明当前页面的语言类型 -->
<html lang="en">
  <head>
    <!-- 网页的编码集 -->
    <meta charset="UTF-8" />
    <!-- IE8 及以上的版本按照最新的标准去渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 用于移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 网页标题 -->
    <title>艾编程</title>
    <!-- 网页关键词 -->
    <meta name="Keywords" content="艾编程,WEB前端,Java架构师,Python课程" />
    <!-- 网页描述 -->
    <meta name="description" content="为每个互联网人提供高质量的终身学习平台" />
  </head>
  <body></body>
</html>

9、重新认识标签¶

(1) 什么是 HTML？¶

HTML 是用来描述网页的一种语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

注：超文本有两层含义：

它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）

它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）

(2) HTML 标签¶

HTML 标记标签通常被称为 HTML 标签 (HTML tag)
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b></b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

(3) HTML 文档 = 网页¶

HTML 文档 描述网页
HTML 文档 包含 HTML 标签和纯文本
HTML 文档 也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML标签 - Arry老师</title>
  </head>
  <body>
    <h1>我是一个标题标签</h1>
    <p>我是一个段落标签</p>
  </body>
</html>

代码案例解读：

<html>与 </html>之间的文本描述网页
<body>与 </body>之间的文本是可见的页面内容
<h1>与 </h1>之间的文本被显示为标题
<p>与 </p>之间的文本被显示为段落
不同的标签有不同的功能：p标签表示段落，h1标签表示一级标题
标签可以给文字设置不同的语义

(4) 单标签¶

TIP： 有的标签不是成对出现的，而是只有起始标签，称之为单标签

<meta charset="UTF-8" />

在 HTML4 中，单标签必须写一个结尾的反斜杠
HTML5 中不用写结尾反斜杠（可写可不写）

<meta charset="UTF-8">

现在，我们就能彻底理解 "超文本标记语言" 的含义啦！

10、标题标签¶

TIP： h 系列标签表示“标题”含义，h 是 headline 的意思。

(1) h1~h6 标签¶

标签	语义
`h1`	一级标题
`h2`	二级标题
`h3`	三级标题
`h4`	四级标题
`h5`	五级标题
`h6`	六级标题

关于 h 标签详细解读：

<h1></h1>标签的内容对于搜索引擎来说非常重要，相当于一篇文章的标题（主题）；
应该将当前页面重要的内容放到 <h1></h1>标签中；
关于 h1 ~ h6 标签的使用，以百度百科为标准；
<h1></h1>标签在一个网页中只能放置一个，否则会被搜索引擎视为作弊。

示例代码：

<h1>我是h1标题标签</h1>
<h2>我是h2标题标签</h2>
<h3>我是h3标题标签</h3>
<h4>我是h4标题标签</h4>
<h5>我是h5标题标签</h5>
<h6>我是h6标题标签</h6>

（2）h 标签在 SEO 优化中的设置技巧及最佳实践¶

① 不同类型页面的设置¶

首页： 网站首页的 H1 通常是网站 logo，强调 alt 的内容，而 alt 属性是网站首页标题，包含核心关键词；H2 标注分类页面；H3 标注内容页面标题链接。
列表页（栏目页）： H1 设置为分类名称；H2 是子分类名称；H3 设置为内容页面标题链接。
内容页（产品详情页、文章页）： H1 设置文章标题名称；H2 标注列表名称；H3 标注相关文章。

如：京东首页 logo 处 h1 标签，小米首页栏目 h2 标签，百度百科内容详情页等关于 h 标签的最佳实践。

② H 标签包含关键词¶

H 标签是一个强调性的标签，因此：

H1 标签中，必须包含核心关键词；
H2、H3 标签可以适当的包含长尾关键词。

③ 页面 H 标签的数量¶

一个页面上只能有 1 个 H1 标签；
可以包含不等的 H2-H6 标签；
从结构化的角度看，有 H3 就要有 H1、H2。