前言

<head> 中的内容在页面中不会显示,里面更多的是对于页面的描述信息(页面标题、关键字、描述之类),引入的外部文件(外部 CSS 文件、外部 JavaScript 文件之类)。

$$tip 对于头部元素的学习,目前只需明白如何设置 标题编码图标 即可。 $$

标题

通过在 <head> 中添加 <title> 元素来设置标题。

<head>
    <meta charset="utf-8" />
    <title>三眼鸭</title>
</head>

这个标题会在标题栏上显示,谷歌百度等搜索引擎抓取页面后会用在搜索列表中显示,在 QQ 等社交软件中分享时通常也会用作分享小卡片的标题。因此这个标题需要设置得符合页面内容的主题。

image

元数据

元数据就是描述性的数据,在 HTML 中使用 <meta> 元素来表示。 <meta> 能用来表达的信息有很多,下面介绍常见的几个。

文档字符编码

在计算机的世界中有很多种存储文本内容的标准,这些标准就被称为字符编码。而 UTF-8 是目前万维网中最流行的编码,应用率高达 94.3%。

$$tip

强烈推荐使用 UTF-8 编码保存代码,并将 HTML 文档编码声明为 UTF-8。

$$

image

在 VSCode 中右下角可以选择当前代码文件的编码,此编码必须与 HTML 中声明的编码一致,不然会导致页面乱码。以下就是不一致的结果。

image

添加描述信息

通过设置 name 属性为 description ,在 content 属性中可以设置当前页面的描述信息。

<meta name="description" content="这是三眼鸭的官方页面。" />

描述信息经常会被抓取为谷歌百度搜索列表的摘要,或者社交软件分享卡片的摘要。

image $$tip

一些 <meta> 信息已经不再使用了,比如 name="keywords" 。因为一些垃圾流量网站经常会填充一些不关联的关键字,所以该信息已经被搜索引擎忽略。

$$

添加作者信息

<meta name="author" content="西瓜老师" />

可以为当前的页面添加作者信息,比如当前页面是一篇回答、新闻、摄影照之类。今日头条初期的时候会抓取网络上的新闻,此时的作者信息就可以被恰当好处地利用起来。

其他的元数据

很多社交网站会有自己的元数据类型,主要是为了在用户分享你的网站到他们的社交网络时能按一定规则“告知”他们页面的数据信息。

比如 Facebook 的 Open Graph Data ,这套规则可以更详细地描述网页。并且这套规则也已经被国内知乎之类的网站所支持,当你在知乎编辑器中插入网站时也会根据这套规则提取信息。

自定义图标

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

通过以上代码可以为网站添加自定义图标,图标会显示在标签栏,或在浏览器的快捷打开页面。在社交网站等分享时也经常会被抓取作为缩略图。

$$tip

一些老旧的浏览器只支持 ICO 格式,比如 IE6。不建议再费劲去支持这些浏览器,直接使用通用的 PNG 格式(相比 JPG 有透明通道)。

$$

引入 CSS

通过 <link> 元素来引入一个外部的 CSS, rel="stylesheet" 表明这是一个 CSS 文件, href 属性则是文件的地址。

<link rel="stylesheet" href="styles.css" />

引入 JavaScript

通过 <script> 元素来引入一个外部的 JavaScript, src 属性指向文件的地址。

<script src="actions.js"></script>

练习

  1. 写一个页面,设置页面的标题、简介描述、图标。