html面试题汇总

html面试题汇总

@ src和href的区别

（1）src用来加载外部资源，并嵌入到页面中；href是超文本引用，指向一些网络资源，建立和当前元素或文本的链接关系。
（2）当浏览器读取到绑定src属性的标签时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕；当浏览器读取到含有href属性的标签时，会并行下载处理资源，不会阻止后续标签的解析。

@ HMTL的全局属性有哪些？

• accesskey: 给元素设置快捷键

• class: 为元素定义一个或多个类名，方便 CSS 样式表进行样式控制

• style: 为元素添加行内 CSS 样式

• id: 为元素定义唯一的标识符

• data-*: 自定义数据属性，提供了存储页面或应用程序的私有自定义数据的方法，可以通过 JavaScript 来使用

• contenteditable: 指定元素是否可编辑

• dir: 定义元素文本的方向，通常用于处理不同语言之间的排版问题

• draggable: 指定元素是否可拖拽

• hidden: 隐藏元素

• lang: 定义元素内容的语言

• tabindex: 设置元素的 tab 键控制顺序

• title: 提供关于元素的额外信息

• translate: 指定元素是否需要翻译翻译

@ 超链接访问过后hover样式就不出现的原因是什么？怎么解决？

原因：因为visited伪类的优先级高于hover，所以覆盖掉了hover的效果。

解决：完整地按照顺序写上a:link{},a:visited:{},a:hover{},a:active{}

@ 表单中readonly和disabled属性的区别？

（1）readonly只针对input（text/password）和textarea有效，而disable对所有的表单元素生效

（2）提交表单的时候，disabled修饰的表单项的值不会传过去，但是readonly的可以

@ iframe的优缺点？

优点：

• 可以并行加载脚本

• 可以使用iframe进行网页的局部刷新、异步加载，提高页面响应速率

• 可以很方便的实现网页重用

• 解决加载缓慢的第三方内容如图标或广告等的加载问题

• 可以实现跨子域通信

缺点：

• 对SEO不友好，搜索引擎对iframe中的内容抓取的能力较差

• 安全性问题，可能会被用于XSS攻击

• 兼容性问题。不同浏览器对iframe的支持有所不同。

• iframe会阻塞主页面的onload事件

@ 浏览器渲染页面的过程

1、浏览器使用html解析器从网络（请求）或本地读取到html文件的字节流将其转换为字符流【html代码】

2、构建DOM树。

（1）浏览器根据html代码解析成一个个的标记，这些标记可以是开始标签，结束标签，属性名和属性值等。

（2）浏览器根据标记构建DOM节点对象，即通过标记构建对应的元素节点、文本节点、注释节点等。

（3）构建父子关系。浏览器通过分析标签之间的关系，确定每个节点的父子关系。

3、解析样式，构建CSSOM树。在构建DOM树的同时会解析CSS样式，构建CSSOM树。

4、加载javascript代码。如果 HTML 文档中包含 JavaScript 代码，则浏览器会按照顺序加载并执行其中的脚本。执行顺序是按照在 HTML 文件中的顺序来执行的。

5、构建渲染树。浏览器基于 DOM 树和 CSS 样式信息，构建出一个渲染树（render tree），即一个包含所有可见元素的树形结构。

6、布局页面。根据布局算法计算出来的元素的位置和大小等信息对每个元素进行排版。

7、绘制页面。浏览器会根据渲染树的结构和样式属性，将页面绘制到屏幕上。

@ viewport属性作用？

作用：等比控制网页在不同设备上的缩放比例，让网页显示更加正常。

content属性对应的值中常见的属性有：

1、width=device-width ：将 viewport 宽度设置为设备的宽度。

2、initial-scale=1 ：初始缩放比例为1

3、minimum-scale（用户能够缩小的最小比例）、maximum-scale（用户能够放大的最大比例）、user-scalable （控制用户是否可以缩放页面）

@ 对BFC的理解

1、定义：块级格式化上下文，用于形成一个相对于外界完成独立的空间，让内部的子元素不会影响到外部的元素。

2、触发条件：根元素、浮动元素、overflow:hidden|auto|scroll|、diplay:flex|grid|inline-block|table|…、绝对定位或固定定位。

3、解决的问题：上下外边框合并、浮动元素导致的父元素高度塌陷、包含塌陷问题。

@ 怎么实现图片自动填充到指定区域内？

使用object-fit属性，其取值有

• fill（默认，调整替换内容的大小来填充元素的内容框，有必要时会拉伸或挤压）
• contain（图片按比例填满空间）
• cover（图片保持原比例，多出的部分会被裁切）
• none（替换的内容不会调整大小）
• scale-down（内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。）

@ HTML的storage存储了解多少？

和cookie的概念类似，都是用来存储网站一些信息到本地计算机上，方便下次使用的时候能够直接从本地获取数据而不用重新请求获取数据。

storage存储分为本地存储localStorage和会话存储sessionStorage，下面是一些区别

（1）存储大小不同。cookie一般只能存储4k大小的数据量，而会话存储可以存储5MB大小的数据，本地存储可以存储20MB的数据量
（2）cookie中存储的数据无论服务器需要不要都会被发送到服务器，而storage存储只会保存在本地。
（3）数据有效期不同。cookie中的数据在过期时间结束前一直有效；会话存储的数据紧仅在浏览器窗口关闭之前一直有效；本地存储即便关闭页面、关闭浏览器之后也会一直保存。
（4）作用域不同。cookie中的数据在所有同源窗口中共享；会话存储的数据仅在当前页面下生效，其他窗口下不会生效；本地存储的数据在所有同源窗口下共享

storage存储的相关API：

• setItem(key, value) 设置存储内容
• getItem(key) 读取指定key的存储内容
• removeItem(key) 删除简直为key的存储内容
• clear() 清空所有存储内容
• key(n) 以索引值来获取存储内容

@ 了解哪些拖拽API？

按照执行顺序排序：
1、dragstart：事件主题是被拖放元素。在开始拖放被拖放元素时触发。
2、drag：事件主体是被拖放元素。在正在拖放被拖放元素时触发。
3、dragenter：事件主体是目标元素。在被拖放元素进入目标元素时触发。
4、dragover：事件主体是目标元素。在被拖放元素在目标元素内部移动时触发。
5、drageleave：事件主体是目标元素。在被拖放元素离开目标元素时触发。
6、drop：事件主体是目标元素。在目标元素完全接受被拖放元素时触发。
7、dragend：事件主体是被拖放元素。在整个拖放操作结束时触发。

@ 优雅降级和渐进增强的理解？有什么区别？

1、优雅降级是指一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容，剔除某些功能。
2、渐进增强是指首先这对低版本的浏览器进行页面重构，在保证基本功能的前提下，再针对高级浏览器进行效果、交互等方面的功能追加。

对比下来，渐进增强更加合理。

@ 文档声明（Doctype）的作用是什么？< !Doctype html>的作用是什么？

文档声明的作用是告诉浏览器当前文档是用什么版本的HTML来写的。而< !Doctype html>用于告诉浏览器当前文档是用html5标准来解析的。

@ 什么是严格模式和混杂模式？怎么区分？

严格模式：又称标准模式，是指按照w3c标准解析解析代码。
混杂模式：又称怪异模式，兼容模式，是指浏览器按照自身最高的标准解析代码，防止老站点不能工作。

区分：网页中的DTD直接影响到了文档采用那种模式，需要注意的是HTML5不存在DTD，所以也就不存在这两种模式。

1、文档中包含严格DTD，那么就是严格模式。
2、文档中包含过渡DTD和URI（统一资源标识符）的Doctype，那么就是严格模式；有过渡DTD但没有URI的Doctype就是混杂模式。
3、Doctype不存在则表示混杂模式。

@ canvas和svg的区别