HTML 教程 / HTML头部

HTML 头部

<head>元素包含文档的元数据（metadata），这些信息不会直接显示在页面中，但对搜索引擎、浏览器和用户访问体验至关重要。

head 元素概述

<head>元素位于 <html> 标签内部、<body>之前，包含了页面的元信息。

<!DOCTYPE html>
<html>
    <head>
        <!-- 元数据区域 -->
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <!-- 可见内容 -->
    </body>
</html>

<title> 元素

定义浏览器工具栏的标题、收藏夹标题和搜索引擎结果标题。

<title>我的网站 - 首页</title>
最佳实践
  • 每个页面应有唯一的标题
  • 标题应该简洁明了，包含页面主题关键词
  • 建议格式：页面标题 - 网站名称

<meta> 元素

提供关于HTML文档的元数据，不显示在页面上但被浏览器和搜索引擎使用。

字符编码

<meta charset="UTF-8">

视口设置（响应式必需）

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

页面描述（SEO重要）

<meta name="description" content="这是一个关于...的网站">

关键词

<meta name="keywords" content="HTML, CSS, JavaScript, 教程">

作者

<meta name="author" content="张三">

刷新/重定向

<!-- 30秒后刷新 -->
<meta http-equiv="refresh" content="30">

<!-- 5秒后重定向到新页面 -->
<meta http-equiv="refresh" content="5;url=https://example.com">

<style> 元素

用于在HTML文档内部定义CSS样式。

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
    h1 {
        color: #333;
    }
</style>
建议

对于大型项目，建议使用外部CSS文件而非内联样式，便于维护和缓存。

<script> 元素

用于嵌入或引用JavaScript代码。

<!-- 外部脚本 -->
<script src="main.js"></script>

<!-- 内联脚本 -->
<script>
    console.log("页面加载完成");
</script>

完整的 head 示例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站 - 首页</title>
    <meta name="description" content="提供优质的Web开发教程">
    <meta name="keywords" content="HTML, CSS, JavaScript, 教程">
    <meta name="author" content="张三">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script src="main.js" defer></script>
</head>

最佳实践

建议
  • 始终指定 charset 为 UTF-8，支持全球字符
  • 添加 viewport meta 标签以支持响应式设计
  • 为每个页面提供唯一的 title 和 description
  • 将CSS链接放在 <head> 中，JS脚本放在 <body> 末尾或使用 defer
  • 使用 favicon 提高品牌识别度
  • 使用 preconnect 预连接外部资源域名