HTML头部<head>元素

html head元素包含了所有的头部标签元素。在head元素中你可以插入脚本scripts, 样式文件CSS,及各种meta信息。可以添加在头部区域的元素标签为: title, style, meta, link, script, noscript 和 base。在本教程中,您将了解头部元素的重要性。

HTML <head>元素

<head> 元素包含了所有的头部标签元素,它提供有关文档(元数据)的额外信息,或对文档在 Web 浏览器中正确显示或行为所需的其他资源的引用。

头部元素共同描述文档的属性,例如标题,提供元信息(例如字符集),指示浏览器在哪里可以找到样式表或脚本,这些样式表或脚本允许您以高度活跃的交互方式扩展 HTML 文档。

可以在HTML元素内部使用的<head>元素有:<title><base><link><style><meta><script><noscript>元素等等。

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

 

HTML <title>元素

<title>元素定义文档的标题。

所有 HTML/XHTML 文档都需要 <title> 元素才能生成有效的文档。文档中只允许使用一个标题元素,并且必须将其放置在<head>元素中。<title> 元素包含纯文本或html实体;它可能不包含其他标记标签。

文件的标题可以用于不同的目的。例如:

  • 在浏览器标题栏和任务栏中显示标题。
  • 在将页面添加到收藏夹或添加书签时为其提供标题。
  • 在搜索引擎结果中显示页面的标题。

下面的示例演示如何在 HTML 文档中放置标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

提示:一个好的标题应该简短并针对文档的内容,因为搜索引擎的网络爬虫会特别注意标题中使用的单词。理想情况下,标题的长度应少于 65 个字符。

 

HTML <base>元素

HTML <base>元素用于为文档中包含的所有相对链接定义一个基本 URL,例如,您可以在页面顶部设置一次基本 URL,然后所有后续相对链接都将使用该 URL 作为起点。请看下面例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Defining a base URL</title>
    <base href="http://www.manongjc.com/">
</head>
<body>
    <p><a href="html_basic/html-tutorial-basic.html">HTML Head</a>.</p>
</body>
</html>

上面示例中的超链接实际上将解析为http://www.manongjc.com/html_basic/html-tutorial-basic.html,与当前页面的 URL 不相同。这是因为在链接: html_basic/html-tutorial-basic.html中指定的相对 URL 添加了基本 URL: http://www.manongjc.com/

警告: HTML <base>元素必须出现在任何引用外部资源的元素之前。HTML 只允许每个文档只有一个基本元素。

 

HTML <link>元素

<link>元素定义当前文档与外部文档或资源之间的关系。<link>元素的一个常见用途是链接到外部样式表。

<head>
    <title>Linking Style Sheets</title>
    <link rel="stylesheet" href="style.css">
</head>

请查看CSS 教程以详细了解样式表。

注意:一个 HTML 文档的<head>元素可以包含任意数量的<link>元素。<link>元素有属性,但没有内容。

 

HTML <style>样式元素

<style>元素用于定义 HTML 文档的嵌入样式信息。<style>元素内的样式规则指定 HTML 元素在浏览器中的呈现方式。

<head>
    <title>Embedding Style Sheets</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>

注意:当单个文档具有独特的样式时,应使用嵌入的样式表。如果在多个文档中使用相同的样式表,那么外部样式表会更合适。请参阅有关HTML 样式以了解更多信息。

 

HTML <meta>元素

meta标签描述了一些基本的元数据。

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。

META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。

<meta> 一般放置于 <head> 区域。

这是一个例子:

<head>
    <title>Specifying Metadata</title>
    <meta charset="utf-8">
    <meta name="author" content="John Smith">
</head>

 

HTML <script>脚本元素

<script>元素用于定义客户端脚本,例如 HTML 文档中的 JavaScript。

以下示例将在浏览器中显示问候消息:

<head>
    <title>Adding JavaScript</title>
    <script>
        document.write("<h1>Hello World!</h1>") 
    </script>
</head>

script 和 noscript 元素将在后面的章节中详细解释。