前言 我们上次大概了解了 HTML 的那么一个结构。其中讲到我们有一个 head 元素,这个东西不能简单讲完。所以这边我们单独挖出来讲讲。
1 定义
学之前还是要先知道人家是啥,其实 head 元素人家也是一个元素,但是与一般元素不同,人家一般元素的内容是会显示在浏览器页面上的。head 元素里面的内容是不会显示在浏览器中的。他里面放着的是文档的各种属性和信息,包括文档的标题,样式和脚本的引用,元数据等等。大概有下面这些元素。
<link> <script> <style> <title> <meta>
我们就一个一个拉出来溜溜。
2 title 元素
我们写文章有文章的标题,网页也有标题啊,不过这里要和 h1
元素区分开,人家虽然也叫标题不过用于网页内容的标题,那么他标题在哪边啊,不知道啊。建个 HTML 文件看看咯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<p>我是段落</p>
</body>
</html>
我们打开网页看看。在这里看到没,我们网页的标题。处在标签栏的位置的地方。
3 link、style、script 元素
这三个家伙以后用的多,现在先不用,link 元素一般是用来引入 CSS 资源的,style 元素里面是给我写 CSS 样式的。那么 script 元素咧。你猜?
当然用来写脚本的啦,一般就 JavaScript 啦。这几个我们先认个脸熟,后面我们用到自然就懂了。现在就开始我们 head 元素里面最大头的 meta 元素的介绍了。
不过这边还有讲一下 link 除了引入后面后面要学的样式之外,还有一个很重要的功能。那就是引入我们网页的图标,啥网页图标啊,请看
看到木有,在网页标题旁边的小图标,那个就是网页的图标,虽然可能有点不起眼,但是对比那些木有自己设图标直接用浏览器默认的那些网页,这样看起来更富有气息啊。并且以后处于性能的考虑,这个最好还是加上。
咋加咧,当然是 link
元素啊:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
herf
属性指向图标的地址,为了保持兼容性,一般图标的后缀名我们统一是 .ico
,如何获取,自行百度。
4 meta 元素
这个元素是为文档添加元数据的。啥是元数据啊?就是描述数据的数据。例如指定你文档的字符编码,文档的作者等等等。这个东西很重要,有些公司面试的时候很喜欢问这里面的东西。
一般的 meta 元素包含了 name 和 content 属性,大概长这样子:
<meta name="XX" content="conteng">
其中 name 指定了 meta 元素的类型,说明该元素包含了说明类型的信息。content 指定了实际的元数据的内容。下面我们就搞我们搞几个常见看看。
4.1 charset 字符编码
在我们上面的例子中有下面这行
<meta charset="UTF-8">
这个指定了文档的字符编码(就是在这个文档中被允许使用的字符集)是 UTF-8
。这个基本所有的 HTML 文本里面都有的,记下便是。
4.2 author 作者,keyword 关键字和 description 网页描述信息
这个一般我们是用不到的,但是在某些地方是需要的。我们先看看这两个是怎么通过 meta 元素加进去的。
<meta name="author" content="Leon">
<meta name="keyword" content="小红帽 学习">
<meta name="description" content="这个是小红帽用于测试的网页">
留下个作者信息还是有点用,有些内容关系系统会有获取页面作者的信息,用于联系作者或者干嘛干嘛的。
至于页面描述,这个就主要用来 SEO(搜索引擎优化) 的。至于是啥效果,我们打开浏览器搜索 「腾讯」试一下。可以看到有下面这么一个结果。
看到画圈圈的那块内容了没有,那个就是页面的描述,这个可以便于被搜索引擎搜索到并且显示在搜索结果上,让人没进去网站前先知道那个网站里面大概是啥东西。
啥,不信吗?那我们就点进去腾讯官网看一下,然后右键查看源代码。
如何
至于关键字,也是用于 SEO。让搜索引擎搜对应关键字的时候能快速找到你。
4.3 viewport 视窗
这个在现在移动端页面基本都会用的了,主要用于移动端页面的缩放和拖拽的。视窗,理解也简单,就是用户网页的可视区域(也就是你手机浏览器里面展示网页内容的那个区域)。这个面试会问到。下看看代码吧:
<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 这个就是说用户能不能手动缩放啦,值是
yes
、true
就允许用户手动缩放网页。反之no
、false
就不允许咯。不写的话,默认值就是yes
咯。
4.4 X-UA-Compatible
这个是 IE8 中新增的,是一个关于网页文档兼容模式的定义。浏览器的兼容性问题,要么现在要么以后,你肯定会知道的。啥都不说了,万恶的 IE。
对于这个元数据,不需要想太多,直接写下面的数据就对了。
<meta http-equiv="X-UA-Compatible" content="ie=edge chrome=1">
就直接让 IE 浏览器以最高级模式渲染文档就完事了。
5 写在后面
关于元数据,就讲这几个就够了。其他的碰到再说了。现在让我们详细讲太多会感到无聊和迷惑的,咱们初学,简单点。
不过搞完这些,基本的概念咱也学会了,自己搞个 HTML 写一下吧,代码这种东西,不写一下你是学不好的。内容可以复制粘贴随便来,但是标签属性那些自己手敲一下。熟悉一下。搞一个标准的 HTML 文档出来。下一次的文章的话就是讲我们常见的 HTML 元素咯,到时候就是直接开始敲啦。不然没意思也没用啊。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。