Web学习网站

Appearance

<head> 标签 ​

<head> 标签包含了文档的元数据（metadata），这些数据不会直接显示在网页上，但提供了关于网页的重要信息。

概述 ​

<head> 标签是 HTML 文档的一部分，包含了文档的元数据。这些元数据包括文档的标题、样式表链接、脚本链接以及其他机器可读的信息。

语法 ​

html
<head>
  <!-- 元数据内容 -->
</head>

<head> 标签中可以包含的元素 ​

<head> 部分可以包含以下元素：

  • <title> (必需)
  • <style>
  • <base>
  • <link>
  • <meta>
  • <script>
  • <noscript>
  • <template>

基本用法示例 ​

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
  <meta name="description" content="页面描述">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="作者名称">
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <h1>页面内容</h1>
  <p>这是页面的主要内容。</p>
</body>
</html>

重要子元素 ​

<title> 标签 ​

定义文档的标题：

html
<head>
  <title>我的网站 - 首页</title>
</head>

<meta> 标签 ​

提供关于文档的元数据：

html
<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">
  
  <!-- 视口设置（响应式设计） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 页面描述 -->
  <meta name="description" content="这是一个关于网页开发的教程网站">
  
  <!-- 关键词 -->
  <meta name="keywords" content="HTML, CSS, JavaScript, 教程">
  
  <!-- 作者 -->
  <meta name="author" content="张三">
</head>

链接外部资源，通常是 CSS 样式表：

html
<head>
  <!-- 外部样式表 -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- 网站图标 -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  
  <!-- 字体 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
</head>

<style> 标签 ​

定义内部 CSS 样式：

html
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      color: #333;
    }
  </style>
</head>

<script> 标签 ​

定义或链接 JavaScript 代码：

html
<head>
  <!-- 外部脚本 -->
  <script src="script.js"></script>
  
  <!-- 内部脚本 -->
  <script>
    console.log("页面加载完成");
  </script>
</head>

完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">
  
  <!-- 响应式设计 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- 页面标题 -->
  <title>我的网站 - 首页</title>
  
  <!-- 页面描述 -->
  <meta name="description" content="这是一个关于网页开发的教程网站，提供 HTML、CSS 和 JavaScript 教程">
  
  <!-- 关键词 -->
  <meta name="keywords" content="HTML, CSS, JavaScript, 教程, 网页开发">
  
  <!-- 作者 -->
  <meta name="author" content="张三">
  
  <!-- 网站图标 -->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  
  <!-- 外部样式表 -->
  <link rel="stylesheet" href="/css/styles.css">
  
  <!-- 字体 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap">
  
  <!-- 内部样式 -->
  <style>
    .highlight {
      background-color: #ffffcc;
    }
  </style>
  
  <!-- 外部脚本 -->
  <script src="/js/script.js" defer></script>
  
  <!-- 内部脚本 -->
  <script>
    // 页面加载完成后执行
    document.addEventListener('DOMContentLoaded', function() {
      console.log('页面加载完成');
    });
  </script>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是页面的主要内容。</p>
</body>
</html>

最佳实践 ​

  1. 始终包含 <title> 标签
  2. 使用 <meta charset="UTF-8"> 指定字符编码
  3. 为响应式设计添加视口元标签
  4. 提供页面描述和关键词元数据
  5. 将 CSS 放在 <head> 中，JavaScript 放在页面底部（除非有特殊需要）
  6. 使用外部样式表和脚本，而不是内联样式和脚本
  7. 为网站添加 favicon 图标

浏览器兼容性 ​

<head> 标签在所有浏览器中都得到完全支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

相关标签 ​