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>
HTML <link>
元素
<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>
标签有两个属性: href
和 target
,应该至少设置一个属性。
一个 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 元素参考。