HTML 头部
在本教程中,您将了解头部元素的重要性。
HTML 头部元素
<head>
元素主要是所有 head 元素的容器,它提供有关文档(元数据)的额外信息,或对文档在 Web 浏览器中正确显示或行为所需的其他资源的引用。
头部元素共同描述文档的属性,例如标题,提供元信息(例如字符集),指示浏览器在哪里可以找到样式表或脚本,这些样式表或脚本允许您以高度活跃和交互的方式扩展 HTML 文档。
可以在 <head>
元素中使用的 HTML 元素有:<title>
, <base>
, <link>
, <style>
, <meta>
, <script>
和 <noscript>
元素。
HTML 标题元素
<title>
元素定义文档的标题。
所有 HTML/XHTML 文档都需要 title 元素才能生成有效的文档。 文档中只允许有一个 title 元素,并且它必须放在 <head>
元素中。 title 元素包含纯文本和实体; 它可能不包含其他标记标签。
文件的标题可以用于不同的目的。 例如:
- 在浏览器标题栏和任务栏中显示标题。
- 在将页面添加到收藏夹或添加书签时为其提供标题。
- 在搜索引擎结果中显示页面的标题。
下面的示例演示如何在 HTML 文档中放置标题。
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
提示:一个好的标题应该简短并针对文档的内容,因为搜索引擎的网络爬虫会特别注意标题中使用的词。 理想情况下,标题的长度应少于 65 个字符。 请参阅标题指南。
HTML 基本元素
HTML <base>
元素用于为文档中包含的所有相对链接定义基本 URL,例如 您可以在页面顶部设置一次基本 URL,然后所有后续相对链接都将使用该 URL 作为起点。 这是一个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defining a base URL</title>
<base href="http://www.qyoo.cn/">
</head>
<body>
<p><a href="html-tutorial/html-head.asp">HTML Head</a>.</p>
</body>
</html>
上面示例中的超链接实际上将解析为 http://www.qyoo.cn/html-tutorial/html-head.asp
,而不管当前页面的 URL。 这是因为在链接中指定的相对 URL:html-tutorial/html-head.asp
被添加到基本 URL:http://www.qyoo.cn/
的末尾。
警告: HTML <base>
元素必须出现在任何引用外部资源的元素之前。 HTML 只允许每个文档有一个基本元素。
HTML 链接元素
<link>
元素定义当前文档与外部文档或资源之间的关系。 链接元素的一个常见用途是链接到外部样式表。
<head>
<title>Linking Style Sheets</title>
<link rel="stylesheet" href="style.css">
</head>
请查看 CSS 教程 部分以详细了解样式表。
注意: HTML 文档的 <head>
元素可以包含任意数量的 <link>
元素。 <link>
元素有属性,但没有内容。
HTML 样式元素
<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>
元素提供有关 HTML 文档的元数据。 元数据是一组描述和提供有关其他数据的信息的数据。 这是一个例子:
<head>
<title>Specifying Metadata</title>
<meta charset="utf-8">
<meta name="author" content="John Smith">
</head>
meta 元素将在下一章中更详细地解释。
HTML 脚本元素
<script>
元素用于定义客户端脚本,例如 HTML 文档中的 JavaScript。
以下示例将在浏览器中显示问候消息:
<head>
<title>Adding JavaScript</title>
<script>
document.write("<h1>Hello World!</h1>")
</script>
</head>
script 和 noscript 元素将在后面的章节中详细解释。