HTML ＜head＞标签构成

LanJason前端

于 2024-09-28 12:30:56 发布

阅读量394

点赞数 15

文章标签： html 前端

本文链接：https://blog.csdn.net/afangjie/article/details/142614146

版权

<head> 标签是 HTML 文档的重要部分，用于包含关于文档的信息。这些信息通常不直接呈现给用户，但对浏览器和搜索引擎的行为有很大影响。

<head> 标签的基本结构

一个典型的 HTML 文档结构如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
</body>
</html>

<head> 标签的主要构成部分

1. <meta> 标签

<meta> 标签用于提供文档的元数据。这些数据不在页面上显示，但可以影响搜索引擎优化（SEO）和网页的行为。

常见的 <meta> 标签有：

字符集声明：
```
<meta charset="UTF-8">
```
指定文档使用的字符编码，通常使用 UTF-8。
视口设置：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
适用于响应式设计，控制页面在移动设备上的缩放和显示。

描述和关键词：

<meta name="description" content="这是页面的描述信息。">
<meta name="keywords" content="关键字1, 关键字2, 关键字3">

提供关于页面内容的简要描述和关键词，有助于搜索引擎索引。

2. <title> 标签

<title> 标签定义网页的标题，显示在浏览器的标题栏或标签页中。搜索引擎通常会在搜索结果中显示该标题。

<title>我的网站</title>

title

3. <link> 标签

<link> 标签用于链接外部资源，例如：

引入css文件:

<link rel="stylesheet" href="styles.css">

网站图标

<link rel="icon" href="favicon.ico">

在这里插入图片描述

4. <script> 标签

<script> 标签用于引入 JavaScript 文件或包含内联 JavaScript 代码。可以使用 defer 或 async 属性控制脚本的加载和执行时机。

<script src="script.js" defer></script>

5. 样式标签

用于定义内联 CSS 样式。

<style>
	body {
		background-color: lightblue;
	}
</style>

拓展

1. <script> 标签中 defer 和 async 的区别

注意：如果没有使用 defer 或 async，<script> 标签的 src 属性会阻塞 HTML 文档的解析，浏览器会在加载和执行脚本后再继续解析文档。

defer 属性

定义：defer 属性用于告诉浏览器在文档解析完成后再执行该脚本。
执行顺序：
- 所有带有 defer 属性的脚本会按照在文档中出现的顺序执行。
- defer 脚本会在 DOMContentLoaded 事件触发之前执行。
使用场景：适用于需要确保脚本执行顺序且不希望阻塞 HTML 文档解析的情况。
阻塞特性：使用 defer 的脚本不会阻塞文档的解析。

async 属性

定义：async 属性用于告诉浏览器尽快加载并执行该脚本，而不考虑其他脚本或文档解析的顺序。
执行顺序：
- async 脚本会在下载完成后立即执行，可能会在其他脚本之前或之后执行，具体取决于加载时间。
使用场景：适用于独立脚本，不依赖于其他脚本的情况，例如分析或广告脚本。
阻塞特性：使用 async 的脚本同样不会阻塞文档的解析。

比较

属性	执行时机	执行顺序	阻塞解析
defer	文档解析完成后	按照在文档中出现的顺序	不会阻塞解析
async	下载完成后立即执行	无固定顺序	不会阻塞解析

2. src 和 href 的区别

src (Source)

定义：src 代表资源的地址，即 资源的来源。
作用：通常用于加载媒体资源，如图片、脚本、视频等。
使用场景：当浏览器遇到带有 src 的标签时，会下载资源，并在下载完成后渲染或执行该资源。常见标签包括：
- <img>：加载图片。
- <script>：加载 JavaScript 文件。
- <iframe>：加载嵌套的文档或网页。
特点：
- 会阻塞页面的加载，直到资源下载完成。
- 例如，<script> 标签中的 src 会阻塞后续的 HTML 解析，建议将 JS 脚本放在页面底部。

href (Hypertext Reference)

定义：href 是 超文本引用，用于链接到其他页面或资源。
作用：用于创建页面之间的关联，允许浏览器跳转到新的页面或引入外部资源。
使用场景：常见标签包括：
- <a>：创建超链接，用户点击后会导航到目标页面。
- <link>：引入外部样式表或图标。
特点：
- 不会阻塞页面的加载。
- <link> 标签引入的外部样式表是异步加载的，不会影响 HTML 文档的解析。

常用的 <meta> 标签有哪些

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者、网页描述、关键词等。除了 HTTP 标准固定了一些 name 作为大家使用的共识，开发者还可以自定义 name。

3. 常用的 <meta> 标签

字符集声明

<meta charset="UTF-8">

作用：定义文档的字符编码，通常使用 UTF-8，支持多语言字符。

视口设置

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

其中，content 参数有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）
作用：控制页面的布局在移动设备上的表现。设置宽度为设备宽度，并设置初始缩放比例为 1。

页面描述

<meta name="description" content="这里是页面的描述信息。">

作用：提供页面内容的简要描述，通常用于搜索引擎优化（SEO），对搜索引擎结果页面的摘要信息有影响。

关键字

<meta name="keywords" content="关键字1, 关键字2, 关键字3">