【H5 前端开发笔记】第 05 期：HTML常用标签 (1) 文档定义标签

【H5 前端开发笔记】第 05 期HTML常用标签 (1) —— 文档定义标签2026 最新版 · 结构清晰 · 可直接作为学习/面试笔记本期我们正式进入HTML 常用标签系列的第一讲重点学习文档定义相关标签。这些标签主要出现在head中是每个网页的“身份证”和“元数据”。一、文档定义标签概览文档定义标签指的是用来描述文档本身信息而不是页面可见内容的标签主要集中在head标签内。核心文档定义标签清单必须掌握标签含义是否必须优先级!DOCTYPE html文档类型声明必须★★★★★htmlHTML 根元素必须★★★★★head文档头部元数据容器必须★★★★★meta元数据标签最重要强烈推荐★★★★★title页面标题必须★★★★★base基准 URL较少使用可选★★link引入外部资源CSS、图标等常用★★★★style嵌入式 CSS 样式常用★★★script嵌入或引入 JavaScript常用★★★★二、每个标签详细讲解1.!DOCTYPE html—— 文档类型声明位置必须是 HTML 文件的第一行作用告诉浏览器使用 HTML5 标准解析触发标准模式写法简洁版HTML5 唯一推荐!DOCTYPEhtml2.html—— 根元素作用包裹整个 HTML 文档推荐属性lang语言声明对 SEO 和屏幕阅读器非常重要htmllangzh-CN!-- 或英文页面 --htmllangen3.head—— 文档头部作用存放不会显示在页面上的信息元数据、标题、资源引用等一个页面只能有一个head4.title—— 页面标题极其重要作用显示在浏览器标签页搜索引擎收录的主要标题用户收藏网页时的默认名称最佳实践标题要简洁、有吸引力包含核心关键词title小米手机官网 - 探索科技新可能/titletitle张三的个人简历 | 前端工程师/title5.meta标签 —— 元数据之王本期重点meta是自闭合标签用于提供关于页面的元信息。最常用的几种 meta 写法head!-- 1. 字符编码必须写在最前面 --metacharsetUTF-8!-- 2. 视口设置移动端适配必写 --metanameviewportcontentwidthdevice-width, initial-scale1.0!-- 3. 页面描述SEO 重要 --metanamedescriptioncontent小米科技官网提供最新手机、笔记本、智能硬件产品及服务!-- 4. 关键词现代搜索引擎权重已降低但仍可写 --metanamekeywordscontent小米,手机,Redmi,笔记本!-- 5. 作者信息 --metanameauthorcontent张三!-- 6. 刷新/跳转较少使用 --metahttp-equivrefreshcontent5; urlhttps://www.example.com!-- 7. 兼容性设置针对旧版 IE --metahttp-equivX-UA-CompatiblecontentIEedge/head2026 年最推荐的 head 基础模板直接背下来headmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0metanamedescriptioncontent这里写 50-150 字的页面描述title页面标题 - 网站名称/titlelinkrelstylesheethrefcss/style.css/head6.link标签常用主要用于引入外部 CSS 和网站图标!-- 引入 CSS --linkrelstylesheethrefcss/style.css!-- 网站 favicon 图标 --linkreliconhreffavicon.icotypeimage/x-iconlinkrelshortcut iconhreffavicon.png7.style和script简单了解stylebody{font-family:Microsoft YaHei,sans-serif;}/stylescriptsrcjs/main.js/script三、本期总结建议抄写记忆!DOCTYPE html必须写在第一行html langzh-CN推荐加上语言声明head中最重要的三个标签meta charset、meta viewport、titlemeta是元数据标签charset和viewport是必写的良好的head是网页专业度的体现四、课后练习建议立即动手新建文件05-head.html完整写出标准的 HTML5 head 结构给页面设置合适的title和meta namedescription引入一个外部 CSS 文件即使现在是空的添加 favicon 图标链接可使用在线图标第 06 期预告《HTML 常用标签 (2) —— 文本与格式化标签h、p、strong、em、span、br、hr 等》需要我立刻补充以下任意内容请直接回复本期完整标准 head 模板可直接复制使用带详细注释的完整 HTML 示例文件meta标签更高级用法Open Graph、Twitter Card、SEO 进阶把第 01~05 期笔记合并成一份完整的前端基础笔记文档继续加油第 05 期笔记到此结束你的 HTML 文档结构知识已经非常完整了✨