HTML基础

1.HTML文件中的DOCTYPE是什么作用？

HTML超文本标记语言，DOCTYPE及Document Type，网页文件的文档类型标准。

主要作用是告诉浏览器的解析器要使用哪种HTML规范或XHTML规范来解析页面。

DOCTYPE 需要放置在 HTML 文件的标签之前。

2.HTML、XML、XHTML之间有什么区别？

都是标记语言

HTML 超文本标记语言
XML 可扩展标记语言（要求：有且只有一个根元素，大小写敏感，正确嵌套，必须双引号和闭合标签）
XHTML 可扩展超文本标记语言

3.前缀为data-开头的元素属性是什么？

是HTML元素添加额外数据信息的方式，被称为自定义属性。

可以直接在元素标签上或者JavaScript来操作元素的数据属性

注意：在各种现代前端框架出现后，这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知道即可。

4.对HTML语义化的理解？

语义化之前
- 使用span，div，p，a等左文字，做按钮，用div做一切，阅读代码的人不能一眼看出代码的功能，对机器的不友好体现在解析代码程序不能很好的对这些元素进行分类处理。

语义化之后

HTML5规范语义化标签，例如：

标签就代表段落
代表正⽂内容代表按钮代表头部
语义化的好处：可读性增强，清晰查看网页结构，利于整个团队的协作开发和后续维护工作，同时利于机器搜索爬虫，可以根据文章自动生成目录等等。

5.HTML5对比HTML4有哪些不同之处？（HTML5新特性有哪些？）

新特性	详情
统一标准只有一种DOCTYPE文件类型声明
增加了新的标签元素	section，video，nav，aside，canvas，footer，header等等
input支持几个新的类型值	data，email，url等等
新增一些标签属性	charset（用于meta标签）；async（用于script标签）
新增的全域属性	contenteditable, draggable...hidden...
新增API	本地存储，地理定位，Canvas绘图，拖拽API，即时通信WebSocket...

6.meta标签有哪些常用用法？

标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。

name属性，它描述的是网页文档的信息（例如：作者，日期时间，网页描述，关键词）

http-equiv属性，它描述的相当于是HTTP响应头信息（例如：网页内容信息，网页缓存等）

一些常用的功能及写法：

设置网页关键词 (SEO)
设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)

设置 http 响应头：Content-Type 网页内容类型 (字符集)

7.img标签的srcset的作用是什么？

处理响应式图片的方式

通过使用 img标签的 srcset 属性，可定义一组额外的图片集合，让浏览器根据不同的屏幕状况选取合适的图片来显示。

8.响应式图片处理优化：Picture标签

响应式图片处理

picture 元素就像是图像和其源的容器。浏览器仍然需要img元素用来表明需要加载的图片。

在下可放置零个或多个标签，以及一个标签，为不同的屏幕设备和场景显示不同的图片。

浏览器的工作流程：

浏览器会根据当前情况，去匹配和使用提供的图片
如果未匹配到合适的，就使用标签提供的图片

9.在script标签上使用 defer 和 async 的区别是什么？

defer和async的使用，可以用于提升网页性能。

script标签存在两个属性，defer和async，因此script标签的使用分为三种：

（1）没有defer和async属性，浏览器会立即加载并执行相应的脚本，但是会堵塞后续文档的加载。

（2）有async属性，标识后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行。

（3）有了defer属性，加载后续文档的过程和js脚本的加载是并行进行的(异步)，此时的js脚本仅加载不执行, js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。

defer和async在网络加载过程中是一致的，都是异步执行，区别在于，脚本加载完成之后，async是立即执行，defer会等一等，所以js脚本加上async或defer，放在头部可以减少网页的下载加载时间，如果不考虑兼容性，可以用于优化页面加载的性能。

10.前端做本地存储数据的方式有哪些？

Cookies
LocalStorage
sessionStorage
Web SQL
IndexDB

11.以上几种前端存储的区别是什么？

方式	标准	功能
Cookies	HTML5前加入	1.会为每个请求自动携带所有的Cookies数据，比较方便，但是也是缺点，浪费流量； 2.每个domain(站点)限制存储20个cookie； 3.容量只有4K4.浏览器API比较原始，需要自行封装操作。 (js-cookie)
localStorage	HTML5加入	1.兼容IE8+，操作方便； 2.永久存储，除非手动删除； 3.容量为5M
sessionStorage	HTML5加入	1.功能基本与 localStorage 相似，但当前页面关闭后即被自动清理； 2.与Cookies、localStorage 不同点是不能在所有同源窗口间共享，属于会话级别的存储
Web SQL	非标准功能	1.2010年已被废弃，但一些主流浏览器中都有相关的实现； 2.类似于 SQLite 数据库，是一种真正意义上的关系型数据库，⽤SQL进⾏操作；
indexedDB	HTML5加入	1.是一种 NoSQL 数据库，⽤键值对进⾏储存，可进⾏快速读取操作； 2.适合复杂 Web存储场景，⽤JS操作⽅便 (前端大量存数据的场景较少, 如果有, 可以用) 3.存储空间容量, 大于等于 250MB，甚至没有上限

HTML基础面试题