面试简答题

最新推荐文章于 2024-07-05 21:33:55 发布

背德典范

最新推荐文章于 2024-07-05 21:33:55 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/weixin_42488443/article/details/114270449

版权

本文深入探讨了HTML、CSS和JavaScript在面试中的常见问题，包括HTML5新标签的浏览器兼容处理、CSS的盒模型和媒体查询、JavaScript的事件处理和DOM操作，以及如何实现页面自适应等核心概念。内容详细介绍了块级元素与行内元素的区别、CSS3新特性如Flex布局，以及如何利用CSS3媒体查询实现响应式设计。同时，文章涵盖了JavaScript的数组API、事件处理、原型链和闭包等知识点，以及Ajax技术的基本理解和使用。

摘要由CSDN通过智能技术生成

html

块级元素与行内元素的区别

1.块级元素独占一行空间，行内元素可以与其他元素共享一行空间
2.块级元素能够直接设置宽高，行内元素在html中不可以直接设置宽高，css中可利用display:inline-block为行内元素设置宽高
3.块级元素可以包含块级元素与行内元素，行内元素只能包含行内元素与文本

块级元素、行内元素与空元素

在这里插入图片描述

块级/行内元素水平垂直居中

块级行内均可
给父元素设计display:flex；
align-items：center；
justify-content：center；

行内
text-align：水平居中
line-height：垂直居中（高度和父元素一致）

块级
1.给父元素设置display:flex；
给子元素设置margin：auto；
2.给父元素设置相对定位，子元素设置绝对定位，子元素的所有配合属性（top，left，right，bottom）都设置为0px，然后再给子元素设置margin：auto；
3.给父元素设置相对定位，子元素设置绝对定位，将子元素的top、left值设置为父元素的一半，此时子元素的左上角位于父元素的中心，再设置子元素的margin-left和margin-top为子元素宽高的一半

在对行内元素设置水平垂直居中时建议将行内转换为块级元素使用display:flex，margin:auto。非常方便，不用记

使用link和@import有什么区别

一：建议使用link，慎用@import
二：区别

从属关系
link：link是HTML提供的标签，不仅可以加载CSS，还可以定义rel等属性
@import：@import是css提供的语法，只有导入样式表的作用

加载顺序
link：link在页面加载时CSS同时被加载
@import：引入的CSS要等页面加载完毕后再加载

兼容性问题
link是HTML提供的语法，不存在兼容性问题
@import是css2.1提供的语法，ie5以上才兼容

DOM可控性
js控制DOM时，可以通过插入link标签来改变样式，不能通过@import改变

权重问题（有争议）
link标签引入的样式权重大于@import标签

html5有哪些新特性、移除了那些元素？

HTML5的新特性
1、语义化标签：<hrader></header><nav></nav>等
2、绘画canvas
3、SVG绘图
4、视频和音频，用于媒介的video和audio元素
5、input增强型表单控件：calendar,date,time,email,url,search
6、本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后自动删除
7、新的技术webworker,websocktGeolocation

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为

结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类
新增的元素：

(1) 结构性元素主要负责web上下文结构的定义

section：在 web 页面应用中，该元素也可以用于区域的章节描述。

header：页面主体上的头部， header 元素往往在一对 body 元素中。

footer：页面的底部（页脚），通常会标出网站的相关信息。

nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

(2) 级块性元素主要完成web页面区域的划分，确保内容的有效分割。

aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。

code：表示一段代码块。

dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。

(3) 行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。

meter：表示特定范围内的数值，可用于工资、数量、百分比等。

time：表示时间值。

progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。

video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。

audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。

(4) 交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。

details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。

datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。

menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。

command：用来处理命令按钮。

移除的元素：

纯表现的元素u、big、center、strike、tt、font、basefont
框架集frame、frameset、noframes

如何处理HTML5新标签的浏览器兼容问题

当在页面中使用HTML5新标签时，可能会得到三种不同的结果：

1)结果1：新标签被当作错误处理并被忽略，在DOM构建时会当作这个标签不存在。

2)结果2：新标签被当作错误处理，并在DOM构建时，这个新标签会被构造成行内元素。

3)结果3：新标签被识别为HTML5标签，然后用DOM节点对其进行替换。

不能识别HTML5新标签而不能使用，解决办法有两种：

1)方法1：实现标签被识别

通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。

2)方法2：JavaScript解决方案

a)使用html5shim：

在<head>中调用以下代码：

<!--[if lt IE 9]>
	<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

当然也可以直接把这个文件下载到自己的网站上，但这个文件必须在head标签中调用。

b)使用kill IE6

在</body>之前调用以下代码：

<!--if lte IE 6]>
	<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 
<![endif]-->

如何区别html和html5

1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的<div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>

简述一下你对HTML语义化的理解

1、用正确的标签做正确的事。

2、html语义化让页面的内容结构化，结构更清晰，便于浏览器和搜索引擎解析。

3、即使没有CSS样式，它也以一种文档格式显示，方便阅读。

4、搜索引擎的爬虫也依赖于html标记来确定上下文和各个关键字的权重，利于SEO。

5、使阅读源代码的人更容易将网站分块，方便阅读、维护和理解。

html和XHTML的区别

1、HTML是超文本标记语言，它对于各大浏览器，兼容性较差；XHTML是可扩展超文本标识语言，它能够很好地兼容各大浏览器。

2、XHTML要求元素必须正确嵌套。

3、XHTML要求所有元素必须关闭。

4、XHTML要求标签名必须是小写字母。

5、XHTML必须拥有根元素。

6、XHTML用id属性代替name属性。

7、XHTML属性值不能简写。

cookies，sessionStorage 和 localStorage 的区别

共同点：都是储存在浏览器端

区别：
1.cookie产生于服务器端，每次发送http请求都会携带，但是sessionStorage和localStorage一直保存在浏览器中
2.存储数据的大小不一样，cookie能够存放的数据比较小，不能超过4kb，另外两个，一般来说不能超过5m
3.有效期,cookie在设置的有效期内有效，sessionStorage在会话窗口关闭之前一直有效，localStorage一直有效除非手动删除

1.localStorage 的生命周期是永久的，sessionStorage 的生命周期是仅在当前会话下有效。
2.关闭页面或浏览器之后 localStorage 中的数据也不会消失，除非主动删除数据，否则数据永远不会消失。
sessionStorage 是在同源的窗口中始终存在的数据,只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。

3.cookie
cookie是一种浏览器会话技术，将浏览器和服务器之间的产生数据记录下来，在登录时有效。

1）只能存储String类型的数据
2）浏览器存储cookie的个数限制：300个，tomcat/webapp里面的文件都是站点，每一个站点可以存储20多个cookie，每一个cookie的大小不超过4Kb.
3）cookie的有效期：默认浏览器关闭时
设置cookie的最大生存时间，以秒为单位。参数为正整数：超过了当前的值，表示cookie过期了。
4）cookie不能存储中文的数据。要存储中文，必须加密和解密。

使用场景：
1）打开浏览器–>访问网站—>填写用户登录数据（会话数据）—>校验成功–>首页，显示当前用户的用户名信息–>关闭浏览器
直接打开浏览器—>访问同一个网站–>直接显示用户信息
2）访问一个商品列表–>点击某一个商品—>浏览器关闭
下一次进来–>访问商品列表–>记录之前访问过的商品数据