HTML头部标记有哪些?

HTML 头部（Head）是 HTML 文档的一个重要部分，位于 <html> 标签内部。它包含了一些用于描述文档信息、引入外部资源和配置网页行为的元素和标记。其中，HTML 头部元素包含关于文档的概要信息，也被称为元信息（meta-information）。

一、head属性

<head>元素是位于HTML文档中的一个重要部分，用于包含各种头部标签元素，可以添加在头部区域的元素有以下标签：

1、<title>：定义网页的标题，将显示在浏览器的标题栏或标签页上，并作为搜索引擎结果中的主要标题。

2、<style>：用于在HTML文档内部定义CSS样式规则，可以直接在<style>标签内编写CSS代码，或者通过@import关键字引入外部CSS文件。

3、<meta>：用于描述文档的元数据，包括字符编码、视口设置、关键词、描述等。例如，<meta charset=”UTF-8″>定义了文档的字符编码为UTF-8。

4、<link>：用于引入外部资源，如CSS样式表、图标文件、字体文件等。例如，<link rel=”stylesheet” href=”styles.css”>将外部CSS样式表链接到HTML文档中。

5、<script>：用于引入JavaScript脚本文件，用于实现交互功能和动态行为。可以将脚本直接写在<script>标签内，或者通过src属性引入外部JavaScript文件。

6、<noscript>：用于在浏览器不支持脚本或脚本被禁用时提供替代内容，通常在<script>标签内的代码无法执行时显示。

7、<base>：指定页面中所有相对链接的基准 URL，用于解析相对路径的资源。<base>标签通常放置在<head>元素的最上方。

<head>元素可以包含以上标签以及其他自定义的元素，通过这些标签，我们可以提供文档的描述和配置信息，引入外部资源，并支持更好的搜索引擎优化和网页交互功能。

二、title属性

<title>标签是定义HTML/XHTML文档的必需元素之一，用于设置文档的标题。以下是更详细的解释：

<title>标签用于定义文档的标题，应该放置在<head>元素中；
浏览器会使用<title>标签中的文本作为工具栏标题、收藏夹标题和搜索引擎结果页面的标题；
<title>标签应该简短、准确地描述文档内容，并且不应该包含过多冗长的关键词或描述；
搜索引擎通常将标题视为页面内容的重要指标，因此适当设置标题可以有助于提高网页的排名和曝光率。

以下是一个示例的HTML代码，展示了如何使用<title>标签来定义文档的标题：

<html>
<head>
<meta charset="UTF-8">
<title>My Webpage - Home</title>
</head>
<body>
<h1>Welcome to my webpage!</h1>
<p>This is a simple HTML document.</p>
</body>
</html>

在上述示例中，<title>标签中的文本为”My Webpage – Home”，将作为浏览器工具栏、收藏夹和搜索引擎结果页面的标题显示。

三、base属性

<base>标签是HTML中的一个可选标签，用于指定页面中所有相对链接的基准URL（Base URL），帮助浏览器解析相对路径的资源。它应该位于<head>元素中，并且在其他链接标签之前。通过使用<base>标签，我们可以方便地统一设置相对链接的基准URL，简化代码并确保正确的资源解析和链接跳转。

以下是<base>标签的一般语法：

<base href="URL" rel="external nofollow" >

其中，href属性指定了基准URL，即所有相对链接将以此为基准进行解析。以下是一个示例，展示了<base>标签的使用方式：

<html>
<head>
<base href="https://example.com/" rel="external nofollow" >
</head>
<body>
<a href="page.html" rel="external nofollow" >Link to Page</a>
<img src="images/image.jpg" alt="Image">
</body>
</html>

在上述示例中，<base>标签的href属性设置为https://example.com/，表示该页面中所有相对链接的基准URL都是https://example.com/。因此，<a>标签中的href属性值为page.html，会解析为https://example.com/page.html；而<img>标签中的src属性值为images/image.jpg，会解析为https://example.com/images/image.jpg。

四、link属性

<link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow"  rel="external nofollow" >

其中，rel 属性指定了链接文档与当前文档之间的关系，type 属性指定了被链接文档的类型，href 属性指定了被链接文档的 URL 地址。

下面是 <link> 标签的常见用法：

1、引入外部 CSS 文件：

<link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow"  rel="external nofollow" >

上面的代码将 style.css 文件链接到 HTML 文档中，用于修改 HTML 元素的样式。

2、引入网站图标：

<link rel="shortcut icon" href="favicon.ico" rel="external nofollow"  type="image/x-icon">

上面的代码将 favicon.ico 图标链接到 HTML 文档中，用于显示在浏览器标签页和收藏夹中。

3、引入预加载资源：

<link rel="preload" href="main.js" rel="external nofollow"  as="script">

上面的代码使用 rel=”preload” 属性将 main.js 脚本文件预加载到文档中，加速页面加载速度。

五、style属性

<style>
CSS styles go here
</style>

在 <style> 标签内，您可以编写 CSS 规则来定义 HTML 元素的样式。CSS 规则由选择器和一组样式声明组成。

下面是 <style> 标签的例子：

<html>
<head>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

在上述示例中，<style> 标签内部定义了两条 CSS 规则：h1 和 p。h1 的样式设置为蓝色文本和 24px 字体大小，p 的样式设置为红色文本和加粗字体。

六、meta属性

以下是 <meta> 标签的一般语法：

<meta name="name" content="content">

其中，name 属性用于指定元数据的名称，content 属性用于指定元数据的内容。

下面是 <meta> 标签的一些常见用法：

1、定义字符集：

上面的代码将文档编码设置为 UTF-8，以确保浏览器正确地解析特殊字符和语言。

2、定义页面描述：

上面的代码定义了页面的描述信息，用于描述页面的主要内容。

3、定义关键词：

上面的代码定义了页面的关键词列表，用于帮助搜索引擎理解页面的主要内容。

4、定义页面视口：

上面的代码定义了页面的视口，即设备上显示内容的区域大小和缩放级别。这在移动设备上极为重要，确保网站在不同设备上显示一致。

七、script属性

<script>
JavaScript code goes here
</script>

在 <script> 标签内，您可以编写任何 JavaScript 代码来实现特定的功能。例如，创建变量、函数、对象、数组、事件监听器等等。

下面是 <script> 标签的例子：

<html>
<head>
<title>My Page</title>
<script>
function showMessage() {
alert("Hello, World!");
}
</script>
</head>
<body>
<button onclick="showMessage()">Click me</button>
</body>
</html>

在上述示例中，<script> 标签内部定义了一个名为 showMessage() 的函数，用于弹出一个对话框，显示 “Hello, World!”。该函数在页面中的 button 元素上注册了一个 onclick 事件监听器，当用户点击该按钮时将会调用该函数。

除了将 JavaScript 代码嵌入到 HTML 文件中，您还可以使用外部 JavaScript 文件。这需要使用 <script> 标签的 src 属性来引入外部文件。例如：