# HTML

[ ] 语义化标签
[ ] 音视频处理
[ ] canvas/webGL
[ ] history API
[ ] requestAnimationFrame
[ ] 地理位置
[ ] web socket
[ ] ......

Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
HTML5为什么只需要写?
行内元素有哪些?块级元素有哪些?空(void)元素有那些?
页面导入样式时，使用link和@import有什么区别?
介绍一下你对浏览器内核的理解?
常见的浏览器内核有哪些?
html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?
如何区分HTML和HTML5?
简述一下你对HTML语义化的理解?
HTML5的离线储存怎么使用，工作原理能不能解释一下?

# 谈谈你对HTML5的理解？

# 语义化标签

合理的标签干合适的事情。

块级（block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot
行级（inline）：a、span、small、strong、em、i、code、
行内块（inline-block）：img、input

区别：

行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
块级元素可以包含行内元素和块级元素，还可以容纳内联元素 (opens new window)和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

# 渲染机制

什么是DOCTYPE及作用

DOCTYPE是用来声明文档类型和DTD（文档类型定义）规范的，一个主要用途就是文件的合法性验证。

HTML 5 <!DOCTYPE html>

浏览器渲染过程

DOM Tree、CSSom Tree、layout、Render Tree

重排Reflow

定义：DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

重绘Repaint

DOM改变、CSS改变

布局Layout

# H5新特性

(1) Canvas绘图

(2) SVG绘图

(3) 地理定位

(4) Web Worker web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。

(5) Web Storage

Cookie技术（兼容性好,数据不能超4kb，操作复杂）：
sessionStorage（兼容性差，数据8MB，操作简单）：页面回话结束即删除
localStorage：不会自己删除

(6) Web Socket

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

# 3. H5适配(自适应方案)

移动端适配及PC端适配心得总结体会(二) (可能比较全 (opens new window)

编写响应式？

声明viewport元标签
使用流式布局
所有容器使用相对尺寸，不用绝对尺寸
（最重要原则）使用CSS3 Media Query技术

设置viewport

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

<!-- 设置页面内核 -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />

媒体查询

<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />

← 大前端学习路径 + B站资源整合目录 →