小哆啦闭关修炼已久，潜心攻读专业秘技，方才下山考研,本欲大展宏图，怎奈山河虽壮,志难酬，终是觉察考研无望。思来想去，不若弃考研之念，重拾敲代码之道，复盘前端奇术，以备闯荡职场江湖。 今日小哆啦提笔，将闭关期间整理的HTML宝典略作总结，与诸位共赏。此番分享，虽不敢言妙笔生花，但聊胜于空谈胡诌，且看能否在欢笑中助尔等拨开前端迷雾！
1、行模块和块模块有哪些分别有什么区别？
行模块和块模块的主要区别在于布局方式和使用场景。
- 行模块（如 HTML 中的 span 或 a 标签）是内联元素，按内容宽度水平排列，不会独占一行，适用于紧凑布局或文字装饰；
- 块模块（如 div 或 p 标签）是块级元素，垂直排列，占据父容器的全部宽度，通常用于承载复杂结构的区域。
- 行模块不能直接设置宽高，而块模块则可以自由调整。
- 在实际项目中，可以通过 CSS 的 display 属性（如 inline 和 block）或布局工具（如 flexbox 和 grid）灵活切换和应用这两种模块，以满足不同的界面设计需求。
2、H5有那些新元素？
HTML增加了许多新元素，提升了语义化和功能性。
- 结构元素：增加了
<header>,<nav>``,<section>和<article>用来清晰的定义页面结构 - 多媒体元素：增加了
<audio>,<video>支持音频和视频播放 - 图型元素：
<canvas>,<svg>支持动态绘图和矢量图形 - 本地离线存储：
localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除， - 增加了拖拽和释放功能
3、什么是DOCTYPE，有什么作用？
- Doctype是html5的一种文档声明，通过它可以告诉浏览器，使用哪一个一个html版本标准解析文档，在浏览器发展过程中html出现了多个版本，不同版本会有差异
- 如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。
4、说一下你对html语义化的理解。
HTML标签的语义化，简单来说就是用正确的标签做正确的事情，给某块内容用上一个最恰当的最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。 语义化优点如下：
- 在没有
css样式的情况下也能够让页面呈现出清晰的结构 - 有利于SEO（搜索引擎优化）和搜索引擎建立良好的沟通，有助于爬虫抓取到有效信息
- 方便团队开发和维护，语义化更具有可读性，减少差异化
5、前端页面有哪三层构成，分别是什么?
构成：结构层，表示层，行为层 1、结构层（structural layer） 结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中各种标签，在结构中保存了用户可以看到的所有内容。 2、表示层（Presentation layer） 表示层是有css负责创建，他的作用是如何显示有关的内容（层叠样式表），也就是相当于装修房子，看看是什么风格的主要就是写css改变样式 3、行为层（behaviorLayer） 行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了一个网页，给用户一个反馈，主要是JavaScript和Dom主宰的一个领域
6、什么是严格模式与混杂模式？
严格模式 严格模式是指浏览器严格按照W3C或者WHATWG的最新标准规范老解析和渲染网页内容。 特点
- 标准的
css盒模型。元素的计算仅仅百科内容宽度，不包括padding和border - 更好的HTML语法校验拒绝支持非标准或者过时的语法。
- 更标准的
css渲染效果。 JavaScript动作更加标准符号ECMAScript的规范。
混杂模式 混杂模式（也称兼容模式）是指浏览器为了兼容早期不符合标准的网页，模仿旧版浏览器的行为来解析渲染内容。 特点
- 非标准
css盒模型，宽度计算包括内边距和边框 - 宽松的语法解析
- 支持
css和JavaScript的旧方法对新方法可能不兼容
| 特性 | 严格模式 | 混杂模式 |
|---|---|---|
| 解析标准 | 严格遵循 HTML/CSS 标准 | 模仿旧版浏览器的非标准行为 |
| CSS 盒模型 | width = content-width | width = content-width + padding + border |
| HTML 容错能力 | 更严格的语法检查 | 更宽松，支持过时标签和错误 |
| 跨浏览器一致性 | 更加一致 | 渲染结果可能不同 |
7、对于web标准以及W3C的理解。
web标准
简单来说就是可以分为结构表现行为，其中结构是由HTML各种标签组成，简单来说就是Body里面写入标签是为了页面的结构；表现层就是css层叠样式表，通过CSS可以让页面变得美观；行为层就是指的页面和用户具有一定的交互，这部分主要就是用JS实现。
W3C
是一个制定标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准制定有好多好多好处，可以统一流程统一标准化开发工具，降低学习成本，降低代码维护。
8、cookie、sessionStorage和localStorage的区别。
| cookie | localStorage | sessionStorage | |
|---|---|---|---|
| 由谁初始化 | 客户端或服务器，服务器可以使用 Set-Cookie 请求头。 | 客户端 | 客户端 |
| 过期时间 | 手动设置 | 永不过期 | 当前页面关闭时 |
| 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间 | 是 | 否 |
| 是否随着每个 HTTP 请求发送给服务器 | 是，Cookies 会通过 Cookie 请求头，自动发送给服务器 | 否 | 否 |
| 容量（每个域名） | 4kb | 5MB | 5MB |
| 访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |
9、script、script async 和 script defer 的区别
-
<script>（默认）特性
- 脚本在 HTML 解析时立即加载和执行。
- 在脚本加载和执行期间，HTML 的解析会被阻塞（同步加载）。
执行顺序
- 脚本按照它们在 HTML 中出现的顺序加载和执行。
- 脚本的执行会阻止页面内容的渲染。
适用场景
- 必须立即执行的脚本，例如动态生成 HTML 或修改页面结构的脚本。
-
<script async>特性：
- 脚本的加载是异步的，不会阻塞 HTML 的解析。
- 加载完成后立即执行，可能会打断 HTML 的解析。
- 脚本的执行顺序不保证按 HTML 中的先后顺序（可能根据加载完成的先后顺序执行）。
执行顺序
- 谁先加载完成，谁先执行，与 HTML 中的顺序无关。
适用场景
- 不依赖其他脚本，且不需要等待 DOM 完全加载的脚本，例如广告脚本、统计脚本等。
-
<script defer>特性
- 脚本的加载是异步的，不会阻塞 HTML 的解析。
- 脚本的执行会延迟到 HTML 完全解析之后，但在
DOMContentLoaded事件之前执行。 - 脚本按照它们在 HTML 中的顺序执行。
执行顺序
- 按 HTML 中的顺序执行，无论加载的先后。
适用场景
- 需要确保 HTML 结构加载完成后才执行的脚本，例如依赖 DOM 的脚本。
注意：没有 src 属性的脚本，async 和 defer 属性会被忽略。
| 属性 | HTML 解析阻塞 | 脚本加载阻塞 | 执行时机 | 执行顺序 |
|---|---|---|---|---|
<script> | 是 | 是 | HTML 解析立即停止，加载后立即执行 | 按 HTML 中的顺序 |
async | 否 | 否 | 加载完成后立即执行，可能打断解析 | 加载完成的顺序 |
defer | 否 | 否 | HTML 解析完成后执行（DOMContentLoaded 前） | 按 HTML 中的顺序 |
