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

最新推荐文章于 2024-03-17 11:50:58 发布
最新推荐文章于 2024-03-17 11:50:58 发布
阅读量1.1w 收藏 33
点赞数 2
分类专栏： HTML 文章标签： head标签 meta标签 link标签 base标签
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1324402468/article/details/86513837
版权

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 元素内部。

属性：
属性值是否必须描述
hrefURL是规定页面中所有**相对链接**的基准 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 部分，不过它可出现任何次数。

属性：
属性值是否必须描述
hrefURL是规定被链接文档的位置。
relalternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag是规定当前文档 与被链接文档之间的关系。
typeMIME_type否规定被链接文档的 MIME 类型。
sizesheightxwidth、any否规定被链接资源的尺寸。仅适用于 rel=“icon”。
mediascreen、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> 标签的属性定义了与文档相关联的名称/值对。

注意：元数据总是以名称/值的形式被成对传递的。

属性：
属性值是否必须描述
contentsome_text是定义与 http-equiv 或 name 属性相关的元信息。
http-equivcontent-type、expires、refresh、set-cookie否把 content 属性关联到 HTTP 头部。
nameauthor、description、keywords、generator、revised、others否把 content 属性关联到一个名称。
schemesome_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)">
基因改造者
关注
  • 2
    点赞
  • 踩
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
head 标签里有什么?
qq_44382590的博客
01-25 2994
head 标签里有什么？ 转载自https://segmentfault.com/a/1190000018592638 每一个 HTML 文档中，都有一个不可或缺的标签：<head> ，它作为一个容器，主要包含了用于描述 HTML 文档自身信息（元数据）的标签，这些标签一般不会在页面中被显示出来，大多情况下是给浏览器和搜索引擎看的。 可以用在 <head> 里面的标签有： <title>, <base> ,<link> ,<style&g
head里的标签
qq_42615057的博客
10-29 1316
一、head包含元素简介 <head>元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为 <title>定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题)； <meta>用来定义页面的特殊信息（页面关键字，页面描述） ，描述了一些基本的元数据； ...
[前端笔记——HTML介绍] 3.＜head＞标签里有什么？
weixin_44963137的博客
01-15 680
HTML——head标签初步介绍。
HTML基础：head头部标签包含的8种形式详解
最新发布
u013179804的博客
03-17 1268
虽然<head>标签不直接影响页面的展示，但它在网页开发中扮演着至关重要的角色。<head>标签包含了页面的元信息和引用外部资源的声明，这些信息决定了页面的结构、样式和行为，直接影响着用户的浏览体验和搜索引擎的优化。因此，在编写 HTML 文档时，务必要充分理解并正确使用<head>标签，以确保页面能够正常加载、呈现，并达到预期的效果。好了，以上，本节完。排版：云桃桃 | 图片设计：云桃桃作者介绍：云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️。
HTML中HEAD的用法
jgh113的博客
06-08 1249
介绍标签用于定义网页文档的头部，它是所有头部元素的容器。在head标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。head 与 tail 就像它的名字一样的浅显易懂，它是用来显示开头或结尾某个数量的文字区块，head 用来显...
【HTML】HTML 网页自动刷新
德仔
09-29 6227
在进行HTML网页编写的过程中，往往需要及时的编写反馈，反复的在编辑器和浏览器窗之间进行切换是一个很繁琐的事情，如果在编辑器上使用插件，我也不太愿意，繁琐而且不安全。下面介绍三种不需要插件的自动刷新方法。其中参数和上面第一种的参数同一个含义,content是刷新时间,单位为秒,后面的url为刷新地址。其中前面是刷新所需的meta标识,后面的content是刷新的秒数。使用 JavaScript 自带的定时函数，设置时间的单位为毫秒。在html的文档头中,在标签中添加meta属性，像下面“
CSS教程：CSS放入网页的几种方式
09-27
使用`@import`规则可以在一个CSS文件中引入另一个CSS文件的样式。例如： ```css @import url('http://www.mysite.com/style.css'); ``` 虽然`@import`最初设计是为了适应不同浏览器的样式，但现在更常用于...
html5 视频播放解决方案
09-28
HTML5引入了`<video>`标签，使得网页可以直接嵌入并播放视频，无需依赖像Flash这样的第三方插件。 一、HTML5技术优势 1. **无需插件播放**：HTML5的`<video>`标签允许用户直接点击视频链接即可播放，简化了用户...
HEAD-master_html5_Go_metafile_
09-30
描述中的"A list of everything that *could* go in the head of your document"提示我们将涵盖可能放入`<head>`的各种元素和属性。 首先，`<head>`的基本结构包括： 1. `<meta>`标签：用于设置页面的字符编码、...
Head First Html CSS 第二版
01-17
《Head First HTML与CSS 第2版》是一本针对初学者设计的HTML5和CSS3入门教程，旨在通过直观且生动的方式帮助读者理解这两个核心技术。HTML（超文本标记语言）是构建网页的基础，而CSS（层叠样式表）则用于美化网页的...
Alura:我将把我在Alura课程中学习的所有内容都放入该存储库中
04-18
Alura的课程可能会教授如何创建内部样式（在`<head>`中使用`<style>`标签），外部样式表（`.css`文件）以及行内样式（使用`style`属性）。 在Alura的课程中，实践是关键。你可能通过一系列的项目练习，逐步构建复杂...
一文读懂HTML的头部内容，希望有所帮助
7旅病娘的博客
12-06 1795
一文读懂HTML的头部内容，希望有所帮助。
初识HTML（十四）——头部元素
weixin_45927758的博客
07-16 306
1.<head> <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。 以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。 2.<title> （1）定义浏览器工具栏中的标题 （2）提供页面被添加到收藏夹时显示的标题 （3
html 页面索引_前端HTML篇--03HTML之head的基本作用
weixin_35218304的博客
12-27 638
目标head标签的作用是什么？head标签包含了哪些元素？Meta标签包含哪两个属性？Meta标签的name属性有哪些常用的元素有哪些以及作用?Meta标签的http-equiv属性有哪些常用的元素有哪些以及作用?head标签的作用是什么？head标签处于html结构里的第一层。他的作用是记录和设置了这个HTML文件的很多有用的信息，比如网页标题的设置、网页的字符编码，网页是否启用缓存，选择启用浏...
<head></head>都可以放什么，什么作用？
aikuai7711的博客
06-28 992
HTML<head></head>头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。 <head></head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（scripts）,样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为:&...
HTML的<head>中的内容总结
weixin_30834783的博客
03-19 79
【01】文件头部一般包含标题标签、<meta>标签、内联样式表及预定义脚本等。 【02】<meta>标签在网页内容中不显示，但它的作用不容忽视。<meta>标签主要用于为搜索引擎robots定义页面主题信息，它还可以用于定义用户浏览器上的cookie、鉴别作者、设定页面格式、标注内容提要和关键字；同时，它还可以设置页面，使其根据定义的时间间隔刷...
php写在head里面吗,HTML中head标签是什么意思？一篇文章教你正确地使用head标签...
weixin_30182831的博客
04-01 414
本篇文章为大家介绍了什么是HTML中的head标签，head标签中有哪些元素，看完本篇文章你会对HTML中的头部标签head了解的更透彻，本文用简单的方法让大家懂得这些标签怎么使用，都会了的话就能更好的使用head标签了， 现在让我们一起阅读本篇文章吧首先我们要知道什么是HTML中head标签：head标签是作用于网页的头部，它的内容不会在正文中显示出来。html head标签中的元素：要学会he...
HTML ＜head＞ 元素
m0_67633378的博客
03-06 617
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。 可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。 HTML <title> 元素 <title> 标签定义了不同文档
HTML中head标签内的使用标签详解
weixin_30701575的博客
01-14 1774
一、head包含元素简介 <head>元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为 <title> 定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题) <meta> 用来定义页面的特殊信息（页面关键字，页面描述） ，描述了一些基本的元数据 ...
script 标签放入什么
05-27
在 HTML 中，<script> 标签用于定义客户端脚本，比如 JavaScript。<script> 标签必须位于 <head> 或 <body> 部分中。常见的用法是将 JavaScript 代码放在 <script> 标签中，并将其放置在 HTML 文档的 <head> 或 <body> 部分中。例如： ``` <!DOCTYPE html> <html> <head> <title>Example</title> <script> function myFunction() { alert("Hello World!"); } </script> </head> <body> <button onclick="myFunction()">Click me</button> </body> </html> ``` 在这个例子中，<script> 标签中定义了一个名为 myFunction 的 JavaScript 函数，并通过一个按钮来调用该函数。当用户单击按钮时，将弹出一个警告框，显示 "Hello World!" 的消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值