HTML中的<head>标签及其内容

原创 2015年08月24日 16:33:15

<head>

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

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

下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, <title>

<title>

<title> 定义文档的标题,它是 head 部分中唯一必需的元素

<html>

<head>
<title>我的第一个HTML页面</title>
</head>

<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

</html>

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

<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>

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

</body>
</html>

<base>必需的属性:href

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

<base>可选的属性:target

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

<meta>

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

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

<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>

<meta>必需的属性:content

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

eg:

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

<meta>主要的可选属性:http-equivname

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

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

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

<link>的主要属性:hrefreltypecharset

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> 标签用于定义客户端脚本,比如 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

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>

<style>

<style> 标签用于为 HTML 文档定义样式信息。

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

<style>必需的属性:type

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标签<title>、script标签<script>和style标签<style>有完整的关闭标签。

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML head 头标签你真的了解么?

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结...
  • wuyuehuayiyi
  • wuyuehuayiyi
  • 2016年04月13日 15:42
  • 2373

html中head标签中都放哪些内容

html中head标签中的内容 定义和用法 标签用于定义文档的头部,它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种...
  • xiaoshi178488920
  • xiaoshi178488920
  • 2015年05月21日 16:58
  • 4017

心得:HTML的head部分的书写顺序

HTML的head区域其实是很重要的一块内容,以往都会很重视Body区域的内容,对这一区域比较轻视,最近才抽空总结了一下head部分的书写顺序,都是根据自己以前的经验和教训得来的,也许有不正确的地方,...
  • hjb2722404
  • hjb2722404
  • 2015年04月23日 10:45
  • 621

head里面的内容跑到body里怎么办?

今天我把工程上的一个公共的jsp改了下,然后打包到服务器上测试。发现页面乱了。吓我一跳,赶紧按F12查看,好家伙,head中的内容全跑到body里面去了。咋办呢?       。。。。。   好吧...
  • u010696630
  • u010696630
  • 2017年02月16日 11:13
  • 995

HTML head 头标签你真的了解么?

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结...
  • wuyuehuayiyi
  • wuyuehuayiyi
  • 2016年04月13日 15:42
  • 2373

Js代码用<script>调用时,放在<head>与<body>的区别

Js代码用调用时,放在与的区别
  • Yy921117
  • Yy921117
  • 2016年07月21日 13:50
  • 7551

【移动前端】需要了解的HTML5 head 头标签

by:http://www.leasonlove.cn/ HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标...
  • qq_29287973
  • qq_29287973
  • 2016年10月31日 16:38
  • 622

html5-"head" 标签里面应该放什么

head里面应该要放什么? title Encoding(编码方式) Description(网站描述) Viewport Viewport使用 javascript文件应该放在head还是bo...
  • sinat_34498624
  • sinat_34498624
  • 2017年05月15日 15:40
  • 529

怎么分别javascript写在<head>里还是<body>里面?

怎么分别javascript写在里还是里面? 具体哪些语句写在里,哪些语句写在里 满意答案 BeginNow  | 1218个满意答案...
  • u013700340
  • u013700340
  • 2014年08月02日 15:05
  • 1619

HTML5:理解head

HTML文档的head部分,通常包括指定页面标题,为搜索引擎提供关于页面本身的信息,加载样式表,以及加载JavaScript文件(出于性能考虑,多数时候放在页面底部标签结束前加载JavaScript)...
  • liuy_98_1001
  • liuy_98_1001
  • 2015年12月30日 10:46
  • 2565
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML中的<head>标签及其内容
举报原因:
原因补充:

(最多只允许输入30个字)