面试总结——HTML部分

1. cookie、sessionStorage 和 localStorage的区别

2. 什么是Doctype，有什么作用

Doctype是文档类型声明（Document Type Declaration）的缩写，用来告诉浏览器文档采用哪种标准或类型来编写，确保浏览器可以正确渲染页面。

标准模式：当浏览器遇到正确的 <!DOCTYPE> 声明时，它会进入标准模式，这使得页面按照 W3C 规范来渲染。

怪异模式：如果没有正确的 <!DOCTYPE> 声明或使用了不正确的声明，浏览器可能会进入怪异模式，这时页面会被以一种兼容旧版浏览器的方式来渲染，可能会导致布局和样式的问题。

3. HTML语义化

HTML 语义化是指使用具有明确含义的 HTML 元素来构建网页内容，以便更好地传达信息和结构。

1. 改善可访问性：

• 辅助技术支持：语义化的 HTML 可以被屏幕阅读器、语音合成软件等辅助技术更好地解析，帮助视力障碍用户理解网页内容。

2. 提升SEO效果：

• 搜索引擎友好：搜索引擎可以更好地抓取和索引语义化的 HTML 内容，从而提高网站在搜索结果中的排名。
• 元数据利用：使用诸如 <article>、<section>、<header>、<footer> 等元素可以帮助搜索引擎了解页面的结构和内容的重要性。

3. 提升可维护性：

• 代码清晰度：使用语义化标签可以使代码更易于阅读和维护，因为这些标签本身已经表达了它们的目的。
• 重构容易：当需要修改设计或布局时，语义化的 HTML 使得 CSS 和 JavaScript 更容易重用和修改。

4. 响应性更好：

• 响应式设计：语义化的 HTML 结构更容易与 CSS 和 JavaScript 配合，创建适应不同设备和屏幕尺寸的设计。
• 动态内容加载：通过使用适当的 HTML 标签，可以更方便地使用 AJAX 或其他技术动态加载内容，而不破坏页面的整体结构。

4. 前端页面的构成

1. 结构层：由HTML创建，即用户所看到的内容。
2. 表示层：由CSS创建，即页面样式。
3. 行为层：用户与页面之间的交互行为，主要是JavaScript等脚本语言编写。

5. 严格模式与混杂模式

在Web开发中，浏览器根据HTML文档的<!DOCTYPE>声明来决定使用“严格模式”（Standards Mode）还是“混杂模式”（Quirks Mode）来渲染页面。这两种模式影响着浏览器如何解释CSS和HTML，以及如何处理某些布局问题。

1. 严格模式

严格模式是浏览器遵循W3C规范的标准渲染方式。在这种模式下，浏览器会尽可能地按照规范来渲染页面，这有助于确保页面在不同的浏览器之间具有一致性。要使浏览器进入严格模式，需要在HTML文档的开头包含一个正确的<!DOCTYPE>声明。

• 浏览器遵循W3C标准进行渲染。
• 页面元素的尺寸、间距等属性通常遵循CSS规范。
• 某些老旧或不规范的HTML标签或属性会被忽略或按规范处理。
• 可以确保页面在不同浏览器间的显示一致性。

2. 混杂模式

混杂模式是浏览器为了兼容早期的网页而采用的一种渲染方式。在这种模式下，浏览器会尝试模拟老版本浏览器的行为，以确保那些未使用正确<!DOCTYPE>声明的网页能够正常显示。这种模式通常会导致一些布局和样式问题，因为不同的浏览器可能会有不同的行为。

• 浏览器不完全遵循W3C标准，而是试图兼容早期浏览器的行为。
• 页面元素的尺寸、间距等属性可能不符合CSS规范。
• 可能会出现布局错误或样式问题。
• 不同浏览器间的一致性较差。

6. Web标准以及W3C

Web标准是一系列规范和技术，旨在确保Web内容的可访问性、可维护性和跨平台兼容性。这些标准由多个组织共同制定，其中最著名的是万维网联盟（World Wide Web Consortium, W3C）。W3C 是一个国际性的社区，致力于制定开放的Web标准，以促进Web的发展和进化。

1. Web标准的核心组成部分：

• HTML (HyperText Markup Language)：用于描述网页的内容结构。
• CSS (Cascading Style Sheets)：用于定义网页的表现形式，如颜色、字体和布局。
• DOM (Document Object Model)：用于描述和操作HTML或XML文档的结构和内容。
• ECMAScript (JavaScript)：用于实现网页的交互功能。

2. Web标准制定的优点：

• 可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
• 学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
• 跨平台，方便迁移都不同设备
• 降低代码维护成本

7. 行内元素和块级元素、行内块元素

1. 行内元素：span、a、img、button、input、select、strong、em、label、textarea、code、samp、kbd、sub、sup、i、b、u等。

• 和其它元素都会在一行显示
• 行高以及外边距和内边距可以设置
• 宽度就是文字或者图片的宽度，不能改变
• 行级元素只能容纳文本或者其它行内元素
• 行内元素设置宽度width无效
• 行内元素设置height无效，但是可以通过line-height来设置
• 设置margin只有左右有效，上下无效
• 设置padding只有左右有效，上下无效

2. 块级元素：p、div、form、ul、li、ol、table、h1-h6、dl、dt、dd、fieldset、legend、article、aside、details、figcaption等。

• 总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
• 宽度缺少时是它的容器的100%，除非设置一个宽度
• 高度、行高以及外边距和内边距都是可以设置的
• 块级元素可以容纳其它行级元素和块级元素

3. 行内块元素：允许在同一行内放置多个元素，同时还能设置宽度、高度和对齐等属性。

• 在同一行显示：像行内元素一样，行内块元素可以在同一行内显示多个元素。
• 设置宽度和高度：像块级元素一样，行内块元素可以设置宽度和高度。
• 垂直居中：可以使用 vertical-align 属性来调整元素的垂直对齐方式。
• 不独占一行：不像块级元素那样总是独占一行，行内块元素可以与其他行内块元素或行内元素在同一行内显示。

4. 转换

.inline-to-block{
  display:block;
}
.block-to-inline{
  display:inline;
}
.to-inline-block{
  display:inline-block;
}

8. script、script async 和 script defer 的区别

• 当没有指定async或defer属性时，脚本会被同步加载和执行，即HTML解析中断，浏览器会暂停其他处理，直到该脚本完全加载并执行完毕。这意味着如果一个脚本很大或者执行时间很长，它可能会阻塞页面的渲染和其他脚本的加载。
• 当async属性被设置时，脚本会被异步加载。这意味着脚本可以在下载的同时继续渲染页面和其他脚本的加载。一旦脚本下载完成，就会被执行。需要注意的是，async脚本的执行顺序是不确定的，它们会在下载完成后立即执行，而不论它们在文档中的位置如何。这对于那些不依赖于特定执行顺序的脚本来说是非常有用的，比如用于加载外部资源或提供非关键功能的脚本。
• 使用defer属性同样可以让脚本异步加载，但它保证了脚本的执行顺序与它们在文档中出现的顺序相同。这意味着即使脚本是异步加载的，它们仍然会按照在HTML文档中的顺序依次执行。这对于需要按特定顺序执行的脚本非常有用。
• 注意：没有 src 属性的脚本，async 和 defer 属性会被忽略。

9. Quirks（怪异）模式是什么？它和Standards（标准）有什么区别？

• 页面如果写了DTD，就意味着这个页面采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式，这就是Quirks模式，有时候也叫怪癖模式、诡异模式、怪异模式。
• 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在Quirks模式下，IE的宽度和高度还包含了padding和border
• 设置行内元素的高宽：在Standards模式下，给行内元素设置width和height都不会生效，而在Quriks模式下会生效
• 用margin：0 auto设置水平居中:在Standards模式下，设置margin：0 auto；可以使元素水平居中，但是在Quriks模式下失效
• 设置百分比高度:在Standards模式下，元素的高度是由包含的内容决定的，如果父元素没有设置百分比的高度，子元素设置百分比的高度是无效的