# 01-基础标签与文档结构 ## 📋 学习目标 - 理解HTML文档的基本结构 - 掌握常用HTML标签的使用 - 了解DOCTYPE和字符编码 - 学习页面元信息配置 ## 🏗️ HTML文档结构 ### 基本结构 ```html 页面标题

网站标题

主要内容
``` ### DOCTYPE声明 ```html ``` **要点**： - HTML5的DOCTYPE声明最简洁 - DOCTYPE必须位于文档第一行 - 声明文档类型影响浏览器渲染模式 ## 📝 Head区域元信息 ### 字符编码 ```html ``` ### 视口配置 ```html ``` ### SEO相关meta标签 ```html ``` ### Open Graph协议（社交分享） ```html ``` ### 资源链接 ```html ``` ## 🏷️ 文本标签 ### 标题标签 ```html

一级标题（页面主标题，每页只应有一个）

二级标题

三级标题

四级标题

五级标题
六级标题
``` **最佳实践**： - 一个页面只使用一个h1标签 - 保持标题层级的逻辑性（不要跳级） - 标题应描述内容，有助于SEO ### 段落和文本 ```html

这是一个段落。

第一行
第二行
重要文本（加粗） 强调文本（斜体） 粗体文本（无语义） 斜体文本（无语义） 下划线文本 删除线文本 高亮文本 小号文本 下标 上标 代码片段 
预格式化文本
键盘输入 程序输出 变量 行内引用
块级引用内容
引用来源 HTML 定义术语 ``` ## 🔗 链接和导航 ### 超链接 ```html 外部链接 相对路径 绝对路径 在新窗口打开 跳转到section1
目标位置
发送邮件 带主题的邮件 拨打电话 发送短信 下载PDF 下载并重命名 不传递权重 赞助链接 用户生成内容 ``` ## 📋 列表 ### 无序列表 ```html ``` ### 有序列表 ```html
  1. 第一步
  2. 第二步
  3. 第三步
  1. 从5开始
  2. 6
  1. 3
  2. 2
  3. 1
  1. A
  2. B
``` ### 描述列表 ```html
术语1
术语1的描述
术语2
术语2的描述1
术语2的描述2
``` ## 🖼️ 图片 ### 基本用法 ```html 图片描述 图片描述 缩略图 ``` ### 响应式图片 ```html 响应式图片 响应式图片 图片描述 图片描述 ``` ### 图片优化 ```html 图片描述 图片描述 图片描述 ``` ## 🎯 实践练习 ### 练习1：创建个人简历页面 要求： - 使用语义化标签构建页面结构 - 包含个人信息、教育背景、工作经历、技能 - 正确使用标题层级 - 添加完整的meta信息 ### 练习2：制作文章页面 要求： - 使用article和section组织内容 - 包含标题、发布时间、作者信息 - 使用合适的文本格式化标签 - 添加目录锚点链接 ### 练习3：响应式图片展示 要求： - 使用picture元素实现响应式图片 - 提供WebP格式和JPEG格式 - 实现图片懒加载 - 添加图片说明 ## 📚 参考资料 - [MDN HTML文档](https://developer.mozilla.org/zh-CN/docs/Web/HTML) - [W3C HTML规范](https://www.w3.org/TR/html/) - [HTML5规范](https://html.spec.whatwg.org/) - [Can I Use](https://caniuse.com/) - 浏览器兼容性查询 ## ⚡ 小结 ### 核心要点 1. HTML5使用简洁的``声明 2. 正确配置字符编码和视口 3. 使用语义化标签提升可访问性和SEO 4. 掌握meta标签优化社交分享和搜索引擎 5. 合理使用响应式图片技术 ### 常见问题 Q: 为什么要使用语义化标签？ A: 语义化标签能提升代码可读性、SEO优化、可访问性，有助于搜索引擎和辅助技术理解页面结构。 Q: alt属性为什么重要？ A: alt属性为图片提供替代文本，在图片加载失败或使用屏幕阅读器时显示，对SEO和可访问性至关重要。 Q: target="_blank"需要配合rel="noopener noreferrer"吗？ A: 是的，这能防止新页面访问window.opener，避免安全风险和性能问题。