HTML里面的head标签中可以放入什么

HTML中 `<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" /><!--DNS Prefetch 能够加快页面的解析速度，但是也不能滥用，有开发者指出 禁用DNS 预读取能节省每月100亿的DNS查询 。-->
<link rel="dns-prefetch" href="//api.share.zhix.net">
</head><body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样！</p>
</body></html>

如果需要禁止隐式的 DNS Prefetch

<meta http-equiv="x-dns-prefetch-control" content="off">

定义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">

一个在线转换ico图片的地址

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/htmlcharset:iso-8859-1expires: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)">

HTML里面的head标签中可以放入什么相关推荐

Android之解决webview加载第三方网页点击弹不出下拉框（html页面里面的select标签）
1 问题决webview加载第三方网页点击弹不出下拉框(html页面里面的select标签),我们访问youtube.com官网,点击网站的视频,点击视频右上角三个点设置,然后点击播放设置然后点 ...
div标签里面的a标签不能跳转
div标签里面的a标签不能跳转: 昨天在写代码,发现重复的代码点击事件居然不能实现,进一步研究,发现连a标签不能跳转了.. 经过昨天一晚上和今天,终于找到了解决办法,但是没有找到原因,想不通啊. 先看 ...
将html里面的img标签拼上全路径
很久很久以前.公司在开发邮件发送的功能突然发现.富文本编辑器中的图片无法在邮件中显示出来.F12一看,原来图片的src是相对路径,并不是全路径.所以需要程序将html中的img标签中的src拼上域名. ...
winfrom保存图片，将文件夹中图片放入listview，与撤回操作
之前那些操作完成对图片的修改之后,就是要保存图片了. 这里保存用到一个SaveFileDialog控件,可以获取用户选择的保存文件的路径. if (pictureBox1.Image.Width &g ...
java中如何放入音乐文件
一.将音乐播放的类放入包里二.把文件目录确定下来三.在MyPanel的构造器中启动AePlayWave的线程附AePlayWave代码: public class AePlayWave exte ...
a标签中可以放其他标签吗？
参考:在HTML中标签的嵌套规则 1.HTML标签: 块级元素(block): 常用:div.p.ul.ol.li.dl.dt.dd.fieldset.form.h1~h6.hr.table 不常用: ...
vue 中v-if和v-for一起使用；p标签中可以放p标签吗？
记录一下今天项目中踩的两个坑. 数据是从后台取的,然后通过v-for循环展现出来,由于一些原因,获取到后台返回的值是一个空对象,导致报错.想着直接v-if判断一下对象,如果是空就不编译就不会导致循环空 ...
html square的作用,html里面的type标签square，怎么用？干吗的？
匿名用户 1级 2017-05-10 回答 HTML5中的 video和audio这两个标签是HTML5中专门用来播放视频和音频资源的标签.video标签和audio标签也提供了很实用的JavaScr ...
oracle里面的nvl,oracle中nvl函数
最近在修改项目中一个统计的bug,统计出的钱数不对,因为不是自己开发的模块,经过分析流程找到了统计的sql. sum(f_msmoney)+sum(f_fkmoney) as total, 上面这段是 ...

HTML里面的head标签中可以放入什么

HTML中 `<head>`标签里可以放入什么

1、html的`<base>`标签

定义和用法：

属性：

来个例子：

2、HTML `<link>` 标签

定义和用法：

属性：

来个例子：

定义title标签前的小图标

3、html`<meta>标签`

定义和用法：

属性：

来个例子

1) name属性

2）http-equiv 属性

3) content 属性

看一些页面的小技巧

1）彻底屏蔽鼠标右键

2）取消页面选取跟防止页面被复制

3）页面不允许被粘贴

4）防止页面被复制

5）页面自动刷新

6）防止被人iframe

7）进入网页时淡入淡出的效果

HTML里面的head标签中可以放入什么相关推荐

最新文章

热门文章

HTML里面的head标签中可以放入什么

HTML中 <head>标签里可以放入什么

1、html的<base>标签

定义和用法：

属性：

来个例子：

2、HTML <link> 标签

定义和用法：

属性：

来个例子：

定义title标签前的小图标

3、html<meta>标签

定义和用法：

属性：

来个例子

1) name属性

2）http-equiv 属性

3) content 属性

看一些页面的小技巧

1）彻底屏蔽鼠标右键

2）取消页面选取跟防止页面被复制

3）页面不允许被粘贴

4）防止页面被复制

5）页面自动刷新

6）防止被人iframe

7）进入网页时淡入淡出的效果

HTML里面的head标签中可以放入什么相关推荐

最新文章

热门文章

HTML中 `<head>`标签里可以放入什么

1、html的`<base>`标签

2、HTML `<link>` 标签

3、html`<meta>标签`