HTML head 元素

HTML head 元素中的数据是网页的元数据,包含了网页的标题,编码,样式,脚本等信息。

HTML head 元素中的数据是网页的元数据,包含了网页的标题,编码,样式,脚本等信息。

<html> 元素是 HTML 文档的根元素,它包含 <head><body> 元素。其中 <body> 元素则是网页的主体,浏览器主要渲染 <body> 中的内容,而 <head> 是网页的头部信息,存放网页的元数据。

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

在 HTML 中, <head> 元素允许以下元素作为子元素: <title><style><meta><link><script>,和 <base>

HTML <title> 元素

<title> 元素定义文档的标题。标题必须是纯文本的,显示在浏览器的标题栏或页面的选项卡中。

<title> 元素在 HTML 文档中是必需的!

页面标题的内容对于搜索引擎优化(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>

<link> 元素定义了当前文档和外部资源之间的关系,最常用于链接到外部样式表。

<link rel="stylesheet" href="mystyle.css" />

! 提示: 要了解有关 CSS 的所有信息,请访问我们的CSS 教程

HTML <meta> 元素

<meta> 元素通常用于指定字符集、页面描述、关键字、文档作者和视口(viewport)设置。

元数据不会显示在页面上,但会被浏览器(如何显示内容或重新加载页面)、搜索引擎(关键字)和其他网络服务使用。

定义使用的字符集:

<meta charset="UTF-8" />

定义搜索引擎的关键字:

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

定义您的网页的描述:

<meta name="description" content="免费的 Web 教程" />

定义页面的作者:

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

每 30 秒刷新一次文档:

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

设置视口(viewport)以使您的网站在所有设备上看起来都不错:

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

多个 <meta> 标签示例:

<meta charset="UTF-8" />
<meta name="description" content="Free Web tutorials" />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="John Doe" />

设置视口(viewport)

视口(viewport)是网页的用户可见区域。它因设备而异,比如手机屏幕上的 viewport 比电脑屏幕上的 viewport 小。

您应该在所有网页的 <meta> 中设定 viewport:

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

width=device-width 指示页面的宽度跟随设备的屏幕宽度(这将因设备而异)。

initial-scale=1.0 指示浏览器首次加载页面时的初始缩放级别。

浏览器会依据 viewport 来控制页面尺寸和缩放比例。

HTML <script> 元素

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

下面的例子, JavaScript 获取 id="demo" 的元素,并将元素的内容设置为 Hello JavaScript!

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

! 提示: 要了解有关 JavaScript 的所有信息,请访问 JavaScript 教程

HTML <base> 元素

<base> 元素设置了页面中所有相对 URL 的基础 URL。

<base> 标签有两个属性: hreftarget,应该至少设置一个属性。

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

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

<html>
  <head>
    <base href="https://www.gobeta.net" target="_blank" />
  </head>
  <body>
    <img src="images/stickman.gif" width="24" height="39" alt="Stickman" />
    <a href="tutorials/html">HTML 教程</a>
  </body>
</html>

总结

  • <head> 元素是元数据的容器
  • <head> 元素放置在之间 <html> 标签之间,位于 <body> 标签之前
  • <title> 元素是必需的,它定义了文档的标题
  • <style> 元素用于定义单个文档的样式信息
  • <link> 标签最常用于链接到外部样式表
  • <meta> 元素通常用于指定字符集、页面描述、关键字、文档作者和视口(viewport)设置
  • <script> 元素用于定义客户端 JavaScript
  • <base> 元素定义页面中所有相对 URL 的基础 URL

HTML 头部元素

标签 说明
<head> 定义文档所有的元数据信息
<title> 定义文档的标题
<base> 定义页面中所有相对 URL 的基础 URL
<link> 标签最常用于链接到外部样式表
<meta> 定义文档的元数据信息
<script> 定义此文档 javascript 脚本
<style> 定义此文档的样式

如需所有可用 HTML 标签的完整列表,请访问 HTML 元素参考。