created: 2026-06-13tags: [html, css, 总结]HTML 学习总结从零到能面试一、基础概念HTML 是什么全称HyperText Markup Language超文本标记语言不是编程语言是标记语言——给内容贴标签三个角色HTML骨架 CSS装修 JS水电智能最简页面骨架!DOCTYPEhtml← 声明 HTML5html← 根容器head← 配置区用户看不到title标题/title← 浏览器标签栏显示的文字/headbody← 内容区用户看到的东西 页面内容/body/htmlhead 里的标配metacharsetUTF-8← 不乱码metanameviewportcontentwidthdevice-width, initial-scale1.0← 手机正常显示title标题/title← 标签栏 搜索结果标题linkrelstylesheethrefstyle.css← 引入 CSS二、标签基础标签分类类型特点例子成对标签开始内容/结束p文字/p自闭合标签一个标签搞定imgbrhrinput块级 vs 行内面试常考块级block行内inline位置独占一行在一行内宽高可设置生效设置无效由内容决定默认宽度父容器 100%内容宽度典型标签div, p, h1~h6, ul, lispan, a, strong, em, label三、常用标签一览标题h1~h6h1 最大、最重要每页只用一次不要跳级h1 → h3 不好段落pHTML 里回车换行无效要换行用brstrong 加粗 语义重要b 只有加粗链接a href...面试重点href 目标地址target_blank 新标签页打开relnoopener 安全设置配合_blank使用图片img面试重点src 图片路径alt 替代文字必填alt 两个作用图片裂了显示文字 读屏软件读给盲人列表ulli 无序列表圆点olli 有序列表数字容器div 块级容器包一组内容span 行内容器包一小段文字语义标签面试常问headernavmainsectionarticleasidefooter好处SEO 更好 无障碍更好 代码更清晰四、表单面试必考formaction/submitmethodPOSTlabelforusername用户名/labelinputtypetextidusernamenameusernamerequiredbuttontypesubmit提交/button/formlabel 的 for → input 的 id重要forusername和idusername关联点击文字 → 输入框聚焦用户体验 无障碍GET vs POST面试必考GETPOST数据在哪URL 里?namexxx请求体看不见安全公开较安全适合搜索、查数据登录、提交数据input 常用 typetextpasswordemailnumbercheckboxradiofilehiddensubmitinput 常用属性placeholderrequireddisabledreadonlynamevaluemaxlength五、script 标签加载方式scriptsrcapp.js/script← 阻塞下载执行都卡住 HTMLscriptsrcapp.jsdefer/script← 不阻塞HTML 解析完按顺序执行scriptsrcapp.jsasync/script← 不阻塞下载完立即执行顺序不定默认deferasync下载阻塞 HTML✅ 阻塞❌ 不阻塞❌ 不阻塞执行时机下载完就执行HTML 全解析完下载完就执行顺序按顺序按顺序不保证六、四种加载方式对解析与渲染的影响流程图0001020304050607080910HTML解析过程下载 script.js下载 async.js下载 defer.js下载 style.css─ 执行 script.js─ 执行 async.js打断解析─ 渲染开始等CSS到位─ 执行 defer.js解析完才执行HTML解析默认 script阻塞async script下载不阻塞执行可能阻塞defer script完全不阻塞link CSS下载不阻塞渲染等CSS浏览器加载时间线四种方式对比表④ link CSS读到 link relstylesheet hrefstyle.css 开始下载并行▶️ HTML解析继续 下载完✅ DOM 构建完 CSSOM 构建完 合成渲染树 渲染到屏幕③ defer script延迟读到 script srcapp.js defer 开始下载并行▶️ HTML解析继续 下载完暂存✅ HTML解析完⚙️ 按顺序执行 defer 脚本② async script异步是如果HTML没解析完如果HTML已解析完读到 script srcapp.js async 开始下载并行▶️ HTML解析继续下载完⚙️ 执行 app.js⏸ 打断解析▶️ 解析继续✅ 无事发生① 默认 script阻塞读到 script srcapp.js⏸ HTML解析暂停 下载 app.js⚙️ 执行 app.js▶️ HTML解析继续一句话总结加载方式下载阻塞解析执行阻塞解析渲染等它默认 script✅ 阻塞✅ 阻塞✅ 等async script❌ 不阻塞✅ 可能打断❌ 不等defer script❌ 不阻塞❌ 不阻塞等解析完❌ 不等link CSS❌ 不阻塞—✅ 必须等防白屏八、link 标签引入 CSSlinkrelstylesheethrefstyle.cssrel relation关系relstylesheet 这是一个样式表放head里尽早开始下载下载不阻塞 HTML 解析但渲染必须等 CSS 加载完防 FOUCimport不如link好串行下载更慢九、解析 vs 渲染解析Parsing渲染Rendering做什么读 HTML 文本变数据结构把数据结构画到屏幕用户看到❌ 看不到✅ 看到了类比读菜谱炒菜摆盘十、面试高频考点速览HTML 语义化标签有哪些好处src vs href 区别script 的 defer 和 async 区别块级 vs 行内区别GET vs POST 区别label 的 for 属性作用HTML5 新增了哪些东西为什么放 head 而不是 bodyimg 的 alt 属性有什么用有什么用