HTML 基础
常用的元素
工具与规范
实例练习
前言
<head>
中的内容在页面中不会显示,里面更多的是对于页面的描述信息(页面标题、关键字、描述之类),引入的外部文件(外部 CSS 文件、外部 JavaScript 文件之类)。
$$tip
对于头部元素的学习,目前只需明白如何设置 标题
、 编码
、 图标
即可。
$$
标题
通过在 <head>
中添加 <title>
元素来设置标题。
<head>
<meta charset="utf-8" />
<title>三眼鸭</title>
</head>
这个标题会在标题栏上显示,谷歌百度等搜索引擎抓取页面后会用在搜索列表中显示,在 QQ 等社交软件中分享时通常也会用作分享小卡片的标题。因此这个标题需要设置得符合页面内容的主题。
元数据
元数据就是描述性的数据,在 HTML 中使用 <meta>
元素来表示。 <meta>
能用来表达的信息有很多,下面介绍常见的几个。
文档字符编码
在计算机的世界中有很多种存储文本内容的标准,这些标准就被称为字符编码。而 UTF-8 是目前万维网中最流行的编码,应用率高达 94.3%。
$$tip
强烈推荐使用 UTF-8 编码保存代码,并将 HTML 文档编码声明为 UTF-8。
$$
在 VSCode 中右下角可以选择当前代码文件的编码,此编码必须与 HTML 中声明的编码一致,不然会导致页面乱码。以下就是不一致的结果。
添加描述信息
通过设置 name
属性为 description
,在 content
属性中可以设置当前页面的描述信息。
<meta name="description" content="这是三眼鸭的官方页面。" />
描述信息经常会被抓取为谷歌百度搜索列表的摘要,或者社交软件分享卡片的摘要。
$$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>
练习
- 写一个页面,设置页面的标题、简介描述、图标。