前端学习笔记：HTML篇

一、文档结构与浏览器解析

文档声明 (DOCTYPE)
- 作用：<!DOCTYPE html> 必须放在 HTML 文档的第一行。它不是 HTML 标签，而是一条指令，告诉浏览器应使用最新的 HTML5 标准（严格模式/标准模式）来解析页面。
- 模式区分：如果不写或格式错误，浏览器会进入“怪异模式”（混杂模式），使用向后兼容的宽松方式解析，这会导致不同浏览器的渲染结果不一致。
头部 (Head) 与元数据 (Meta)
- <head> 标签：文档头部的容器，内部信息主要给浏览器和搜索引擎看，不在页面直接显示。其中 <title> 是唯一且必需的元素。
- <meta> 标签：用于描述网页属性。常用属性包括：
  - charset：定义编码格式（如 UTF-8），设置不当会导致浏览器乱码。
  - viewport：移动端适配必备，控制视口缩放比例（width=device-width, initial-scale=1.0）。
  - keywords / description：用于 SEO，提供页面关键词和描述。
  - robots (搜索引擎索引方式)：控制爬虫行为，如 all, index, nofollow 等。

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <meta name="keywords" content="前端, HTML5, 学习笔记">
  <meta name="description" content="这是一份包含代码示例的前端 HTML 学习笔记">
  
  <title>我的前端学习笔记</title>
</head>
<body>
  </body>
</html>

二、语义化与元素分类

语意化简单来说就是用正确的标签做正确的事，是编写高质量 HTML 的核心准则。

理解 HTML 语义化
- 优点：对机器友好（利于 SEO 爬虫抓取和读屏软件解析）；对开发者友好（代码结构清晰，可读性强，便于维护）。
- HTML5 新增语义标签：<header>, <nav>, <footer>, <article>, <section>, <aside>。

HTML

<body>
  <header>
    <h1>我的博客网站</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>HTML5 新特性总结</h2>
      <p>这里是文章的具体内容...</p>
    </article>
    <aside>
      <h3>推荐阅读</h3>
    </aside>
  </main>

  <footer>
    <p>版权所有 &copy; 2026</p>
  </footer>
</body>

常见元素分类
- 块级元素（独占一行）：div, ul, ol, li, h1~h6, p, dl 等。
- 行内元素（不占独立行）：a, b, span, img, input, strong 等。
- 空元素（无闭合标签）：<br>, <hr>, <img>, <input>, <link>, <meta>。
易混淆标签辨析
- title vs h1：title 是网页元数据标题；h1 是页面内容的主标题，对页面结构和 SEO 影响极大。
- b vs strong：b 仅物理加粗无语义；strong 强调内容重要性（语义加重）。
- i vs em：i 仅斜体展示；em 表示语音语调上的强调。
表单关联 (<label>)
- 用于绑定表单控件。用户点击 label 文本时，焦点会自动转到对应的 <input> 上，提升可用性（通过 for="id" 或直接嵌套实现）。

HTML

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<label>
  密码：<input type="password" name="pwd">
</label>

三、资源加载与性能优化

src 与 href 的区别
- src (Source)：用于替换当前元素，语意上更强调加载外部资源。解析到 src（如 script, img）时，浏览器会暂停其他处理，直到资源下载、编译、执行完毕。
- href (Hypertext Reference)：用于建立联系，语意上更强调一个引用和跳转的关系。解析到 href（如 link 引入 CSS）时，浏览器会并行下载资源，不会阻塞当前文档的处理。
Script 加载：defer 和 async
- 默认情况下，<script> 会阻塞 HTML 解析。
- async（异步执行）：脚本与 HTML 解析并行下载，下载完立即执行（执行时会阻塞 HTML），多个 async 脚本执行顺序不确定。
- defer（延迟执行）：脚本与 HTML 解析并行下载，但要等 HTML 解析完毕后才按顺序执行。

HTML

<script src="normal.js"></script>

<script async src="analytics.js"></script>

<script defer src="app.js"></script>

响应式图片 (srcset)
- 允许 <img> 根据设备的屏幕密度（1x, 2x等）或视口大小自动选择加载最合适的图片分辨率，既保证清晰度又节省带宽。

HTML

<img src="default-128.png" 
     srcset="image-128.png 128w, 
             image-256.png 256w, 
             image-512.png 512w" 
     sizes="(max-width: 360px) 340px, 128px" 
     alt="响应式图片示例">

iframe 的利弊
- 优点：并行下载脚本；实现跨子域通信；隔离慢速内容（如广告）。
- 缺点：阻塞主页面的 onload 事件；对 SEO 不友好；管理复杂。

四、 HTML5 新增特性

多媒体与图形
- 音视频：<audio> 和 <video>（支持 controls, autoplay, poster 等属性）。可通过 <source> 兼容不同格式。
- Canvas 和 SVG：
  - Canvas：基于位图，逐像素渲染，依赖分辨率。适合密集型重绘（如网页游戏）。不支持事件处理器。
  - SVG：基于 XML 的矢量图，不依赖分辨率，放大不失真。每个图形都是 DOM 节点，支持事件处理。适合大型渲染区域（如地图）。

HTML

<video width="640" height="360" controls autoplay muted poster="cover.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  您的浏览器不支持 HTML5 视频标签。
</video>

客户端存储与性能
- Web 存储：替代 Cookie 的新方案，包括 localStorage（持久化存储）和 sessionStorage（会话级存储）。
- 离线存储 (AppCache)：通过 .appcache 配置文件，在有网时缓存指定资源，无网时读取缓存使应用可用。（注：现代前端开发中已逐渐被 Service Worker 取代，但原理相通）。
- Web Worker：允许在后台独立线程运行繁重的 JS 任务，通过 postMessage 与主线程通信，彻底解决复杂计算阻塞 UI 渲染的问题。

// 存储数据（持久化，关闭浏览器不丢失）
localStorage.setItem('theme', 'dark');

// 读取数据
const currentTheme = localStorage.getItem('theme'); // 返回 'dark'

// 删除数据
localStorage.removeItem('theme');

// 清空所有本地存储
localStorage.clear();

HTML5 Drag API (拖放)
- 提供了一套原生的拖拽事件生命周期：dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend。
其他新增功能
- 表单增强：新增 email, url, number, date, color 等输入类型；新增 placeholder, required, pattern 等校验属性。
- 进度条 (<progress>, <meter>)；获取 DOM 元素新方法 (querySelector)；地理定位 (Geolocation)。

HTML

<form action="/submit">
  邮箱：<input type="email" required placeholder="请输入邮箱">
  
  年龄：<input type="number" min="1" max="100" value="18">
  
  生日：<input type="date">
  
  手机：<input type="tel" pattern="^(+86)?\d{10}$">
  
  <button type="submit">提交</button>
</form>

五、宏观架构思维

渐进增强 (Progressive Enhancement) vs 优雅降级 (Graceful Degradation)
- 渐进增强：向上兼容。从最基础的功能做起（保证旧设备可用），然后针对高级浏览器追加特效和交互，是“向前看”的开发范式。
- 优雅降级：向下兼容。一开始就构建最完整、最炫酷的功能，然后再针对低版本浏览器进行修补和兼容，是“往回看”的妥协。现代开发中，更提倡以内容为核心的渐进增强策略。

一、 文档结构与浏览器解析

二、 语义化与元素分类

三、 资源加载与性能优化

四、 HTML5 新增特性

五、 宏观架构思维

一、文档结构与浏览器解析

二、语义化与元素分类

三、资源加载与性能优化

五、宏观架构思维