Z
ZHANK
布局与结构

head 头部元素

title/meta/link/style/script/base 元信息标签

head 头部元素

<head> 不显示在页面上——它包含页面的元信息,告诉浏览器和搜索引擎如何处理页面。

学完本章你将: 掌握 title/meta/link/style/script/base 元信息标签。


title 页面标题

html
<head>
  <title>页面标题 | 网站名</title>
</head>
<!-- 显示在浏览器标签页 + 搜索引擎结果 -->

💡 标题影响 SEO——每页应该有唯一且有意义的标题。


meta 元数据

html
<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">

  <!-- 响应式视口 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- SEO 描述(搜索结果摘要) -->
  <meta name="description" content="150字以内的页面描述">

  <!-- 关键词(现代搜索引擎已不太重视) -->
  <meta name="keywords" content="HTML, 教程, 前端">

  <!-- 作者 -->
  <meta name="author" content="你的名字">
</head>

html
<head>
  <!-- 外部 CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- 网站图标 -->
  <link rel="icon" href="favicon.ico">

  <!-- 预加载字体等资源 -->
  <link rel="preload" href="font.woff2" as="font">
</head>

style 与 script

html
<head>
  <!-- 内嵌 CSS -->
  <style>
    body { font-family: Arial; }
  </style>

  <!-- 外部 JS(可用 defer 延迟执行) -->
  <script src="app.js" defer></script>
</head>