网页开发中，HTML 的头部（<head> 部分）扮演着至关重要的角色。虽然不像 <body> 部分那样显眼，但头部包含了网页的许多关键元素，对网页的功能性和表现有着直接的影响。
一、HTML 头部概述
HTML 头部部分位于 <html> 标签内的 <head> 标签中。它通常包含了与网页的元数据、样式和脚本相关的信息，而不直接展示给用户。尽管头部内容不会在浏览器中直接显示，但它却影响了页面的呈现和行为。
1、头部的基本结构
HTML 头部的基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
<base href="http://www.baidu.com/images/" target="_blank">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>这个示例中，<head> 标签包含了几个关键元素：字符集声明、视口设置、标题、样式表链接和脚本标签。
二、常用头部标签详解
1、HTML <head> 元素
<head> 元素包含了所有头部标签。在 <head> 中，你可以插入脚本（<script>）、样式表（<link> 或 <style>）以及各种元数据（<meta>）。常见的头部元素标签包括：<title>、<style>、<meta>、<link>、<script>、<noscript> 和 <base>。
2、HTML <title> 元素
<title> 标签定义了网页的标题，这个标题会显示在浏览器的标签栏中，并且被搜索引擎用作网页的标题。一个好的标题应该简洁明了地描述页面内容。
<title> 元素:
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容为：......
</body>
</html>
3、HTML <base> 元素
<base> 标签用于定义文档中所有相对链接的基础 URL。这意味着它为 HTML 文档中的所有相对链接提供了一个默认的起始地址，确保这些链接在不同的上下文中都能正确解析。例如，如果 <base> 标签设置了一个基本 URL，那么文档中的所有相对路径将相对于这个基本 URL 进行解析。
假设你在 HTML 文档中设置了如下 <base> 标签：
<base href="https://example.com/">在这个情况下，文档中的相对链接将基于 https://example.com/。例如，如果你有以下链接：
<a href="page.html">Go to page</a>这个链接将指向 https://example.com/page.html。
4、HTML <link> 元素
<link> 标签用于链接外部资源，常见的用法是连接 CSS 文件：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>5、HTML <style> 元素
<style> 标签允许你在 HTML 文档中直接写内联 CSS 样式。<style> 标签定义了HTML文档的样式文件引用地址。在<style> 元素中你也可以直接添加样式来渲染 HTML 文档：
<head>
<style type="text/css">
body {
background-color:rgb(0, 234, 255);
}
p {
color:rgb(0, 255, 179)
}
</style>
</head>
6、HTML <meta> 元素
<meta> 元素用于描述网页的元数据，这些数据不会直接显示在页面上，但会被浏览器和搜索引擎解析。常见的用法包括定义网页的描述、关键词、作者以及页面的刷新时间等。<meta> 标签通常放置在 <head> 部分。
示例：
- 为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">- 为网页定义描述内容：
<meta name="description" content="一条晒干的咸鱼的博客">- 定义网页作者：
<meta name="author" content="Wamtar">- 每30秒刷新当前页面：
<meta http-equiv="refresh" content="30">7、HTML<script> 元素
<script> 标签用于在 HTML 文档中嵌入或引用 JavaScript 代码。你可以使用它来直接插入 JavaScript 代码或从外部文件加载 JavaScript。
使用 <script> 标签的方式：
内联 JavaScript： 你可以在 <script> 标签中直接编写 JavaScript 代码。
<script>
function sayHello() {
alert('Hello, world!');
}
sayHello();
</script>外部 JavaScript 文件： 使用 src 属性来加载外部 JavaScript 文件。
<script src="script.js"></script>注意：head 标签和 header 标签的不同
head 标签用于定义文档头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
如：
<html>
<head>
<title>文档标题</title>
</head>
</html>header 标签用于定义文档的页眉（介绍信息）。
如：
<html>
<body>
<header>
<p>段落</p>
<h1>一级标题</h1>
</header>
</body>
</html>注意千万不要弄混。
如有表述错误及欠缺之处敬请批评指正。
扫一扫
1310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
