1、什么是DOCTYPE，有啥作用？
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上也略有不同。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的BUG，所以文档声明是必须的。
2、说说对HTML语义化的理解？
HTML标签的语义化，简单来说，就是用过正确的标签做最正确的事情，给某块内容用上一个最恰当最合适的标签，使得页面有良好的结构，页面元素有含义，无论是谁都能看的懂，这块的内容是什么。
语义化的优化有以下几点：
- 在没有CSS样式情况下也能够让页面呈现出清晰的结构。
- 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。
- 方便团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
3、src和href的区别
src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下:
① src:全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说: js脚本、img图片framme等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将is脚本放在底部而不是头部的原因。
②href:全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，通常用于a、link元素。
换句话来说：
src和href都是用来引用外部的资源，它们的区别如下
**src:**表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应用到文档内如请求is脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕所以一般is脚本会放在页面底部。
**href: **表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理。常用在a、link等标签上。
4、title 与 h1 的区别、b 与 strong 的区别、i与 em 的区别?
title属性表示网页的标题，h1元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响。
strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时: strong会重读，而b是展示强调内容。
i是italic(斜体)的简写，是早期的斜体元素，表示内容展示为斜体，而em是emphasize (强调)的简写，表示强调的文本。
5、什么是严格模式与混杂模式?
严格模式:是以浏览器支持的最高标准运行。
混杂模式:页面以宽松向下兼容的方式显示，模拟老式浏览器的行为。
6、前端页面有哪三层构成，分别是什么?
由一下三部分构成：结构层、表示层、行为层
①结构层(structural layer)
结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说:一段文字、一张图片、一段视频等等。
②表示层(presentation layer）
表示层是由CSS负责创建，它的作用是如何显示有关内容，学名:层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥。
③行为层(behaviorlayer）
行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域。
7**、iframe的作用以及优缺点**
iframe也称作嵌入式框架，嵌入式框架和框架网页类似它可以把一个网页的框架和内容嵌入到现有的网页中。
优点:
可以用来处理加载缓慢的内容，比如:广告
可以使脚本可以并行下载
可以实现跨子域通信
缺点:
iframe会阻塞主页面的onload 事件
无法被一些搜索引擎索识别
会产生很多页面，不容易管理
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src届性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
会产生很多页面，不易管理，浏览器的后退按钮没有作用，无法被一些搜索引擎识别。
8、img上 title 与 alt
**alt: **全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
**title: **当鼠标移动到元素上时显示title的内容
区别:
一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较友好
9、H5和HTML5区别
H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
HTML5是一个技术名词，指的就是第五代HTML
10、行内元素和块级元素分别有哪些? 有何区别? 怎样转换?
**常见的块级元素: **p、div、form、ul、li ol、table、h1h2、h3、h4、h5、h6、dl、dt、 dd
**常见的行级元素: **span、a、img、button、imput、select
块级元素:
总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
宽度缺少时是它的容器的100%，除非设置一个宽度
高度、行高以及外边距和内边距都是可以设置的
块级元素可以容纳其它行级元素和块级元素
行内元素:
和其它元素都会在一行显示
高、行高以及外边距和内边距可以设置
宽度就是文字或者图片的宽度，不能改变
行级元素只能容纳文本或者其它行内元素
使用行内元素需要注意的是:
行内元素设置宽度width无效
行内元素设置height无效，但是可以通过line-height来设置
设置margin只有左右有效，上下无效
设置padding只有左右有效，上下无效
可以通过display厘性对行内元素和块级元素进行切换(主要看第2、3、4三个值):
11、label的作用是什么? 是怎么用的?
label元素不会向用户呈现任何特殊效果，但是，它为鼠标用户改进了可用性，当我们在labe1元素内点击文本时就会触发此控件。也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。最常用label的地方就是表单中的性别单选框了，当点击文字时也能够自动聚焦绑定的表单控件。
12、对于Web标准以及W3C的理解
Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成。
W3C，全称:world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTMLCSS、ECMAScript等等，web标准的制定有很多好处，比如说:
可以统一开发流程，统一使用标准化开发工具(VSCode.WebStorm、Sublime)，方便多人协作
学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
跨平台，方便迁移都不同设备
降低代码维护成本
13、Quirks (怪癖)模式是什么? 它和Standards (标准)有什么区别?
页面如果写了DTD，就意味着这个页面采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式，这就是Quirks模式，有时候也叫怪癖模式、诡异模式、怪异模式。
区别: 总体会有布局、样式解析、脚本执行三个方面区别，这里列举一些比较常见的区别:
**盒模型: **在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在Quirks模式下，IE的宽度和高度还包含了padding和border。
设置行内元素的高宽:在Standards模式下，给行内元素设置width和height都不会生效，而在Quriks模式下会生效。
**用margin:0auto设置水平居中: **在Standards模式下，设置margin:0auto;可以使元素水平居中，但是在Quriks模式下失效
**设置百分比高度: **在Standards模式下，元素的高度是由包含的内容决定的，如果元素没有设置百分比的高度，子元素设置百分比的高度是无效的
14、什么是微格式吗? 谈谈理解，在前端构建中应该考虑微格式吗?
①所谓的微格式是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。
②具体表现是把语义嵌入到HTML中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾HTML文档的人机可读性，相当于对web网页进行语义注解。
③采用微格式的web页面，在HTML文档中给一些标签增加-些属性，这些属性对信息的语义结构进行注解，有助于处理HTML文档的软件，更好的理解HTML文档。当爬取web内容时，能够更为准确地识别内容块的语义，微格式可以对网站进行SEO优化。
15、HTML5为什么只需要写!DOCTYPE html?
为什么HTML5只需要写一段:
而HTML4却需要写很长的一段
其实主要是因为HTML5不基于SGML，所以不需要引用DTD。在HTML4中，<!DOCTYPE>声明引用DTD，因为HTML4基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。
16、HTML5新增了哪些新特性? 移除了哪些元素?
HTML5主要是关于图像、位置、存储、多任务等功能的增加:
语义化标签，如:article、footer、 header、nav等
视频video、音频audio
画布canvas
表单控件，calemdar、 date、time、email
地理
本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
拖拽释放
移除的元素:
纯表现的元素:basefont、font、s、strike、tt、u、big、center
对可选用性产生负面影影响的元素: frame、frameset、noframes
17、怎么处理HTML5新标签兼容问题?
主要有两种方式
**实现标签被识别: **通过document.createElement(tagName)方法可以让浏览器识别新的标签，浏览器支持新标签后。还可以为新标签添加CSS样式。
用JavaScript解决:使用HTMLS的shim框架，在head标签中调用以下代码：
18、如何实现在一张图片上的某个区域做到点击事件？
可以通过图片热区技术:
1>插入一张图片，并设置好图像的有关参数，在im>标记中设置参数usemap="#Map”，以表示对图像地图的引用。
2>用<map标记设定图像地图的作用区域，并取名:Map。
3>分别用标记针对相应位置互粉出多个矩形作用区域，并设定好链接参数href
例:
19、a元素除了用于导航外，还有什么作用?
- href厘性中的url可以是浏览器支持的任何协议，所以a标签可以用来手机拨号10，也可以用来发送短信<ahref="sms:110"110，还有邮件等等。
- 当然，a元素最常见的就是用来做锚点和 下载文件。
- 锚点可以在点击时快速定位到一个页面的某个位置，而下载的原理在于a标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。
20、你知道SEO中的TDK吗?
在SEO中，TDK其实就是title、description、keywords这三个标签，title表示标题标签，description是描述标签，keywords是关键词标签。
21、对HTML语义化的理解？
**语义化是指根据内容的结构化(内容语义化)，选择合适的标签(代码语义化)。**通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下：
对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
常见的语义化标签：
22、DOCTYPE(文档类型)的作用？
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档，不同的染模式会影响浏览器对CSS代码甚至JavaScript 脚本的解析。它必须声明在HTML文档的第一行。
浏览器渲染页面的两种模式(可通过document.compatMode获取，比如，语雀官网的文档类型是CSSICompat)：
CSSICompat:标准模式(Strick mode)，默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat:怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
23、script标签中defer和async的区别？
如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载
下图可以直观的看出三者之间的区别：
其中蓝色代表is脚本网络加载时间，红色代表is脚本执行时间，绿色代表htm1解析。
defer和async届性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下:
**执行顺序: **多个带async属性的标签，不能保证加载的顺序;多个带defer厘性的标签，按照加载顺序执行。
**脚本是否并行执行: **async屋性，表示后续文档的加载和执行与is脚本的加载和执行是并行进行的，即异步执行defer厘性，加载后续文档的过程和is脚本的加载(此时仅加载不执行)是并行进行的(异步)，is脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。
24、常用的meta标签有哪些？
meta 标签由 name和 content 性定义，用来描述网页文档的届性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。
常用的meta标签：
- charset 用来描述HTML文档的编码类型:
<meta charset='UTF-8'>
- keywords，页面关键词:
<meta name='keywords' content='这是关键词' />
- description,页面描述：
<meta name='description' content='页面描述' />
- refresh，页面重定向和刷新：
<meta http-equiv='refresh' content='0;url' />
- viewport，适配移动端，可以控制视口大小和比例：
<meta nane='viewport' content="width=device-width, initial-scale=1, maximum-scale-1" />
其中，content 参数有以下几种：
**width viewport:**宽度(数值/device-width)
**height viewport:**高度(数值/device-height)
**initial-scale:**初始缩放比例
**maximum-scale:**最大缩放比例
**minimum-scale:**最小缩放比例
**user-scalable 😗*是否允许用户缩放(yes/no)
6. 搜索引擎索引方式：
<meta name='robots' content='inndex,follow' /
其中，content 参数有以下几种：
**all:**文件将被检索，且页面上的链接可以被查询
**none:**文件将不被检索，且页面上的链接不可以被查询
**index:**文件将被检索
**follow:**页面上的链接可以被查询
**noindex:**文件将不被检索
**nofollow:**页面上的链接不可以被查询
25、img的srcset属性的作用?
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了img标签的srcset属性。srcset厘性用于设置不同屏幕密度下，immg会自动加载不同的图片。用法如下：
使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128png屏幕密度为2x时加载image-256png。
按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x2x,3x4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：
其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于srcset 中的w单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。
sizes语法如下：
sizes就是指默认显示128px,如果视区宽度大于360px,则显示340px。
26、行内元素有哪些? 块级元素有哪些?空(void)元素有那些?
行内元素有:a b span imginput select strong;
块级元素有:** div ul ol li dl dt dd h1 h2 h3h4 h5 h6 p**;
空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签:
常见的有:
、 、link>、;
鲜见的有: 、command>.、、source>.、。
27、说一下 web worker ？
在HTML页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。webworker 是运行在后台的is，独立于其他脚本，不会影响页面的性能。并且通过postessage 将结果回传到主线程这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建web worker:
- 检测浏览器对于webworker 的支持性
- 创建web worker 文件 (is，回传函数等）
- 创建web worker 对象
28、title与h1的区别、b与strong的区别、与em的区别?
strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
i内容展示为斜体，em表示强调的文本
29、head 标签有什么作用，其中什么标签必不可少?
标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者下面这些标签可用在head 部分: ,elink,meta>escript=,
30、浏览器乱码的原因是什么? 如何解决?
产生乱码的原因:
网页源代码是qbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现htm1乱码，反之也会出现乱码;
htm1网页编码是qbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码
浏览器不能自动检测网页编码，造成网页乱码
解决办法:
使用软件编辑HTML网页内容
如果网页设置编码是gbk，而数据库储存数据编码格式是uTE-8，此时需要程序查询数据库数据显示数据前进程序转码；
如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。
31、渐进增强和优雅降级之间的区别
(1) 渐进增强(progressive enhancement): 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。
(2) 优雅降级gracefuldegradation: 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容
两者区别:
优雅降级是从复杂的现状开始的，并试图减少用户体验的供给，而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
降级(功能衰竭)意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器(如IE、Mozila等)的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨(poor,but passable)”的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略
渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo 所采纳并用以构建其分级式浏览器支持(Graded Browser Support)策略的原因所在。
32、说一下HTML5 drag API？
**dragstart: **事件主体是被拖放元素，在开始拖放被拖放元素时触发。
事件主体是被拖放元素，在正在拖放被拖放元素时darg:触发。
**dragenter: **事件主体是目标元素，在被拖放元嘉进入某元素时触发。
事件主体是目标元素，在被拖放在某元素内移dragover:动时触发。
**dragleave: **事件主体是目标元素，在被拖放元素移出目标元素是触发
**drop: **事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
**dragend: **事件主体是被拖放元素，在整个拖放操作结束时触发。
33、Canvas和SVG的区别？
(1) SVG:
SVG可缩放矢量图形 (Scalable Vector Graphics) 是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVGDOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的性发生变化，那么浏览器能够自动重现图形。
其特点如下:
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快）
不适合游戏应用
(2)Canvas: Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。
其特点如下：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以png或jpg格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
注:矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。
34、浏览器是如何对 HTMIL5 的离线储存资源进行管理和加载？
**在线的情况下，**浏览器发现html头部有anifest 性，它会请求manifest文件，如果是第一次访问页面，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest 文件与旧的manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了就会重新下载文件中的资源并进行离线存储。
**离线的情况下，**浏览器会直接使用离线存储的资源。
35、label 的作用是什么? 如何使用?
label标签来定义表单控件的关系:当用户选择label标签时，浏览器会自动将焦点转到和1abel标签相关的表单控件上。
使用方法1:
使用方法2：
36、知道什么是微格式吗? 谈谈理解，在前端构建中应该考虑微格式吗?
所谓的微格式是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式。
具体表现是把语义嵌入到HTML中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾HTML文档的人机可读性，相当于对web网页进行语义注解。
采用微格式的web页面，在HTML文档中给一些标签增加-些属性，这些属性对信息的语义结构进行注解，有助于处理HTML文档的软件，更好的理解HTML文档。当爬取web内容时，能够更为准确地识别内容块的语义，微格式可以对网站进行SEO优化。
最后：贴下自己的小程序，有很多花里胡哨的东西，喜欢可以扫码查看
2022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
