HTML学习笔记
1. 认识基本标签：
（1）<table>标签：<tr>是行，<th>是表头，<td>是单元格。
（2）<pre>标签：预排版，预格式化。
（3）<dl>标签定义一个描述列表，<dt>定义项目/名字，<dd>描述每一个项目/名字。
（4）<meter>元素表示已知范围内的标量值或阶乘值。它包括全局属性，如min、max、value、optimal、low、high、form等。
（5）<q>元素表示所附文本是短内联引号。
（6）<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。 (Html5)
2. 浏览器渲染流程：
解析HTML并构建DOM树 -> 构建render树 -> 布局render树 -> 绘制render树
浏览器的核心部分是渲染引擎，也称为浏览器的内核，负责对网页语法（如HTML、CSS、JavaScript等）的解释并显示网页。Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome使用webkit内核。
（0）渲染引擎首先通过网络获得所请求文档的内容
（1）解析HTML文件，构建 DOM Tree
（2）解析CSS，构建 CSSOM Tree(CSS规则树)
（3）将 DOM Tree 和 CSSOM Tree合并，构建Render tree(渲染树)
（4）reflow(重排)：根据Render tree进行节点信息计算（Layout）
（5）repaint(重绘)：根据计算好的信息绘制整个页面（Painting）
3. HTML5新特性：
（1）绘画 canvas：创建一个画布，在网页中是一个矩形框，所有的绘制工作必须在 JavaScript 内部完成；
（2）SVG绘图：SVG 是一种使用 XML 描述 2D 图形的语言；
（3）video和audio元素，video代替Flash技术；
（4）语意化更好的内容元素：header、footer、nav、article、section(节)、aside(侧边栏)、detailes、summary(包含details元素的标题)、dialog(对话框)；
（5）为表单input新增的输入类型：color、date、datetime、datetime-local、month、week、time、email、tel、number、range、url、search、
（6）新增表单元素：datalist、keygen、output；
（7）新增的表单属性：placeholder、required、pattern、min、max、step(为输入域规定合法的数字间隔)、height、width、autofocus、multiple；
（8）Web Worker：独立运行在后台的 JavaScript；
（9）Web Storage：数据以 键/值 对存在，只允许该网页访问使用本地离线存储；
localStorage长期存储数据，浏览器关闭后数据不丢失。
sessionStorage的数据在浏览器关闭后自动删除。
（10）WebSocket：在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。send()发送，onmessage事件接收。
（11）Geolocation：获取用户定位信息。
（12）HTML5相关的框架或类库：angular、react、vue、bootstrap。
（13）新增了data-*属性，用来应对浏览器不支持的情况。
4. mark标签定义带有记号的文本。
哈哈哈hh
1 | <mark>哈哈哈hh</mark> |
5. link & @import
link是HTML方式，且在HTML页面加载的同时加载；@import是CSS方式，将在页面加载完毕后被加载。
兼容性不同。
link支持使用Javascript控制DOM去改变样式；而@import不支持。
6. head 标签中必不少的是：meta,title。
7. 屏幕的尺寸标准（CSS布局）：
（1）超小屏幕（手机）：col-xs(<768像素)
（2）小屏幕（平板）：col-sm(>=768)
（3）中等屏幕（电脑）：col-md(>=992)
（4）大屏幕（大屏电脑）：col-lg(>1200px)
8. 行内元素、块级元素、行内块元素
（1）块级元素：div、ul、dl、ol、li、table、h1-h6、p 、form 、hr、address、article、aside、audio 、video 、blockquote、canvas、dd、fieldset、figcaption、figure、footer、hgroup、noscript、output、tfoot
特点：
1.一个块级元素占据一行
2.可以设置width、height、padding以及margin值
3.块级元素可以包含块级元素、行内元素以及行内块元素，文本类型块级元素特殊：如h1-h6、p标签，只能包含文本
4.宽度默认为父级元素宽度
（2）行内元素：a、span 、sub、sup、br、strong、b、em、i、label
特点：
1.一行内可以存在多个
2.无法设置width、height，padding、margin值，不能设置垂直方向，只可以设置水平方向，可以设置line-height
3.一个行内元素内可以包括行内元素和文本内容，a标签特殊：可以放块级元素、行内块元素，但不能再放一个a标签
4.宽度默认随文本内容变化
CSS有个属性叫做display，其取值可以为inline-block，即行内块元素。
（3）行内块元素：img 、input 、td、textarea、select
特点：
1.一行可存在多个行内块元素，但它们之间存在空隙
2.可以设置width、height、padding以及margin值
3.宽度默认随文本内容变化
（4）可变元素：applet、button、del、iframe、ins、map、object、script
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
9. File API
使用 type=”file” 的 <input> 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件进行操作。
10. reflow（回流）
reflow指的是网络浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。
页面上节点是以树的形式展现的，我们通过js将页面上的一个节点删除，此时为了不让剩下的节点脱节，将断点结合起来重新形成一棵树。而这个重新结合过程就是回流。
触发浏览器reflow的操作：
（1）字体大小改变、窗口大小改变
（2）窗口大小改变
（3）样式表添加或删除
（4）JS更改DOM元素
（5）:hover动作
（6）位置计算
（7）用户输入
（8）改变样式属性
11. video事件
loadstart、durationchange、loadedmetadata、loadeddata、progress、canplay、canplaythrough、play、pause、seeking、seeked、waiting、timeupdate、ended、error、volumechange、stalled、ratechange、abort
12. 元素的隐藏
display:none 指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint。
visibility:hidden 指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint，但不可触发绑定事件。
opacity=0 指的是元素不可见但存在，保留空间，不影响结构，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。
13. relative & absolute & fixed
相对定位(relative)，不脱离文档流，根据自身的位置进行偏移。
绝对定位(absolute)，脱离文档流，如果父元素没有进行position，相对于浏览器左上角进行定位，否则相对于父元素定位。
固定定位(fixed)，脱离文档流，相对于浏览器左上角定位。
14. ie5及其以下使用怪异盒模型(border-box)，ie8以后使用标准盒模型(content-box)
15. DHTML
实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。
16. css加载
css加载不会阻塞DOM树的解析
css加载会阻塞DOM树的渲染
css加载会阻塞后面js语句的执行
17.一个完整的网页加载流程：
(1)解析HTML结构
(2)加载外部脚本script和样式表文件link（页面中的多个脚本文件采用同步的方式加载 会产生“线程等待”）
(3)解析并执行脚本代码
(4)构建HTML DOM模型
(5)加载图片等外部资源文件（图片等文件以异步线程的方式加载，不会产生等待）
(6)页面加载完毕
18.空元素
area、base、br、col、colgroup、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
19.样式优先级：
1 | <div style="color:red;"><span style="color:green;">Hello</span></div> |
优先级就近原则，同权重情况下样式定义最近者为准。
css层叠样式权重值：（重叠标签较多时，权重相加）
1、!important，加在样式属性值后，优先级最高，权重值：10000
2、内联样式，如：
3、ID选择器，如：#app，权重值：100
4、类选择器，伪类选择器和属性选择器，如： .content、:hover、a[href]，权重值：10
5、标签选择器和伪元素选择器，如：div、p、:first-line、:before，权重值：1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~），权重值：0
20.margin
margin：1 2 3 4 （上1 下2 左3 右4）
margin：1 2 3 （上1 左右2 下3）
margin：1 2 （上下1 左右2）
margin：1 （四边距都是1）
margin：外边距。
padding：为内边距，为内容到边框的距离。
21.input:type
button、checkbox、file、hidden、image、password、radio、reset、submit、text…+html5新增type
22.BFC(Block Formatting Context):块级格式化上下文。
可以把BFC看做一个容器，容器里边的元素不会影响到容器外部的元素。
创建BFC：给父级元素添加以下任意样式
overflow的值不是visible
display: flex/ inline-flex/ inline-block/ table-cell/ table-caption;
position的值不是static或者relative
float的值不是none
23. DOM树节点类型
DOM树一共有12种节点类型，常用的有4种：
1、Document类型（document节点）——DOM的“入口点”
2、Element节点（元素节点）——HTML标签，树构建块
3、Text类型（文本节点）——包含文本
4、Comment类型（注释节点）——有时我们可以将一些信息放入其中，它不会显示，但JS可以从DOM中读取它。
24. SEO(Search Engine Optimization):搜索引擎优化。
25. JSON和XML之间的区别：
1、JSON是JavaScript Object Notation；XML是可扩展标记语言。
2、JSON是基于JavaScript语言；XML源自SGML。
3、JSON是一种表示对象的方式；XML是一种标记语言，使用标记结构来表示数据项。
4、JSON不提供对命名空间的任何支持；XML支持名称空间。
5、JSON支持数组；XML不支持数组。
6、XML对数据的类型描述表达比JSON更丰富。
7、XML的文件相对难以阅读和解释；与XML相比，JSON的文件非常易于阅读。
8、JSON不使用结束标记；XML有开始和结束标签。
9、JSON的安全性较低；XML比JSON更安全。
10、JSON不支持注释；XML支持注释。
11、JSON仅支持UTF-8编码；XML支持各种编码。
12、存在一些数据库，直接支持XML或JSON数据的操作，如mongodb, postgresql。
26.clientWidth & offsetWidth
Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距(paddding)，但不包括垂直滚动条（如果有）、边框(border)和外边距(margin)。
27.触发创建单独图层
1、3D或透视变换(perspective transform) CSS属性
2、opacity做css动画或使用一个动画webkit变换的元素
3、z-index在复合层上面渲染的元素
4、拥有3D上下文或加速2D上下文的<canvas>节点
5、使用加速视频解码的<video>节点
28.HTML特性（原始）
（1）HTML标签对大小写不敏感。
29.CSS特性
（1）塌陷问题：块之间共享垂直外边距margin，margin取其大。
（2）行内元素无法设置宽高。
30.UTF-8
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。
31.iframe使用场景
（1）典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe.
（2）ajax上传文件
（3）加载别的网站内容，例如google广告，网站流量分析。
（4）在上传图片时，不用flash实现无刷新。
（5）跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。
32.manifest
manifest 属性规定文档的缓存 manifest 的位置，manifest 文件是一个简单的文本文件，列举出了浏览器用于离线访问而缓存的资源。
33.数据序列化技术
JSON数据格式，(Property) list数据格式，protocal buffer（Google出品的一种轻量 & 高效的结构化数据存储格式，性能比Json、XML强）
34.Canvas 与 SVG 的比较
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
To be continued...
