HTML知识体系
html所有的知识，只有一条根逻辑，也就是html是浏览器用来构建页面的结构化信息
一切的知识点，都围绕这四件事
- 【解析层】：浏览器怎么读HTML
- 【资源层】：HTML怎么加载到外部资源
- 【结构层】：页面怎么写才合理
- 【能力层】：HTML自带哪些功能
所有的八股题，都是从这里长出来的，所以我们只需理解流程，就不用去刻意背八股
解析层
浏览器读HTMl的第一步，所有规则的根
-
第一步：看DOCTYPE ----> 决定用 标准模式 / 怪异模式
-
第二步：看字符编码 ----> 靠
<metacharset = "UTF - 8">解决浏览器乱码 -
第三步：按标签规则构建DOM ----> 所有有块级 / 行内 / 空（void）元素的分类，有标签嵌套规范
从这里可以推出来的八股：
- DOCTYPE作用、严格模式 vs 混杂模式
- 浏览器乱码原因 & 解决
- 行内 / 块级 / void元素 有哪些
- head标签的作用
资源层
HTML引入资源只有两种意图，这决定了加载行为
- 引入资源只有两种方式：src / href
- 遇到 < script src > : 默认阻塞HTML解析、优化defer / async ----> 再现代：type = "module"
- 遇到 < link href > : 不阻塞解析，但阻塞渲染
- 遇到图片：srcset做响应式、loading = "lazy"懒加载
从这里可以推出来的八股：
- src vs href
- defer vs async
- script 加载策略
- 渲染阻塞 / 解析阻塞
- img的srcset
- preload / prefetch
结构层
HTML不是样式标签，是内容语义标签
- 不是用div堆，而是表达内容含义
语义化标签 ： header / nav / main / article / section / footer
- 同样是加粗 / 斜体
b vs strong 、 i vs em ：一个是视觉、一个是语义
- title是页面标题， h1是内容标题
从这里可以推出来的八股：
- 语义化理解
- title vs h1
- b / strong 、 i / em
- 无障碍A11y基础
能力层
HTMl5给HTML新增了原生交互、媒体、存储能力，减少对JS的依赖
- 表单
< lable > 扩大点击、可访问性
- 图形
SVG矢量（DOM结构）、 Canvas位图（像素图）
- 交互 ----> Drag API 拖放
- 嵌入
iframe隔离、安全、sandbox
- 存储
html5离线缓存（已废弃）、现代：service wroker
从这里可以推出来的八股：
- lable作用
- Canvas vs SVG
- drag API
- iframe 优缺点
- 离线存储原理
顶层设计思想
怎么写更健壮
- 渐进式增强：先能用 -----> 再好使
- 优雅降级： 先完整 ----> 再兼容
八股部分
解析层
文档声明（DOCTYPE）和 < ! Doctype html> 有何作用 ？ 严格模式与混杂模式如何区分 ？ 它们有什么意义
本质：文档类型声明，不是HTML标签，是给浏览器的版本说明书，
< ! Doctype html> 作用：
- 声明当前文档是HTML5标准
- 强制浏览器进入标准模式（严格模式），按照W3C最新规范渲染页面
- 避免浏览器进入怪异模式，保证页面在不同浏览器中渲染一致
严格模式 vs 混杂模式区分及意义：
- 触发条件不同：
严格模式：正确写 < ! Doctype html>
混杂模式：省略 DOCTYPE / 写旧版声明
- 渲染规则不同：
严格模式：严格遵循W3C HTML / CSS 规范，盒模型、布局、标签嵌套全按标准
混杂模式：兼容IE5/6旧逻辑，盒模型】、布局行为非标准
- 实际意义：
严格模式：保证浏览器渲染一致，现代开发基础
混杂模式：仅兼容20年前旧网页，会导致现代网页布局错乱
浏览器乱码的原因是什么 ？ 如何解决 ？
- 原因
浏览器在解析HTML的编码环节，未正确识别文件字符编码，用错误编码解码导致乱码
- 解决
在 < head > 第一行 < meta charset = "UTF-8">声明编码，同时保证文件保存为UTF-8 格式、 服务器返回正确编码头
行内元素有哪些 ？块级元素有哪些 ？空（void）元素有哪些
- 块级元素
核心原理：默认独占一行，宽度默认撑满父容器，可嵌套块级 / 行内元素（< p >不能嵌套块级）
常见块级元素:
<div> <p> <h1>~<h6> <ul> <ol> <li> <header> <nav> <main> <section> <article> <footer>
<form> <table>
- 行内元素
核心原理：默认不换行，宽度由内容决定，不能嵌套块级元素
常见行内元素：
<span> <a> <strong> <em> <b> <i> <u> <label> <span> <img>(img是行内替换元素，表现类似行内)
- 空（void）元素
核心原理：单标签闭合，不能嵌套任何元素
常见空元素
<img> <input> <br> <hr> <meta> <link> <area> <base> <col> <embed> <param>
<source> <track>
head标签有什么作用，其中什么标签必不可少
- 作用
存放页面的配置信息、内容不显示在页面上、给浏览器、搜索引擎看的
- 必不可少的标签
<meta charset= "UTF-8"> 解决乱码
<title>页面标题<title/>
资源层
src和href区别
- src：source，资源引入，将外部资源嵌入到当前文档中，是内容的一部分，src会阻塞页面解析渲染
浏览器遇到 < srcipt src >会暂停解析，加载并执行完脚本才继续（除非加 async / defer）
常见标签：<script> <img> <video> <iframe>
- href：hypertext reference，超文本引用，建立当前文档与目标资源的关联关系，不嵌入内容，href不会阻塞页面解析
浏览器并行加载，不阻塞HTML解析
常见标签：<base> <link> <a>
srcipt标签中的defer和async的区别
- 共同点
都是 < script >的布尔属性，只对外部脚本有效（src）
都不会阻塞HTML解析
都让JS异步加载
- 区别
aync：加载完立即执行，谁先加载完谁先执行，执行顺序不确定（乱序），执行时机可能在DOM解析完之前，也可能在之后
可能阻塞渲染
defer：加载完不执行，等整个HTML解析完毕再执行，按脚本在页面中的顺序执行（有序），执行时机在
DOMContentLoaded之前，不会阻塞渲染
常用的meta标签有哪些
// 告诉浏览器这个网页用的是UTF-8编码，不写会乱码，必须写在最前面
<meta charset= "UTF-8">
// width=device-width：页面宽度 = 手机屏幕宽度 initial-scale=1.0：初始缩放比例1:1 ， 不放大也不缩小
// 也就是让网页在手机上正常显示，不被缩小成模糊小网页
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
// 给搜索引擎看的关键词，现在SEO权重很低
<meta name= "keywords" content= "学习">
// 网页描述，搜索引擎结果下面那行小字就是它，影响点击率，不影响排名
<meta name= "description" content= "学习">
// 告诉IE浏览器：用你最新的内核渲染，别用老旧模式，用来解决IE浏览器兼容性问题
<meta http-equiv= "X-UA-Compatible" content= "IE=edge">
// 给搜索引擎爬虫用，noindex：不收录此页面，nofollow：不追踪页面内链接，all：允许收录 + 追踪（默认）
<meta name= "robots" content= "noindex, nofollow">
// n秒后自动跳转或者刷新，现在很少用
<meta http-equiv= "refresh" content= "3"; url= https://xxx>
// 添加到桌面后，全屏启动，无地址栏
<meta name= "apple-mobile-web-app-capable" content= "yes">
// 给国产双核浏览器（360、QQ、UC），强制使用webkit极速模式，不使用IE兼容模式
<meta name= "renderer" content= "webkit">
结构层
对HTML语义化的理解
- 什么是HTML语义化
在没有css的情况下，页面依然能清晰地展示内容结构，让人和机器都能看懂
标题用： <h1> ~ <h6>
段落用：<p>
导航用：<nav>
侧边栏用：<aside>
文章用：<article>
头部底部用：<header>, <footer>
区块用：<section>
- 为什么要语义化
代码可读性高（开发者一眼能看懂结构，便于维护、协作）
利于SEO（搜索引擎优化，爬虫能更好的识别标题、导航、正文，提高页面权重）
更好的阅读性（a11y， 屏幕阅读器、盲人设备能正确朗读内容结构）
浏览器兼容性 & 退化友好（即使css加载失败，页面结构依然清晰）
团队维护成本低（结构自然解释，减少命名冲突和混乱）
title与h1的区别、b与strong的区别、i与em的区别、img标签alt和title的区别
- title和h1的区别
title：页面标题，显示在浏览器标签栏，给搜索引擎和用户看页面主题，一个页面只有一个，SEO权重最高，写在< head >里面
h1:页面正文标题，显示在页面内容里，建议一个页面一个，多个也不报错，但不利于SEO，SEO权重仅次于title，写在< body >里
- b和strong的区别
b：单纯加粗，只有样式，无语义，不提升权重
strong：强调重要性，有语义，代表内容重要，会被搜索引擎、屏幕阅读器识别为重点内容
- i和em区别
和上面几乎一模一样，一个斜体，一个强调
- img标签alt和title的区别
alt：必须有，图片加载失败、不存在时候显示的文字，SEO识别内容、屏幕阅读器的内容，
title：可选，鼠标悬停在图片上弹出的提示文字，对SEO没有用
label的作用是什么？如何使用？
- label是干嘛的
绑定表单元素（input、textarea、select等）
扩大点击区域：点击文字也能选中单选框 / 复选框；点击文字能让输入框自动聚焦
提升可访问性：屏幕阅读器会把文字和输入框关联起来朗读
纯语义化：没有样式，只做功能绑定
- 使用方式
// 显式绑定，意思是label要绑定id=“xxx”的那个input，建议这么写，结构清晰
<input type= "checkbox" id="agree">
<label for="agree">已阅读协议</label>
// 隐式绑定，意思是里面包起来的是绑定的，结构简单但是结构耦合在一起
<label>
<input type="radio" name="gender"> 男
</label>
能力层
HTML5有哪些更新
新增语义化标签、多媒体支持、Canvas、本地存储、新表单、新API、去除废弃标签，更语义、更强交互、更少依赖插件
Canvas和SVG的区别
canvas：基于像素，是一张位图，放大会模糊、失真，无DOM、性能高适合大量绘制
svg：基于XML矢量描述，是矢量图，放大不失真、清晰度不变、可操作DOM、支持事件，适合图标和简单图形
说一下HTML5 drag API
核心三步：被拖拽元素、放置目标区域、数据传递
- 被拖拽元素触发的事件：dragstart：开始拖拽、drag：拖拽中、dragend：拖拽结束
- 放置目标区域上触发：dragenter：进入目标、dragover：在目标上移动、dragleave：离开目标、drop：松开位置（最关键）
关键点：draggable="true" 想要元素能拖，必须加上这个属性； dragover 必须阻止默认行为e.prventDefault()否则不会触发drop
，drop也要阻止默认行为，防止浏览器跳页 / 打开文件 ； 数据考dataTransfer传递
// 存数据
e.dataTransfer.setData('key', 'value')
// 取数据
e.dataTransfer.getData('key')
可拖拽文件通过 dataTransfer.files 获取文件列表
总的来说：HTML5拖拽API通过给元素设置 draggable，配合dargstart、datagover、drop等事件实现拖拽，用dataTransfer传递
数据，dragover必须阻止默认行为才能正常放置
渐进式增强和优雅降级的区别
优雅降级：从现代浏览器开始构建，再向下兼容旧llq，保证基本可用
渐进式增强：从基础核心内容开始，逐步增加高级特性，新浏览器获得更好的体验
共同点：都是为了兼容不同浏览器，保证可用性
现在主流思想：渐进式增强
iframe有哪些优点和缺点
iframe就是在一个网页里，再嵌套一个独立的小网页，也就是在当前页面展示另一个页面
- 优点：
安全隔离（iframe是独立文档，与父页面不同源时完全隔离，不会污染父页面的js、dom）
简单易用（可以直接嵌入第三方页面、广告、编辑器、地图、视频等）
并行加载（旧浏览器对同一域名有并发请求限制，iframe可以多开一个请求通道）
无刷新上传 / 跨域（早期AJAX未普及时，常用ifrme实现无刷新提交表单）
- 缺点
阻塞主页面onload（iframe加载完，主页面 window.onload才触发，会拖慢页面加载）
资源无法共享（独立window、独立渲染进程，占用内存、资源消耗大）
SEO不友好（搜索引擎对iframe内容抓取困难，容易被判定为低质页面）
弹窗、遮罩层问题（iframe内部的alert、遮罩层只在框内生效，体验割裂）
通信麻烦（父子页面通信只能用 postMessage，跨域时限制多）
移动端兼容性差（滚动、高度自适应、缩放问题多，体验差）
说一下web worker
web worker 是HTML5提供的多线程方案，让JS可以在独立线程运行耗时计算，不阻塞主线程渲染；不能操作DOM，通过postMessage通信，适合大量计算任务
HTML5的离线存储怎么使用，它的工作原理是什么
HTML5离线存储即Application Cache原理是通过manifest清单文件声明需要缓存的资源，浏览器首次访问时下载并缓存，断网时直接加载本地缓存，实现离线访问；使用时只需在HTML标签引入manifest文件，并配置缓存、网络、降级规则；目前已经被废弃，由
Service Worker替代
浏览器是如何对HTML5的离线存储资源进行管理和加载的
后续补充。。。。
