html面试题总结
文章目录
1.什么是DOCTYPE，有何作用
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。
2.H5有哪些新的元素和新特性
html5新增的主要是关于图像，位置，存储等功能增加
新元素
● 语义化标签
○ footer
○ header
○ nav 等…
● 视频 video
● 音频audio
● 画布 canvas
新特性
● 表单增强：引入新的输入类型（日期，时间，邮箱等），表单验证和自动完成功能
● 本地存储：localStorage和sessionStorage,提供存储数据的新方式
● 地理位置定位：通过GeolocationAPI获取用户地理位置信息
● 设备信息访问：通过DeviceAPI获取设备信息
● 新的javascriptAPI：如History API,Web Workers,Web Sockets扩展浏览器端功能
● 图形绘制：通过canvas可以绘制图形
● 图形拖拽：draggable,onDragStart,onDragEnd,onDragOver,onDrop等API实现拖拽
3.cookie、sessionStorage 和 localStorage 的区别
● 存储大小:
○ cookie:数据大小不能超过4k。
○ sessionStorage:-般为5M.
○ localStorage:-般为5M(部分浏览器为20M)
● 存储时间:
○ cookie:在设置的有效期内有效，过期后失效
○ sessionStorage:在当前会话下有效，关闭页面或浏览器后会被清空
○ localStorage:存储的内容需要手动清除才会消失，即使关闭页面或浏览器也依然存在
● 数据共享:
○ cookie和localStorage:在所有同源窗口中共享
○ sessionStorage:仅在相同浏览器的同一个页面中共享，不同页面(即使同源)也不共享
● 服务器通信:
○ cookie:参与服务器端通信，每次HTTP请求都会携带
○ sessionStorage和localStorage:不参与服务器端通信，仅在本地保存
● 生成方式:
○ cookie:由服务器生成，通过响应头“Set-Cookie”传给前端
○ sessionStorage和localStorage:由前端生成
4.script、script async 和 script defer 的区别
●
5.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
- 行内元素：span，a,b…
a. 可以和其他标签存在于一行，不会独占一行
b. 只能包含文本和其他行内元素，不能包含块级元素
c. 宽高属性不生效，大小由内容决定
d. 内外边距在垂直方向可能无效，通常只在水平方向有效 - 块元素：div，ul，footer，header，section,p,h1-h6…
a. 从上到下排序，独占一行或者多行
b. 宽度默认是父级的宽度
c. 可以设置宽高，内外边距等属性
d. 可以容纳内联元素和其他块元素 - 行内块元素：img，input，textarea
a. 可以设置宽度和高度以及外边家和内边距的所有样式
b. 和相邻的行内元素（行内块）在同一行显示，但之间会有空白间隙
c. 默认宽度是元素本身内容的宽度 - 空元素： br，hr
- 元素之间的转换
//元素之间转换
display:inline; //把某元素转化成行内元素
display:inline-block; //把某元素转化成行内元素
display:block; //把某元素转化为块元素
6.页面导入样式时，使用link和@import 有什么区别
● 方式不同：link是HTML标签，而@import 是CSS规则，使用时需要在CSS文件中通过@import语句引入
● 加载顺序：link标签引入样式表会同时被加载和渲染，而@import会等待页面加载完毕后在外部样式文件
● 兼容性：link标签在所有浏览器中都用良好的兼容性，而@import在一些旧的浏览器中可能会有兼容性问题，特别是IE5以下版本
● 权重影响：link标签中的样式表具有更高的权重，可以覆盖@import规则中的样式
● Dom可控性：可以通过JS操作DOM，是否插入link标签来改变样式，而@import则无法使用这种方式插入样式
7.title和h1的区别，b与strong的区别，i与em的区别
● title:用于定于网页标签，显示在浏览器标签栏上
● h1:是标题标签，表示一级标题，用于网页内容的层级结构
● b：表示字体加粗
● strong：表示内容的强调，有语义，搜素引擎会给予更高的权重
● i：表示斜体标签
● em：表示内容的强调，浏览器会默认显示为斜体
img标签的title 和alt 的区别
● title：是鼠标移入到图片上显示的值
● alt：是当图片无法显示的时候，替代的文本，搜索引擎对图片意思的判断主要是依靠alt属性
png，jpg，gif这些图片格式解释一下，分别什么时候用？
● png：是无损压缩格式，支持透明度，适合保存需要高质量和精确颜色控制的图像
○ 适合：在照片，图形设计，图标，徽标，按钮等地方使用
● jpg：有损压缩格式，比png体积要小，适合做中大图片
○ 适合：用于网页上的图片展示，以实现更快的加载速度
● gif：一般是动图，支持透明，
○ 适合：保存简单的动画和具有透明背景的简单图像。如小型图标，表情号，简单动态效果
● webp：支持有损和无损压缩，相同质量的图片，webp具有更小的体积
○ 在一些老的浏览器中不支持webp
8.如何使用HTML5中的canvas元素绘制图形
Canvas元素允许在网页上使用JavaScript绘制图形和动画
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
</script>
9.iframe的作用:
● 作用
○ 在当前页面中嵌入另一个页面或文档的视图，实现网页的嵌套和交互
○ 可以用于展示多媒体内容，如视频、音频、地图等。
○ 实现网页的局部刷新和异步加载，提高网页的加载速度和响应性能。
○ 实现网页的安全隔离，保护主页面不受恶意代码的影响。
● iframe的优点:
○ 内容重用:通过iframe，可以在多个页面中重用相同的内容。
○ 页面分割:有助于将一个复杂的网页分割成多个iframe，使得每个部分都可以独立加载和执行。
○ 用户体验增强:在页面中嵌入其他来源的网站内容，为用户提供更加丰富的信息体验。
● iframe的缺点:
○ 性能问题:过多的iframe可能导致页面加载速度变慢，尤其是在需要加载大量数据时。
○ 响应性较差:iframe无法像其所在的父页面一样对移动端进行响应式布局调整。
○ SEO问题:搜索引擎可能无法正确抓取和索引iframe中的内容，影响网站的SEO效果
○ 安全性问题:如果嵌入的页面有安全风险，那么该风险也可能传递到包含iframe的页面上。
10.meta viewport 是做什么用的，怎么写？
● 作用
○ meta viewport是HTML中一个用于控制视口(viewport)设置的元标签，用于优化网页在移动设备上的显示效果。
○ 它允许开发者指定页面的缩放和布局行为，使网页在各种设备上都能以最佳方式显示，提供更好的用户体验。
●
● 其中 content参数
○ width viewport ：宽度(数值/device-width)
○ height viewport ：高度(数值/device-height)
○ initial-scale ：初始缩放比例
○ maximum-scale ：最大缩放比例
○ minimum-scale ：最小缩放比例
○ user-scalable ：是否允许用户缩放(yes/no）
11.从浏览器地址栏输入url到显示页面的步骤
- 在浏览器地址栏输入URL。
- 浏览器检查URL是否合法，并解析URL，提取协议、主机名、端口和路径等信息。
- 浏览器查看本地缓存(包括浏览器缓存、系统缓存、路由器缓存等)，如果找到对应的资源且未过期，则直接加载资源，跳过后续步骤。
- 如果缓存中没有找到对应的资源，浏览器会向DNS服务器发送DNS查询请求，以获取URL中主机名对应的P地址。
- 浏览器使用获取到的IP地址和端口号，与服务器建立TCP连接(需要三次握手来确保连接的可靠性和正确性)
- 连接建立后，浏览器构建HTTP请求，并通过TCP连接发送给服务器。
- 服务器接收并解析HTTP请求，根据请求的内容和服务器的配置处理请求(可能包括读取文件、执行脚本、访问数据库等操作)
- 服务器处理完请求后，生成相应的HTTP响应，并通过TCP连接发送回浏览器。
- 浏览器接收HTTP响应，开始解析响应内容。如果响应体是HTML文档，浏览器会解析HTML文档，并构建DOM树。
- 浏览器同时加载HTML文档中引用的外部资源，如CSS样式表、JavaScript脚本、图像等，并根据需要构建CSSOM树11.浏览器将DOM树和CSSDOM树结合起来，构建渲染树，并根据渲染树进行布局和绘制操作，最终将页面呈现在屏幕上。以上就是整个从浏览器地址栏输入URL到显示页面的过程。
原文地址：https://blog.csdn.net/cx18333/article/details/142854055
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！