HTML中
<head>标签里可以放入什么
<head>标签里可以放入什么
1、
<head>标签用于定义文档的头部，它是所有头部元素的容器。
2、<head>标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
3、<head>绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
4、<head>内部可以包含下面这些标签<base>、<link>、<meta>、<script>、<style>以及<title>。
5、<head>部分中唯一必需的元素是<title>标签，用来定义文档的标题。
提示：请记住始终为文档规定标题！
1、html的<base>标签
定义和用法：
<base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写**相对 URL** 中的空白。
使用 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用**指定的基本 URL** 来解析所有的**相对 URL**。这其中包括<a>、<img>、<link>、<form>标签中的 URL。
提示：标签必须位于 head 元素内部。
属性：
| 属性 | 值 | 是否必须 | 描述 |
|---|---|---|---|
| href | URL | 是 | 规定页面中所有**相对链接**的基准 URL。 |
| target | _blank、_parent、_self、_top、framename | 否 | 在何处打开页面中的链接 |
来个例子：
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。但是我们又在 head 部分规定了一个基准 URL，浏览器最终将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br />
<p><a href="https://blog.csdn.net/z1324402468/article/details/85728591">认识Promise对象</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>
</html>
2、HTML <link> 标签
定义和用法：
<link>标签定义文档与外部资源的关系。
<link>标签最常见的用途是链接样式表。
注释：此元素只能存在于 head 部分，不过它可出现任何次数。
属性：
| 属性 | 值 | 是否必须 | 描述 |
|---|---|---|---|
| href | URL | 是 | 规定被链接文档的位置。 |
| rel | alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag | 是 | 规定当前文档 与被链接文档之间的关系。 |
| type | MIME_type | 否 | 规定被链接文档的 MIME 类型。 |
| sizes | heightxwidth、any | 否 | 规定被链接资源的尺寸。仅适用于 rel=“icon”。 |
| media | screen、print、all、handheld | 否 | 规定被链接文档将显示在什么设备上，用于为不同的媒介类型规定不同的样式。 |
来个例子：
<html>
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
<link rel="stylesheet" type="text/css" href="/example/html/demo_screen.css"/>
<!-- 如果您打印本页面，或者在打印预览模式中打开它，此页面会通过 media="print" 样式表进行格式化 -->
<link rel="stylesheet" type="text/css" href="/example/html/demo_print.css" media="print" />
</head>
<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body>
</html>
定义title标签前的小图标
<html>
<head>
<!-- 引用了favicon.ico图片作为图标 -->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<p>定义一个title标签前的小图标。</p>
</body>
</html>
实现一个动态的 ico 图标
<!-- 下面这个link可以实现一个动态的ico图标 -->
<link rel="icon" href="favicon.gif" type="image/gif">
3、html<meta>标签
定义和用法：
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。
注意：元数据总是以名称/值的形式被成对传递的。
属性：
| 属性 | 值 | 是否必须 | 描述 |
|---|---|---|---|
| content | some_text | 是 | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type、expires、refresh、set-cookie | 否 | 把 content 属性关联到 HTTP 头部。 |
| name | author、description、keywords、generator、revised、others | 否 | 把 content 属性关联到一个名称。 |
| scheme | some_text | 否 | 定义用于翻译 content 属性值的格式。 |
来个例子
1) name属性
<!--
name 属性提供了名称/值对中的名称。
通常情况下，我们可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。
某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
-->
<meta name="keywords" content="HTML,CSS,JS">
<!-- 这个meta属性定义了文档描述 -->
<meta name="description" content="HTML examples">
<!-- 这个meta属性定义了编辑器的名称 -->
<meta name="generator" content="Dreamweaver8.0en">
<!-- 这个meta属性定义了修改时间 -->
<meta name="revised" content="sai,17/1/19">
注意：如果没有提供name属性，那么名称/值对中的名称会采用http-equiv属性的值。
2）http-equiv 属性
<!--
http-equiv 属性为名称/值对提供了名称。
并指示服务器在发送实际的文档之前,要在先传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。
但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
-->
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
<!--
上面定义的meta会使服务器发送到浏览器头部应该包含如下信息
content-type:text/html
charset:iso-8859-1
expires:18 Dec 2018
-->
<!--
下面meta定义了一个重定向，你将在5s内看到重定向的新地址
-->
<meta http-equiv="Refresh" content="5;url=https://blog.csdn.net/z1324402468/article/details/85954278" />
3) content 属性
content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content 属性始终要和 name 属性或 http-equiv 属性一起使用。
看一些页面的小技巧
1）彻底屏蔽鼠标右键
<!-- 此段代码屏蔽<body>区域的鼠标右键事件 -->
<body oncontextmenu="window.event.returnValue=false">
2）取消页面选取跟防止页面被复制
<!-- 此段代码可以使<body>区域的页面不能被选择跟复制 -->
<body onselectstart="return false">
3）页面不允许被粘贴
<!-- 此段代码可以使<body>区域的页面不能被粘贴 -->
<body onpaste="return false">
4）防止页面被复制
<!-- 此段代码可以使<body>区域的页面不能被复制 -->
<body oncopy="return false">
5）页面自动刷新
<!-- 把如下代码加入 <head> 区域中其中5指每隔5秒刷新一次页面. 可用户增加文章点击率，这是作弊行为。 -->
<meta http-equiv="refresh" content="5">
6）防止被人iframe
注意：此处我验证时没有生效
<!-- 把如下代码加入 可以防止你的页面被iframe。 -->
<script LANGUAGE=JAVASCRIPT><!– if (top.location !=self.location)top.location=self.location;// –></script>
7）进入网页时淡入淡出的效果
注意：此处我验证时没有生效
<!--
在头部head之间加入此代码，你会发现点击链接的时候，网页现实的是淡入淡出的效果。
Page-Exit”（离开网页）、”Site-Enter”（进入站点）、”Site-Exit”（离开站点）其中”Duration=3.0″可以设定每个周期的时间为多久，单位是秒。
-->
<meta http-equiv="Page-Exit"; content="blendTrans(Duration=3.0)">