小红帽学前端 | 1.2 了解 head 元素

前言 我们上次大概了解了 HTML 的那么一个结构。其中讲到我们有一个 head 元素,这个东西不能简单讲完。所以这边我们单独挖出来讲讲。

1 定义

学之前还是要先知道人家是啥,其实 head 元素人家也是一个元素,但是与一般元素不同,人家一般元素的内容是会显示在浏览器页面上的。head 元素里面的内容是不会显示在浏览器中的。他里面放着的是文档的各种属性和信息,包括文档的标题,样式和脚本的引用,元数据等等。大概有下面这些元素。

1
<link> <script> <style> <title> <meta>

我们就一个一个拉出来溜溜。

2 title 元素

我们写文章有文章的标题,网页也有标题啊,不过这里要和 h1 元素区分开,人家虽然也叫标题不过用于网页内容的标题,那么他标题在哪边啊,不知道啊。建个 HTML 文件看看咯。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>我是段落</p>
</body>
</html>

我们打开网页看看。在这里看到没,我们网页的标题。处在标签栏的位置的地方。

image

3 link、style、script 元素

这三个家伙以后用的多,现在先不用,link 元素一般是用来引入 CSS 资源的,style 元素里面是给我写 CSS 样式的。那么 script 元素咧。你猜?

当然用来写脚本的啦,一般就 JavaScript 啦。这几个我们先认个脸熟,后面我们用到自然就懂了。现在就开始我们 head 元素里面最大头的 meta 元素的介绍了。

不过这边还有讲一下 link 除了引入后面后面要学的样式之外,还有一个很重要的功能。那就是引入我们网页的图标,啥网页图标啊,请看

image

看到木有,在网页标题旁边的小图标,那个就是网页的图标,虽然可能有点不起眼,但是对比那些木有自己设图标直接用浏览器默认的那些网页,这样看起来更富有气息啊。并且以后处于性能的考虑,这个最好还是加上。

咋加咧,当然是 link 元素啊:

1
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

herf 属性指向图标的地址,为了保持兼容性,一般图标的后缀名我们统一是 .ico,如何获取,自行百度。

4 meta 元素

这个元素是为文档添加元数据的。啥是元数据啊?就是描述数据的数据。例如指定你文档的字符编码,文档的作者等等等。这个东西很重要,有些公司面试的时候很喜欢问这里面的东西。

一般的 meta 元素包含了 name 和 content 属性,大概长这样子:

1
<meta name="XX" content="conteng">

其中 name 指定了 meta 元素的类型,说明该元素包含了说明类型的信息。content 指定了实际的元数据的内容。下面我们就搞我们搞几个常见看看。

4.1 charset 字符编码

在我们上面的例子中有下面这行

1
<meta charset="UTF-8">

这个指定了文档的字符编码(就是在这个文档中被允许使用的字符集)是 UTF-8。这个基本所有的 HTML 文本里面都有的,记下便是。

4.2 author 作者,keyword 关键字和 description 网页描述信息

这个一般我们是用不到的,但是在某些地方是需要的。我们先看看这两个是怎么通过 meta 元素加进去的。

1
2
3
<meta name="author" content="Leon">
<meta name="keyword" content="小红帽 学习">
<meta name="description" content="这个是小红帽用于测试的网页">

留下个作者信息还是有点用,有些内容关系系统会有获取页面作者的信息,用于联系作者或者干嘛干嘛的。

至于页面描述,这个就主要用来 SEO(搜索引擎优化) 的。至于是啥效果,我们打开浏览器搜索 「腾讯」试一下。可以看到有下面这么一个结果。

image

看到画圈圈的那块内容了没有,那个就是页面的描述,这个可以便于被搜索引擎搜索到并且显示在搜索结果上,让人没进去网站前先知道那个网站里面大概是啥东西。

啥,不信吗?那我们就点进去腾讯官网看一下,然后右键查看源代码。

image

如何

image

至于关键字,也是用于 SEO。让搜索引擎搜对应关键字的时候能快速找到你。

4.3 viewport 视窗

这个在现在移动端页面基本都会用的了,主要用于移动端页面的缩放和拖拽的。视窗,理解也简单,就是用户网页的可视区域(也就是你手机浏览器里面展示网页内容的那个区域)。这个面试会问到。下看看代码吧:

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

像我上面的描述就是说我这个页面啊,视口的宽度和查看设备的宽度是一致的,且一开始的缩放比例是 1。他还有其他的一下数据信息,我们一一列出来:

  • width viewport 的大小,可以是一个固定的像素,也可以是特殊值,例如 device-width(设备的宽度)
  • height 不说了,指定高度咯,其他同上。
  • initial-scale 页面第一次加载时候的缩放比例
  • maximum-scale 允许用户缩放到的最大比例,范围 0-10
  • minimum-scale 允许用户缩放到的最小比例,范围还是 0-10
  • user-scalable 这个就是说用户能不能手动缩放啦,值是 yestrue 就允许用户手动缩放网页。反之 nofalse 就不允许咯。不写的话,默认值就是 yes 咯。

4.4 X-UA-Compatible

这个是 IE8 中新增的,是一个关于网页文档兼容模式的定义。浏览器的兼容性问题,要么现在要么以后,你肯定会知道的。啥都不说了,万恶的 IE。

对于这个元数据,不需要想太多,直接写下面的数据就对了。

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

就直接让 IE 浏览器以最高级模式渲染文档就完事了。

5 写在后面

关于元数据,就讲这几个就够了。其他的碰到再说了。现在让我们详细讲太多会感到无聊和迷惑的,咱们初学,简单点。

不过搞完这些,基本的概念咱也学会了,自己搞个 HTML 写一下吧,代码这种东西,不写一下你是学不好的。内容可以复制粘贴随便来,但是标签属性那些自己手敲一下。熟悉一下。搞一个标准的 HTML 文档出来。下一次的文章的话就是讲我们常见的 HTML 元素咯,到时候就是直接开始敲啦。不然没意思也没用啊。



----------- 本文结束 -----------




小红帽 wechat
想看更多文章,那就订阅我的微信公众号吧
如果觉得我的文章对你有很大帮助的话,请我喝杯奶茶吧~(@^_^@)~