H5常见面试题及答案（一）

秒速五厘米 2023-07-04 11:17 10阅读 0赞

1、文字超出显示为省略号  
//单行：  
overflow: hidden;  
text-overflow:ellipsis;  
white-space: nowrap;  
//多行：  
display: -webkit-box;  
\-webkit-box-orient: vertical;  
\-webkit-line-clamp: 3;  
overflow: hidden;  
2、div垂直居中

position: absolute;  
top: 50%;  
left: 50%;  
background-color: \#000;  
\-webkit-transform: translateX(-50%) translateY(-50%);  
3、浏览器加载过程

浏览器接收到html代码，可能是一份完整的文档，也可能是一个chunk，即开始解析。解析过程是先构建dom树，再根据dom树构建渲染树，渲染树根据渲染树就会绘制到浏览器上。构建dom树的过程即根据html代码自上而下构建dom树，当遇到script文件加载／执行会阻塞后面dom树的构建（javascript可能会改变dom树），而遇到css文件则会阻塞渲染树的构建，即dom树依然继续构建（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上。而无论哪个阻塞，该加载的文件还是会加载，例如html文档中的其他css／js／图片文件。至于javascript被加载后就会被执行，执行的过程也阻塞树的构建。是执行完了才解析其他内容，而不是执行完了才加载其他内容。

4、http请求过程

a. 域名解析
    
    b. 发起TCP的3次握手
    
    c. 建立TCP连接后发起http请求
    
    d. 服务器端响应http请求，浏览器得到html代码
    
    e. 浏览器解析html代码，并请求html代码中的资源
    
    f. 浏览器对页面进行渲染呈现给用户

5、sessionStorage和localStorage的区别，以及cookes和web storage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

6、web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

7、Ajax请求的原理？

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
    
    (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
    
    (3)设置响应HTTP请求状态变化的函数.
    
    (4)发送HTTP请求.
    
    (5)获取异步调用返回的数据
    
    (6)使用JavaScript和DOM实现局部刷新

8、原型、原型链

每个函数都有一个prototype(原型)属性;对象是没有原型的 ，但是有_proto_(原型链)，指向父级函数的原型。

10、事件委托、事件冒泡、事件捕获

一个div里面有个span元素 ，当鼠标单击span时，这个事件算是谁的？div还是span？
    
    事件冒泡： IE认为，这个事件首先触发span,然后依次往父节点传递，最终传递到document，(这个过程称为冒泡)
    
    事件捕获：网景浏览器认为，任何事件都首先触发document，然后依次往下传递到span元素，(这个过程称为捕获)
    
    事件委托：根据事件冒泡机制，任何事件都会冒泡到document，事件委托就是把所有事件处理函数绑定到document，根据事件参数判断事件源对象，判断不同的对象给予不同的处理函数，

11、跨域

a: josnp (最常用一种方式 ，耗时最短，最有效)是通过get请求

简单来说就是利用jsonp动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议了

b :服务器设置响应头

http://localhost:8080 发起ajax请求
    
    接口所在服务器http://localhost:8090

“Access-Control-Allow Origin”，“http://localhost:8090”

c : 服务器重定向（代理）

http://localhost:8080   发起ajax请求
    
    本地服务器接口  http://localhost:8080做一个代理接口，后端调后端 绕过安全协议
    
    接口所在服务器http://localhost:8090

1.新的 HTML5 文档类型和字符集是？  
HTML5 文档类型很简单：

<!doctype html>  
HTML5 使用 UTF-8 编码示例：

2.HTML5 中如何嵌入音频？ 当前，audio 元素支持三种音频格式： Your browser does’nt support audio embedding feature. 3.HTML5 中如何嵌入视频？ 当前，video 元素支持三种视频格式： Your browser does not support the video tag. 4.除了 audio 和 vidio，HTML5还有哪些媒体标签？ 标签定义嵌入的内容，比如插件。 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 Your browser does not support the video tag. 播放带有字幕的视频： 5.HTML5 存储类型有什么区别？ HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：

localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失  
sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。  
6.HTML5 canvas 元素有什么作用？  
用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML5 上进行图形操作

<!doctype html>

Document 效果：

7.HTML5 有哪些新增的表单元素？  
新的input类型：

新的表单元素：

8.HTML5 废弃了那些 HTML4 标签？

9.HTML5 标准提供了哪些新的API？  
1：canvas，不用多说，可以画出很多绚丽的图形，甚至可以直接做出伪3D游戏。

2：媒体控制，也很好理解(直译就是回放功能，假如只用html5.0以下的标签写，以前的音乐播放是不可能实现滚动条的。)

3：离线网页程序，可以把资源文件完全缓存在客户端，并且通过js的一些方法清空缓存

4：文档编辑，应该是更好的支持对文档的编辑。

5：拖动，可以将文件拖动到某些区域上传

6：跨文档请求，websocket，一种更加高效的通讯方式

7：历史管理，可以通过js管理和插入历史记录

8：MIME头自定义

9：客户端数据存储，localstoage sessionstoage

10：地理位置共享

11：本地数据库

12：索引数据库

10.HTML5 应用程序缓存和浏览器缓存有什么区别？  
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

实现借助于 manifest 文件

11.doctype 作用？严格模式与混合模式如何区分？它们有何意义？ 声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示

12.行内元素有哪些？块级元素有哪些？空（void）元素有哪些？  
块级元素：

address - 地址

blockquote - 块引用

center - 举中对齐块

dir - 目录列表

div - 常用块级容易，也是css layout的主要标签

dl - 定义列表

fieldset - form控制组

form - 交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

ol - 排序表单

p - 段落

pre - 格式化文本

table - 表格

ul - 非排序列表

行级元素：

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码(在引用源码的时候需要)

dfn - 定义字段

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线(不推荐)

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器，定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

空元素，没有内容的 HTML 元素被称为空元素：

\- 定义换行

--------------------

\- 分割线

13.link 和 @import 的区别是？  
引用CSS的两种方式：

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

14.浏览器的内核分别是什么？  
Trident(IE内核)，是微软开发的一种排版引擎。

Gecko(Firefox内核)，是一套开放源代码的、以C++编写的网页排版引擎。

Presto(Opera前内核) (已废弃)。

Webkit(Safari内核,Chrome内核原型,开源)。

15.常见兼容性问题及解决方案？  
1.清除图片下方出现几像素的空白间隙  
img\{display:block;\}  
img\{vertical-align:top;\}  
2.不同浏览器的标签默认的外边距和内边距不同  
\*｛margin:0;padding:0｝

16.用js写个原生的ajax过程  
window.οnlοad=function()\{  
document.getElementsByTagName(‘a’)\[0\].οnclick=function()\{  
if (window.XMLHttpRequest)\{  
var xmlhttp=new XMLHttpRequest();  
\}else\{  
var xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);  
\}  
var method=‘GET’;  
var url=this.href;  
xmlhttp.open(method,url);  
xmlhttp.send();  
xmlhttp.onreadystatechange=function()\{  
if(xmlhttp.readyState4)\{  
if(xmlhttp.status200||xmlhttp.status==304)\{  
var txt=xmlhttp.responseText;  
var json=eval(’(’+txt+’)’);  
document.getElementById(‘name’).innerHTML=‘姓名’+json.ruei.name;  
document.getElementById(‘age’).innerHTML=‘年龄’+json.ruei.age;  
document.getElementById(‘job’).innerHTML=‘工作’+json.ruei.job;  
\}  
\}  
\}  
return false;  
\}  
\}  
17.请实现，鼠标点击页面中的任意标签，alert 该标签的名称（注意兼容性）  
<!doctype html>

alert标签名

div

a **b** 方法2：

<!doctype html>

alert标签名

div

a **b** 18.请指出以下代码的性能问题，并进行优化。 var info="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。"; info+="提供新鲜好玩的家装资讯，电子科技，家趣产品。"; info+="精选的趣家商品，创意的家趣装修。"; info+="淘-趣家优品，享-生活乐趣。"; info=info.split("，"); for(var i=0 in info)\{ alert(info\[i\]); \}; 更改后： 火狐测试后，平均时间块2-3毫秒，有可以改进的还望指出... 1.字符串相加效率比较慢 2.考虑到代码要的效果，可以用数组直接实现，省去 info.split() var info=new Array(); var info\[0\]="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。提供新鲜好玩的家装资讯"; var info\[1\]="电子科技，家趣产品。精选的趣家商品"; var info\[2\]="创意的家趣装修。淘-趣家优品"; var info\[3\]="淘-趣家优品，享-生活乐趣。"; for(var i=0,max=info.length;i

19.请给出异步加载js方案，不少于两种。  
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。

1.defer（只支持IE）

2.async规定一旦脚本可用，则会异步执行，只适用于外部脚本

3.创建script，插入到DOM中，加载完毕后callBack

<!doctype html>

alert标签名

20。请写出jquery绑定事件的方法，不少于两种。  
.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。(live由于性能原因已经被废弃)

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

1.无论使用bind、on、delegate、click(function())都是重复绑定，即绑定的同类型事件被放到一个事件队列中，依次执行，后绑定的事件不会替换之前绑定的，对于on使用off，delegate用undelegate，bind及click使用unbind来解除绑定，例如unbind(type)传递为事件类型，如果不传type则解出所有事件绑定；需要注意的是元素本身自带的事件无法unbind（如button1）

2.要绑定自定义事件，如’open’，以上函数都可以使用，但激活需要使用trigger

3.建议使用on函数

$(’.myClass’).on(\{  
click:function(eleDom)\{  
…do someting  
\},  
dbclick:function(eleDom)\{  
…do someting  
\}  
\})