html面试题

1、堆html语义化的理解

语义化湿指根据内容的结构话（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下：
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利用seo。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能更清晰的看出网页的结构，便于团队的开发与维护 常用的语义化标签：
header，nav，section，main，article，aside，footer Strong标签有语义，是起到加重语气的效果
b标签是没有的，b标签指示一个简单的加粗标签

title属性没有明确意义，指示表示是个标题 h1则表示明确的标题，对页面信息的抓取有很大的影响

i内容展示伪斜体，em表示强调的文本

2、html document

Html即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、设置音乐、程序等非文字元素
由于document对象是window对象的一部分，所以可通过window.document属性对其进行访问

3、doctype

告诉浏览器使用哪个本本的html规范来渲染文档。doctype不存在或形式不正确会导致html文档以混杂模式呈现

4、严格模式与混杂模式

严格模式：是以浏览器支持的最高标准允许 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

5、head标签有什么作用，其中什么标签必不可少？

Head标签用于定义文档的头部，它是所有头部元素的容器。可有引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在head部分：base link meta script，style，title
其中

6、什么事web标准，什么事W3C标准

1、web标准不是某一个标准，而是一系列标准的集合
web标准简单来说，可以分为结构、表现和行为。结构：主要是由html标签组成；表现：即指css样式表；行为：主要是有js、dom组成
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或表现的变化，也就是这三者的界限并不那么清晰
2、W3C对于web标准提出了规范化的要求 标签和属性名字母要要小写 标签要闭合 标签不允许随意嵌套
尽量使用外链css样式表和js脚本。让结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验
样式尽量少用行间样式表，使结构与表现分离 标签的id和class等属性命名要做到见文知义，更利于seo，代码便于维护

7、html注释<— —>

8、src和href

Src和href都是用来引用外部资源的，他们的区别如下：
Src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档中，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、变异、执行完毕，一般js脚本会放在页面底部
Href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源。不会停止对当前文档的处理。常用在a、link等标签上

9、label

Label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到与label标签相关的表单控件上

方法1:<label for=“name”>name:</label><input type=“text” id=“mobile”/>
方法2:<label>name:<input type=“text”/></label>

10、如何合并表格单元格

rowspan=“2”表示从设置的td单元格开始向下合并两个单元格 colspan=“2”表示自左向右合并两个单元格

11、thead 用来放标题之类的东西 tbody 用来数据本体 tfoot放表格的脚注之类

12、Html5 有哪些新特性、移除了哪些元素？
新增元素：

• 绘画 canvas
• 用于媒介回放的video和 audio元素
• 本地离线存储localstorage 长期存储数据，浏览器关闭后数据不丢失
• sessionstorage 的数据在浏览器关闭后自动删除
• 语义化更好的内容元素，比如 article、footer、header、nav、 section
• 表单控件，calendar、 date 、 time s email s url s search
• 新的技术 webworker 、 websocket 、 ceolocation
  移除的元素：
  •纯表现的元素：basefont、big, center，font，strike tt, u
  •对可用性产生负面影响的元素：frame frameset noframes
  支持 HTML5 新标签：
  •IE8/IE7/TE6 支持通过 document.createElement 方法产生的标签
• 可以利用这一特性让这些浏览器支持 HTML5 新标签
• 浏览器支持新标签后，还需要添加标签默认的样式

13、标签上title属性与alt属性的区别是什么？

Alt属性是未来给哪些不能看到你文档中图像的浏览者提供文字说明的，且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等
Title属性为设置该属性的元素提供建议性的信息，使用title属性提供非本质的额外信息

14、标签应该如何合理嵌套

ul>li ol>li
块标签可以嵌套其他的标签，但是p标签除外，p标签不能嵌套其他的块标签，内联标签不能嵌套块标签（a标签特殊），a标签不允许嵌套a标签和其他有交互作用的标签。块级元素与块级元素并列，内嵌元素与内嵌元素并列

15.png. jpg. gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp?

1.png是便携式网络图片 (Portable Network Graphics) 是一种无损数据压缩位图文件格式 优 点是：压缩比高，色彩好。大多数地方都可以用。
2.jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化 做的不错。在www上，被用来储存和传输照片的格式。
3.gif是一种位图文件格式，以&位色重现真色彩的图像。可以实现动画效果，4.webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

16、表单提交get和post请求

Get请求一般用于从服务器上获取数据，post向服务器传递数据
Get传输的数据是拼接在url之后的，用户是可见的；post的传输数据对用户是不可见的
Get传递的数据量较小，不能大于2KB；post传递的数据量较大，一般默认不受限制 Get安全性非常低，post安全性高
在form提交的时候，如果不指定method，则默认为Get请求

17、meta标签的name属性值

name 属性主要用于描述网页，与之对应的属性值为content， content中的内容主要是便于搜索 引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：＜meta name="参数"content="具体的参数值"＞。
其中name属性主要有以下几种参数： A、Keywords(关键宇)说明：keywords用来告诉搜素引擎你网页的关键字是什么。
B、description(网站内容描述) 说明：description用来告诉搜素引擎你的网站主要内容
C、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex follow,nofollow,默认是all。 举例：< meta
name=“robots” content=“none”>

18、sass

是css预处理语言，无法直接运行在浏览器，需要其他的编译框架进行二次编译以后才可以在浏览器中运行。sass提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护

19、HTML

(1）HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；
(2) HTML4.01基于SGML，所以需要对DTD进行引用，才能让浏览器知道该文档所使用的文档类型。

20、如何区分 HTML和 HTML5?

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

21、HTML5的离线储存怎么使用，工作原理解释一下？

localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionstorage 数据在浏览器关闭后自动删除。

22、HTML5 Canvas元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作

http和https
1、概念

http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服 务器端请求和应答的标准（TCP），用于从 WWW服务器传输超文本到本地浏览器的传 输协议，它可以使浏览器更加高效，使网络传输减少。 https: 是以安全为目标的 HTTP 通道，简单讲HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 https 的SSL 加密是在传输层实现的。 https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实 性。

2、区别

http 传输的数据都是未加密的，也就是明文的，使用 SSL 协议来对 http 协议传输的数据进行加密处理，简单来说 https 协议是由http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议，比 http 协议的安全性更高。
主要的区别如下：
Https 协议需要 ca 证书，费用较高。 http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。
使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为443
http的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传 输、身份认证的网络协议，比 http 协议安全。

3、工作原理

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤，如图所示。
客户使用 https url 访问服务器，则要求 web服务器建立 ssl 链接。 web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。
客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。 web服务器通过自己的私钥解密出会话密钥。 web 服务器通过会话密钥加密与客户端之间的通信。

4、https 协议的优点

使用 HTTPS 协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；HTTPS 协议是由 SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http 协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。
HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本

5、https 协议的缺点

https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
https 缓存不如 http高效，会增加数据开销。 SSL 证书也需要钱，功能越强大的证书费用越高。
SSL 证书需要绑定 IP，不能再同一个 ip
上绑定多个域名，ipv4 资源支持不了这种消耗。

TCP 和 UDP 的区别

1、TCP 是面向连接的，udp 是无连接的即发送数据前不需要先建立链接。
2、TCP 提供可靠的服务。也就是说，通过 TCP连接传送的数据，无差错，不丢失， 不重复，且按序到达;UDP 尽最大努力交付，即不保证可靠交付。 并且因为 tcp 可靠， 面向连接，不会丢失数据因此适合大数据量的交换。
3、TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低（因
此会出现丢包，对实时的应用比如 IP 电话和视频会议等）。
4、TCP 只能是 1 对 1 的，UDP 支持 1 对 1,1 对多。
5、TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。 6、TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。

fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功。原因

因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个 Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

iframe 是什么？有什么缺点？

定义：iframe 元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在之间，来提示某些不支持 iframe 的浏览器
缺点：
会阻塞主页面的 onload 事件
搜索引擎无法解读这种页面，不利于 SEO 
iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

Cookie 如何防范 XSS 攻击

XSS（跨站脚本攻击）是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些攻击，需要在 HTTP 头部配上，set-cookie：http-only这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。
secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。
结果应该是这样的：Set-Cookie=

介绍知道的 http 返回的状态码

100 Continue 继续。客户端应继续其请求
101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到 HTTP 的新版本协议
200 OK 请求成功。一般用于 GET 与 POST 请求
201 Created 已创建。成功请求并创建了新的资源
202 Accepted 已接受。已经接受请求，但未处理完成
203 Non-Authoritative Information 非授权信息。请求成功。但返回的 meta 信息不在原始的服务器，而是一个副本
204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206 Partial Content 部分内容。服务器成功处理了部分 GET 请求
300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特
征与地址的列表用于用户终端（例如：浏览器）选择
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新 URI，返回信息会
包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替
302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有URI 
303 See Other 查看其它地址。与 301 类似。使用 GET 和 POST 请求查看
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305 Use Proxy 使用代理。所请求的资源必须通过代理访问
306 Unused 已经被废弃的 HTTP 状态码
307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重定向
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 请求要求用户的身份认证
402 Payment Required 保留，将来使用
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405 Method Not Allowed 客户端请求中的方法被禁止
406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
407 Proxy Authentication Required 请求要求代理的身份认证，与 401 类似，但请求者应当使用代理进行授权
408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务器处理请求时发生了冲突
410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源以前有现在被永久删除了可使用 410 代码，网站设计人员可通过 301 代码指定资源的新位置
411 Length Required 服务器无法处理客户端发送的不带 Content-Length 的请求信息
412 Precondition Failed 客户端请求信息的先决条件错误
413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个 Retry-After 的响应信息
414 Request-URI Too Large 请求的 URI 过长（URI 通常为网址），服务器无法处理
415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
416 Requested range not satisfiable 客户端请求的范围无效
417 Expectation Failed 服务器无法满足 Expect 的请求头信息
500 Internal Server Error 服务器内部错误，无法完成请求
501 Not Implemented 服务器不支持请求的功能，无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的 Retry-After 头信息中
504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本，无法完成处理 ；

强缓存、协商缓存什么时候用哪个

因为服务器上的资源不是一直固定不变的，大多数情况下它会更新，这个时候如果我们还访问本地缓存，那么对用户来说，那就相当于资源没有更新，用户看到的还是旧的资源；所以我们希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地 的缓存，以最大程度的减少因网络请求而产生的资源浪费。

前端优化

降低请求量：合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度：预解析 DNS，减少域名数，并行加载，CDN 分发。
缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
渲染：JS/CSS 优化，加载顺序，服务端渲染，pipeline。

CDN的优化原理

许多网站运营者都信奉着一个原则，这个原则指导着运营者们优化网站的访问速度、页面效果等，它就是“8秒原则”。“8秒原则”是指，用户在打开网站时，记载时间不能超过8秒，一旦时间过长，网站将会失去这个用户，即便网站的页面制作精美、内容丰富。
如今，越来越多的站长为了提升网站的访问速度，使用cdn加速来为网站加持。

cdn加速的工作原理，就是将源站的各类资源像复制粘贴一样，缓存到全国各地甚至全球各地的cdn节点上，当用户对源站发起访问时，用户就可以获取到离自己最近的数据信息，不必到源站进行访问。这样，避免访问源站时的线路拥堵，也减轻了源站的访问压力，同时，让用户得到更快的访问体验。
cdn加速的好处
1、提高安全性
网站与cdn加速服务建立连接后，用户在访问时只能访问cdn节点，源站就会隐藏起来，在一定的程度上起到保护源站被攻击的风险。由于cdn加速的各个节点较为分散，攻击者在发起攻击时无法全部下手，增加了他们的攻击难度，攻击一个节点仅仅是影响一个节点的缓存访问而已。
2、提升网站的访问速度
cdn加速最直接的好处的就是大大提升了网站的访问速度，cdn加速可以突破带宽的速度瓶颈限制，扩大了带宽的可接待容量，用户在访问网站时就不会拥挤。cdn加速的多个节点布置，能够让用户在不同地方都能访问到最近的节点资源上，让用户更快获取消息。
3、网站不容易挂机
当网站同时间涌入巨大流量时，使用了cdn之后，可以减少网站宕机的情况，同时你的网站可以接收更多的流量。用户访问网站的时间提高了，跳出率将会大大降低，这也有利于网站的各类转化。

浏览器的内核分别是什么?

1、Mozilla Firefox的Gecko
2、Chrome的Blink（WebKit的分支）
3、Opera的内核原为Presto，现为Blink
4、IE的内核Trident
5、Safari的内核

览器对url的最大长度限制：

	Firefox：对Firefox浏览器URL的长度限制为：65536个字符。
   Safari：URL最大长度限制为80000个字符。
   Opera：URL最大长度限制为190000个字符。
   Google(chrome)：URL最大长度限制为8182个字符。
   Apache(Server)：能接受的最大url长度为8192个字符
   Microsoft Internet Information Server(IIS)：n能接受最大url的长度为16384个字符。
   注意：（若长度超限，则服务端返回414标识）

跨域资源共享（CORS）

CORS，全称Cross-Origin Resource Sharing，是一种允许当前域（domain）的资源（比如
html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求
 CORS 可以配合 token 来防止 CSRF（跨站请求伪造） 攻击跨站请求伪造（CSRF）
跨站请求伪造（英语：Cross-site request forgery），也被称为 one-click attack 或者 session 
riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。
 简单的说是攻击者通过伪造用户的浏览器的请求，向一个用户自己曾经认证访问过的网站发送出去，使目标网站接收并误以为是用户的真实操作而去执行命令。常用于盗取账号、转账、发送虚假消息等
CSRF 攻击攻击原理及过程：
（1）用户 C 打开浏览器，访问受信任网站 A，输入用户名和密码请求登录网站 A； （2）在用户信息通过验证后，网站 A 产生 Cookie 信息并返回给浏览器，此时用户登录网站 A 成功，可
以正常发送请求到网站 A； （3）用户未退出网站 A 之前，在同一浏览器中，打开一个 TAB 页访问网站 B； （4）网站 B 接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点 A； （5）浏览器在接收到这些攻击性代码后，根据网站 B 的请求，在用户不知情的情况下携带 Cookie 信息，向网站 A 发出请求。网站 A 并不知道该请求其实是由 B 发起的，所以会根据用户 C 的Cookie 信息
以 C 的权限处理该请求，导致来自网站 B 的恶意代码被执行。
如何预防CSRF： 
1、提交验证码
在表单中添加一个随机的数字或字母验证码。通过强制用户和应用进行交互。来有效地遏制CSRF攻击。
2、Referer Check
检查假设是非正常页面过来的请求，则极有可能是CSRF攻击。
3、token验证
在 HTTP 请求中以參数的形式添加一个随机产生的 token，并在服务器端建立一个拦截器来验证这个token，假设请求中没有 token 或者 token 内容不对，则觉得可能是 CSRF 攻击而拒绝该请求。token必须足够随机。敏感的操作应该使用POST，而不是GET。比如表单提交。
4、在HTTP头中自己定义属性并验证
这样的方法也是使用 token 并进行验证。这里并非把 token 以參数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自己定义的属性里。通过 XMLHttpRequest 这个类，能够一次性给全部该类请求加上 csrftoken 这个 HTTP 头属性。并把 token 值放入当中。这样攻克了上种方法在请求中添加 token 的不便。同一时候，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用操心 token 会透过 Referer 泄露到其它站点中去。

什么是跨站攻击（XXS）

跨站攻击，即Cross Site Script Execution(通常简写为XSS)是指攻击者利用网站程序对用户输入过滤不足，输入可以显示在页面上对其他用户造成影响的HTML代码，从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。
如何预防XXS： 
1、HttpOnly防止获取cookie在cookie中设置了HttpOnly属性，那么通过js脚本将无法读取到cookie信息，这样能有效的防止XSS攻击
2、输入检查（不要相信用户的所有输入）
3、输出检查（存的时候转义或者编码

HTTP的几种请求方法用途?

1、GET方法 发送一个请求来取得服务器上的某一资源
2、POST方法 向URL指定的资源提交数据或附加新的数据
3、PUT方法 跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有
4、HEAD方法 只请求页面的首部
5、DELETE方法 删除服务器上的某资源
6、PTIONS方法它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息
7、TRACE方法TRACE方法被用于激发一个远程的，应用层的请求消息回路
8、CONNECT方法 把请求连接转换到透明的TCP/IP通道