title标签定义网页标题,影响SEO和浏览器显示;2. meta标签设置字符集、描述、关键词、作者及视口;3. link标签引入CSS和favicon;4. script与style标签用于内联脚本和样式,提升页面功能与表现。

HTML的head标签虽然不直接显示在页面上,但它承载了网页的关键元信息,对SEO、浏览器行为、设备适配等起着决定性作用。合理设置head中的内容,能让网页更规范、更易被搜索引擎识别,并提升用户体验。
1. title标签:定义网页标题
title标签是head中最基本也是最重要的标签之一,用于定义浏览器标签页上显示的标题,同时影响搜索引擎结果中的标题展示。
- 每个页面应有唯一且具描述性的标题
- 建议控制在50-60个字符以内,避免被截断
- 包含核心关键词有助于提升SEO排名
示例:
2. meta标签:设置元数据
meta标签用于提供关于网页的元信息,常见用途包括声明字符编码、页面描述、关键词、作者以及响应式设置。
立即学习“前端免费学习笔记(深入)”;
常用类型包括:
- 字符集声明: 确保浏览器正确解析中文等非英文字符
- 页面描述: 影响搜索引擎摘要展示,建议长度150字符左右
- 关键词(已弱化):words" content="HTML, head, meta, 教程"> 多数搜索引擎已不再重视
- 作者信息:
- 视口设置(移动端必备): 保证页面在手机上正常缩放
3. link标签:引入外部资源
link标签常用于链接外部样式表、网站图标(favicon)等资源。
- 引入CSS文件:css">
- 设置favicon:
- 苹果设备图标:apple-touch-icon" href="icon.png">
注意rel属性定义关系类型,href指向资源路径。
4. script与style标签:内联脚本与样式
虽然JavaScript通常放在body底部,但head中也可使用script标签引入或编写JS代码,常用于加载分析工具或关键脚本。
- 异步加载可加async或defer属性避免阻塞渲染
- style标签用于写入内部CSS样式,适合小量或特定页面样式
示例:
基本上就这些。一个结构清晰的head区域能为网页打下良好基础,不复杂但容易忽略细节。掌握这些标签的用法,是前端开发的基本功。











