2024HTML面试题

1.BFC

BFC(Block Formatting Context)块级格式化上下文，是Web页面一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素。

BFC布局规则：内部盒子会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（高度塌陷）。

• 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算。

BFC形成的条件：

1. `float `设置成 `left `或 `right`
2. `position `是`absolute`或者`fixed`
3. `overflow `不是`visible`，为 `auto`、`scroll`、`hidden`
4. `display`是`flex`或者`inline-block` 等

BFC能解决的问题：清除浮动

BFC的方式都能清除浮动，但是常使用的清除浮动的BFC方式只有`overflow:hidden`，原因是使用float或者position方式清除浮动，虽然父级盒子内部浮动被清除了，但是父级本身又脱离文档流了，会对父级后面的兄弟盒子的布局造成影响。如果设置父级为`display:flex`，内部的浮动就会失效。所以通常只是用`overflow: hidden`清除浮动。

IFC（Inline formatting contexts）：内联格式上下文。

IFC的高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)，IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。

GFC（GrideLayout formatting contexts）：网格布局格式化上下文。当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域。

FFC（Flex formatting contexts）：自适应格式上下文。display值为flex或者inline-flex的元素将会生成自适应容器。

2.position的5种定位

• static：默认值，静态定位，表示没有定位，元素会按照正常的位置显示，此时 top、bottom、left 和 right 4 个定位属性也不会被应用。
• relative：相对定位，即相对于元素的正常位置进行定位，您可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。
• absolute：绝对定位，相对于第一个非 static 定位的父级元素进行定位，可以通过 top、right、bottom、left 这 4 个属性来设置元素相对于父级元素位置的偏移量。如果没有满足条件的父级元素，则会相对于浏览器窗口来进行定位。使用绝对定位的元素不会对其它元素造成影响。
• fixed：固定定位，相对于浏览器的创建进行定位，可以使用 top、right、bottom、left 这 4 个属性来定义元素相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素的位置都是固定不变的。
• sticky：粘性定位，它是 relative 和 fixed 的结合体，能够实线类似吸附的效果，当滚动页面时它的效果与 relative 相同，当要滚动到屏幕之外时则会自动变成 fixed 的效果。

3.display设置成inline-block两个在同一行放置会有什么问题，是怎么造成的

将元素设置为inline-block时，被隐藏的元素会变为行内块元素并显示； inline-block既具有block的宽高特性又具有inline的同行元素特性。 通过inline-block结合text-align: justify 还可以实现固定宽高的列表两端对齐布局；

两个display：inline-block元素放到一起会产生一段空白。

产生空白的原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

解决办法：将子元素标签的结束符和下一个标签的开始符写在同一行或把所有子标签写在同一行；父元素中设置font-size: 0，在子元素上重置正确的font-size；为子元素设置float:left，

4.HTML语义化

 HTML语义化就是指在使用HTML标签构建页面时，避免大篇幅的使用无语义的标签。

使用HTML语义化标签的作用：

1. 易于用户阅读，样式文件未加载时，页面结构清晰。
2. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
3. 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页。
4. 有利于开发和维护，代码更具可读性，代码更好维护。

HTML5语义化标签并没有广泛使用，比如京东、淘宝等，还是使用div元素，设置id是header或者footer，这个可能是因为HTML5新增的语义化标签的作用不是特别大，网站没有必要重写

举例几个语义化标签：

header、nav、footer、aside、article、title、section

5.HTML5 新特性

1、语义化标签，用于更好地描述和组织网页内容；

2、视频和音频，消除了对插件的依赖，并提供了更好的可访问性和可定制性；

3、画布，提供了一种原生的方法来创建交互式和动态的图形；

4、地理定位，可以创建基于位置的应用程序等等。

6.Doctype

文档声明的作用： 文档声明是为了告诉浏览器，当前HTML文档使用什么版本的HTML来写的，这样浏览器才能按照声明的版本来正确的解析。

的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。

严格模式与混杂模式的区分：

1.严格模式： 又称为标准模式，指浏览器按照W3C标准解析代码；

2.混杂模式： 又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分：网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

1.如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；

2.包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；

1.DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD 不存在或者格式不正确——混杂模式）；

2.HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的 法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

7.实现浏览器内多个标签页之间的通信

1. WebSocket协议：WebSocket协议可以实现服务器推送，因此可以用于浏览器内多个标签页之间的通信。通过在标签页中向服务器发送数据，然后由服务器向其他标签页推送转发。
2. ShareWorker：ShareWorker会在页面存在的生命周期内创建一个唯一的线程，并且开启多个页面也只会使用同一个线程。因此，可以使用ShareWorker来充当中介者的角色，实现标签页间数据的交换。
3. localStorage：可以利用localStorage实现标签页之间通信。在同一浏览器中，不同的标签页可以监听localStorage的变化，当一个标签页修改了localStorage中的数据时，其他标签页可以通过监听事件获取到更新的数据。

以上方法中，使用WebSocket协议和ShareWorker方式比较常用，localStorage方式适用于简单的数据交换，对于复杂的数据交换场景可能不太适用。在实际项目中，可以根据具体需求选择合适的方法。

SharedWorker

SharedWorker 是一种特殊类型的 Worker，可以被多个浏览上下文访问，比如多个 windows，iframes 和 workers，但这些浏览上下文必须同源。它们实现于一个不同于普通 worker 的接口，具有不同的全局作用域：SharedWorkerGlobalScope ，但是继承自WorkerGlobalScope

8.web实时技术的应用：

聊天和通讯、在线协作、实时消息推送、在线游戏、物联网、实时分析、实时音视频通信、实时定位和导航

定义：WebSocket协议是一种基于TCP的通信协议，它提供了一种全双工、低延迟的通信方式，使得客户端和服务器之间可以进行双向实时数据交换。WebSocket协议的设计目的是为了在Web浏览器和Web服务器之间提供更高效、更实时的双向通信。

WebSocket协议与HTTP协议不同，它使用了自己独立的协议标识符“ws”（不加密）或“wss”（加密），例如：ws://example.com 或 wss://example.com。WebSocket协议最初是作为HTML5标准的一部分提出的，现在已经被广泛应用于Web应用程序、在线游戏、实时通讯等领域。

WebSocket的工作原理：

建立连接：首先，客户端会向服务器发送一个HTTP请求，请求中包含“Upgrade”和“Connection”头字段，表示希望将连接升级为WebSocket。如果服务器同意升级，它会返回一个状态码为101的HTTP响应，表示连接已经升级。

数据帧：在WebSocket连接建立后，客户端和服务器可以开始发送和接收数据。数据在WebSocket中以“帧”为单位传输，每个帧都包含一个标识符、负载长度和负载数据。标识符用于指示帧的类型（例如文本、二进制数据或控制帧）。

控制帧：WebSocket协议中有一些特殊的控制帧，用于管理连接的状态。例如，“关闭”帧用于通知对方关闭连接，“Ping”帧用于检测连接是否仍然活跃，“Pong”帧用作对“Ping”帧的响应。

关闭连接：当客户端或服务器希望关闭连接时，它们会发送一个“关闭”帧。收到“关闭”帧的一方应当回应一个“关闭”帧，然后双方都可以关闭TCP连接。在某些情况下，WebSocket连接可能因为网络原因或其他问题意外断开，这种情况下并不会发送“关闭”帧。

优点：

双向实时通信：WebSocket提供了全双工通信，允许客户端和服务器同时发送和接收数据，从而实现实时交互。

低延迟：与基于HTTP的轮询或长轮询等技术相比，WebSocket能够大大降低数据交换的延迟。

减少网络开销：由于WebSocket在建立连接后可以保持长连接，因此可以减少频繁建立和关闭连接导致的额外网络开销。

易于集成：WebSocket与现有的Web技术（如HTML、CSS和JavaScript）兼容，因此开发者可以在不改变现有Web应用架构的前提下轻松地将WebSocket集成进来。

安全性：为了提高安全性，可以使用加密的WebSocket连接（wss://）。此外，建议在服务器端实施适当的认证和授权策略。

跨域问题：WebSocket允许跨域连接，但需要注意的是，服务器端应检查请求头中的“Origin”字段以防止恶意连接。

心跳检测：为了确保连接的可靠性，可以定期发送“Ping”帧进行心跳检测，以便在连接中断时及时处理。

浏览器兼容性：虽然大多数现代浏览器都支持WebSocket，但仍需注意一些较旧版本的浏览器可能不支持。在这种情况下，可以考虑使用一些库（如Socket.IO）来提供自动降级到其他传输方式的功能。

9.⾏内元素、块级元素、 空(void)元素

行内元素和块级元素是HTML元素分类的两种主要方式，它们有一些不同的特性和使用场景。

行内元素包括：a（锚点），b（粗体（不推荐）），span（常用内联容器，定义文本内区块），img（图片），input（输入框），select（项目选择），strong（粗体强调），label（表格标签），cite（引用），code（计算机代码）等。

块级元素包括：div，ul（无序列表），ol（有序列表），dl（定义列表），table（表格），form（表单），h1（一级标题），p（段落），pre（预格式化）等。

空（void）元素包括：

<br>，<hr>，<input>，<link>，<meta>

等。

行内元素和块级元素的主要区别在于它们在页面上的显示方式和布局方式。

行内元素不会导致文本换行，它们会排成一行。例如，如果你在页面上放置了几个行内元素，它们会紧密地排成一行，不会像块级元素那样独占一行。行内元素通常用于文本内部或作为其他元素的装饰。

块级元素会导致文本换行，每个块级元素都会独占一行。块级元素通常用于定义页面的各个部分，如段落、标题、列表等。

值得注意的是，块级元素和内联元素并不是绝对的分类，一些元素可以在这两种分类之间转换。例如，通过CSS的display属性，可以改变元素的类型。例如，将display属性设置为"block"可以将内联元素转换为块级元素，将display属性设置为"inline"可以将块级元素转换为内联元素。

10.src与href的区别

1. 请求资源类型不同：在请求src资源时会将其指向的资源下载并应用到文档中，比如JavaScript脚本，img等。href是Hypertext Reference的缩写，表示超文本引用，用来建立当前元素和文档之间的链接。
2. 作用结果不同：src用于替换当前内容；href用于在当前文档和引用资源之间确立联系。
3. 浏览器解析方式不同：如果浏览器在文档中添加了href，它会识别该文档为CSS文件，并行下载资源并且不会停止对当前文档的处理。当浏览器解析到src时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。

11.线程和进程

进程是程序执行时的一个实例，即它是程序已经执行到何种程度的数据结构的汇集。从内核的观点看，进程的目的就是担当分配系统资源（CPU时间、内存等）的基本单位。

线程是进程的一个执行流，是CPU调度和分派的基本单位，它是比进程更小的能独立运行的基本单位。

一个进程由几个线程组成（拥有很多相对独立的执行流的用户程序共享应用程序的大部分数据结构）

线程与同属一个进程的其他的线程共享进程所拥有的全部资源。

进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程只是一个进程中的不同执行路径。线程有自己的堆栈和局部变量，但线程没有单独的地址空间，一个线程死掉就等于整个进程死掉，所以多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差一些。但对于一些要求同时进行并且又要共享某些变量的并发操作，只能用线程，不能用进程。

浏览器是多线程的，js是单线程的。js在浏览器中可以是多线程的。

12.HTML中的meta标签在SEO中的作用

meta标签提供了关于网页的元信息，如标题、描述、关键词等，这些信息会被搜索引擎用来理解网页的内容和主题。

其中，最重要的meta标签包括：

1. title 标签：这是最直接的SEO元素。标题标签定义了网页的标题，它会显示在搜索引擎结果页的标题中。因此，为了提高点击率，标题标签应该简洁、准确、吸引人。
2. description 标签：描述标签提供了对网页内容的简短描述。虽然搜索引擎不会将描述标签作为排名因素，但它会显示在搜索引擎结果页的描述中，帮助吸引用户点击。
3. keywords 标签：关键词标签列出了与网页内容相关的词汇和短语。虽然搜索引擎已经不再将关键词标签作为排名因素，但合理使用关键词标签可以帮助搜索引擎更好地理解网页的主题。

除了以上三个重要的meta标签外，还有一些其他的meta标签，如charset、viewport、referrer等，这些标签也可能会对SEO产生影响。

需要注意的是，在使用meta标签进行SEO优化时，要避免过度优化或使用不当的标签。要确保meta标签的内容与网页内容相关、真实、简洁，避免堆砌关键词或使用无关的描述。同时，要注意遵循搜索引擎的最佳实践和规范，以获得最佳的SEO效果。

13.HTML5中的拖放API

拖放API主要包括以下事件：

1. dragstart：当拖动操作开始时触发。
2. drag：在拖动操作进行时触发。
3. dragend：当拖动操作结束时触发。
4. dragover：在拖动的元素放置到目标位置上方时触发。
5. dragenter：当拖动的元素进入目标区域时触发。
6. dragleave：当拖动的元素离开目标区域时触发。
7. drop：当释放鼠标按钮并停止拖动时触发。

要使元素可拖动，需要将其设置为可拖放，可以使用

draggable属性进行设置。例如，要将一个元素设置为可拖动，可以使用以下代码：

可拖动的元素

要处理拖放事件，需要为相关元素添加事件监听器。

element.addEventListener('dragstart', function(event) {

// 处理拖动开始事件

});

通过使用拖放API，可以实现自定义的拖放行为，例如拖放文件、拖放图片等。同时，也可以使用JavaScript来控制拖放行为，例如设置拖放效果、限制拖放区域等。

常见的应用场景：

1. 拖放文件上传：用户可以将文件从本地拖动到网页上，然后将其上传到服务器。这种拖放文件上传的方式比传统的文件上传方式更加直观和易用。
2. 拖放移动：用户可以通过拖放操作来移动网页上的元素，例如拖动一个项目到另一个列表中，或者拖动一个元素到另一个位置。
3. 自定义排序：使用拖放API，可以轻松实现自定义排序，用户可以将元素拖动到不同的位置以重新排序。
4. 交互式表格：通过拖放API，可以在表格中实现行或列的拖动排序，以便更轻松地查看和组织数据。
5. 拖放创建：用户可以通过拖放操作来创建元素，例如拖动一个文本框到页面上以创建一个新的输入框。
6. 拖放分享：在社交媒体网站上，可以使用拖放API来实现分享功能，用户可以将内容拖动到预定义的分享区域，以将其分享到其他平台。
7. 拖放生成：通过拖放操作，可以动态生成内容，例如将一个元素拖动到另一个元素上以生成一个链接。

14.使用HTML和CSS来创建响应式网页设计

1. 使用流式布局（Fluid Layout）：流式布局允许页面元素根据屏幕宽度动态调整大小。您可以使用百分比、em或rem等相对单位来设置元素的大小，而不是使用像素。
2. 使用媒体查询（Media Queries）：媒体查询允许您根据设备的特定属性（如宽度、高度、颜色等）来应用不同的CSS样式。这样，您可以为不同的屏幕尺寸创建不同的布局。
3. 使用弹性盒子（Flexbox）：Flexbox是一个CSS布局模式，允许您轻松地设计复杂的布局结构，特别是当子元素的大小是动态或者未知的时候。
4. 使用CSS框架：许多流行的CSS框架（如Bootstrap、Foundation等）已经内置了响应式设计的功能。您可以使用这些框架来快速创建响应式网页。
5. 图片和背景图片的响应式处理：通过使用CSS的max-width属性，可以确保图片和背景图片在缩小时不会超过其原始大小，同时保持其纵横比。
6. 字体大小的响应式处理：使用相对单位（如em或rem）来设置字体大小，这样当屏幕尺寸变化时，字体大小也会相应调整。
7. 使用视口元标签（Viewport Meta Tag）：视口元标签可以帮助您控制页面的缩放行为，例如禁止缩放、设置初始缩放比例等。

15.HTML中的文档对象模型（DOM）是什么，以及它在前端开发中的作用

HTML中的文档对象模型（DOM）是一种编程接口，它使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。简单来说，DOM将HTML文档转换为一个对象模型，这个模型由一系列的对象组成，每个对象都有自己的属性和方法。通过使用DOM，开发人员可以轻松地操作HTML元素，例如创建、修改、删除等。

在前端开发中，DOM起着非常重要的作用。以下是DOM的一些主要作用：

1. 动态内容更新：通过DOM，前端开发人员可以使用JavaScript来动态更新页面的内容。例如，当用户交互时（如点击按钮），可以使用DOM来改变元素的文本、样式或属性。
2. 事件处理：DOM提供了处理用户与页面交互事件的能力。例如，当用户点击一个按钮、滚动页面或输入文本时，都可以通过DOM注册事件监听器来响应用户的行为。
3. 样式和布局调整：通过DOM，可以动态地改变元素的样式和布局。例如，可以使用JavaScript和CSS来动态地改变元素的背景颜色、字体大小、位置等。
4. 数据绑定和模板引擎：通过DOM，可以将数据绑定到视图上，实现数据的实时更新。同时，可以使用模板引擎来动态生成HTML内容。
5. 浏览器兼容性：由于DOM是W3C标准的一部分，因此不同的浏览器都支持DOM。通过使用DOM，开发人员可以编写跨浏览器的代码，确保在各种浏览器中都能正常工作。

16.HTML中的事件和事件处理程序是什么

HTML中的事件是指用户或浏览器在页面交互过程中触发的动作。例如，当用户点击一个按钮、滚动页面或输入文本时，都会触发相应的事件。

事件处理程序是指当特定事件发生时执行的代码。在HTML中，可以使用JavaScript来定义事件处理程序。事件处理程序通常与特定的事件相关联，例如点击事件（onclick）、鼠标移动事件（onmousemove）等。

当事件发生时，浏览器会调用相应的事件处理程序。事件处理程序可以执行任何JavaScript代码，例如更改元素的属性、调用函数或执行其他操作。

在HTML中，可以使用内联事件处理程序或外部事件处理程序来定义事件处理程序。内联事件处理程序直接在HTML元素中定义;

17.script标签的defer和async属性

defer:

该属性用来设置 script 引用的外部脚本在文档完成解析后，触发DOMContentLoaded事件之前执行，属性值为true(defer)/false，默认为false，设置为true时可简写为只写defer。

浏览器在解析 HTML 文档时，如果遇到 script，便会停下对 HTML 文档的解析，转而去处理脚本。如果脚本是内联的，浏览器会先去执行这段内联的脚本，如果是外链的，那么先会去加载脚本，然后再执行。等到脚本执行结束后，浏览器才会继续解析 HTML 文档。

但如果页面中存在设置了defer="defer"属性并且是通过src引用的外部脚本的 script ，则该脚本不会阻碍文档的解析，只会在文档解析的同时去加载脚本信息，当文档解析完成后，暂时阻止DOMContentLoaded事件的执行，去执行已经加载好的脚本信息，如果此时脚本还未加载完成，则会等待脚本加载完成后，再执行该脚本。执行完成后，再触发DOMContentLoaded事件。

如果页面上存在多个设置了defer="defer"属性并通过src引用的外部脚本的 script ，浏览器会在文档解析的同时并行的加载这些脚本。当HTML文档解析完成后，会先检测这些脚本是否全部加载完成，若全部加载完成，则会按照它们在HTML文档中的先后顺序从上到下依次执行；若是没有全部加载完成，则会先等待其下载完成后，再按照它们在HTML文档中的先后顺序从上到下依次执行。全部脚本执行结束后，再触发DOMContentLoaded事件。

如果不是通过src引用的外部脚本，而是直接在 script 标签书写内嵌脚本，则设置defer属性无效。除此之外，defer属性对模块脚本也不起作用，因为模块脚本默认defer。

如果我们引用的外部脚本1.js需要依赖其他脚本2.js中的信息，也就是需要确保脚本1.js在执行时，脚本2.js已经加载并执行完成，此时我们就可以通过设置脚本1.js的defer="defer"来实现这种效果。

async:

该属性用来设置 script 引用的外部脚本异步加载，不阻塞HTML文档的解析，属性值为true(async)/false，默认为false，设置为true时可简写为只写async。

对于普通脚本，如果设置该属性，那么该脚本将会并行加载，不阻碍HTML文档的解析，当加载完成后，如果此时文档还没解析完成，则会终止解析，先执行该脚本，执行结束后再继续解析；如果此时文档已经解析完成了，那就是立即执行该脚本。所以设置该属性的外部脚本的执行时机并不确定，根据网络状况可能会在DOMContentLoaded事件之前，也有可能会在DOMContentLoaded事件之后。所以在脚本里面可能会获取不到在 HTML 中定义的元素，因为此时元素可能还没有被解析。

对于模块脚本来说，如果设置该属性，那么该脚本及其所有依赖将会并行加载，不阻碍HTML文档的解析，加载完成后逻辑与普通脚本相同。

如果页面上存在多个设置了async"属性并通过src引用的外部脚本的 script ，那么浏览器会在解析HTML文档的同时去并行加载这些外部脚本，执行顺序由加载完成顺序决定，谁先加载完成，谁就先执行。

我们在js中通过document.createElement("script");创建的 script 标签，如果我们通过给其src属性设置引用脚本，则这个创建的脚本默认为async异步的。如果我们通过其textContent设置内嵌脚本信息，则这个创建的脚本默认为async同步的。

defer和async

如果页面上同时存在设置了defer的 script 标签和设置了async的 script 标签，那么这两个脚本之间的执行顺序是不确定的，两者几乎是同时开始加载的，根据加载完成时机，有下面几种情况：

① 如果async脚本先加载完，defer脚本后加载完，则先执行async脚本。

② 如果defer脚本先加载完，async脚本在文档已经解析完成并且DOMContentLoaded事件之后加载完，则是defer脚本先执行的。

③ 如果很碰巧的在文档解析完成后，DOMContentLoaded事件之前，async的异步脚本加载完成了，并且defer脚本也已经加载完成了，那此时还是async脚本先执行，然后再执行defer脚本，因为async的优先级高于defer。

本文是集成网络上大部分的面试题, 并刨除了一些基本问题, 如果博主找到了更多的有关HTML的面试题也会进行更新; 因为有一部分是在网上查到的, 所以可能会有一部分和其他博主相同, 由于来源太杂无法一一标明出处, 如有介意麻烦联系博主增加来源标注;