前端开发基础（二）- html

前端开发导航 🌏

HTML 简介

HTML 代表超文本标记语言（Hyper Text Markup Language），是用于创建网页的标准标记语言。它描述了网页的结构，定义了各种元素及其内容。HTML 使用标签（tags）来标记网页内容，每个标签通常由尖括号包围，例如<tags>。

HTML 基础结构

一个简单的 HTML 文件通常包含以下基本结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>示例网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
  </body>
</html>

<!DOCTYPE html>: 声明文档类型为 HTML5。
<html>: HTML 文档的根元素。
<head>: 包含有关文档的信息（例如标题和元数据）。
<meta charset="UTF-8">: 定义文档的字符编码。
<title>: 网页标题，在浏览器标签中显示。
<body>: 包含网页的可见内容。

常用标签

标题标签

标题标签用于定义不同级别的标题，从 <h1>（最高级别）到 <h6>（最低级别）。

1 2	<h1>这是一级标题</h1> <h2>这是二级标题</h2>

段落标签

段落标签用于定义文本段落。

1	<p>这是一个段落。</p>

链接标签

链接标签用于创建超链接。

1	<a href="https://www.example.com">点击这里访问示例网站</a>

图像标签

图像标签用于在网页上插入图片。

1	<img src="image.jpg" alt="示例图片" />

列表标签

有序列表和无序列表用于组织项目列表。

无序列表：

<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>

有序列表：

<ol>
  <li>第一项</li>
  <li>第二项</li>
</ol>

表格标签

表格标签用于创建表格。

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>32</td>
  </tr>
</table>

表单标签

表单标签用于创建用户输入表单。

<form action="/submit" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="提交" />
</form>

推荐的 HTML 学习资源

课程推荐：

W3Schools:🛫
MDN Web Docs:🛫

项目实践：
FreeCodeCamp:🛫

❗❗❗学习重点🤔：

理解 HTML 文档结构
- DOCTYPE 声明: 确保你的 HTML 文件以 <!DOCTYPE html> 开头，这表明该文档是 HTML5 标准。
  - 历史上有不同版本的 DOCTYPE，但现代开发几乎都使用 HTML5 的简化声明
  - 缺少正确的 DOCTYPE 可能导致浏览器进入”怪异模式”，影响页面渲染
- HTML 文档的基本结构: 理解 <html>, <head>, 和 <body> 标签的作用和用途。
  - <html> 元素应包含 lang 属性，如 <html lang="zh-CN">，有助于辅助技术和搜索引擎
  - <head> 包含元数据，不会直接显示在页面上
  - <body> 包含所有可见内容，是用户交互的主要区域
学习常用标签
- 标题标签 (<h1> - <h6>): 用于定义标题的层次结构。
  - 每个页面应只有一个 <h1> 标签，代表页面的主要主题
  - 标题应形成合理的层级关系，不要跳过级别（如从 h1 直接到 h3）
  - 标题对搜索引擎优化和可访问性至关重要
- 段落标签 (<p>): 用于定义段落。
  - 浏览器会自动在段落前后添加一定的间距
  - 避免使用空段落创建空间，应使用 CSS 处理间距
- 链接标签 (<a>): 用于创建超链接，理解 href 属性的使用。
  - 外部链接应考虑添加 target="_blank" 和 rel="noopener noreferrer" 属性
  - 使用描述性的链接文本，而非”点击这里”等不明确表述
  - 锚点链接可用于页面内导航，如 <a href="#section1">跳转到第一部分</a>
- 图像标签 (<img>): 用于插入图片，理解 src 和 alt 属性的使用。
  - 总是提供有意义的 alt 属性描述图像内容
  - 使用 width 和 height 属性可以避免布局偏移
  - 考虑使用响应式图片技术，如 srcset 和 sizes 属性或 <picture> 元素
- 列表标签 (<ul>, <ol>, <li>): 用于创建有序和无序列表。
  - 嵌套列表可以创建层级结构
  - <dl>, <dt>, <dd> 可用于创建描述列表
  - 列表是导航菜单的理想选择
- 表格标签 (<table>, <tr>, <th>, <td>): 用于创建表格。
  - 使用 <thead>, <tbody>, <tfoot> 组织表格结构
  - 使用 <caption> 为表格添加标题
  - 使用 colspan 和 rowspan 属性合并单元格
- 表单标签 (<form>, <input>, <label>, <textarea>, <button>): 用于创建用户输入表单。
  - 每个输入控件应有相关联的 <label>，通过 for 属性关联
  - 使用适当的输入类型，如 email, tel, date 等
  - 使用 required 属性标记必填字段
  - 添加适当的 placeholder 提示信息
理解 HTML 属性
- 全局属性: 了解可用于所有 HTML 元素的属性
  - class: 为元素分配一个或多个类名，用于 CSS 样式和 JavaScript 选择
  - id: 为元素分配唯一标识符，每个页面中的 ID 应该是唯一的
  - data-*: 自定义数据属性，用于存储私有自定义数据
  - style: 内联 CSS 样式（通常不推荐大量使用）
- 特定元素属性: 了解特定元素的独有属性
  - 如 <a> 的 href，<img> 的 src 和 alt
  - 表单元素的 name，value，placeholder 等
  - 布尔属性: 了解某些属性不需要值
  - 如 disabled, checked, required 等
  - HTML5 允许简写，如 <input required> 而非 <input required="required">
学习 HTML5 新元素和语义化标签
- 文档结构元素:
  - <header>: 页面或区段的头部
  - <footer>: 页面或区段的底部
  - <main>: 文档的主要内容，每个页面应只有一个
  - <nav>: 导航链接区域
  - <article>: 独立的、完整的内容块，如博客文章
  - <section>: 主题相关的内容分组
  - <aside>: 与主内容相关但可分离的内容，如侧边栏
- 媒体元素:
  - <audio>: 音频播放器，支持 controls, autoplay, loop 等属性
  - <video>: 视频播放器，支持多种控制选项
  - <source>: 为媒体元素提供多种格式选择
  - <track>: 为媒体元素添加字幕和描述
- 交互元素:
  - <details> 和 <summary>: 创建可展开/折叠的内容区域
  - <dialog>: 创建对话框或弹出窗口
  - <progress>: 显示任务完成进度
  - <meter>: 显示已知范围内的数值
理解块级元素和内联元素
- 块级元素特点:
  - 默认占据父元素的全部宽度
  - 在垂直方向上一个接一个排列
  - 可以包含其他块级元素和内联元素
  - 常见块级元素: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>, <form>
- 内联元素特点:
  - 只占据必要的宽度
  - 在水平方向上并排排列
  - 通常不能包含块级元素
  - 常见内联元素: <span>, <a>, <img>, <strong>, <em>, <code>, <time>
- 转换显示类型:
  - 通过 CSS 的 display 属性可以改变元素的默认行为
  - display: inline-block 结合了两种类型的特点
  - HTML5 引入了更多的布局模式，如 flex 和 grid
理解表单及其控件
- 表单基础:
  - <form> 的 action 属性定义表单数据的提交地址
  - method 属性定义提交方法，常用的有 GET 和 POST
  - enctype 属性定义数据编码方式，上传文件需设置为 multipart/form-data
- 文本输入:
  - <input type="text">: 单行文本输入
  - <textarea>: 多行文本输入，使用 rows 和 cols 设置大小
  - <input type="password">: 密码输入，字符会被遮蔽
- 选择控件:
  - <input type="checkbox">: 复选框，可多选
  - <input type="radio">: 单选按钮，同一组中只能选一个
  - <select> 和 <option>: 下拉选择框
  - <datalist>: 提供输入建议列表
- 专用输入类型:
  - <input type="email">: 电子邮件输入
  - <input type="tel">: 电话号码输入
  - <input type="number">: 数字输入
  - <input type="date">, <input type="time">: 日期和时间选择器
  - <input type="color">: 颜色选择器
  - <input type="file">: 文件上传
- 提交控件:
  - <input type="submit">: 提交表单的按钮
  - <input type="reset">: 重置表单的按钮
  - <button>: 更灵活的按钮元素，可包含 HTML 内容
学习如何使用注释
- 注释基础:
  - HTML 注释格式为 
  - 注释不会显示在页面上，但可在源代码中查看
- 注释用途:
  - 解释复杂代码的功能和目的
  - 临时禁用部分代码进行测试
  - 标记代码的开始和结束，特别是在复杂结构中
  - 记录修改历史、作者信息等
- 注释最佳实践:
  - 保持注释简洁明了
  - 定期更新注释以反映代码变化
  - 避免在注释中包含敏感信息
  - 使用一致的注释风格，便于团队协作
学习网页的基本布局
- 传统布局方法:
  - 使用 <div> 和 CSS 定位创建布局
  - 使用 CSS 浮动 (float) 创建多列布局
  - 使用 CSS 定位 (position) 控制元素位置
- 现代布局技术:
  - 弹性盒布局 (Flexbox): 一维布局模型，适合行或列的布局
    - 主轴与交叉轴概念
    - 使用 justify-content, align-items 等属性控制对齐
  - 网格布局 (Grid): 二维布局模型，适合复杂的网格系统
    - 使用 grid-template-columns, grid-template-rows 定义网格结构
    - 使用 grid-area 放置元素
- 响应式布局:
  - 结合媒体查询 (@media) 调整不同屏幕尺寸的布局
  - 使用相对单位 (%, em, rem, vw, vh) 而非固定像素
  - 采用移动优先设计思路
理解 HTML 实体
- 常用 HTML 实体:
  - < 和 >: 小于号 (<) 和大于号 (>)
  - &: 与符号 (&)
  - ": 双引号 (“)
  - ': 单引号 (‘)
  -  : 不间断空格，防止自动换行
  - ©: 版权符号 (©)
  - ®: 注册商标符号 (®)
  - ™: 商标符号 (™)
- 使用场景:
  - 在 HTML 代码中显示特殊字符
  - 防止代码被错误解析（如 < 和 > 被误认为标签）
  - 插入不容易直接输入的符号
- 实体编码:
  - 使用十进制编码: &#数字;
  - 使用十六进制编码: &#x十六进制数;
  - 如中文汉字”中”: 中 或 中
学习 HTML 的可访问性
- 基本原则:
  - 可感知: 所有信息应能被所有用户感知
  - 可操作: 界面组件和导航必须可操作
  - 可理解: 信息和界面操作必须可理解
  - 健壮: 内容必须足够健壮，能被不同用户代理解释
- 实践技巧:
  - 使用语义化标签，如 <nav>, <header>, <main> 等
  - 为所有图像提供有意义的 alt 文本
  - 使用适当的颜色对比度，确保文本可读性
  - 确保键盘导航可用，所有交互元素都可通过键盘访问
  - 为表单元素提供明确的标签和说明
- ARIA 角色和属性:
  - 了解 ARIA (Accessible Rich Internet Applications) 规范
  - 使用 role 属性定义元素的角色，如 role="navigation"
  - 使用 aria-label, aria-labelledby 提供无障碍标签
  - 使用 aria-hidden="true" 隐藏装饰性元素
  - 使用 aria-expanded, aria-controls 等管理动态内容
掌握 HTML 验证和调试
- 代码验证:
  - 使用 W3C 标记验证服务 (validator.w3.org) 检查 HTML 有效性
  - 使用集成开发环境 (IDE) 的实时验证功能
  - 定期验证，保持代码质量
- 浏览器开发者工具:
  - 使用元素检查器查看和修改 DOM 结构
  - 使用控制台查看错误和警告信息
  - 使用网络面板分析资源加载情况
  - 使用设备模拟器测试响应式设计
- 常见问题排查:
  - 标签未正确闭合
  - 属性值未使用引号
  - ID 重复使用
  - 嵌套错误（如块元素嵌套在某些内联元素内）
  - 特殊字符未使用 HTML 实体
理解 Meta 标签和 SEO 基础
- 核心 Meta 标签:
  - <meta charset="UTF-8">: 定义字符编码
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">: 响应式设计必要标签
  - <meta name="description" content="...">: 页面描述，显示在搜索结果中
  - <meta name="keywords" content="...">: 关键词（现代搜索引擎已较少依赖）
  - <meta name="author" content="...">: 作者信息
  - <meta name="robots" content="index, follow">: 指导搜索引擎爬虫行为
- 社交媒体优化:
  - Open Graph 标签: <meta property="og:title" content="...">，用于 Facebook 等平台
  - Twitter Cards: <meta name="twitter:card" content="summary">，用于 Twitter 平台
- SEO 最佳实践:
  - 使用描述性的标题标签 <title>
  - 合理使用标题标签 (<h1> - <h6>)，遵循层次结构
  - 使用语义化标签增强内容结构
  - 优化图像，添加适当的 alt 文本
  - 确保链接使用描述性文本
  - 创建 XML 站点地图和 robots.txt 文件
学习响应式设计基础
- 视口设置:
  - 使用 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 确保移动设备正确显示
  - 理解 initial-scale, minimum-scale, maximum-scale 和 user-scalable 属性
- 响应式图像:
  - 使用 srcset 属性提供不同分辨率的图像
  - 使用 <picture> 元素和 <source> 为不同设备提供不同格式或尺寸的图像
  - 使用 CSS 控制图像的最大宽度: max-width: 100%; height: auto;
- 结合 CSS 媒体查询:
  - 了解断点设置和常见的屏幕尺寸
  - 使用 @media 查询针对不同设备应用不同样式
  - 采用移动优先或桌面优先的设计策略
- 响应式表格:
  - 在小屏幕上使用水平滚动或改变表格显示方式
  - 考虑在移动设备上将表格转换为列表或卡片形式
掌握 HTML 与其他技术的集成
- HTML 与 CSS:
  - 使用外部样式表: <link rel="stylesheet" href="styles.css">
  - 了解内部样式表: <style> 元素
  - 了解内联样式: style 属性（尽量避免过度使用）
  - 使用 CSS 类和 ID 选择器定位元素
- HTML 与 JavaScript:
  - 引入外部脚本: <script src="script.js"></script>
  - 了解内部脚本: <script> 元素
  - 使用 defer 和 async 属性优化脚本加载
  - DOM 操作基础: 选择元素、修改内容、添加事件监听器
- 嵌入第三方内容:
  - 使用 <iframe> 嵌入外部页面（注意安全风险）
  - 嵌入地图: Google Maps, Baidu Maps 等
  - 嵌入社交媒体内容: Twitter 推文, YouTube 视频等
  - 嵌入数据可视化和图表
- API 集成基础:
  - 了解如何使用 HTML 表单向 API 发送数据
  - 理解 AJAX 和 Fetch API 的基本工作原理
  - 服务器发送事件 (Server-Sent Events) 基础
了解 HTML 最佳实践
- 代码风格和格式:
  - 使用一致的缩进（通常是 2 或 4 个空格）
  - 使用小写标签和属性名
  - 属性值使用双引号
  - 避免不必要的空格和空行
- 文件组织:
  - 适当的文件命名规范，如使用小写和连字符（例如：about-us.html）
  - 创建有意义的目录结构（如 css/, js/, images/ 等）
  - 保持路径引用的一致性（相对路径或绝对路径）
- 代码复用:
  - 创建可重用的 HTML 模板或组件
  - 使用服务器端包含 (SSI) 或模板引擎
  - 考虑使用前端框架（如 React, Vue, Angular）管理复杂页面
- 性能优化:
  - 最小化 HTTP 请求数
  - 压缩 HTML、CSS 和 JavaScript 文件
  - 延迟加载非关键资源
  - 使用 preload, prefetch, preconnect 等资源提示
- 文档维护:
  - 添加有意义的注释
  - 定期更新过时内容
  - 遵循版本控制最佳实践
  - 创建简明的开发文档