2026-09-01 日报

今日主题

freeCodeCamp · Learn HTML · Ch1 Basic HTML

BriefIntroduction

Responsive Web Design（v9）HTML 章第一模块：Basic HTML。从 boilerplate、属性、链接/媒体，到 Cat Photo App / Bookstore 等 workshop，把「页面怎么搭起来」先跑通。

课程入口：https://www.freecodecamp.org/learn/responsive-web-design-v9/

一、模块路线

类型	内容
Workshop	Curriculum Outline / Cat Photo App / Bookstore / Heart Icon / iframe Video
Lab	Debug Profile / Pet Adoption / Recipe / Travel Agency / Audio-Video Player / Video Compilation
Lecture	Attributes / Boilerplate / Fundamentals / SEO / Audio-Video / Images-SVG / Media / Links
收尾	Review + Quiz

二、核心概念（笔记）

1. HTML 在 Web 里干什么

HTML：结构和语义；CSS：表现；JS：行为
文档 = 元素树；浏览器解析后建成 DOM

2. 属性（Attributes）

name="value"，提供额外信息（不直接当正文显示）
常见：href、src、alt、id、class、lang、target
布尔属性：写上即 true（如 disabled、required）

3. Boilerplate

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>页面标题</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- 可见内容 -->
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>：标准模式
charset=UTF-8：字符编码，避免乱码
<link>：外链样式；<script>：外链脚本

3.1 `<script>`：默认 / `defer` / `async`

外链脚本怎么下载、何时执行，会直接影响 HTML 解析会不会被卡住。对照 web.dev 这张时序图：

图例大致是：橙色 = 解析/渲染 HTML；白色 = 下载 JS；深紫 = 暂停解析或执行 JS。

写法	下载时	执行时机	会不会卡住 HTML 解析
`<script src>`（默认）	遇到标签就下	下完立刻执行	会：边下边执行期间解析暂停
`<script defer>`	与解析并行下	整份 HTML 解析完再执行	基本不会（执行排在解析之后）
`<script async>`	与解析并行下	一下完就执行（时机不确定）	可能：执行那一刻会暂停解析

<!-- 默认：阻塞。适合必须立刻跑、且依赖紧挨着的内联场景；一般别放 head 里乱挂大脚本 -->
<script src="app.js"></script>

<!-- defer：不挡解析；多份 defer 按文档顺序执行；适合依赖 DOM 的主逻辑 -->
<script src="app.js" defer></script>

<!-- async：谁先下完谁先跑，顺序不保证；适合统计、广告等独立脚本 -->
<script src="analytics.js" async></script>

怎么选（记口诀）：

要操作 DOM、且脚本之间有顺序 → **defer**（也常放在 </body> 前，效果类似「解析完再跑」）
独立、不依赖别的脚本也不依赖完整 DOM → async
什么都不写 → 阻塞最狠，现代页面少用在关键路径上

补充：defer / async 主要对外链 src 有意义；内联 <script>...</script> 没有「后台下载」这回事。type="module" 的模块脚本默认就是 defer 语义。

4. 结构常用元素

标题 h1–h6、段落 p、分区 div / 语义标签（下章细讲）
id：页面内唯一；class：可复用样式钩子
实体：< > &   等

5. 媒体与链接

图片：img + 有意义的 alt；SVG 适合图标/矢量
音视频：audio / video + controls、source
嵌入：iframe（注意第三方与无障碍）
链接：a[href]；绝对路径 vs 相对路径（/、.、..）
target：_self / _blank（_blank 建议配合 rel="noopener noreferrer"）

6. SEO 相关 meta

<title>、meta description
Open Graph（og:title 等）影响分享卡片

三、练习清单

Curriculum Outline
Cat Photo App
Recipe / Travel Agency / Bookstore
Audio-Video Player / Video Compilation / Heart Icon / iframe Video
Basic HTML Quiz

四、今日随记

（边学边补）

Welcome to Yuyang's Blog