HTML head标签

HTML <head> 元素

<head> 元素是一个元数据的容器（关于数据的数据），放在<html>标签和<body>标签之间。

HTML元数据是关于HTML文档的数据。元数据不显示。

元数据通常定义文档标题、字符集、样式、链接、脚本和其他元信息等。

下面描述元数据的一些标签: <title>, <style>, <meta>, <link>, <script>, 和 <base>。

HTML <title> 元素

<title> 元素定义文档的标题, 而且在所有的HTML / XHTML文件中都是必须的。

<title> 元素:

  • 在浏览器选项卡中定义一个标题
  • 在添加到收藏夹时为页面提供标题
  • 在搜索引擎结果中显示页面标题

一个简单的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>编程字典</title>
</head>
<body>

  <p>body元素的内容显示在浏览器的窗口内。</p>
  <p>标题内容显示在浏览器的标签上，在收藏夹和搜索引擎的搜索结果里面。</p>

</body>
</html>

让我试试

HTML <style> 元素

<style> 元素用于定义一个HTML页面样式信息：

<style>
   body {background-color: powderblue;}
   h1 {color: red;}
   p {color: blue;}
</style>

让我试试

HTML <link> 元素

<link> 元素用于链接外部样式表：

<link rel="stylesheet" href="tryhtml_head_link.css">

让我试试

提示：了解更多CSS，可以访问我们的CSS教程。

HTML <meta> 元素

<meta> 元素用于指定使用哪一个字符集、页面描述、关键字、作者和其他元数据。

元数据告诉浏览器如何显示内容, 告诉搜索引擎如何搜索 (keywords), 和其他Web服务。

定义使用的字符集：

<meta charset="UTF-8">

定义你网页的描述：

<meta name="description" content="Free Web tutorials">

定义搜索引擎的关键字：

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

定义一个页面的作者：

<meta name="author" content="John Doe">

每30秒刷新一次文档：

<meta http-equiv="refresh" content="30">

<meta> 标签的例子:

<meta charset="UTF-8">
<meta name="description" content="免费的Web开发教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="ghz">

让我试试

设置视窗

HTML5 介绍了一种让网页设计师接管视口控制方法,通过 <meta> 标签。

视窗是一个网页的用户可见区域。它根据设备不同而变化，例如，在手机上比在电脑屏幕上要小。

你可以包括下列<meta>视窗元素在你所有的网页中：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta> 视窗元数据给浏览器如何控制页面的尺寸和缩放比例。

width=device-width部分设置页面宽度以跟踪设备的屏幕宽度（这取决于设备的不同）。

initial-scale=1.0 部分设置，当浏览器首次加载页面时，初始缩放级别。

<script> 元素

<script> 元素用于定义客户端的JavaScript代码。

下面是 JavaScript 输出 "Hello JavaScript!" 到 id="demo" 中间的例子:

<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
  }
</script>

让我试试

提示：了解JavaScript，访问我们的JavaScript教程。

HTML <base> 元素

<base> 元素指定页中所有相对URL的基URL和基目标：

<base href="http://www.CodingDict.com/images/" target="_blank">

让我试试

省略 <html>, <head> 和 <body>?

根据HTML5标准；<html>,<body>, 和<head> 标签可以省略。

下面的代码将验证HTML5：

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

让我试试

注意: W3Schools 不建议省略 <html> 和 <body> 标签。省略这些标签可能使DOM或XML软件和旧的浏览器产生错误（IE9）。
然而，省略标签已经成为普遍的做法，有一段时间了。

HTML head 元素

标签 描述
<head> 定义文档的信息
<title> 定义文档的标题
<base> 定义页面上所有链接的默认地址或默认目标.
<link> 定义文档和外部资源之间的关系.
<meta> 定义了有关HTML文档的元数据
<script> 定义客户端脚本
<style> 定义文档的样式信息