HTML 头部学习

创建一个标准的 HTML 文件

在 vscdoe 中，使用英文的 ! 号加上【tab】键就可以创建一个标准的 HTML 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

从上到下，我们简单概括下这些元素的功能：

<!DOCTYPE html>：表示文档类型声明，并不是一个元素，这行代码表明了这个文件的内容是 HTML5 版本的代码（旧版本的文档声明不长这样）。
html：根元素，表示网页的最顶层，lang 属性表示网站的语言，en 表示英语，中文可以使用 zh-CN。
head：页面的头部内容，包含了对整个页面的描述，比如网站标题，网站是干什么，领域是那些。head 中的内容并不会渲染。
meta：元数据元素，描述整个页面的各种信息。
title：设置页面标题，就是标签页顶部显示的文字信息。
body：包含了页面上需要展示的内容，网页上所有用于展示的内容都在这里。

title 元素

title 元素描述了页面的标题，用来展示标签页上页面的标题，同时也可用于浏览器收藏网页的默认名称。

title 元素的内容还被展示在搜索引擎的结果中。

元数据 `meta` 元素

meta 元素用来描述整个网页的信息，具体作用可分为以下几点：

声明文档的字符集
对网页进行描述
设置移动设备显示方式
提供一些编译指令，基于 http 报文头部格式设置

声明文档的字符集

什么是字符集？

首先搞懂什么是字符，字符就是计算机中表示数据的符号、文字、数字等，比如 ABC123!@# 这些字母数字符号。字符集就是字符集合，就像一个字典。计算机内最初只有一些字母数字，但是随着各个国家都开始发展计算机技术，各国语言必须能够在计算机中显示，于是就诞生了各式各项的字符集。国内早期常用的字符集就是 gb2312 和大五码，大五码现在都可以在各种输入法中找到。

web 上现在推荐的字符集就是 UTF-8 字符集，它包含了全世界大量语言的文字，还有各式各样的符号。

通过给 meta 元素设置 charset 属性就可以设置页面的字符集。

字符集有什么作用？

减少网页中出现乱码的情况。

vscode 可以设置文件的字符集，文件的字符集需要和 meta 元素标记的字符集相同，不然容易在网页中出现乱码。但是就算文件的字符集，和 meta 的字符集相同，还是可能乱码，因为字符集中可能就不包含一些特殊的文字。

比如 gb2312 字符集中，就不包含阿拉伯语的文字。

<p>中文：语言</p>
<p>阿拉伯语：لغوي </p>

上述代码使用 gb2312 字符集就无法正常显示。

【修改文件字符集和 meta 字符集为 gb2312 演示】

对网页进行描述

页面描述

meta 元素也可以设置页面简介，比如：

<meta name="description" content="学习 HTML 头部的详细知识，XXXXXXXX" />

当 meta 元素的 name 属性为 description 时，这个 meta 元素的 content 属性将作为网页的简介。此时如果别人通过搜索引擎查找到你的页面，那么页面简介会展示搜索结果当中。

备注：有些特殊的平台会提出固定的 name 属性值，当他们的平台需要展示你的网页时，会率先寻找他们规定的 meta 元素，从而实现更加个性化的展示，这你需要查看所在平台的规定。

关键字

你可以为网页设置一些关键字，让搜索引擎在搜索某些关键字的时候，你的网站也能展示在搜索结果中。

比如你希望他搜索 烹饪 这个字眼找到你的网页，你就可以为你的页面添加这个关键字，例：

<meta name="keywords" content="烹饪, 食谱, 美味" />

关键字一般用英文字母逗号隔开，关键字并不是越多越好，太多了可能搜素引擎就直接忽略你写的关键字，因为你的关键字权重太低了。

设置移动设备显示方式

meta 元素还可以设置页面在手机，平板上的显示方式，这部分内容会在 CSS3 的课程中介绍。

提供一些编译指令

使用 meta 标签还可以设置一些编译指令，比如让浏览器不要缓存我们的页面，例：

<meta http-equiv="cache-control" content="no-cache" />

这部分内容牵扯到网络知识，不再深究，我会在网络课程中介绍。

元数据总结

元数据元素是一个复杂的元素，它的作用非常多，并且涉及各个方面，同学们并不用现在就完全了解它，在需要使用时去查询相关知识即可。比如当你有一天需要不缓存页面时，百度搜索【如何不缓存 html】，第一条就会教你如果使用 meta 元素清除缓存。

给页面添加图标

使用 link 可以引入网站的图标。

<link rel="shortcut icon" href="favicon.png" type="image/png" />

也可简写为：

<link rel="icon" href="favicon.png" />

body 元素

body 元素是页面的内容部分，所有页面上需要展示的内容都写到 body 中。它本身没有任何特殊的属性，仅作为页面内容部分的根容器。