目录
doctype的作用是什么？
DOCTYPE是html5标准网页声明，且必须声明在HTML文档的第一行。来告知浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析
文档解析类型有：
- BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。（如果没有声明DOCTYPE，默认就是这个模式）
- CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
- IE8中的一种介于上述两者之间的近乎标准的模式，但是基本淘汰了
标准模式，怪异模式，近乎标准模式的区别是什么？
- 标准模式：页面按照HTML与CSS的定义渲染
- 怪异模式：会模拟更久的浏览器的行为
- 近乎标准模式：会实施了一种表单元格尺寸的怪异行为（与IE7之前的单元格布局方式一致），除此之外符合标准定义
HTML、XHTML、XML有什么区别
- HTML(超文本标记语言)：在html4.0之前HTML先有实现再有标准，导致HTML非常混乱和松散
- XML(可扩展标记语言)：主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但是更加轻量高效，所以XML现在市场越来越小了
- XHTML(可扩展超文本标记语言)：基于上面两者而来，W3C为了解决HTML混乱问题而生，并给予此诞生了HTML5，开头加入的做法因此而来，如果不加就是兼容混乱的HTML，加了就是标准模式。
什么是data-属性
HTML的数据属性，用户将数据存储于标准的HTML元素中作为额外信息，我们可以通过js访问并操作它，来达到操作数据的目的。
<article id="elect" data-columns="3" data-index-number="123" data-parent="cars"></article>
前端框架出现之后，这种方法已经不流行了，但是在前端框架当中有时会用到
你对HTML语义化的理解
语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义，比如<p>标签代表段落，<article>标签代表正文内容等等。
语义化的好处主要有两点：
- 开发者友好：使用语义类标签增强了可读性，开发者也能够清晰地看出网页地结构，也更加便于团队的开发和维护
- 机器友好：带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，语义类还可以支持读屏软件，根据文章可以自动生成目录
这对于知乎、简书这种富文本类的应用很重要，语义化对于其网站的内容传播有很大的帮助，但是对于功能性的web软件重要性大打折扣，比如一个按钮，Skeleton(骨架屏)这种组件根本没有对应的语义，也不需要什么SEO。
HTML5与HTML4的不同之处
- 文件类型声明不同：HTML4(
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">)而HTML5(<!DOCTYPE HTML>)
DOCTYPE不区分大小写
- 解析的顺序：早先的HTML 4.01 基于 SGML， 所以在 DOCTYPE 部分要引用 DTD(文档类型定义)。而 HTML5 不基于 SGML，所以就不需要对 DTD 引用，但需要 DOCTYPE来规范浏览器行为
- HTML5增加了新的元素，比如：section，video，progress，nav，meter，time，aside，canvas，command，datalist，details，embed，figcaption，figure，footer，header，hgroup，keygen，mark，output，rp，rt，ruby，source，summary，wbr
- input元素的新类型：date，email，url等
- 新的属性：ping(用于a与area)，charset(用于meta)，async(用于script)
- 全域属性：id,tabindex,repeat， 新的全域属性：contenteditable，contextmenu，draggable，dropzone，hidden，spellcheck
- 移除元素：acronym，applet，basefont，big，center，dir，font，frame，frameset，isindex，noframes，strike，tt
有哪些常用的meta标签
meta标签由name和content两个属性来定义，用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也 可以自定义name。
-
charset，用于描述HTML文档的编码形式
<meta charset="UTF-8"> -
http-equiv，顾名思义，相当于http的文件头作用，比如下面的代码就可以设置http缓存过期日期
<meta http-equiv="expires" content="Tue Sep 29 2020 18:48:49 GMT+0800"> -
viewport，web开发人员可以控制视口的大小和比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- apple-mobile-web-app-status-bar-style，开发PWA应用，为了自定义评估工具栏的颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
src和href的区别？
- src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他的资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
- href时指向网络资源所在位置的超链接，用来建立和当前元素或文档之间的连接，当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。
说说img的srcset的作用是什么？
可以设计响应式图片，我们可以使用两个新的srcset和sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。
sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。
所以，有了这些属性，浏览器会：
- 查看设备宽度
- 检查sizes列表中哪个媒体条件是第一个为真
- 查看给予该媒体查询的槽大小
- 加载srcset列表中引用的最接近所选的槽大小的图像
srcset提供了根据屏幕条件选取图片的能力
<img src="demo.png" alt="demo" srcset="demo-200.png 200w,demo-400.png 400w" sizes="(min-width:600px)200px, 50vw">
还有哪一个标签能起到跟srcset相似作用？
<picture>元素通过包含零或多个<source>元素和一个<img>元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子<source>元素，如果没有匹配的，就选择<img>元素的src属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。
picture同样可以通过不同设备来匹配不同的图像资源
<picture>
<source srcset="/img/demo-400-400.jpg" media="(min-width:800px)">
<img src="/img/demo-200-200.jpg"/>
</picture>
script标签中defer和async的区别
- defer：浏览器指示脚本在文档被解析后执行，script被异步加载后不会立刻执行，而是等待文档被解析完毕后执行。
- async：同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适用。
蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表HTML解析
前端存储的方式有哪些？
cookies、localStorage、sessionStorage、Web SQL、IndexedDB
上述存储方式的区别是什么？
- cookies：在HTML5标准前本地存储的主要方式，优点是兼容性好，请求头自带cookie方便，缺点是大小只有4k，自动请求头加入cookie浪费流量，每个domain限制20个cookie，使用起来麻烦需要自行封装。
- localStorage：HTML5加入的以键值对(key-value)为标准的方式，优点是操作方便，永久性存储(非手动删除)，大小为5M，兼容IE8+。
- sessionStorage：与localStorage基本类似，区别是sessionStorage当页面关闭后会被清理，而且与cookie、localStorage不同，它不能在所有同源窗口中共享，是会话级别的存储方式。
- Web SQL：2010年被W3C废弃的本地数据库数据存储方案，是主流浏览器(火狐除外)都已经有了相关的实现，web sql类似于SQLite，是真正意义上的关系型数据库，用sql进行操作，当我们用JavaScript时要进行转换，较为繁琐。
- IndexedDB：是被正式纳入HTML5标准的数据库存储方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作，非常适合web场景，同时用JavaScript进行操作会非常方便。
1045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
