Html笔试选择题,HTML面试题整理

doctype(⽂档类型)

告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 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标签属性，如

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 标签，====

canoncial 和 alternate 标签

提升完全相同或高度相似的网页的权重

针对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 是指向网络资源所在的位置(的超链接)，如

img的srcset和sizes

script标签中defer和async的区别

defer 浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立即执行，而是等待文档被解析完毕后执行

defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer

如果有多个声明了defer的脚本，则会按顺序下载和执行

defer脚本会在DOMContentLoaded和load事件之前执行

async 同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于script又先后依赖关系的情况，并不适用

只适用于外联脚本，这一点和defer一致

如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序

async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序

data-属性

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

meta标签

name

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

参数

描述

keywords(关键词)

网页关键词，

description(网站内容的描述)

viewport(移动端的窗口)

meta name="viewport" content="width=device-width, initial-scale=1">

robots(定义搜索引擎爬虫的索引方式))

robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。

author(作者)

copyright(版权)

revisit-after(搜索引擎爬虫重访时间)

如果页面不是经常更新，为了减轻搜索引擎爬虫对服务器带来的压力，可以设置一个爬虫的重访时间。

renderer(双核浏览器渲染方式)

//默认webkit内核 //默认IE兼容模式 //默认IE标准模式

http-equiv

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

//旧的HTML，不推荐

//HTML5设定网页字符集的方式，推荐使用UTF-8```

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

//指定IE和Chrome使用最新版本渲染当前页面

cache-control(指定请求和响应遵循的缓存机制)

用法1

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。(安全措施)

public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存，因此不允许任何中继进行缓存。(比如说CDN就不允许缓存private的响应)

maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒

用法2

用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了

expires(网页到期时间) 用于设定网页的到期时间，过期后网页必须到服务器上重新传输

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

//意思是2秒后跳转向我的博客

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

//格式

//具体范例

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规定的值)看落在哪个区间内，取区间中最大值对应的图片。若没有最大值(如∞)，则取上个区间最大值。

上面设置图片要显示成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的影响

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

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

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

html5和html4区别

内容类型不变

HTML5的文件扩展符(html或.htm)与内容类型(text/html)保持不变。

DOCTYPE声明变化

HTML4中需要指明是HTML的哪个版本，HTML5不需要，只使用即可。

指定字符编码变化

HTML4：

HTML5:

可以省略元素的标记

HTML5中很多元素标记可以省略

具有boolean值的属性调整

不指定属性值、属性名设定为属性值、字符串设为空时表示属性值为true

不写该属性表示属性值为false

新增的结构元素

section、artucle、aside、header、hgroup、footer、nav、figure

新增的其他元素

video、audio、canvas

新增的input元素的类型

email、url、number、range、DatePickers