HTML中的<head>标签及其内容的详细介绍-html教程-PHP中文网

head

title
base
meta
link

立即学习“前端免费学习笔记（深入）”；
script
style

标签用于定义文档的头部，它是所有头部元素的容器。

中的元素可以：
- 引用脚本
- 指示浏览器在哪里找到样式表
- 提供元信息
- 等等
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：, , , <script>, <style>, <title></script>。

定义文档的标题，<span style="color:red"><span style="text-decoration:underline;">它是 head 部分中唯一必需的元素</span></span>。

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

登录后复制

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

标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。
使用标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括、 HTML中的<head>标签及其内容的详细介绍、、

<html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body>@@##@@<br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html>

登录后复制

必需的属性：href

href，值为URL，规定页面中所有相对链接的基准URL。

可选的属性：target

target，值为_blank、_parent、_self、_top、framename等，表明在何处打开页面中所有的链接。比如”_blank”意为在新窗口中打开。

元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。元数据总是以“名称/值”的形式被成对传递的。

标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的“名称/值”对。

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>

登录后复制

必需的属性：content

content，值为一些文本，定义了与http-equiv或name属性相关的元信息。元数据总是以名称/值的形式被成对传递的。

eg：

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

登录后复制

主要的可选属性：http-equiv、name

http-equiv，值为content-type、expires、refresh、set-cookie等，把 content 属性关联到 HTTP 头部。

http-equiv 属性为“名称/值”对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的报文头部包含“名称/值”对。
eg：

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">

登录后复制

重定向（用于网页搬家）：

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>

登录后复制

描述关键词：

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>

登录后复制

name，值为author、description、keywords、generator、revised、others等，把 content 属性关联到一个名称。

HTML 和 XHTML 标签都没有指定任何预先定义的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
eg：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

登录后复制

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

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

登录后复制

的主要属性：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>

登录后复制

<script></script>

<script> 标签用于定义客户端脚本，比如 JavaScript。</script>

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>

登录后复制

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>

登录后复制

在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签

内联样式

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

登录后复制

内部样式表

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>

登录后复制

也可以通过“id选择器”和“class选择器”进行：

id选择器

<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>

登录后复制

class选择器

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>

登录后复制

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中，而h1则不可以。

<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html>

登录后复制

type，唯一可能的值是“text/css”，规定样式表的 MIME 类型。

也可以通过style标签创建一个没有下划线的链接：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a></body></html>

登录后复制

Note：只有title标签

、script标签<script>和style标签<style>有完整的关闭标签。<div><p class="toc"><br/><p class="toc"><br/><ul class=" list-paddingleft-2"><li><p>head<ul class=" list-paddingleft-2" style="list-style-type: square;"><li><p>title<li><p>base<li><p>meta<li><p>link<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）”；<li><p>script<li><p>style<h1><head><blockquote> 标签用于定义文档的头部，它是所有头部元素的容器。<p><head> 中的元素可以： <br/>- <strong>引用脚本 <br/>- <strong>指示浏览器在哪里找到样式表 <br/>- <strong>提供元信息 <br/>- <strong>等等 <br/>文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<p>下面这些标签可用在 head 部分：<strong><base>, <link>, <meta>, <script>, <style>, <title>。<h2><title><blockquote><p><title> 定义文档的标题，<span style="color:red"><span style="text-decoration:underline;">它是 head 部分中唯一必需的元素。<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p>浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。<h2><base><blockquote><p><base>标签为页面上的所有链接规定默认地址或默认目标。<p>通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。 <br/>使用<base>标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 <a>、<img src="eg_smile.gif" / alt="HTML中的<head>标签及其内容的详细介绍" >、<link>、<form>标签中的 URL。<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><html><head><base href="http://www.w3school.com.cn/i/" /><base target="_blank" /></head><body>@@##@@<br /><p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p><p>"http://www.w3school.com.cn/i/eg_smile.gif"</p><br /><br /><p><a href="http://www.w3school.com.cn">W3School</a></p><p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p></body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p><base>必需的属性：<strong>href<blockquote><p><strong>href，值为URL，规定页面中所有相对链接的基准URL。<p><base>可选的属性：<strong>target<blockquote><p><strong>target，值为_blank、_parent、_self、_top、framename等，表明在何处打开页面中所有的链接。比如”_blank”意为在新窗口中打开。<h2><meta><blockquote><p><meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。元数据总是以“名称/值”的形式被成对传递的。<p><meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的“名称/值”对。<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p><meta>必需的属性：<strong>content<blockquote><p><strong>content，值为一些文本，定义了与http-equiv或name属性相关的元信息。元数据总是以名称/值的形式被成对传递的。<p>eg：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p><meta>主要的可选属性：<strong>http-equiv、<strong>name<blockquote><p><strong>http-equiv，值为content-type、expires、refresh、set-cookie等，把 content 属性关联到 HTTP 头部。<p>http-equiv 属性为“名称/值”对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的报文头部包含“名称/值”对。 <br/>eg：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008"></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p>重定向（用于网页搬家）：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p>描述关键词：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><blockquote><p><strong>name，值为author、description、keywords、generator、revised、others等，把 content 属性关联到一个名称。<p>HTML 和 XHTML 标签都没有指定任何预先定义的名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。 <br/>“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。 <br/>eg：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><meta name="keywords" content="HTML,ASP,PHP,SQL"></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><h2><link><blockquote><p><link>链接一个外部样式表。<span style="max-width:90%">属于在HTML中插入CSS样式表的三种方法之一。<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><head><link rel="stylesheet" type="text/css" href="theme.css" /></head></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p><link>的主要属性：<strong>href，<strong>rel，<strong>type，<strong>charset<blockquote><p><strong>charset，指明被链接文档的字符集，如UTF-8。<span style="color:red">但是几乎没有主流浏览器支持 link标签的charset 属性。<p>在下面的例子中，charset 属性指示被链接文档是用英文编写的：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><head><link href="shanghai.htm" rel="parent" charset="en" /></head></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><blockquote><p><strong>href，规定被链接文档的位置（URL）。<p>这个不解释了。<blockquote><p><strong>rel 属性指示被链接的文档是一个样式表。<span style="color:red">它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><head><link rel="stylesheet" type="text/css" href="theme.css" /></head></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><blockquote><p><strong>type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><head><link rel="stylesheet" type="text/css" href="theme.css" /></head></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><h2><script><blockquote><p><script> 标签用于定义客户端脚本，比如 JavaScript。<p><span style="color:red">script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。 <br/><span style="text-decoration:underline;">必需的 <strong>type 属性规定脚本的 MIME 类型。 <br/>JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。<ul class=" list-paddingleft-2"><li><p>直接包含脚本语句<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><ul class=" list-paddingleft-2"><li><p>通过 src 属性指向外部脚本文件<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><script type="text/javascript" src="myscripts.js"></script></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p><script>必需的属性：<strong>type<blockquote><p><strong>type，规定脚本的 MIME 类型。<p>对于不支持脚本的浏览器：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><!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></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><h2><style><blockquote><p><style> 标签用于为 HTML 文档定义样式信息。<p><span style="color:red">在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。<span style="color:blue"><strong>只不过内部样式表用的是style标签<style>，内联样式用的是style属性。<ul class=" list-paddingleft-2"><li><p>内联样式<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><p style="color:blue;margin-left:20px">This is a paragraph.</p></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><ul class=" list-paddingleft-2"><li><p>内部样式表<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p>也可以通过“id选择器”和“class选择器”进行：<ul class=" list-paddingleft-2"><li><p>id选择器<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><ul class=" list-paddingleft-2"><li><p>class选择器<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p>你也可以指定特定的HTML元素使用class。 <br/>在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中，而h1则不可以。<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p><style>必需的属性：<strong>type<blockquote><p><strong>type，唯一可能的值是“text/css”，规定样式表的 MIME 类型。<p>也可以通过style标签创建一个没有下划线的链接：<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接！</a></body></html></pre><div class="contentsignin">登录后复制</div></div><div class="contentsignin">登录后复制</div></div><p><strong>Note：只有title标签<title>、script标签<script>和style标签<style>有完整的关闭标签。<img alt="HTML中的<head>标签及其内容的详细介绍" ><img src="eg_smile.gif" / alt="HTML中的<head>标签及其内容的详细介绍" ></script>

以上就是HTML中的<head>标签及其内容的详细介绍的详细内容，更多请关注php中文网其它相关文章！