首页 > 其他分享 >html面试题总结

html面试题总结

时间：2024-10-11 14:48:04浏览次数：9  
标签：总结 面试题 浏览器 标签 元素 html iframe 加载 页面

文章目录

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）元素有哪些？

  1. 行内元素：span，a,b…
    a. 可以和其他标签存在于一行，不会独占一行
    b. 只能包含文本和其他行内元素，不能包含块级元素
    c. 宽高属性不生效，大小由内容决定
    d. 内外边距在垂直方向可能无效，通常只在水平方向有效
  2. 块元素：div，ul，footer，header，section,p,h1-h6…
    a. 从上到下排序，独占一行或者多行
    b. 宽度默认是父级的宽度
    c. 可以设置宽高，内外边距等属性
    d. 可以容纳内联元素和其他块元素
  3. 行内块元素：img，input，textarea
    a. 可以设置宽度和高度以及外边家和内边距的所有样式
    b. 和相邻的行内元素（行内块）在同一行显示，但之间会有空白间隙
    c. 默认宽度是元素本身内容的宽度
  4. 空元素： br，hr
  5. 元素之间的转换
    //元素之间转换
    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到显示页面的步骤

  1. 在浏览器地址栏输入URL。
  2. 浏览器检查URL是否合法，并解析URL，提取协议、主机名、端口和路径等信息。
  3. 浏览器查看本地缓存(包括浏览器缓存、系统缓存、路由器缓存等)，如果找到对应的资源且未过期，则直接加载资源，跳过后续步骤。
  4. 如果缓存中没有找到对应的资源，浏览器会向DNS服务器发送DNS查询请求，以获取URL中主机名对应的P地址。
  5. 浏览器使用获取到的IP地址和端口号，与服务器建立TCP连接(需要三次握手来确保连接的可靠性和正确性)
  6. 连接建立后，浏览器构建HTTP请求，并通过TCP连接发送给服务器。
  7. 服务器接收并解析HTTP请求，根据请求的内容和服务器的配置处理请求(可能包括读取文件、执行脚本、访问数据库等操作)
  8. 服务器处理完请求后，生成相应的HTTP响应，并通过TCP连接发送回浏览器。
  9. 浏览器接收HTTP响应，开始解析响应内容。如果响应体是HTML文档，浏览器会解析HTML文档，并构建DOM树。
  10. 浏览器同时加载HTML文档中引用的外部资源，如CSS样式表、JavaScript脚本、图像等，并根据需要构建CSSOM树11.浏览器将DOM树和CSSDOM树结合起来，构建渲染树，并根据渲染树进行布局和绘制操作，最终将页面呈现在屏幕上。以上就是整个从浏览器地址栏输入URL到显示页面的过程。

标签：总结,面试题,浏览器,标签,元素,html,iframe,加载,页面
From： https://blog.csdn.net/cx18333/article/details/142854055

相关文章

  • [总结]AD9154设计注意事项
    **AD9154为4通道**，分辨率**16**位，最高采样率**2.4G**Hz的**DA芯片**，支持JESD204B，可选1×，2×，4×，8×插值滤波器，内部有两个可独立控制的NCO，最高通信速率可达8×10.96Gb/s，可满足高速复杂雷达信号的产生。 功能框图如图1所示：图1AD9154功能框图从功能框图可以看出，AD9154......
  • 20241011 模拟赛总结
    得分：100+100+0+2=202感觉还行了。T1单调队列优化DP，花了将近45min，最开始写了一个假的DP花了太多时间了。T2原本像写一个乱搞，没想到就直接过了？对于每一行的第一个位置，先求出以这个点为左上顶点的答案，然后向右推，动态维护这个正方形即可，赌的就是相邻格子的答案差不会太大，所......
  • 前端Vue中如何将Div元素内容转换为图片？html2canvas库助你轻松实现！
    前端在Vue3中，如果你需要将一个div元素的内容转换成图片，可以使用一个高效且流行的库——html2canvas。这个库能够帮助你将DOM元素渲染为Canvas，并进一步将Canvas转换为图片，非常适合在Vue项目中使用。原文可查看在线演示地址：张苹果博客一，安装html2canvasnpminst......
  • 2024/10/10 模拟赛总结
    \(0+45+20+25=90\)，T1暴力写挂唐完了#A.植物收集显然催熟次数一定小于\(n\)，否则不会更优。对于催熟次数\(k\)确定时，每个种子能形成的其他种子一定如下图：那么这就变成了一个滑动窗口板子。由于当催熟次数\(k\)递增时，催熟的价格线性递增，买种子的价格单调不增，且减量单调递......
  • 2024前端高频面试题之一
    1.从输入URL到页面显示发生了什么(1)缓存查询(查询优先级:浏览器缓存,系统缓存,路由器缓存)(2)DNS解析,把网址解析唯一IP【网址是为了方便记忆】(3)执行tcp三次握手,建立http链接(4)浏览器拿到返回的数据渲染页面【可能存在跨域问题】(5)断开tcp连接2.fetch和ajax的......
  • 10.10 总结
    T1美丽的子区间还行吧，根据大眼观察法可以看出当\(x\)为使用科技的次数时，函数\(f(x)\)等于使用\(x\)次科技的最小答案是一个单谷函数，可以三分，注意到使用\(x\)次科技的时候的第\(i\)个数的答案是\(\min\limits_{j=\min(1,i-x+1)}^{i}\)。而且还要加上一个小贪心：把最......
  • 5、HTML 常用标签 - 第三集
    通过学习，我们的人生被赋予了更多的选择，创造了更多的可能性。文章目录前言1.表单域form1.1标签描述1.2示例代码1.3运行截图2.表单元素input2.1常用“输入框”类型2.2常用“选择框”类型2.3常用“按钮”类型专栏附录前言在HTML中，一个完整的表单通常......
  • 10.10日noip多校联考总结
    10.10日noip多校联考总结T1感觉就是个dij再多记录一个换乘次数然后就像普通dij一样跑就行了。但是必须得将换乘次数放进dis数组中当成一个状态记录下来，不能只记录在堆中，不然做法会假。T2发现m=0的部分分就是用一个数据结构维护区间最大子段和。m=1/2就是同时维护一个最大值......
  • 300道金典Java面试题，常见面试题及答案汇总
    Q1：Java中变量可以既是局部变量又是静态变量吗？答案：不能，将局部变量定义为静态变量会导致编译错误。Q2：Interface中可以有静态方法吗？答案：Interface中的静态方法是没有意义的，静态方法在类中不能被覆盖，而Interface中的方法默认都是抽象的，所以只能在实现Interface的类中实现。Q3：在......
  • 求 LCA 方法总结
    求LCA方法总结前言求LCA是十分基础的东西，但是方法众多。此篇介绍OI中常用的求法。倍增求LCA蒟蒻最先学的求LCA方法就是倍增求LCA。预处理和查询时间复杂度均为单\(\log\)。优点为好理解，比较简单，且便于处理路径数据。树剖LCA重链剖分。优点是预处理是线性复杂度，......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99