head里的标签

最新推荐文章于 2022-07-23 09:03:18 发布

zzw_99

最新推荐文章于 2022-07-23 09:03:18 发布

阅读量1.2k

点赞数 1

分类专栏：前端 html

本文链接：https://blog.csdn.net/qq_42615057/article/details/102806380

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

一、head包含元素简介

<head>元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为

<title>定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题)；
<meta>用来定义页面的特殊信息（页面关键字，页面描述），描述了一些基本的元数据；
<link>定义了文档与外部资源之间的关系，通常用来引入外部样式（css文件）；
<style>用来定义元素的css样式；
<script>用来定义页面的JavaScript 代码也可用来引入文件；
<base>可以用来统一设置当前页面上的超链接的跳转方式使用了<base>标签，则必须具备 href 属性或者 target 属性或者两个属性都具备；
<noscript>是一个相当古老的标签，其被引入的最初目的是帮助老旧浏览器的平滑升级更替，因为早期的浏览器并不能支持 JavaScript。noscript 标签在不支持JavaScript 的浏览器中显示替代的内容。这个元素可以包含任何 HTML 元素。这个标签的用法也非常简单：

		<noscript>
		  <p>本页面需要浏览器支持（启用）JavaScript</p>
		</noscript>

二、详解

1、<title>：定义文档的标题，它是 head 部分中唯一必需的元素。

　　<html>
	　　<head>
	　　<title>我的第一个HTML页面</title>
	　　</head>
	　　<body>
	　　<p>body 元素的内容会显示在浏览器中。</p>
	　　<p>title 元素的内容会显示在浏览器的标题栏中。</p>
	　　</body>
	</html>

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

2、<base>：<base>标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。
使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 <a>、<img>、<link>、<form>标签中的 URL。

<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>
		<p><a href="http://www.w3school.com.cn">W3School</a></p>
		<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
	</body>
</html>

<base>必需的属性：href，值为URL，规定页面中所有相对链接的基准URL。
<base>可选的属性：target，值为_blank、_parent、_self、_top、framename等，表明在何处打开页面中所有的链接。比如”_blank”意为在新窗口中打开。

3、<link>：<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。

	<head>
		<link rel="stylesheet" type="text/css" href="theme.css" />
		</head>
		<link>的主要属性：href，rel，type，charset
		charset，指明被链接文档的字符集，如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性。
		在下面的例子中，charset 属性指示被链接文档是用英文编写的：
		<head>
		<link href="shanghai.htm" rel="parent" charset="en" />
	</head>

href，规定被链接文档的位置（URL）。
rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。

	<head>
		<link rel="stylesheet" type="text/css" href="theme.css" />
	</head>

type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。

	<head>
		<link rel="stylesheet" type="text/css" href="theme.css" />
	</head>

4、<script>：标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用是图像操作、表单验证以及动态内容更新。
直接包含脚本语句

	<html>
		<body>
			<script type="text/javascript">
				document.write("<h1>Hello World!</h1>")
			</script>
		</body>
	</html>

通过 src 属性指向外部脚本文件
<script type="text/javascript" src="myscripts.js"></script>
<script>必需的属性：type，规定脚本的 MIME 类型。
对于不支持脚本的浏览器：

	<!DOCTYPE html>
	<html>
		<body>
			<script type="text/javascript">
				document.write("Hello World!")
			</script>
			<noscript>Sorry, your browser does not support JavaScript!</noscript>
			<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>
		</body>
	</html>

5、<style>：标签用于为 HTML 文档定义样式信息。
在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style>，内联样式用的是style属性。
<style>必需的属性：type，唯一可能的值是“text/css”，规定样式表的 MIME 类型。

内联样式

<p style="color:blue;margin-left:20px">This is a paragraph.</p>

内部样式表

	<head>
		<style type="text/css">
			h1 {color: red}
			p {color: blue}
		</style>
	</head>

6、<meta>：元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。元数据总是以“名称/值”的形式被成对传递的。还可用于重定向（网页搬家）。
<meta>标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的“名称/值”对。

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<meta name="author"   content="w3school.com.cn">
	</head>

<meta>必需的属性：content，值为一些文本，定义了与http-equiv或name属性相关的元信息。元数据总是以名称/值的形式被成对传递的。
<meta>主要的可选属性：http-equiv、name；
http-equiv，值为content-type、expires、refresh、set-cookie等，把 content 属性关联到 HTTP 头部。http-equiv 属性为“名称/值”对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的报文头部包含“名称/值”对。
name，值为author、description、keywords、generator、revised、others等，把 content 属性关联到一个名称。

三：实践

在head标签里加入p，div，span标签

查看浏览器发现，head里的p标签会被解析到了body标签里

由Html的解析过程：

我猜测head里的p标签被解析到body的顶部

Head里添加p标签很明显不符合规范，尽管如此，浏览器还是在解析的过程中修复了html作者的错误内容并继续工作。具体是怎么修复的，应该是由浏览器的容错机制来执行的。

四：浏览器的容错机制

html5规范定义了这些方面的需求，webkit在html解析类开始部分的注释中做了很好的总结：
1.在未闭合的标签中添加明确禁止的元素。这种情况下，应该先将先将前一标签闭合；
2.不能直接添加元素，有些人写文档的时候忘了中间的一些标签，比如html，head等；
3.想在一个行内元素添加块元素，关闭所有行内元素，直到下一个更高的块状元素；
4.如果这些都不行，就闭合当前标签直到添加该元素；

五：总结

由上述可知：浏览器应该在解析到head里的p标签时，发生了上述错误：在未闭合的标签中添加明确禁止的元素，所以head标签被提前关闭；
在head标签的p标签上方添加title标签，title标签被正常解析

尝试在head标签的p标签下方添加title标签，我们发现title标签的文字虽然没有显示在浏览器，依然是网页的标题，但是已经被解析到了body标签中

详情参考：head标签里可以放的标签，浏览器解析机制，浏览器容错机制

zzw_99

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
head里的标签

一、head包含元素简介<head>元素包含了所有的头部标签元素，在head中你可以插入脚本（scripts）,样式文件（CSS）,及各种meta信息，可以添加到头部区域的元素为<title>定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题)；<meta>用来定义页面的特殊信息（页面关键字，页面描述），描述了一些基本的元数据；...
复制链接

扫一扫