Head 头部标签

一、任务目标

了解head头中各个标签的属性

掌握head头中各个标签的使用

二、任务背景

标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

 

三、任务内容

head标签中一般可以包含以下标签：<title>、<style>、<script>、<link>、<meta>、<base>

1、<title></title>

用于定义文档的标题

该标题会出现在浏览器窗口的标题栏或状态栏上

把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称

例：<title>CSDN能力认证中心</title>
 

2、<link />

用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标

<link />是空元素，仅包含属性，只能存在于head部分

属性	属性值	描述
href	URL	设置目标链接的文件路径
rel	stylesheet、icon、sidebar、prev等	规定当前文档与链接文档之间的关系
type	MIME_type	目标连接文档的MIME类型

3、<style></style>

用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间

4、<script></script>

用于给页面添加脚本

可以直接在script开始和结束标签之间包含JavaScript脚本)

也可以通过script的src属性链接外部脚本文件

5、<meta />

提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词

name和content属性通常一起使用，以键值对的方式给文档提供元数据，其中name的属性值作为元数据的名称，content作为元数据的值

keywords和description这两个名称使用频率最高，是搜索引擎优化的主要方式之一

名称	值		描述
keywords	关键字		描述网页关键字，使用逗号分隔
description	描述内容		网站主要内容的简短描述
author	作者		描述网站作者
viewport	width	viewport视口宽度，设置为device-width表示为设备的宽度	定义viewport的初始大小，仅用于移动设备
	height	viewport视口高度
	maximum-scale	最大缩放比例
	initial-scale	初始缩放比例
	minimum-scale	最小缩放比例
	user-scalable	是否允许用户缩放

charset属性用于指定文档的字符编码。常用值为UTF-8、ISO-8859-1等

http-equiv属性可用于模拟一个HTTP响应头，与content属性搭配使用，常用属性值如下：

• content-type：规定文档的字符编码，等同于charset属性设置字符编码

• default-style：设置默认CSS样式表组的名称

• refresh：设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）

6、<base />

用于为页面中的所有相对链接设置默认URL或默认target属性