码农教程 - 一技在手,衣食无忧! tools

HTML - 头部元素

❮ 上一节 下一节 ❯

HTML<head>element 是以下元素的容器：<title>,<style>,<meta>,<link>,<script>， 和<base>。

HTML <head> 元素

这个<head>元素是元数据（有关数据的数据）的容器，放置在<html>标签和<body>标签。

HTML 元数据是有关 HTML 文档的数据。不显示元数据。

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

HTML <title> 元素

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

这个<title>HTML 文档中需要元素！

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

这个<title>元素：

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

因此，尽量使标题尽可能准确且有意义！

一个简单的 HTML 文档：

示例

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document......

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

HTML <style> 元素

这个<style>element 用于定义单个 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>元素通常用于指定字符集、页面描述、关键字、文档作者和视口设置。

元数据不会显示在页面上，但由浏览器（如何显示内容或重新加载页面）、搜索引擎（关键字）和其他 Web 服务使用。

示例

定义使用的字符集：

<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">

的例子<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">
亲自试一试 »

设置视口

视口是网页的用户可见区域。它因设备而异 - 在手机上它会比在电脑屏幕上小。

您应该包括以下内容<meta>所有网页中的元素：

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

这为浏览器提供了如何控制页面尺寸和缩放的说明。

这个width=device-width部分设置页面的宽度以遵循设备的屏幕宽度（这将根据设备而变化）。

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

这是一个网页示例没有视口元标记和相同的网页和视口元标记：

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




没有视口元标记



使用视口元标记

HTML <script> 元素

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

以下 JavaScript 将 "Hello JavaScript!" 写入 id="demo" 的 HTML 元素中：

示例

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

提示：要了解有关 JavaScript 的所有信息，请访问我们的JavaScript 教程。

HTML <base> 元素

这个<base>元素指定页面中所有相对 URL 的基本 URL 和/或目标。

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

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

示例

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

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

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.html">HTML base Tag</a>
</body>
亲自试一试 »

章节总结

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

HTML 头部元素

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

有关所有可用 HTML 标签的完整列表，请访问我们的HTML 标签参考。


❮ 上一节 下一节 ❯