HTML面试总结| 8月更文挑战

2,390 阅读16分钟

总结一些html相关的知识,将笔记整理跟大家分享,有些知识会经常在前端面试的时候会问到,所以做个记录,希望对大家有所帮助,如果有什么问题,可以指出,会积极修正。
如果大家喜欢,可以点赞或留言我再继续更新面试题~~~~,谢谢大家~~~

HTML5 有哪些新特性?

  • HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
  • 拖拽释放(Drag and drop) API
    语义化更好的内容标签(header,nav,footer,aside,article,section)
    音频、视频API(audio,video)
    画布(Canvas) API
    地理(Geolocation) API
    本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除
    表单控件,calendar、date、time、email、url、search
    新的技术webworker, websocket, Geolocation
  • 移除的元素
    纯表现的元素:basefont,big,center,font, s,strike,tt,u;
    对可用性产生负面影响的元素:frame,frameset,noframes;
    支持HTML5新标签:
  • IE8/IE7/IE6支持通过document.createElement方法产生的标签,
    可以利用这一特性让这些浏览器支持HTML5新标签,
    浏览器支持新标签后,还需要添加标签默认的样式:
  • 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 

  如何区分: DOCTYPE声明\新增的结构元素\功能元素

Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?

一、Doctype作用是什么?
<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。

二、严格模式和混杂模式的如何区分?他们有什么意义?
标准模式(严格模式)的排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式(混杂模式或怪异模式)中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

tcp与udp

  • tcp是一种面向有连接的传输层协议,能够对自己提供的连接实施控制。适用于要求可靠传输的应用,例如文件传输。面向字节流,传输慢
  • udp是一种面向无连接的传输层协议,不会对自己提供的连接实施控制。适用于实时应用,例如:IP电话、视频会议、直播等。以报文的方式传输,效率高

如何实现浏览器内多个标签页之间的通信?

一、调用localStorage
在一个标签页里面使用localStorage.setItem(key,value)添加(修改、删除)内容;在另一个标签页里面监听storage事件。通过localstorge.getItem(key)存储的值,实现不同标签页之间的通信。
二、调用cookie+setInterval()
将要传递的信息存储在cookie中,每隔一定时间读取getCookie获取信息,即可随时获取要传递的信息。
三、WebSocket
特点:保持连接状态;全双工通信;没有同源共享策略
实现原理:其实实现原理页比较简单,假如我们pageA和pageB都与服务器建立了websocket连接,那么连个页面都可以实时接收服务端发来的消息,也可以实时向服务端发送消息。如果pageA更改了数据,那么向服务端发送一条消息或数据,服务端在将这条消息或数据发送给pageB即可,这样就简单实现了两个标签页之间的通信。
原理有点类似于“中介”,我们可以通过中介来进行沟通
可以理解把websocket理解为一个简单的聊天工具,2个页面都在聊天工具上聊天,页面A发送消息给页面B,页面B实时接收到最新消息。
好处:可实现跨域共享;
限制:需要专门起一个websocket服务器,维护成本高,不建议使用
四、postMessage
特点:可跨域通信、所有主流浏览器(包括IE8)都支持。
实现逻辑:利用 window 提供的 postMessage 方法和 message 事件就ok了~

websocket理解

1.websocket是什么

  • 它是一种网络通信协议,是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议

  • WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据

  • 在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输

  • 简介: WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时,可以使服务器避免打开多个HTTP连接进行工作来节约资源,提高了工作效率和资源利用率。

    WebSocket目前支持两种统一资源标志符ws和wss,类似于HTTP和HTTPS。

2.为什么需要websocket? 疑问? 我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

  • 因为 HTTP 协议有一个缺陷:通信只能由客户端发起
  • 我们都知道轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开), 因此websocket应运而生。
  • 以前客户端想知道服务端的处理进度,要不停地使用 Ajax 进行轮询,让浏览器隔个几秒就向服务器发一次请求,这对服务器压力较高。

3.客户端简单示例

var ws = new WebSocket("wss://echo.websocket.org");

//一旦服务端响应WebSocket连接请求,就会触发open事件。响应的回调函数称为onopen。
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

//当消息被接受会触发消息事件,响应的回调函数叫做onmessage。     
ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

// 当连接关闭的时候回触发这个事件
ws.onclose = function(evt) {
  console.log("Connection closed.");
}; 

// 如果发生意外的失败会触发error事件, 
ws.onerror = function(evt) {
  console.log("error!!!"); 
}; 

4.WebSocket 对象有两个方法:send()和close()。

1.send()

    //发送一个文本消息
    ws.send("Hello WebSocket!");

2.close()

    ws.close();

行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?

行内元素有: a、b、span、img、input、select、strong
块级元素有: div、ul、ol、li、dl、dt、dd、h1、h2、h3、h4、 p
空元素: br、hr、img、input、link、meta
区别:行内元素不可以设置宽高,不独占整行
块级元素可以设置宽高,独占整行

简述一下src与href的区别?

1、用途不同,src用于嵌入到文档中的资源,href用于链接到文档之外的资源;
2、引用方式不同,src引用的资源是必需的,href引用的资源是可选的;
3、对文档的影响不同,src会直接影响文档的加载和显示,href只会影响到引用的资源的使用;
4、适用范围不同,src适用于图片、音频、视频和脚本等资源的引用,href适用于CSS样式表、字体文件和网页链接。

src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置
href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

<script src ="js.js"></script>

<link href="common.css" rel="stylesheet"/>

浏览器本地存储 cookies,sessionStorage,localStorage 的区别?

在较高版本的浏览器中,js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是cookie也是不可以或缺的:cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
cookie 和session 的区别:
1、cookie数据存放在客户的浏览器上,session数据放在服务器上。
2、cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能 考虑到减轻服务器性能方面,应当使用COOKIE。
4、单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议: 将登陆信息等重要信息存放为SESSION 其他信息如果需要保留,可以放在COOKIE中

XML和JSON的区别?

(1).数据体积方面。
JSON相对于XML来讲,数据的体积小,传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。

浏览器是如何渲染页面的?

zhuanlan.zhihu.com/p/623527782

当浏览器的网络线程收到 HTML 文档后,会产生一个渲染任务,并将其传递给渲染主线程的消息队列。

在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。

整个渲染流程分为多个阶段,分别是: HTML 解析样式计算布局分层绘制分块光栅化

每个阶段都有明确的输入输出,上一个阶段的输出会成为下一个阶段的输入。

这样,整个渲染流程就形成了一套组织严密的生产流水线。

iframe 的优缺点?

iframe的优点:
1.iframe能够原封不动的把嵌入的网页展现出来。
2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。
iframe的缺点:
1.会产生很多页面,不容易管理。
2.如果框架个数多的话,可能会出现上下、左右滚动条,用户体验度差。
3.代码复杂,无法被一些搜索引擎索引到,使用iframe会不利于搜索引擎优化。
4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。
5.iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

Canvas 和 SVG 图形的区别是什么?

1.什么是Canvas?
Canvas 是H5新出来的标签
Canvas画布,利用JavaScript在网页绘制图像
2.什么是SVG?
SVG 可缩放矢量图形(Scalable Vector Graphics),基于可扩展标记语言XML

区别:svg 绘制出来的每⼀个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改。canvas输出的是⼀整幅画布. svg 输出的图形是矢量图形,后期可以修改参数来自由放大缩⼩,不会失真和锯齿 。而 canvas 输出标量画布 ,就像⼀张图片⼀样,放大会失真或者锯齿

web开发中会话跟踪的方法有哪些?

  • cookie
  • session
  • url 重写
  • 隐藏  input
  • ip 地址

谈一谈meta 标签?

meta标签是用来描述一个HTML网页文档的属性,比如该网页的作者,日期,网页的关键字,刷新,网页等级设定等等
meta标签可以分为两大部分:

  • http-equiv: http标题信息
  • name:页面描述信息 http-equiv 类似于http的头部协议,作用是回应给浏览器一些有用的信息来帮助正确精确的显示网页内容。常用的http-equiv 类型有:Content-Type 和 Content-Language(显示字符集的设定)。

HTTP与HTTPS介绍

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。

为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,HTTPS在HTTP的基础上加入了SSL/TLS协议,SSL/TLS依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。

HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议,要比http协议安全

HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全;另一种就是确认网站的真实性

HTTPS和HTTP的主要区别?

1、https协议需要到CA申请证书,一般免费证书较少,因而需要一定费用。

2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl/tls加密传输协议。

3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。

4、http的连接很简单,是无状态的;HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

http 
    1.http是明文传输,敏感信息容易被中间劫持(危险) 
    2.用户名密码都是明文传输,如果中间环节有被劫持那么就会泄露 
    3.还有邮箱、手机号、信用卡号、密码等支付信息
https 
    1.https = http+加密,可以劫持,但是劫持了也无法解密 
    2.现代浏览器已经慢慢地开始强制https协议
    
1.对称加密: 一个key同时负责加密,解密 
    过程: 
     1.客户端存在一个密钥, 客户端发起请求的时候 ,服务端会把key返回给客户端 
     2.这时候客户端服务端都有一个key 
     3.在传输的过程中是加密的,加密数据,服务端的key用来解密数据,这就是对称加密 
2.非对称加密: 一对key,A加密之后,只能用B来解密 
     1.客户端向服务端请求的时候,服务端会把公钥传递给客户端 
     2.客户端通过publickey加密的东西传递给服务端,服务端通过私钥(key)来解密 
     3.那么此时使用对称加密就安全了,因为不可能被劫持了 
3.https 同时用到了这两种加密方式

http1.0和http1.1,还有http2有什么区别?

  • http0.9只能进行get请求
  • http1.0添加了POST,HEAD,OPTION,PUT,DELETE等
  • http1.1增加了长连接keep-alive,增加了host域,而且节约带宽
  • http2 多路复用,头部压缩,服务器推送

https和http有什么区别,https的实现原理?

  • http无状态无连接,而且是明文传输,不安全
  • https传输内容加密,身份验证,保证数据完整性
  • https实现原理
    • 首先客户端向服务端发起一个随机值,以及一个加密算法

    • 服务端收到后返回一个协商好的加密算法,以及另一个随机值

    • 服务端在发送一个公钥CA

    • 客户端收到以后先验证CA是否有效,如果无效则报错弹窗,有过有效则进行下一步操作

    • 客户端使用之前的两个随机值和一个预主密钥组成一个会话密钥,在通过服务端传来的公钥加密把会话密钥发送给服务端

    • 服务端收到后使用私钥解密,得到两个随机值和预主密钥,然后组装成会话密钥

    • 客户端在向服务端发起一条信息,这条信息使用会话秘钥加密,用来验证服务端时候能收到加密的信息

    • 服务端收到信息后返回一个会话秘钥加密的信息

    • 都收到以后SSL层连接建立成功

其他相关总结文章