1. DOCTYPE 的作用
DOCTYPE目的是告诉浏览器应该以什么样（html或xhtml）的文档类型来解析文档。不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析，它必须声明在HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式：
1. 标准模式：默认模式，浏览器使用W3C的标准解析渲染页面。浏览器以其支持的最高标准呈现页面。
2. 怪异模式：浏览器使用自己的怪异模式解析渲染页面。页面以一种比较宽松的向后兼容的方式显示。
2. 对HTML语义化的理解
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化） 。
语义化的优点如下：
- 对机器友好，更适合搜索引擎的爬虫爬取有效信息，有利于SEO
- 对开发者友好，增强了可读性，结构更加清晰，便于团队的开发与维护。
- 有利于盲人阅读
常见的语义化标签：
<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部
3. 块级元素、行内元素、空元素有哪些哪些
1. 行内元素：a b span img input select strong
2. 块级元素：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
3. 空元素（没有内容的HTML元素，空元素没有闭合标签）：<br>、<hr>、<img>、<input>、<link>、<meta>
4. src 和 href 的区别
- 当浏览器遇到
href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式) - 当浏览器解析到
src，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是为什么script标签放在底部而不是头部)
5. defer 和 async 的区别
这里用几张图片可以清晰的看出两者之间的区别：
- 执行顺序： 多个带
async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行
6. 常见的 meta 标签有哪些
meta 标签由 name 和 content 属性定义，用来描述网页文档的属性。
1. 用来描述HTML文档的编码类型
<meta charset="UTF-8" >
2. 页面关键词
<meta name="keywords" content="关键词" />
3. 页面描述
<meta name="description" content="页面描述内容" />
4. 页面重定向和刷新
<meta http-equiv="refresh" content="0;url=" />
5. 适配移动端，可以控制视口的大小和比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
7. HTML5有哪些常用更新
1. 语义化标签：header nav artical section aside footer
2. 媒体标签：audio video
3. Canvas绘图
4. Web Worker
5. Web Storage：localStorage sessionStorage
6. Web Socket：为web应用程序客户端和服务端之间提供了一种全双工通信机制
7. SVG绘图：一种使用 XML 描述 2D 图形的语言
8. 拖放API：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
设置元素可拖放：<img draggable="true" />
8. img 的 srcset 属性的作用
用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：
<img src="image-128.png" srcset="image-256.png 2x" />
在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。
9. title与h1的区别、b与strong的区别、i与em的区别
1. title 没有明确意义只是个网页标题，title在SEO优化上面比h1更重要
h1是显示在网页内容上的，对页面信息的抓取有很大的影响，logo一般都是用h1标签包裹的
2. 都可以使文字加粗。但是strong 标签有加重语气的效果，而 b 标签只有加粗作用
3. 都可以使得字体倾斜。但是em标签有强调的语义，而 i 标签只有倾斜作用
10. iframe 有哪些优点和缺点
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
优点：
1. 内容隔离，不会与主文档的样式和脚本发生冲突
2. 主文档和嵌套文档可以并行加载
3. 用于集成第三方服务或内容
缺点：
1. iframe会阻塞主页面的Onload事件
2. 无法被一些搜索引擎索引到
3. 如果 <iframe> 用于加载来自不受信任的源的内容，可能存在安全风险
4. 使用过多的 <iframe> 可能会影响页面性能，会引入额外的请求和资源加载，可能导致页面加载速度变慢
11. label 的作用是什么？如何使用？
用来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。
使用方法1：
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
使用方法2：
<label>Date:<input type="text"/></label>
12. Canvas 和 SVG 的区别
Canvas 通过 JS 和 <camvas> 来绘制 2D 图形，能够以 .jpg 或 .png 格式保存图像
SVG 是基于 XML 来描述二维矢量图形的语言
1、SVG 支持分层，可以对单独的标签进行修改，Canvas 修改的话，需要将整个画布重新渲染。
2、Canvas放大之后会失真，而 SVG 绘制的矢量图其质量不受缩放影响。
3、Canvas支持的颜色比SVG多，更适合用于图像密集型的游戏
4、SVG 支持事件处理器，而 Canvas 不支持
5、SVG 节点过多时，渲染速度会减慢，Canvas 性能更好一些，但写起来更复杂
13. 浏览器乱码的原因是什么？如何解决？
产生乱码的原因：
- 网页源代码是
gbk的编码，而内容中的中文字是utf-8编码，这样浏览器打开即会出现html乱码 html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码- 浏览器不能自动检测网页编码，造成网页乱码。
解决办法：
- 如果网页设置编码是
gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码； - 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。
14. head 标签有什么作用，其中什么标签必不可少？
head 标签用于定义文档的头部，文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<link>, <meta>, <script>, <style>, <title>
其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。
15. HTML5的离线储存怎么使用，它的工作原理是什么？
离线存储：在用户没有连接因特网时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
（1）原理： HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
（2）使用：：
创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：
<html lang="en" manifest="index.manifest">
在 cache.manifest 文件中编写需要离线存储的资源：
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
- CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
- NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
- FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。
在离线状态时，操作 window.applicationCache 进行离线缓存的操作。
16. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
- 在线的情况下：浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件。如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件。如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
- 离线的情况下：浏览器会直接使用离线存储的资源。
17. meta标签把http换成https的功能
利用 meta 标签把 http 请求换为 https :
<meta http-equiv ="Content-Security-Policy" content="upgrade-insecure-requests">
18. 优雅降级和渐进增强
优雅降级：一开始构建完整的功能，再针对低版本浏览器进行兼容
渐进增强：一开始保证最基本的功能，再改进和追加功能
19. DIV+CSS 布局比 table 布局好在哪里
1、表现和结构分离
2、页面加载速度更快，结构化清晰，页面显示简洁
3、修改样式方便，只要改css文件
4、易于优化，搜索引擎更友好
20. 前端需要注意哪些SEO
1、合理的title、description、keywords
2、语义化的html代码，符合W3C标准
3、重要HTML代码放前面
4、少用 iframe：搜索引擎不会抓取 iframe 中的内容
5、非装饰性图片必须加 alt
21. HTML、XML、XHTML 的区别
22. 主流浏览器及其内核
1、IE：Trident
2、Chrome：Webkit -> Blink
3、Firefox：Gecko
4、Safari：Webkit
23. 写HTML代码时，应该注意什么
1. 尽可能少的使用无语义的标签div和span；
2. 需要强调的文本，使用strong或em标签（不要用b标签 i标签，上面第9点有提到它们的区别）
3. 标签字母要小写，标签要闭合，标签要正确嵌套
24. 说一下 HTML5 drag API
dragstart： 事件主体是被拖放元素，在开始拖放被拖放元素时触发
darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发
dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发
dragover：事件主体是目标元素，在被拖放在某元素内移动时触发
dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发
25. img标签的title和alt有什么区别
title：鼠标移入到图片时显示的信息
alt：图片无法加载时显示的信息（为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键字）
26. 谈谈你对前端工程化的理解
前端工程化：指使用软件工程的技术与方法对前端开发的技术、工具、流程、经验、方案等指标标准化，它具备模块化、组件化、规范化、自动化四大特性，主要目的是降低成本与增加效率。
- 模块化：是指在文件层面上对代码与资源实现拆分与组装，将一个大文件拆分为互相依赖的小文件，再统一拼装与加载。各个模块功能独立，分模块来维护，组合方式更灵活，多人协作也互不干扰。例如：接口模块、资源模块、路由模块等。
- 组件化：是指在功能开发场景中，将具备通用功能的交互设计划分为模板、样式和逻辑组成的功能单元，是具体某个功能的封装，实现了代码更高层次的复用性，提升开发效率。组件的封装也是对象的封装，同样要做到高内聚低耦合，例如分页器、table表格、form表单等。
- 规范化：将一系列预设规范接入工程各个阶段，通过各项指标标准化开发者的工作流程，为每个开发者指明一个方向，引领着成员往该方向走。例如：eslint、stylelint、pre-commit 等，拉齐代码标准，形成规范底线，方便不同人员等交叉维护。
- 自动化：指将一系列繁琐重复的工作流程交由程序根据预设脚本自动处理，常见自动化场景包括但不限于自动化构建、自动化测试、自动化打包、自动化发布和自动化部署等。在保证效率的同时，又解放了双手。
总结：前端工程化不是某个具体的工具，而是对项目的整体架构与整体规划，使开发者能在未来可判断时间内动态规划发展走向，以提升整个项目对用户的服务周期。最终的目的是从手动处理流程全部替换为自动处理流程，以解放团队双手，让其他成员更专注于自身业务需求。
27. H5 移除了哪些元素
纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
对可⽤性产⽣负⾯影响的元素： frame 、 frameset 、 noframes
28. WEB标准以及W3C标准是什么?
标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离
29. HTML全局属性有哪些？
class : 为元素设置类标识
data-* : 为元素增加⾃定义属性
draggable : 设置元素是否可拖拽
id : 元素 id ，⽂档内唯⼀
lang : 元素内容的的语⾔
style : ⾏内 css 样式
title : 元素相关的建议信息
30. HTML5 为什么只需要写 !DOCTYPE HTML>
HTML5 不基于 SGML ，因此不需要对 DTD 进⾏引⽤，但是需要 doctype 来规范浏览器的⾏为
⽽ HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型
31. 知道的网页制作会用到的图片格式有哪些？
png-8 、 png-24 、 jpeg 、 gif 、 svg
但是上⾯的那些都不是⾯试官想要的答案，⾯试官希望听到是Webp , Apng
Webp： ⾕歌开发的⼀种旨在加快图⽚加载速度的图⽚格式。图⽚压缩体积⼤约只有 JPEG 的 2/3 ，并能节省⼤量的服务器带宽资源和数据空间。在质量相同的情况下，WebP格式图像的体积要⽐JPEG格式图像⼩ 40% 。
png格式的动态图⽚效果。04年诞⽣，但⼀直得不到各⼤浏览器⼚商的⽀持，直到⽇前得到 iOS safari 8 的⽀持，有望代替 GIF 成为下一代动态图标准。
32. 前缀为 data- 开头的元素属性是什么？
这是一种为 HTML 元素添加额外数据信息的方式，被称为 自定义属性。
我们可以直接在元素标签上声明这样的数据属性：
<div id="mydiv" data-message="Hello,world" data-num="123"></div>
也可以使用 JavaScript 来操作元素的数据属性：
let mydiv = document.getElementById('mydiv')
// 读取
console.log(mydiv.dataset.message)
// 写入
mydiv.dataset.foo = "bar!!!"
*注意：在各种现代前端框架出现后，这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知道即可。
33. 说说img标签的onerror事件，图片加载失败的处理方法
在图片不存在或者网络状态不好的情况下，会存在图片加载不过来，用户体验很差。可以直接在 img 标签里添加 onerror 事件进行控制。
<img src="" onerror="javascript:this.src='xxx.jpg';">
注意点：
1.这里的图片要尽可能小，如果过大还会存在加载失败的可能；
2.当'xxx.jpg'图片不存在时还会出现加载失败；
3.当加载失败时会再次执行onerror，再失败再执行，会一直执行陷入循环之中。
所以可以写一个函数，让函数只执行一次（执行一次把它置为null），不让其进入循环之中
34. 如何区分 Html 和 Html5
HTML5 文档类型声明为 <!DOCTYPE html>，而较早的 HTML 版本可能使用不同的文档类型声明。例如，HTML 4.01 的文档类型声明为 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">。
35. 什么是标准模式与混杂模式
- 标准模式（Standards mode）：以浏览器支持的最高标准运行；
- 混杂模式（Quirks mode）：中页面是一种比较宽松的向后兼容的方式显示。
36. 如何实现在一张图片上的某个区域做到点击事件？
图片热区技术，要用法 img 的 usemap 属性，map 标签和 area 标签：
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
</body>
37. a 元素除了用于导航外，还有什么作用？
a 元素最常见的就是用来做锚点和下载文件。由于 ref 属性中的 url 可以是浏览器支持的任何协议，所以 a 标签还可以用来手机拨号、和发送短信。
38. SEO 中的 TDK 是什么？
TDK 其实就是 title、description、keywords 这三个标签
