HTML面试题整理

doctype(⽂档类型)

告知浏览器的解析器⽤什么⽂档标准解析这个⽂档<!DOCTYPE HTML>，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript 脚本的解析

标准模式(standards mode)：⻚⾯按照 HTML 与 CSS 的定义渲染
怪异模式(quirks mode)模式：会模拟更旧的浏览器的⾏为
近乎标准(almost standards)模式：会实施了⼀种表单元格尺⼨的怪异⾏为（与IE7之前的单元格布局⽅式⼀致），除此之外符合标准定义

HTML语义化

语义化从html代码来展示页面的结构，语义化的优点：

标签语义化有助于搭建良好的HTML结构，有助于搜索引擎建立索引和爬取
有利于不同设备的解析，
有利于搭建清晰的代码结构，有助于团队开发维护

H5新增标签

==header== 头部、页眉
==footer== 底部、页脚
==hgroup==
==nav== 导航区域
==aside== 主要内容的附属信息部分
==section== 文档中的“节”或“段”
==article== 代表一个在文档，页面或者网站中自成一体的内容

cookies，sessionStorage 和 localStorage 的区别

sessionStorage 和 localStorage

两者存储空间一般都在5M左右，sessionStorage在会话结束时会主动清除，localstorage则不会，需手动清除
两者都有同源策略限制，跨域无法访问，sessionStorage有同标签页限制
数据仅在客户端存储，不参与和服务器通信
都是key value形式进行存储，value必须为字符串，如不是则自动转换成字符串，value如果是对象，需转换成JSON字符串
操作方法一直，setItem(key, value)增/改、removeItem(key)删、getItem(key)查、xxxStorage.clear()清空

cookies

存储大小为4k，一个站点最多20个cookies
会通过http请求参与服务端的通信
cookie可以设定会话时间，如不设置，则默认浏览器窗口关闭清除
Cookie设置中有个HttpOnly参数，前端浏览器使用document.cookie是读取不到HttpOnly类型的Cookie的

项目经验

小程序跳转到一个页面，保存之后goback，但无法传参，可以利用本地存储来处理

DOM事件

事件处理程序

HTML事件处理程序 - 通过HTML标签属性，如<p onclick='dosomethind()'></p>
DOM0事件处理程序 - 将事件处理放入js总，如document.getElementById("#btn").onclick = function(){...}
DOM1事件处理成 - 采用addEventListenter绑定事件，相同方法会覆盖

事件流机制

即元素从页面接收事件的顺序，也即事件在页面的传播顺序

事件捕获和事件冒泡

addEventListener的第三个参数，当为true时，捕获，false时，冒泡
==事件捕获==：捕获阶段事件是由上向下依次触发
==冒泡阶段==：冒泡阶段事件是由下向上依次触发
项目经验：上传组件上方的浮层，可以利用冒泡实现重新上传功能

事件对象

标准的Event对象主要有6个：

bubbles 布尔值，表示事件是否是冒泡类型

cancelable 布尔值，表示事件是否可以取消默认动作

currentTarget 当前目标元素，即添加当前事件处理程序的元素

target 实际目标元素，即实际触发事件的元素

type 返回当前事件的名称

eventPhase 事件传播的当前阶段，1表示捕获阶段

currentTarget VS target

==target==: 在事件的目标阶段，指向被单击的对象

==currentTarget==: 在事件流捕获、目标及冒泡阶段，只有在目标阶段，两者相同，指向当前事件的活动对象(一般为父级)

标准Event对象的方法主要有以下几个

preventDefault 通知浏览器不要执行该事件的默认动作，如阻止默认跳转、表单提交等标签默认行为
2.stopPropagation 冒泡阶段下，阻止事件继续向上冒泡

事件委托

事件委托其实就是利用冒泡事件机制，针对多子元素绑定事件的处理方式，采用父级绑定，利用target获取到子元素并响应事件

优雅降级和渐进增强概述

==优雅降级==是一开始针对高版本浏览器构建完整功能，然后针对低版本浏览器进行兼容
==渐进增强==是一开始针对低版本浏览器构建，保证功能，然后在针对高级浏览器追加效果达到更好的用户体验

SEO优化(搜索引擎优化)

合理设置title、description、keywords
HTML语义化，如H1可以放置网站重点内容
meta:robots 标签，==<meta name="robots" content="index,follow,archive">==
canoncial 和 alternate 标签
- <link rel="canoncial" href="www.shop.com/goods/xxxx" /> 提升完全相同或高度相似的网页的权重
- <link rel="alternate" href="https://m.xxx.com" media="only screen and (max-width: 750px)"/> 针对750px的访问另一个网址，适用于移动端跳转
robots.txt
sitemap

iframe有那些缺点

iframe会阻塞主页面的onload事件
相同域iframe和主页面共享http连接池，多个相同域的iframe会阻塞加载
- 解决方案：主页面加载完再去动态生成iframe
iframe对seo不友好

iframe跨域通信

postMessage

quoteWindow.postmessage(data, origin, [transfer])

quoteWindow 数据接收方，常用为父级主页面，window.parent
data 需要发送的数据，它将会被结构化克隆算法序列化
origin 表示哪些窗口可以接收，*表示不受限制，URL地址表示只有该URL地址能接收事件
transfer 可选参数，高级用法，是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

接收方

window.addEventListener('message',e=>{
    // 有三个重要属性
    // origin 表示发送消息的窗口源
    // data 表示发送消息的数据
    // source 表示对发送消息窗口的引用，可以用此来向发送消息的窗口返回数据
})

onload和domcontentloaded

onload 当页面 DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load 事件
DOMContentLoaded 事件在 html文档加载完毕，并且 html 所引用的内联 js、以及外链 js 的同步代码都执行完毕后触发
- 页面中引用的js 代码如果有异步加载的 js、css、图片，是会影响 load 事件触发的。
- video、audio、flash 不会影响 load 事件触发

HTML文档的加载与页面的首次渲染

浏览器首选下载该地址所对应的html页面
浏览器解析html页面的DOM结构
开启下载线程对文档中的所有资源按优先级排序下载
主线程继续解析文档，到达head节点，head里的外部资源无非是外链样式表和外链js
解析到body

只有DOM元素
- DOM数构建完，页面首次渲染
有DOM元素、外链js
- 当解析到外链js的时候，该js尚未下载到本地，则js之前的DOM会被渲染到页面上，同时js会阻止后面的DOM的构建，即后面的DOM节点并不会添加到文档的DOM树中，所以，js执行完之前，我们在页面上看不到该js后面的DOM元素
有DOM元素、外链js
- 外链css不会影响css后面的DOM构建，但是会阻碍渲染，简单点说，外链css加载完之前，页面还是白屏
有DOM元素、外链js、外链css
- 外链js和外链css的顺序会影响页面渲染，当body中js之前的外链css未加载完之前，页面是不会被渲染
- 当body中js之前的外链css加载完之后，js之前的DOM树和css合并渲染树，页面渲染出该js之前的DOM结构

文档解析完毕，页面渲染，但是页面引用的所有js同步代码执行完毕，厨房DOMContentLoaded事件
html文档中的图片资源、js代码中有的异步加载的css、js、图片资源都加载完毕之后，load事件触发

src和href的区别

src 是指向外部资源的位置，指向的内容会嵌入到文档当前标签所在的位置，如css、js脚本、img等
href 是指向网络资源所在的位置(的超链接)，如<a href='xxx'></a>

img的srcset和sizes

script标签中defer和async的区别

defer 浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立即执行，而是等待文档被解析完毕后执行
- <script type="text/javascript" src="x.min.js" defer="defer"></script>
- defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer
- 如果有多个声明了defer的脚本，则会按顺序下载和执行
- defer脚本会在DOMContentLoaded和load事件之前执行
async 同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于script又先后依赖关系的情况，并不适用
- <script type="text/javascript" src="x.min.js" async="async"></script>
- 只适用于外联脚本，这一点和defer一致
- 如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序
- async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序

data-属性

HTML的数据属性，用于将数据存储在标准的HTML元素中作为额外信息，可以通过js访问，xxx.getAttribute("data-xxxx")

meta标签

name

name属性主要用于描述网页，比如网页的关键词、叙述等，与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。

<meta name="参数" content="具体的描述" >

参数	描述
keywords(关键词)	网页关键词，`<meta name="keywords" content="Lxxyx,博客，文科生，前端">`
description(网站内容的描述)	`<meta name="description" content="文科生，热爱前端与编程。目前大二，这是我的前端博客">`
viewport(移动端的窗口)	`meta name="viewport" content="width=device-width, initial-scale=1">`
robots(定义搜索引擎爬虫的索引方式))	robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。`<meta name="robots" content="none">`
author(作者)	`<meta name="author" content="Lxxyx,80530@qq.com">`
copyright(版权)	`<meta name="copyright" content="Lxxyx">`
revisit-after(搜索引擎爬虫重访时间)	如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。`<meta name="revisit-after" content="7 days" >`
renderer(双核浏览器渲染方式)	`<meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式`

http-equiv

<meta http-equiv="参数" content="具体的描述">

content-Type(设定网页字符集)

<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐 
<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8```

X-UA-Compatible(浏览器采取何种版本渲染当前页面)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

cache-control(指定请求和响应遵循的缓存机制)
- 用法1
- <meta http-equiv="cache-control" content="no-cache">
- no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
- no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
- public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
- private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
- maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒
- 用法2
- 用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了
- <meta http-equiv="Cache-Control" content="no-siteapp" />
expires(网页到期时间) 用于设定网页的到期时间，过期后网页必须到服务器上重新传输

<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />

refresh(自动刷新并指向某页面) - 网页将在设定的时间内，自动刷新并调向设定的网址

<meta http-equiv="refresh" content="2；URL=http://www.lxxyx.win/"> //意思是2秒后跳转向我的博客

Set-Cookie(cookie设定) - 如果网页过期。那么这个网页存在本地的cookies也会被自动删除

<meta http-equiv="Set-Cookie" content="name, date"> //格式

<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

img的srcset和sizes

H5中img有2个新属性，srcset、sizes，主要作用：

控制响应式图片，根据屏幕大小来选择显示不同图片
根据屏幕的不同(视网膜屏还是普通屏)，展示不同质量的图片，合理控制下载资源

srcset

格式一：图片源地址空格图片像素宽度[, 图片源地址空格图片像素宽度, ...]，如

srcset="1.jpg 580w, 2.png 618w"

千万注意：描述图片的像素宽度是用'w'单位，且一定要是图片的真实像素宽度，如果私自改动，那么会影响浏览器对图片的选择！

表示图片1.jpg的像素宽度为580px，图片2.png的像素宽度为618px，两个图片源之间用逗号隔开

格式二：图片源地址空格屏幕像素密度[, 图片源地址空格屏幕像素密度, ...]，如

srcset="1.jpg 1x, 2.png 2x"

表示图片1.jpg为DPR为1时下显示的图片；2.png为DPR为2时显示的图片，如果没有更大的DPR设置的图片源，那么当大于当前设置的DPR最高值时，会采用当前设置的最大DPR的图片源。如这里如果屏幕DPR为3，那么还是会用2.png。

sizes

只有当设置了srcset，且单位为w时，sizes的设置才会起效。

srcset中设置的图片像素宽度（'w'的值），组成了相应的半开半闭区间(a, b]。图片的显示宽度（sizes规定的值）看落在哪个区间内，取区间中最大值对应的图片。若没有最大值（如∞），则取上个区间最大值。

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w", sizes="300px">

上面设置图片要显示成300px（sizes里的值），在srcset里的几个临界值中形成了(0, 229px]、(229px, 618px]、(618px, 1000px]、(1000px, ∞]。300px落在了(229px, 618px]中，取最大值618，因此最终选择的图片就是2.png

sizes的语法结构：

[媒体查询空格 ]图片显示宽度[, [媒体查询空格 ]图片显示宽], ..., 其余条件宽度值]

sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px"

在屏幕小于等于500px情况下，图片显示成400px宽；在屏幕小于等于900px情况下，图片显示成700px宽；其余情况显示成1200px宽。

sizes里的媒体查询条件顺序是很重要的，只要满足了越靠前的某个条件，那么后面的条件会被忽略的

如果sizes属性没有值，或者在有媒体条件下，其余条件宽度没有设值，那么默认是100vw

DPR的影响

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w" sizes="(max-width: 600px) 114px">

srcset里的'w'符号，是代表的是图像的宽度像素，是个物理像素；sizes里的114px是表示逻辑像素！在DPR不为1时，要转化一下像素值才能去区间里比较，套用上述规则，如在DPR=2时，把114px转化为物理像素，即114px * 2 = 228px，用228px去(0, 229px]、(229px, 618px]、(618px, ∞]里做比较，落在了(0, 229px]中，取229px对应的3.jpg

哪⼀个标签能起到跟srcset相似作⽤

<picture>元素通过包含零或多个<source>元素和⼀个<img>元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的⼦<source>元素，如果没有匹配的，就选择<img>元素的src属性中的URL。然后，所选图像呈现在<img>元素占据的空间中

<picture>
    <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
    <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

html5和html4区别

内容类型不变
- HTML5的文件扩展符（html或.htm）与内容类型（text/html）保持不变。
DOCTYPE声明变化
HTML4中需要指明是HTML的哪个版本，HTML5不需要，只使用<!DOCTYPE html>即可。
指定字符编码变化
- HTML4：<meta http-equiv=‶content-type″ content=‶text/html; charset=UTF-8″>
- HTML5:<meta charset=‶UTF-8″>
可以省略元素的标记
- HTML5中很多元素标记可以省略
具有boolean值的属性调整
- 不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true
- 不写该属性表示属性值为false
新增的结构元素
- section、artucle、aside、header、hgroup、footer、nav、figure
新增的其他元素
- video、audio、canvas
新增的input元素的类型
- email、url、number、range、DatePickers