< head> 标签用于定义文档的头部
下面这些标签可用在 head 部分
< base>
该标签为页面上的所有链接规定默认地址或默认目标,使用指定的基本 URL 来解析所有的相对 URL。这其中包括 < a>、< img>、< link>、< form> 标签中的 URL
<!DOCTYPE html>
<html>
<head>
<base href="https://www.baidu.com" target="_self" />
</head>
<body>
<img src="/img/bd_logo1.png" />
<p><a href="/">百度</a></p>
</body>
</html>
< link>
定义文档与外部资源的关系
<!-- href 属性指向了一个外部资源的位置 -->
<!-- rel 属性规定当前文档与被链接文档之间的关系 -->
<!-- rel 属性的 "stylesheet" 定义样式表 -->
<link rel="stylesheet" href="theme.css" />
<!-- rel 属性的 "icon" 定义网站图标 -->
<link rel="icon" href="icon.png" />
<!-- media 属性用于为不同的媒介类型规定不同的样式 -->
<!-- 所有浏览器都支持值为 "screen"(默认)、"print" 以及 "all" 的 media 属性。 -->
<link rel="stylesheet" href="print.css" media="screen and (max-width: 600px)" />
<!-- 媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。 -->
<!-- type 属性规定被链接文档的 MIME 类型。-->
<link rel="stylesheet" type="text/css" href="theme.css" />
< meta>
元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词,其中 http-equiv 会加入到 http 头中
<!-- charset 此特性声明当前文档所使用的字符编码,但该声明可以被任何一个元素的 lang 特性的值覆盖 -->
<meta charset="utf-8" />
<!-- http-equiv 这个枚举属性定义了能改变服务器和用户引擎行为的编译。这个编译值使用content 来定义 -->
------------------------------Content-Security-Policy-----------------------------
<!-- Content-Security-Policy 内容安全策略 允许站点管理者控制用户代理能够为指定的页面加载哪些资源。这有助于防止跨站点脚本攻击 .也没法注入脚本,除非还控制了一台列入了白名单的可信主机-->
<!-- 只允许通过 https加载这些资源 -->
<meta http-equiv="Content-Security-Policy" content="default-src https:" />
<!-- 限制外链接通过哪些域名进行加载,比如允许记载来自 http://127.0.0.1:8100 和 https://www.baidu.com 这两个站点的外部资源 -->
<!-- 只限制script 标签允许从以下两个站点加载 , 其中 'unsafe-inline' 表示不需要进行安全验证 -->
<meta http-equiv="Content-Security-Policy" content="script-src http://127.0.0.1:8100 https://www.baidu.com 'unsafe-inline'" />
<!-- 只限制图片资源从以下站点加载 -->
<meta http-equiv="Content-Security-Policy" content="img-src https://www.baidu.com " />
<!-- default-src 表示所有资源类型的默认值,比如所有的资源自能从当前域名加载 'self' -->
<meta http-equiv="Content-Security-Policy" content="defaule-src 'self'" />
<!-- 更过资源类型 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/default-src -->
------------------------------content-type-----------------------------
<!--这个属性定义了文档的 MIME type。但由于它位于HTML页面内,因此除了text / html之外的大多数值都不能使用-->
<meta http-equiv="content-type" content="text/html" />
------------------------------refresh-----------------------------
<!--这个属性指定: 如果content 只包含一个正整数,则是重新载入页面的时间间隔(秒); 如果content 包含一个正整数并且跟着一个字符串,则是重定向到指定链接的时间间隔(秒)-->
<meta http-equiv="refresh" content="3 'http://www.baidu.com'" />
<!-- name 该属性定义文档级元数据的名称。与 content 正好形成键值对 -->
------------------------------author-----------------------------
<!-- author,就是这个文档的作者名称 -->
<meta name="author" content="龙龙老表" />
------------------------------description-----------------------------
<!-- description,其中包含页面内容的简短和精确的描述。 -->
<meta name="description" content="你好,世界" />
------------------------------keywords-----------------------------
<!-- keywords, 包含与逗号分隔的页面内容相关的单词 -->
<meta name="keywords" content="你好,世界,ahaha" />
------------------------------referrer-----------------------------
<!-- Referer 会告诉服务器我是从哪个页面链接过来的,服务器基此可以获得一些信息用于处理。 -->
<!-- no-referrer 不要发送 HTTP Referer 首部。 -->
<meta name="referrer" content="no-referrer" />
<!-- origin 在 referrer 中只显示站点信息,不显示携带的数据 -->
<meta name="referrer" content="origin" />
------------------------------robots-----------------------------
<!-- robots 设置搜索引擎如何索引本页面 -->
<!-- index 告诉搜索引擎可以索引本页面,这也是默认属性 -->
<meta name="robots" content="index" />
<!-- noindex 告诉搜索引擎不可以索引本页面 -->
<meta name="robots" content="noindex" />
<!-- noimageindex 禁止搜索引擎索引本页面上的图片,本页面上的图片不会显示在搜索结果中 -->
<meta name="robots" content="noimageindex" />
<!-- follow 告诉搜索引擎爬虫可以爬行本页面上的链接 -->
<meta name="robots" content="follow" />
<!-- nofollow 告诉搜索引擎不要爬行本页面上的链接 -->
<meta name="robots" content="nofollow" />
<!-- 不许抓取本页,也不许顺着本页抓取索引别的链接 -->
<meta name="robots" content="noindex,nofollow" />
<!-- none none是noindex,nofollow的缩写 -->
<meta name="robots" content="none" />
------------------------------viewport-----------------------------
<!-- 规定移动设备 显示我们的网页的那一块区域 -->
<!-- width ,定义 viewport 的宽度,表示在样式代码中 width:100% 就只有 200px -->
<meta name="viewport" content="width=200px" />
<!-- height ,定义 viewport 的高度,表示在样式代码中 height:100% 就只有 200px -->
<meta name="viewport" content="height=200px" />
<!-- initial-scale ,定义页面缩放的比例( 设备的宽度/页面的显示宽度 ) -->
<meta name="viewport" content="initial-scale=1" />
<!-- user-scalable ,如果设置为 no,用户将不能放大或缩小网页。默认值为 yes。 -->
<meta name="viewport" content="user-scalable=no" />
< style>
标签用于为 HTML 文档定义样式信息,type 定义 style 元素的内容一般就是 “text/css”
< title>
定义文档的标题