学习笔记合集

---
title: 2022-04-02
date: 2022-07-16 17:05
---
今天
autoplay 属性规定一旦视频就绪马上开始播放。
preload 属性规定是否在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。
border:none表示边框样式无,border:0表示边框宽度为0;当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为0. 
当定义边框时,必须定义边框的显示样式.因为边框默认样式为不显示none,所以仅设置边框宽度,由于样式不存在,边框的宽度也自动被设置为 0
A. 设置body 内容颜色
B. 宽高不适配所有电脑的浏览器
C. 定义宽高为100%但是需要有内容撑开 代码里面无内容
D. 定义body整个页面为红色适配所有电脑的浏览器
html语言中加粗的标签有<b>和<strong>,或者使用css设置｛font-weight:bold｝
表格建立将运用<table>、<th>（table head）、<tr>（table row)、<td>（table data）四个标记，<table>标记用于标识一个表格组件，一个表格组成是由数个横行（<tr>）、单元格（<td>）与标题单元格（<th>）子组件所组成。
hover -> focus -> active
悬停 -> 聚焦 -> 响应
CSS伪类用于向某些选择器添加特殊的效果。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
A、C、D不存在HTML5，js方法中
getContext() 方法返回一个用于在画布上绘图的环境。
语法
Canvas.getContext(contextID)
参数
参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。

返回值
一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

描述
返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用
jqury通过哪个方法可以设置或者返回表单字段的值？
.value()  用在表单元素上，用来设置获取 input 或 select 的值
.html()  设置或返回的是源代码
.text()  设置或返回的是纯文本内容
.attr()  设置或返回被选元素的属性值
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。

用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
<track> 标签是 HTML 5 中的新标签。
目前所有主流浏览器都不支持 <track> 标签
什么是SVG? 
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
(SVG是HTML下的一个分支)

牛客686335737号
沈阳理工大学
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
websql并不是HTML5规范的一部分，而是一个独立的规范，可以用来做一些离线应用
html5手册语义化标签：
article
section
aside
hgroup
header
footer
nav
time
mark
figure
figcaption
contextmen u+menu
2022-07-17
浏览器渲染过程
1.解析HTML并构建DOM树
2.构建render树
3.布局render树
4.绘制render树
DOM中的事件对象：（符合W3C标准）    preventDefault()        取消事件默认行为  
stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。  
stopPropagation()      取消事件冒泡对当前节点无影响。 IE中的事件对象：    cancelBubble()
取消事件冒泡    returnValue() 取消事件默认行为

initial-scale: viewport 的初始缩放级别（0-10之间的正数，1表示无缩放）
minimum-scale: viewport 能缩放的最小值（0-10之间的正数）
maximum-scale: viewport 能缩放的最大值（0-10之间的正数）
user-scalable: 是否可以手动缩放（yes or no）
onchange()  事件会在域的内容改变时发生
比如：<input type="text">, <select>, <textarea>
onblur()  会在对象失去焦点时发生
.box p表示box里面的所有p元素，不管多少级
.box > p表示box里面第一级子元素为p的
.box + p 表示和box同级的，且紧跟着box后面出现的p
hidden属性功能是通知浏览器不渲染元素，是该元素处于不可见状态。但是元素中的内容还是浏览器创建的，也就是说页面装载后允许使用javascript脚本将该属性取消，取消后该元素变为可见状态，同时元素中的内容也即时显示出来。hidden属性是一个布尔值，为true元素处于不可见状态；为false元素处于可见状态
Ctx.arc(x,y,r,0,Math.PI,true);是πr，半圆周长；
Ctx.arc(x,y,r,0,2Math.PI,true);是2πr，才是整个圆周长
假如padding-top是按照height来说,父元素的高度会包含子元素的高度,如果子元素的padding-top继续增加,那么父元素的高度也会增加,因为父元素要包含子元素嘛,这样的话,父元素的高度就成为了一个死循环.
还有一种说法,我们都知道padding-left/right和margin-left/right都是按照宽度来说的,当我们不设置具体的上下左右只设置margin或padding时四个值应该保持为一种类型.
超小屏幕：col-xs（<768像素）  小屏幕：col-sm（>=768） 中等屏幕col-md（>=992） 大屏幕：col-lg(>1200px)
处理列表子元素的点击事件时，使用事件代理  // 事件代理是根据事件冒泡原理，使用事件代理可以减少注册事件,节省内存
插入大量DOM元素时，使用innerHTML替代逐个构建元素 // 测试后发现innerHTML比creaetElement效率要高~至于为什么....没有深究~
使用DocumentFragment替代多次appendChild操作 // 将元素放入代码片段中一次插入比你创建一个插入一个效率肯定要高的多
使用addEventListener替代 onxxx(比如onclick) 进行事件绑定 // 使用addEventListener监听事件不会被覆盖，而on会覆盖上一个事件
处理列表子元素的点击事件时，使用事件代理  // 事件代理是根据事件冒泡原理，使用事件代理可以减少注册事件,节省内存
插入大量DOM元素时，使用innerHTML替代逐个构建元素 // 测试后发现innerHTML比creaetElement效率要高~至于为什么....没有深究~
使用DocumentFragment替代多次appendChild操作 // 将元素放入代码片段中一次插入比你创建一个插入一个效率肯定要高的多
使用addEventListener替代 onxxx(比如onclick) 进行事件绑定 // 使用addEventListener监听事件不会被覆盖，而on会覆盖上一个事件
判断行内元素和块级元素的快捷方法就是判断是否能并列
ul和p标签是块级元素
span和input为行内元素
块级元素会独占一行,默认情况下,其宽度自动填满其父元素宽度。
行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化
锚伪类
在支持 css 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。用来表示链接不同状态的伪类就是锚伪类。

几个伪类必须按照一定的顺序(l-v-h-a)，a:hover必须被置于a:link和a:visited之后，才是有效的；a:active必须被置于a:hover之后，才是有效的。
书写顺序很重要：a:link - a:visited - a:hover - a:actived
锚，代表超链接。锚伪类是超链接的四种状态。
未访问状态（a:link）
鼠标悬停状态（a:hover）
活动状态（a:active）
已访问状态（a:visited）
锚  代表超链接。锚伪类是超链接的四种状态
a:link  未访问的状态
a：hover 鼠标悬停的状态
a:active 活动状态
a：visited 已访问的状态
锚 代表超链接 锚伪类是超链接的四种状态

1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />   
 //强制让文档的宽度与设备的宽度保持1:1，   
 //文档初始化缩放比例是1:1，   
 //不允许用户点击屏幕放大浏览，    
//允许用户缩放到的最大比例，   
 //尤其要注意的是content里多个属性的设置一定要用逗号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
2) <meta name="apple-mobile-web-app-capable" content="yes" />    
 //iPhone私有标签，它表示：允许全屏模式浏览
3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />    
//iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式
4) <meta name="format-detection" content="telephone=no; email=no" />    //不识别邮件和不把数字识别为电话号码
  （1）行内元素有：a b span img input select strong 
  （2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
  （3）常见的空元素：
  <br> <hr> <img> <input> <link> <meta>
  鲜为人知的是：
  <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。   
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。   
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。.   
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。   
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属 性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。   
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别，一旦上下文关系确定了他的类别，他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。   
关于inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。   
块元素(block element)   
* address - 地址   
* blockquote - 块引用   
* center - 举中对齐块   
* dir - 目录列表   
* div - 常用块级容易，也是css layout的主要标签   
* dl - 定义列表   
* fieldset - form控制组   
* form - 交互表单   
* h1 - 大标题   
* h2 - 副标题   
* h3 - 3级标题   
* h4 - 4级标题   
* h5 - 5级标题   
* h6 - 6级标题   
* hr - 水平分隔线   
* isindex - input prompt   
* menu - 菜单列表   
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容   
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）   
* ol - 排序表单   
* p - 段落   
* pre - 格式化文本   
* table - 表格   
* ul - 非排序列表   
内联元素(inline element)   
* a - 锚点   
* abbr - 缩写   
* acronym - 首字   
* b - 粗体(不推荐)   
* bdo - bidi override   
* big - 大字体   
* br - 换行   
* cite - 引用   
* code - 计算机代码(在引用源码的时候需要)   
* dfn - 定义字段   
* em - 强调   
* font - 字体设定(不推荐)   
* i - 斜体   
* img - 图片   
* input - 输入框   
* kbd - 定义键盘文本   
* label - 表格标签   
* q - 短引用   
* s - 中划线(不推荐)   
* samp - 定义范例计算机代码   
* select - 项目选择   
* small - 小字体文本   
* span - 常用内联容器，定义文本内区块   
* strike - 中划线   
* strong - 粗体强调   
* sub - 下标   
* sup - 上标   
* textarea - 多行文本输入框   
* tt - 电传文本   
* u - 下划线   
* var - 定义变量   

触发repaint：
color的修改，如color=#ddd；
text-align的修改，如text-align=center；
a:hover也会造成重绘。
:hover引起的颜色等不导致页面回流的style变动。
等等太多，一时间写出来也太难想了。
触发reflow：
width/height/border/margin/padding的修改，如width=778px；
动画，:hover等伪类引起的元素表现改动，display=none等造成页面回流；
appendChild等DOM元素操作；
font类style的修改；
background的修改，注意着字面上可能以为是重绘，但是浏览器确实回流了，经过浏览器厂家的优化，部分background的修改只触发repaint，当然IE不用考虑；
scroll页面，这个不可避免；
resize页面，桌面版本的进行浏览器大小的缩放，移动端的话，还没玩过能拖动程序，resize程序窗口大小的多窗口操作系统。
读取元素的属性（这个无法理解，但是技术达人是这么说的，那就把它当做定理吧）：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))；
CSS属性 visibility 显示或隐藏元素而不更改文档的布局。该属性还可以隐藏<table>中的行或列。
不更改布局所以不会发生重排
渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。

页面生成以后，脚本操作和样式表操作，都会触发“重流”（reflow）和“重绘”（repaint）。用户的互动也会触发重流和重绘，比如设置了鼠标悬停（a:hover）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。

重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，只会导致重绘，而不会导致重流；改变元素的布局，则会导致 重绘和重流。
下列哪些不 html5的新引入的特征
E. ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。与HTML毫无关系。
ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。
F. webSocket是HTML5新出的一种协议，底层是基于TCP/IP协议的。跟http没有关系，只是复用了http握手通道，用来升级协议。

一个完整的网页加载流程：    
 (1)解析HTML结构  
   (2)加载外部脚本script和样式表文件link

//页面中的多个脚本文件采用同步的方式加载 会产生“线程等待” 
    (3)解析并执行脚本代码        
   (4)构建HTML DOM模型        
(5)加载图片等外部资源文件     //图片等文件以异步线程的方式加载 不会产生等待
(6)页面加载完毕
HTML5中： 自关闭的斜线(/)对 ：area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr空标签无效，言即不再需要自闭合(/)这个小尾巴了，如果要写上也是可以的。
继承顺序
HTMLDivElement > HTMLElement > Element > Node > EvenTarget
DHTML是Dynamic HTML的简称，就是动态的HTML(标准通用标记语言下的一个应用)，是相对传统的静态的html而言的一种制作网页的概念。
DHTML只是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript(或其它客户端脚本)
html+css+javascript（或其他脚本）的优点：html确定页面框架，css和脚本决定页面样式、动态内容和动态定位
动态内容，动态样式，动态定位，没有动态语法
hgroup元素是将标题及其子标题进行分组的元素，hgroup元素通常会将h1-h6元素进行分组，比如内容区块的标题及其子元素算一组
1、getContent ： 获取内容 2、getContext：返回一个用于在画布上绘图的环境。 3、request.getContextPath()可以返回当前页面所在的应用的名字; getGraphics：Java里面的方法。public Graphics getGraphics()。为组件创建一个图形上下文。如果组件当前是不可显示的，则此方法返回 null。 public void paint(Graphics g)绘制此组件。 4、Canvas 对象的方法就是 getContext()
button    定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
checkbox    定义复选框。
color    定义拾色器。
date    定义日期字段（带有 calendar 控件）
datetime    定义日期字段（带有 calendar 和 time 控件）
datetime-local    定义日期字段（带有 calendar 和 time 控件）
month    定义日期字段的月（带有 calendar 控件）
week    定义日期字段的周（带有 calendar 控件）
time    定义日期字段的时、分、秒（带有 time 控件）
email    定义用于 e-mail 地址的文本字段
file    定义输入字段和 "浏览..." 按钮，供文件上传
hidden    定义隐藏输入字段
image    定义图像作为提交按钮
number    定义带有 spinner 控件的数字字段
password    定义密码字段。字段中的字符会被遮蔽。
radio    定义单选按钮。
range    定义带有 slider 控件的数字字段。
reset    定义重置按钮。重置按钮会将所有表单字段重置为初始值。
search    定义用于搜索的文本字段。
submit    定义提交按钮。提交按钮向服务器发送数据。
tel    定义用于电话号码的文本字段。
text    默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
url    定义用于 URL 的文本字段。
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本） checkbox 定义复选框。 color 定义拾色器。 date 定义日期字段（带有 calendar 控件） datetime 定义日期字段（带有 calendar 和 time 控件） datetime-local 定义日期字段（带有 calendar 和 time 控件） month 定义日期字段的月（带有 calendar 控件） week 定义日期字段的周（带有 calendar 控件） time 定义日期字段的时、分、秒（带有 time 控件） email 定义用于 e-mail 地址的文本字段 file 定义输入字段和 "浏览..." 按钮，供文件上传 hidden 定义隐藏输入字段 image 定义图像作为提交按钮 number 定义带有 spinner 控件的数字字段 password 定义密码字段。字段中的字符会被遮蔽。 radio 定义单选按钮。 range 定义带有 slider 控件的数字字段。 reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 search 定义用于搜索的文本字段。 submit 定义提交按钮。提交按钮向服务器发送数据。 tel 定义用于电话号码的文本字段。 text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。 url 定义用于 URL 的文本字段。
slideUp()和slideDown都是jQuery函数，slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。
onload() 元素被载入(文档，框架或图像) 
onclick() 鼠标点击一个元素时触发
 onreset() 表单元素被重置，比如当用户按下表单重置按钮 
onchange() 事件会在域的内容改变时发生,事件也可用于单选框与复选框改变后触发的事件
 onblur() 事件会在对象失去焦点时发生,经常用于Javascript验证代码，一般用于表单输入框
canvas标签默认是行内块级元素，通常会用到display:block进行需求转换，比如让画布居中显示。
Html5 新增加的表单属性 Form Placeholder Formaction Autofocus List datalist pattern
在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素、内联元素(又叫行内元素)和内联块状元素。 
常用的块状元素有：
 <div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
 什么是块级元素？ 
在html中<div>、<p>、<h1>、<form>、<ul>和<li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 
块级元素特点：
 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）;
 2、元素的高度、宽度、行高以及顶和底边距都可设置。
 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 
常用的内联元素有： 
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 在html中，<span>、<a>、<label>、<strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div 元素具有内联元素特点。
 div{ display:inline; } ...... <div>我要变成内联元素</div> 
内联元素特点： 
1、和其他元素都在一行上； 
2、元素的高度、宽度及顶部和底部边距不可设置； （这是答案^-^）
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 
常用的内联块状元素有：
 <img>、<input>
 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
inline-block 元素特点： 
1、和其他元素都在一行上； 
2、元素的高度、宽度、行高以及顶和底边距都可设置。
display:none 不可见，不占据文本流位置，事件不可触发
overflow:hidden 不可见，占据文本流位置，事件不可触发
opacity:0 不可见，占据文本流位置，事件可以触发
iframe可用在以下几个场景中： 
1：典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。
2：ajax上传文件。
3：加载别的网站内容，例如google广告，网站流量分析。
4：
在上传图片时，不用flash实现无刷新。
5：
跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。
HTML5中增加了两种全新的数据存储方式：WebStorage和WebSQLDatabase。 WebStorage可用于临时或永久保存客户端的少量数据，WebSQLDatabase是客户端本地化的一套数据库系统，可以将大量的数据保存在客户端，无须与服务器端进行交互，极大地减轻了服务器端的压力。 WebStorage存储是HTML5为数据存储在客户端提供的一项重要功能，分为两种：sessionStorage(保存会话数据)和loaclStorage(在客户端长期保存数据)。 sessionStorage对象 使用sessionStorage对象在客户端保存的数据时间非常短暂，该数据实质上还是被保存在session对象中。用户在打开浏览器时，可以查看操作过程中要求临时保存的数据，一旦关闭浏览器，所有使用sessionStorage对象保存的数据将全部丢失。 保存数据只需调用setItem()方法，格式：sessionStorage.setItem(key,value)。参数key表示被保存内容的键名，参数value表示被保存的内容。一旦键名设置成功，则不允许修改，不能重复，如果有重复的键名，只能修改对应的键值。 读取被保存的数据，应该调用sessionStorage对象中getItem()方法，格式：sessionStorage.getItem(key)。该方法将返回一个指定键名对应的键值，如果不存在，则返回一个null值。 localStorage对象 长期在客户端保存数据，应该使用localStorage对象，使用该对象可以将数据长期保存在客户端，直至人工清除为止。 保存数据调用对象中的setItem()方法，格式：localStorage.setItem(key,value)。与sessionStorage对象保存数据一样。 读取数据调用对象中的getItem()方法，格式：localStorage.getItem(key)。与sessionStorage对象读取数据一样。 localStorage对象可以将内容长期保存在客户端，即使是重新打开浏览器也不会丢失。如果需要清除localStorage对象保存的内容，应该调用该对象的另一个方法removeItem()，格式：localStorage.removeItem(key)。一旦删除成功，与键名对应的相应数据将全部被删除。

数据序列化：数据序列化是将内存对象转化为字节流的过程，它直接决定了数据解析效率以及模式演化能力（数据格式发生变化时，比如增加或删除字段，是否仍能够保持兼容性）。
html5中不再支持的元素有：
1、acronym(建议abbr) ： 定义首字母缩写
2、applet(建议object)： 定义 applet
3、basefont(使用css控制)
4、big(使用css控制) ：定义大号文本
5、center(使用css控制)： 定义居中的文本
6、font(使用css控制)
7、strike(使用del) ：定义加删除线的文本
8、tt（使用css控制）： 定义打字机文本。
9、u(使用css控制) ：定义下划线文本
10、frame(建议iframe)： 定义子窗口（框架）。
11、frameset ：定义框架的集
12、noframes ：定义 noframe 部分
13、dir ：定义目录列表
14、<xmp>： 定义预格式文本
创建 块格式化上下文 BFC  的方式：

根元素(<html>)
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 paint 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
HTML5之前的版本是 HTML 4.01 ，HTML5版本为当前最新的HTML版本。
HTML4.01、HTML5 之间的区别： 声明区别
HTML有多个不同的版本，只有准确的在页面中指定确切的HTML版本，浏览器才能正确无误的显示HTML页面。这就是的用处。
不是HTML标签，它只是为浏览器提供一项声明，因此它没有闭合/结束标签
display:none可以理解为看不见摸不着 visibility：hidden可以理解为看不见摸得着 display的切换会触发reflow，而visibility不会