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>
link 外部资源
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>