html你需要知道的问题

1、Doctype作用？严格模式与混杂模式如何区分？

• Doctype作用
  声明文件类型，让浏览器解析器知道应该用哪个规范来解析文档。
• 严格模式
  又称标准模式，是指浏览器按照 W3C 标准解析代码。
• 混杂模式
  又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
• 如何区分
  如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。
  html5没有DOCTYPE，HTML5实现时，已经尽可能大的实现了向后兼容，因此也就没有严格模式与混杂模式的区别。

2、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

• 行内元素

  • a - 锚点、em - 强调 、strong - 粗体强调、i - 斜体、b - 粗体、
  • span - 定义文本内区块、
  • img - 图片 、
  • label - 表格标签 、select - 项目选择、input - 输入框、textarea - 多行文本输入框

• 行内元素的特点
  1). 元素排在一行
  2). 只能包含文本或者其他内联元素
  3). 设置宽高无效，宽高就是内容宽高

• 块级元素

  • div - 常用块级、
  • table-表格，
  • p-段落、section、header、footer
  • dl - 定义列表、dt、dd 、ul- 非排序列表、li、ol-排序表单、
  • h1，h2，h3，h4，h5，h6-标题、

• 块级元素的特点
  1). 独占一行
  2). 可以包含内联元素和其他块元素
  3). 元素的宽高都可以设置，默认宽度是它容器的100%

• 空元素

  • br-换行、hr-水平分割线,、
  • link-引入样式、meta-头部申明

空元素是没有内容的HTML元素，即没有闭合标签

3、页面导入样式时，使用link和@import有什么区别？

link方法：
    <link rel="stylesheet" href="css/main.css" />

import写法：
    <style>
	   @import url("css/main.css");
    </style>

区别：
1、老祖宗的差别
link属于HTML标签，而@import完全是CSS提供的一种方式。

2、加载顺序的差别
当一个页面被加载的时候，
link引用的CSS会同时被加载，
@import引用的CSS 会等到页面全部被下载完再被加载。

所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

3、link独有
由于link属于html标签，所以可以用js控制其动态加载相应的样式文件。

4、import独有
在主样式表中再引入其他的样式表，Eg:在main.css中引入：

4、对浏览器内核的理解

浏览器内核主要分成两个部分：渲染引擎 和 JS引擎；

• 渲染引擎： 解析html,css （计算页面布局，构建dom树）
• JS引擎： 解析和执行JavaScript （实现网页的动态效果）

主流浏览器内核

• IE： Trident内核
• Safari（苹果），Chrome（谷歌）: Webkit内核
• 360 ： 两种模式，兼容模式–》ie内核(Trident)、极速模式–》谷歌内核(Webkit)
• Firefox（火狐）: Gecko内核

5、html5有哪些新特性

html5新特性

1. 新增了部分语义化的标签，比如header、nav、footer、section、article

2. 新增了视频和音频标签。video、audio

3. 新增canvas画布标签

4. 新增表单控件，calendar、date、time、email、url、search

---

5. 本地离线存储 localStorage ,sessionStorage

6. 地理定位 Geolocation

7. websocket通信

8. 新增了History API
   H5 的 History API 允许在不刷新页面的前提下，通过脚本语言的方式来进行页面上某块局部内容的更新。

9. 新增了requestAnimationFrame
   这个API是浏览器提供的js全局方法，针对动画效果。

10. 新的技术webworker(专用简析js的线程)

requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

6、HTML5的离线储存技术

在用户没有与互联网连接时，利用本地缓存文件，可以正常访问站点或应用
而一旦用户与互联网连接时，更新用户机器上的缓存文件。

原理
HTML5 的离线缓存是基于一个新建的 .appcache 文件的缓存机制，通过这个文件上的解析清单离线存储资源，浏览器会通过被离线存储的数据进行页面展示。

更多参考链接：https://blog.csdn.net/dj0379/article/details/53350309

7、canvas和svg的区别

• 从起源来看
  canvas是html5提供的新元素，
  svg最初是xml技术,用来描述二维图形的语言。要比canvas早。

• 从功能来看
  canvas，所绘制出来的图形为标量图，因此，可以在canvas中引入图片，实际应用在大型网络游戏场景的制作、统计分析图表的制作等。
  svg，所绘制出来的图形为矢量图，因此，无法引入图片，又因为不会失真，实际应用在项目中的小图标、地图（比如百度地图）等。

• 从浏览器引擎来看
  canvas绘制的图形无法被浏览器引擎抓取，
  svg绘制的图形可以被引擎抓取，支持事件的绑定

canvas有用途：
1、绘制图表图像，比如说echarts。
2、压缩图片体积。

8、cookies、sessionStorage 和 localStorage的区别

8.1是否请求时自动携带

• cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据, 在同源的http请求中浏览器自动携带cookie
• sessionStorage 和 localStorage 不会自动把数据发给服务器，仅会在本地保存

8.2 存储大小

• cookie 数据大小不能超过 4k
• sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大

8.3 有效期

• cookie, 在设置的过期时间之前一直有效，即使窗口或浏览器关闭
• localStorage，数据在浏览器关闭后数据不丢失除非主动删除数据
• sessionStorage，数据在浏览器关闭后自动删除

8.4 共享

• localStorage、cookie在同源窗口之间共享
• sessionStorage不能共享

9、移动端项目需要注意的meta

meta中设置viewport，防止用户手滑放大或缩小页面，需要在 index.html 中添加meta元素，设置viewport。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

10、HTML5 的 form 如何关闭自动补全功能

给不想要提示的 form 或某个 input 设置为 autocomplete = off

11、如何实现浏览器多个标签之间的通信

• WebSocket、ShareWorker
• 可以调用 localStorage、cookies 等本地存储方式

localStorage的storage事件：
当同源页面的某个页面修改了localStorage，其余的同源页面只要注册了storage事件，就会触发storage事件；

localStorage 的例子运行需要如下条件：

• 同一浏览器打开了两个同源页面
• 其中一个网页修改了 localStorage
• 另一网页注册了 storage 事件

//假设a.html、b.html是同源页面

//a.html   监听storage事件
window.addEventListener("storage", function (e) {
        alert(e.newValue);
});

//b.html   修改storage
window.localStorage.setItem("name","Tony");

12、webSocket 如何兼容低浏览器？

• 轮询 XHR
• Adobe Flash Socket
• ActiveXHTMLFile(IE)
• 基于 multipart 编码发送 XHR

13、iframe 有哪些缺点

• 阻塞主页面的onload事件
• 浏览器对相同域的链接有限制，所以会影响页面的并行加载

14、label的作用是什么？是怎么用的？

当用户选择该标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

15、 简述一下src与href的区别

• src ------ 指向的内容会嵌入到文档中当前标签所在的位置，如js脚本，img图片和iframe等元素。当浏览器解析到该元素时，会 暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。

• href ------- 用来建立与当前元素或文档之间的连接，如link用href引入外链的样式，当浏览器解析到该元素时，就会并行下载资源，不会停止对当前文档的处理。

16、一个页面上有大量的图片（eg: 大型电商网站），加载很慢,你有哪些方法优化这些图片的加载，给用户更好的体验

1. 垂直区域---- 图片懒加载，只加载可视区域范围内控图片。

   水平区域----如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

2. 可以使用CSSsprite（雪碧图），SVGsprite，Iconfont（阿里图标）、Base64等技术。

3. 压缩图片体积，

4. 如果图片过大，先加载时会先加载一张压缩后的缩略图，以提高用户体验。

17、meta有哪些属性，作用是什么

meta标签用于描述网页的信息，常用设置如下：

1. charset：定义HTML文档的字符集
   <meta charset="UTF-8" >

2. http-equiv：可用于模拟http请求头，可设置过期时间、缓存、刷新
   ＜meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT"＞

3. viewport：视口，用于控制页面宽高及缩放比例
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

18、meta中的viewport有哪些参数，作用是什么

1. width/height，宽高，默认宽度980px
2. initial-scale，初始缩放比例，1~10
3. maximum-scale/minimum-scale，允许用户缩放的最大/小比例
4. user-scalable，用户是否可以缩放 (yes/no)