HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

HTML - 头部元素

HTML <head> 头部元素是以下元素的容器: <title>, <style>, <meta>, <link>, <script>, and <base>.

HTML <head> 元素

<head> 元素是 metadata 的容器，位于 <html> 标签和 <body> 标签中间

HTML metadata 元数据是关于 HTML 文档的数据。不在网页显示。

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

HTML <title> 元素

<title> 元素定义文档的标题。标题只能是文本，并且显示在浏览器的标题栏或页面的选项卡中。

<title> 元素在所有 HTML/XHTML 文档中都是必需的。

页面标题的内容对于搜索引擎优化（SEO）非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。

<title> 元素能够:

  • 定义浏览器工具栏中的标题
  • 提供页面被添加到收藏夹时显示的标题
  • 显示在搜索引擎结果中的页面标题

所以，尽量要让标题准确而有意义！

一个简化的 HTML 文档:

实例

<!DOCTYPE html>
<html>
<head>
  <title>有意义的页面标题</title>
</head>
<body>

文件内容……

</body>
</html>
亲自试一试 »

HTML <style> 元素

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

实例

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
亲自试一试 »

HTML <link> 元素

<link> 标签定义文档与外部资源之间的关系。

<link> 标签最常用于连接样式表:

实例

<link rel="stylesheet" href="mystyle.css">
亲自试一试 »

提示: 要了解 CSS 的所有内容，请访问我们的 CSS 教程。

HTML <meta> 元素

<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

<meta> 元素通常用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

<meta> 标签始终位于 head 元素中。

元数据（metadata）是关于数据的信息。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

实例

定义使用的字符集:

<meta charset="UTF-8">

为搜索引擎定义关键字:

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

定义网页的描述:

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

定义页面的作者:

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

每30秒刷新一次文档:

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

设置视窗使您的网站在所有设备上良好适用:

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

Example of <meta> tags:

实例

<meta charset="UTF-8">
<meta name="description" content="免费网络教程">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
亲自试一试 »

设置预览

预览是用户在网页上的可见区域。它随设备的不同而变化——在手机上比在电脑屏幕上小。

您应该在所有网页中包含以下 <meta> 元素:

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

这将向浏览器提供有关如何控制页面尺寸和缩放的说明。

width=device-width 部分将页面宽度设置为跟随设备的屏幕宽度（根据设备的不同而有所不同）。

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

以下是一个不带 viewport 标记的网页示例，以及一个带 viewport 标记的网页示例:

提示: 如果您使用手机或平板电脑浏览此页面，可以单击下面的两个链接查看区别。




没有 viewport 元标记



有 viewport 元标记

HTML <script> 元素

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

实例

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

提示: 要了解所有关于JavaScript的知识，请访问 JavaScript 教程。

HTML <base> 元素

<base> 定义页面上所有链接的默认地址或默认目标。

<base> 标记必须具有 href 或 target 属性，或者两者都存在。

一个文档中只能有一个 <base> 元素！

实例

为页面上的所有链接指定默认 URL 和默认目标:

<head>
<base href="https://www.w3ccoo.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="火柴人">
<a href="tags/tag_base.asp">HTML base 标签</a>
</body>
亲自试一试 »

本章小结

  • <head> 元素是元数据的容器
  • <head> 元素位于 <html> ， <body> 标记之间
  • <title> 元素是必需的，它定义了文档的标题
  • <style> 元素用于定义单个文档的样式信息
  • <link> 标记最常用于链接到外部样式表
  • <meta> 用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
  • <script> 元素用于定义客户端 JavaScripts
  • <base> 元素定义页面上所有链接的默认地址或默认目标。

HTML head 元素

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

如需所有可用的 HTML 标签的完整列表，请访问 HTML 标签参考手册。


❮ 上一节 下一节 ❯