HTML入门教程20：HTML头部
一、HTML头部的基本结构
<!DOCTYPE html>
<html lang="en">
<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"></script>
</head>
<body>
<!-- 文档内容 -->
</body>
</html>
二、头部标签详解
-
<title>：- 定义了文档的标题，在浏览器标签栏或窗口标题中显示。
- 每个HTML文档都应该有且仅有一个
<title>标签。
-
<meta>：- 提供了关于HTML文档的元数据，如字符集、页面描述、关键词等。
- 常见的
<meta>标签包括：<meta charset="UTF-8">：定义文档的字符编码为UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">：用于响应式设计，使页面在移动设备上正确显示。<meta name="description" content="页面描述内容">：提供页面的简短描述，有助于搜索引擎优化（SEO）。
-
<link>：- 用于链接外部资源，如CSS样式表。
- 常见的用法是链接样式表：
<link rel="stylesheet" href="styles.css">。
-
<script>：- 用于嵌入或引用JavaScript代码。
- 可以在
<head>中引用外部JavaScript文件：<script src="script.js"></script>。 - 也可以直接在
<script>标签内编写JavaScript代码。
-
<style>：- 用于在文档内嵌入CSS样式。
- 示例：
<style>body { background-color: lightblue; }</style>。
-
<base>：- 指定了页面中所有相对URL的基准URL。
- 示例：
<base href="https://www.example.com/">。
-
其他标签：
<noscript>：当浏览器不支持或禁用了JavaScript时，显示替代内容。<header>（HTML5新增）：定义文档或文档部分的页眉，但通常不放在<head>标签内，而是放在<body>中作为内容的一部分。
三、注意事项
-
头部标签的顺序：虽然HTML规范对头部标签的顺序没有严格规定，但建议按照一定的顺序来排列，以便提高代码的可读性和维护性。
-
性能优化：为了提高页面加载速度，建议将CSS样式表放在
<head>标签内，而将JavaScript脚本放在<body>标签的底部。这是因为浏览器在解析HTML文档时，会按照标签的顺序逐个加载资源。将CSS放在头部可以确保样式在页面内容加载之前被应用，而将JavaScript放在底部可以避免脚本阻塞页面的渲染。 -
响应式设计：使用
<meta name="viewport">标签来确保你的网页在移动设备上能够正确显示和缩放。
通过合理地使用HTML头部标签，你可以为网页提供必要的元数据和样式，同时提高网页的可访问性、可搜索性和用户体验。