2019秋招h5前端知识简要整理，来源于牛客题后评论区等。
C05新增内容
-$51 CSS3新增属性
-$52 html5新增
C06语义化与设计模式
-$61语义化
-$62 DTD文档类型声明
-$63设计模式
C07浏览器、通信与缓存
-$71浏览器内核
-$72浏览器属性
-$73请求与显示
-$74临时存储
-$75 AJAX
C08细节杂项
-$81 bootstrap
-$82 CSS引用
-$83 head与body
-$84 DOM操作
-$85其他
-C05新增内容
$51 CSS3新增属性
*1- box-shadow(阴影效果) 支持: FF3.5, Safari 4, Chrome 3
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
*2- border-colors(为边框设置多种颜色) 支持: FF3+
使用:
border: 10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明:
颜色值数量不固定,且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
*3- boder-image(图片边框) 支持: FF 3.5, Safari 4, Chrome 3
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 --->边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2).边框图片效果(目前仅实现了两种):
repeat ---边框图片会平铺, 类似于背景重复;
stretch ---边框图片会以拉伸的方式来铺满整个边框;
(3).必须将元素的边框厚度设置为非0非auto值.
*4- text-shadow(文本阴影) 支持: FF 3.5, Opera 10, Safari 4, Chrome 3
使用:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1) <颜色>和<模糊半径>是可选的, 当<颜色>未指定时, 将使用文本颜色; 当<模糊半径>未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3)阴影效果会按照shadow list中指定的顺序应用到元素上;
(4)这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5)阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
*5- text-overflow(文本截断) 支持: IE6+, Safari4, Chrome3, Opera10
使用:
text-overflow: inherit | ellipsis | clip ;
-o-text-overflow: inherit | ellipsis | clip;
说明:
还有一个属性ellipsis-word,但各浏览器均不支持.
*6- word-wrap(自动换行) 支持: IE6+, FF 3.5, Safari 4, Chrome 3
使用:
word-wrap: normal | break-word;
*7- border-radius(圆角边框) 支持: FF 3+, Safari 4, Chrome 3
使用:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
*8- opacity(不透明度) 支持: all
使用:
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */
*9- box-sizing(控制盒模型的组成模式) 支持: FF3+, Opera 10, Safari 4, Chrome 3
使用:
box-sizing: content-box | border-box; // for opera
-moz-box-sizing: content-box | border-box;
-webkit-box-sizing: content-box | border-box;
说明:
1. content-box:
使用此值时,盒模型的组成模式是, 元素宽度 = content + padding + border;
2. border-box:
使用此值时,盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border,元素的宽度也不会变).
*10-换行相关属性
<> work-break是css3属性自动换行法则；设置white-space为nowrap，文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止
<> word-break:break-all,用于处理单词折断。
<> white-space:no-wrap用于处理元素内的空白，只在一行内显示。
##通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。
值 描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
## white-space属性设置如何处理元素内的空白。
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似HTML中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承white-space属性的值。
$52 html5新增
*1- H5新增标签：
article:标签定义外部的内容。
aside:标签定义 article 以外的内容。
audio:h5新增音频标签。没有高宽属性。
canvas:h5新增画布标签。
command:定义命令按钮(未测试)
datalist：标签定义选项列表。
datalist及其选项不会被想显示出来，它仅仅是合法的输入值列表。
details：标签用于描述文档或文档某个部分的细节。
figure：标签用于对元素进行组合。
figcaption：定义 figure 元素的标题。
footer：定义 section 或 document 的页脚。
header：定义 section 或 document 的页眉。
hgroup：用于对网页或区段（section）的标题进行组合。
keygen:标签规定用于表单的密钥对生成器字段
mark：标签定义带有记号的文本。
meter：通过min="0" max="20"的方式定义度量衡。仅用于已知最大和最小值的度量。
nav：定义document或section或article的导航。
output：定义不同的输出类型，比如脚本。
progress：定义任何类型的任务的进度。
rp:定义若浏览器不支持 ruby 元素显示的内容
rt：定义 ruby 注释的解释
ruby：定义 ruby 注释
section：标签定义文档中的节、区段。比如章节、页眉、页脚或文档中的其他部分。
source:audio和video的属性之一。为audio和video定义媒介源。
summary:为details定义标题。
time:定义日期或时间。
video：h5新增视频标签。具有高宽属性。
#辨析
《audio》 标签定义声音，比如音乐或其他音频流。
《canvas》标签只是图形容器，您必须使用脚本来绘制图形。
《article》标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
《menu》标签定义命令的列表或菜单。《menu》 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
command元素表示用户能够调用的命令。《command》 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
标签定义声音，比如音乐或其他音频流。 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
command元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
*2-新表单元素
datalist元素规定输入域的选项列表。 keygen 元素的作用是提供一种验证用户的可靠方法。 output 元素用于不同类型的输出
*3- SVG标签
SVG即 Scalable Vector Graphics，是一种用来绘制 矢量图 的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。
*4- H5废弃标签
<noframes>,<frameset>,<frame>,<applet>,<acronym>,<basefont>,<tt>,<strike>,<big>,<blink>,<s>,<font>, <center>, 《dir》
*5 HTML5中的二进制大对象Blob
## Blob是什么？
在计算机中，BLOB常常是数据库中用来存储 二进制文件 的字段类型。这里说的是一种 JavaScript 的对象类型。MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型，这相当于对文件的储存。一个Blob对象就是一个包含有只读原始数据的类文件对象。
##创建Blob 对象
在新的方法中直接可以通过Blob()的构造函数来创建了。构造函数，接受两个参数：
第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs以及 ArrayBuffers。第二个参数，是一个包含了两个属性的对象，其两个属性分别是：
（1）type -- MIME 的类型。
（2）endings -- 决定 append() 的数据格式，
<script>
var blob = new Blob([ "Hello World!" ],{type: "text/plain" });
</script>
-C06语义化与设计模式
$61语义化
*1-什么是HTML语义化？
<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
常见语义化标签：
《blockquote》 标签定义块引用。《h1》 - 《h6》 标签可定义标题。 <st rong> 标签和 <e m> 标签一样，用于强调文本，但它强调的程度更强一些。 <a>标签定义超链接，用于从一张页面链接到另一张页面。 <p >标签定义段落。 <sec tion> 标签定义文档中的节（section、区段）。 <n av> 标签定义导航链接的部分。 <u l> 标签定义无序列表。 <o l> 标签定义有序列表。
*2-为什么要语义化？
<>为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
<>用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
<>有利于SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息： 爬虫依赖于标签来确定上下文和各个关键字的权重；
<>方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
<>便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
*3-写HTML代码时应注意什么？
<>尽可能少的使用无语义的标签div和span；
<>在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
<>不要使用纯样式标签，如：b、font、u等，改用css设置。
<>需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
<>使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
<>表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
<>每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
<>关于标题，H1不是随便用的，H1有利于SEO优化，一般来说一个页面里只有一个。
$62 dtd文档类型声明
*1-定义
<>在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档使用哪种html或者xhtml规范
<> doctype声明不属于 HTML 标签；tag; 它是一条指令，告诉浏览器编写页面所用的标记的版本。不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析
<>浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
*2- hack技术 混杂模式
--不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本就没有一致性可言。
--hack技术主要是为了某些浏览器特定设置的，写在css中，里面可以嵌套style和html代码，不可以写在style中。如果在文档开始处没有文档类型声明，则浏览器会开启混杂模式
---在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示
$63设计模式
*1- MVC模型 model view controller
Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。
View（视图）是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
MVC模型：是一种架构型的模式，本身不引入新功能，只是帮助我们将开发的结构组织的更加合理，使展示与模型分离、流程控制逻辑、业务逻辑调用与展示逻辑分离。 首先让我们了解下MVC（Model-View-Controller）三元组的概念： Model（模型）：数据模型，提供要展示的数据，因此包含数据和行为，可以认为是领域模型或JavaBean组件（包含数据和行为），不过现在一般都分离开来：Value Object（数据） 和 服务层（行为）。也就是模型提供了模型数据查询和模型数据的状态更新等功能，包括数据和业务。 View（视图）：负责进行模型的展示，一般就是我们见到的用户界面，客户想看到的东西。 Controller（控制器）：接收用户请求，委托给模型进行处理（状态改变），处理完毕后把返回的模型数据返回给视图，由视图负责展示。 也就是说控制器做了个调度员的工作，。 在标准的MVC中模型能主动推数据给视图进行更新（观察者设计模式，在模型上注册视图，当模型更新时自动更新视图），但在Web开发中模型是无法主动推给视图（无法主动更新用户界面），因为在Web开发是请求-响应模型。 那接下来我们看一下在Web里MVC是什么样子，我们称其为 Web MVC 来区别标准的MVC。
*2- DHTML
DHTML指动态 HTML（Dynamic HTML）。 DHTML 不是由万维网联盟（W3C）规定的标准。DHTML 是一个营销术语 - 被网景公司（Netscape）和微软公司用来描述 4.x 代浏览器应当支持的新技术。 DHTML 是一种用来创建动态站点的技术组合物。 对大多数人来说，DHTML 意味着 HTML 4.0、样式表以及 JavaScript 的结合物。 W3C 曾讲过：“动态HTML是一个被某些厂商用来描述可使文档动态性更强的HTML、样式表以及脚本的结合物的术语。”
使网页作者改变内容的外部特征而不强制用户再次下载全部内容
DHTML将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。
通过JavaScript和 HTML DOM，能够动态地改变 HTML 元素的样式。
DHTML实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。例如，当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。
*3- CSS Sprites
##简介
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
##优点
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
##缺点
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
-C07浏览器、通信与缓存
$71浏览器内核
*1- IE内核 Trident
Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。 -IE6/7/8不支持事件捕获。
*2- Gecko内核
代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。 *3- WebKit内核
代表作品Safari、Chromewebkit。是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
*4- Presto内核
代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。
$72浏览器属性
#浏览器私有属性
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
#边框属性
Internet Explorer 9+支持 border-radius 和 box-shadow 属性。
Firefox、 Chrome 以及 Safari 支持所有新的边框属性。
注释：对于border-image， Safari 5 以及更老的版本需要前缀 -webkit- 。
Opera支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-
#渲染与图层
在Blink和WebKit的浏览器中，某个元素具有3D或透视变换（perspective transform）的CSS属性，会让浏览器创建单独的图层。
我们平常会使用left和top属性来修改元素的位置，但left和top会触发重布局，取而代之的更好方法是使用translate，这个不会触发重布局。
移动端要想动画性能流畅，应该使用3D硬件加速，因此最好给页面中的元素尽量添加translate3d或者translateZ(0)来触发3D硬件加速？错误，不能滥用3D加速。
解决浏览器渲染的性能问题时，首要目标就是要避免层的重绘和重排。
$73请求与显示
*1-加载优先级
html文档加载是从上到下加载，只与标签的上下顺序有关，与标签选用无关。
优先显示和优先级还是不一样的，优先显示是HTML文档加载时从上到下加载，只与标签的上下顺序有关，与标签的选用无关，优先级是帧元素比表单元素优先，表单元素比非表单元素优先。link标签是同时加载的，script标签才会加载完一个再加载另一个。
*2-图片的请求
1.只要是img src引用的都会请求；
2. background: url()所属样式如果挂靠在某个元素上，就一定会请求；单独写了这么一个样式并不请求。
3*- HTTP协议request 请求头/response响应头。
GET表示获取资源，POST表示新增一个资源，PUT表示更新资源,DELETE 表示删除资源等等
状态码304表示：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。307表示临时重定向。
*4- GET与POST的区别
a》GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连，如
login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
而POST则把提交的数据放置在HTTP包的包体中。
b》‘&’形式的GET方式提交的数据最多只能是1024字节，理论上POST没有限制，可传较大量的数据，IIS4中最大为80KB，IIS5中为100KB。
c》在ASP中，服务端获取GET请求参数用Request.QueryString，获取POST请求参数用Request.Form。在JSP中，用request.getParameter(\&quot;XXXX\&quot;)来获取，虽然jsp中也有request.getQueryString()方法，但使用起来比较麻烦，比如：传一个test.jsp?name=hyddd&amp;password=hyddd，用request.getQueryString()得到的是：name=hyddd&amp;password=hyddd。在PHP中，可以用$_GET和$_POST分别获取GET和POST中的数据，而$_REQUEST则可以获取GET和POST两种请求中的数据。
值得注意的是，JSP中使用request和PHP中使用$_REQUEST都会有隐患。
d》POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。
*5- onload事件
onload事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，domContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。
$74临时存储
*1- http无状态协议
摘录自博客http://blog.sina.com.cn/s/blog_93b45b0f0101a4ix.html
##无状态的含义：
无状态是指协议对于事务处理没有记忆功能。缺少状态意味着，假如后面的处理需要前面的信息，则前面的信息必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要前面信息时，应答就较快。直观地说，就是每个请求都是独立的，与前面的请求和后面的请求都是没有直接联系的。
##实际中的使用情况：
在web应用中，我们使用http协议，但是我们需要的web是有状态的，因此加入了cookie、session等机制实现有状态的的web。即，web=http协议+状态机制+其他机制
##为什么不改进http协议使之有状态：
最初的http协议只是用来浏览静态文件的，无状态协议已经足够，这样实现的负担也很轻（相对来说，实现有状态的代价是很高的，要维护状态，根据状态来操作。）。随着web的发展，它需要变得有状态，但是不是就要修改http协议使之有状态呢？是不需要的。因为我们经常长时间逗留在某一个网页，然后才进入到另一个网页，如果在这两个页面之间维持状态，代价是很高的。其次，历史让http无状态，但是现在对http提出了新的要求，按照软件领域的通常做法是，保留历史经验，在http协议上再加上一层实现我们的目的（“再加上一层，你可以做任何事”）。所以引入了其他机制来实现这种有状态的连接。
##哪些方法可以实现有状态连接：
cookies, session, application
##实例解析
有人将web应用中有无状态的情况，比着顾客逛商店的情景。
顾客：浏览器访问方；商店：web服务器；一次购买：一次http访问
我们知道，上一次顾客购买，并不代表顾客下一个小时一定会买（当然也不能代表不会）。也就是说同一个顾客的不同购买之间的关系是不定的。所以说实在的，这种情况下，让商店保存所有的顾客购买的信息，等到下一次购买可以知道这个顾客以前购买的内容代价非常大的。所以商店为了避免这个代价，索性就认为每次的购买都是一次独立的新的购买。浅台词：商店不区分对待老顾客和新过客。这就是无状态的。
但是，商店为了提高收益。她是想鼓励顾客购买的。所以告诉你，只要你在一个月内购买了５瓶以上的啤酒，就送你一个酒杯。
我们看看这种情况我们怎么去实现呢？A,给顾客发放一个磁卡，里面放有顾客过去的购买信息。这样商店就可以知道了。这就是cookie.B,给顾客发放一个唯一号码，号码制定的顾客的消费信息，存储在商店的服务器中。这就是session。最后，商店可以全局的决定，是５瓶为送酒杯还是6瓶。这就是application。
其实，这些机制都是在无状态的传统购买过程中加入了一点东西，使整个过程变得有状态。Web应用就是这样的。
*2-主流方案
浏览器端：cookie, WebStorage(localStorage、sessionStorage), userData, indexedDB
服务器端：session
cookie是靠谱的浏览器都支持；localStorge 比 cookie 存的更多，获取更方便，而且存储内容不会随请求发送给服务器；session 虽然需要 cookie 支持（通常存放加密过的 sessionId），但是不在浏览器端存放主要信息，排除；IE 支持 userData 存储数据，但是基本很少使用到，除非有很强的浏览器兼容需求。
*3- cookie机制与缺陷
正统的cookie分发是通过扩展HTTP协议来实现的，服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。然而纯粹的客户端脚本如JavaScript或者VBScript也可以生成cookie。而cookie的使用是由浏览器按照一定的原则在后台自动发送给服务器的。浏览器检查所有存储的cookie，如果某个cookie所声明的作用范围大于等于将要请求的资源所在的位置，则把该cookie附在请求资源的HTTP请求头上发送给服务器。 因为JS运行在浏览器中，是单线程的，每个window一个JS线程，既然是单线程的，在某个特定的时刻只有特定的代码能够被执行，并阻塞其它的代码。而浏览器是事件驱动的（Event driven），浏览器中很多行为是异步（Asynchronized）的，会创建事件并放入执行队列中。javascript引擎是单线程处理它的任务队列，你可以理解成就是普通函数和回调函数构成的队列。当异步事件发生时，如mouse click, a timer firing, or an XMLHttpRequest completing（鼠标点击事件发生、定时器触发事件发生、XMLHttpRequest完成回调触发等），将他们放入执行队列，等待当前代码执行完成。
HTML5提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储，sessionStorage - 针对一个 session 的数据存储。但在这之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
*4- Cookie基本功能辨析
记录访问者信息----访问者的信息一般都可以处理成 kv 键值对的形式，故可以保存在 Cookie 中。
在页面之间传递信息----通过设置 Cookie 的 path 等属性，可以在特定域名或 URI 下共享 Cookie 信息。
自动识别用户-----通过在 Cookie 中保存用户uid、服务器会话sid等方法，可以记录用户登录状态。
*不能对数据库进行操作----Cookie 是保存在用户浏览器上的小文本文件，不是数据库，也没有提供操作数据库的 API。
*5- web storage
在HTML5中，本地存储是一个window的属性，即web storage，包括有以下几种对象：
sessionStorage：存储特定于某个会话的数据，该数据只保留到浏览器关闭。
globalStorage：目的是跨越会话存储数据，不过要指定哪些域可以访问该数据。如果不使用 removeItem() 或 delete 删除，或者用户未清除浏览器缓存，存储在globalStorage上的数据会一直保留在磁盘上。所以globalStorage非常适合在客户端存储文档或长期保留用户偏好设置。
localStorage：在HTML5中作为持久保持客户端数据的方案取代了globalStorage。它不能被指定访问规则，要访问localStorage，页面必须来自同一个域名，使用同一种协议，在同一个端口上。它的数据也保留到通过JavaScript删除或用户清除浏览器缓存，cookie会被Http请求携带，但 loaclstorage不会。
HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。是永久性存储，当然用户可以通过浏览器设置来删除。localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()示例，用setItem将value存储到key字段 .setItem( key, value)。
# localStorage写入字段有三种方式：
localStorage["a"]=1;
localStorage.b=1;
localStorage.setItem("c",3);
# localStorage读取字段也有三种方式：
var a= localStorage.a;
var b= localStorage["b"];
var c= localStorage.getItem("c");
*6- cookie/localStorage/sessionStorage辨析
共同点：都是保存在浏览器端，且同源的。
不同点：
##数据的生命期
Cookie一般由服务器生成，可设置失效时间，如果在浏览器端生成Cookie，默认是关闭浏览器后失效；localStorage除非被清除，否则永久保存；sessionStorage仅在当前会话(当前浏览器窗口)下有效，关闭页面或浏览器后被清除。
##作用域
cookie是在所有同源窗口中都是共享的；localStorage在所有同源窗口中都是共享的；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面。
##存放数据大小
cookie为4K左右，适合保存小数据，如会话标识。webStorage一般为5MB（或更大）
##与服务器端通信
cookie数据始终在同源的http请求(http头)中携带（即使不需要），即cookie在浏览器和服务器间来回传递。如果使用cookie保存过多数据会带来性能问题。 cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
webStorage仅在客户端（即浏览器）中保存，不参与和服务器的通信。
##易用性
Cookie需要程序员自己封装，原生的Cookie接口不友好；webStorage原生接口可以接受，亦可再次封装来对Object和Array有更好的支持Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。
$75 Ajax
*1-支持的数据类型
dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
"xml": "html": "script": "json": "jsonp": "text":
*2- Ajax与flash对比
<> Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。
<> Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度
<> Ajax的劣势：1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过这些都有相关方法解决。
<> Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 4.性能问题
## Ajax
#可搜索性
普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的。虽然Google等一些大型的搜索引擎可以检索SWF内部的内容，但是仍然有很多麻烦存在。
#开放性
Flash常年以来被Macromedia看的很死。包括Flex、FMS等辅佐技术一直都需要昂贵的安装、维护费用。而JS则没有这样的麻烦。没有人愿意承担法律和版权的风险。
#费用
Flash开发是很昂贵的，因为FlashIDE等环境都是要收费的．而Ajax则不同．虽然有一些便宜的生成swf的工具，但是他们的工能实在无法满足复杂需求。
#易用性
Ajax程序有更好的易用性。由于中间有一层Flashplayer代理层，因此许多辅助功能无法被Flash灵活利用。而且Flash在一些方面有着不好的口碑。比如弹出广告、比如恶意代码。
（awflasher.com个人认为这八成是乱上xx网站造成的）
#易于开发
人们开发复杂的Ajax和Flash应用程序时，都会借助一些高级的开发工具。普遍来说，Ajax的开发包比Flash简便、容易。
## Flash
#多媒体处理
Flash在音频、视频等多媒体领域相比HTML有绝对的优势。现在几乎所有的网站都包含有Flash内容。
#兼容性
兼容性好：由于通过了唯一的FlashPlayer“代理”。人们不必像调试JS那样，在不同的浏览器中调试程序。
#矢量图型
这是Flash最大的优势，同样处在这一领域的SVG、Canvas element以及Direct完全不能与Flash相比。
#客户端资源调度
Flash能够更容易的调用浏览器以外的外部资源。比如摄像头、麦克风等。然而这是普通的HTML无法完成的。但是这也许是一个缺点
-C08细节杂项
$81 bootstrap
*1-栅格系统尺寸
bootstrap3.x使用了四种栅格选项来形成栅格系统,来适合不同尺寸的设备，以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs适合超小屏幕设备（手机）。
- .col-xs-超小屏幕 手机 <768px
- .col-sm-小屏幕 平板 >=768px
- .col-md-中等屏幕 >=992px
- .col-lg-大屏幕 >1200px (一说1170px)
*2- v2与v3的区别
v3沒有分 fluid 和 non-fluid ，所以移除了 .container-fluid 和 .row-fluid 兩個大框架容器，所有都是 fluid。
例如做nesting column時，大的 grid 裡面某一塊要包小 grid ，v2.x 裡面一層得寫 .row-fluid，才能在小區塊內使用12欄 grid；但 v3 只要 .row > .row > .row…… 一層層包下去就行了。
*3-辅助类
.text-muted:文字的颜色换成灰色
.text-primary:文字的颜色变成蓝色
.text-success:文字的颜色变成绿色
.text-info:文字的颜色变成暗蓝色
.text-warning:文字颜色变成暗黄色
.text-danger：文字的颜色变成红色
## bootstrap哪些可以给文字加上背景？
主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄（bg-warning）、危险红（bg-danger）
*4- btn按钮类
.btn-group该class用于形成基本的按钮组；可以嵌套使用
.btn-toolbar该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件。
btn-group-lg, .btn-group-sm, .btn-group-xs这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
*5- Bootstrap table类
.table 为任意添加基本样式 (只有横向分隔线)
.table-striped 在内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
*6-其他类的使用补充
# input
在bootstrap中为了在input两侧添加额外元素,
--使用input-group来封装控件
--使用input-group-addon来添加前置元素
--必须为input添加form-control类
$82 CSS引用
导入样式：在.css文件中使用@import url("...")来引入另一个css样式表
外链样式
<link href="cc.css" type="text/css" rel="stylesheet" />
行内样式
<div style="border:solid 1px red;"></div>
内链样式
<style type="text/css">
border:solid 1px red;
</style>
$83 head与body
*1- JS的加载自执行与script标签
要想js在页面加载的时候自执行，script 就只能插入在 body 内。
head标签是设计用于一些静态资源的预加载，与“解析”没有任何关系，浏览器会先加载 head 标签内的静态资源（css 和 js），这时候的 js 并没有执行，而是被 UI 线程阻塞了，然后浏览器会开始构建 DOM Tree，然后开始构建 CSSOM Tree（即题目说的加载页面），最后才会执行 head 中加载的 js。
然后要注意的是，浏览器在解析body内的样式以及 script 标签的时候是串行的，就是说你的 script 标签内的代码会即时执行，然后再去解析下面标签的內联样式（这也是为什么內联样式的优先级会比引用的高）
*2- JS的执行顺序
如果JavaScript是外部脚本，不是嵌入脚本，放在head里，会在页面加载之时就被执行，也就是文件要被下载，执行之后才会呈现页面内容；放在body底部，在解析js代码之前，页面的内容就会完全呈现在浏览器中。所以，在body里的js应该是在页面加载之后执行的吧。
之所以把js放在body之后，是为了预防外部js文件过多时，浏览器呈现页面出现延迟，延迟期间浏览器的窗口一片空白。
在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。
head部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。
body部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
*1- 标签
标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
下面这些标签可用在head部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
定义文档的标题，它是 head 部分中唯一必需的元素。
## title是否是必需的？
按照标准来说《title》是必须需要的标签，但是浏览器因为很多前端编码并不规范，所以在没有的情况下有时并不影响，或者是再删除《title》之后，只是加载之前的缓存界面；但是《meta》是编码说明，删去会有很大麻烦，但是理论上来说，你如果是按照该浏览器默认的编码方式的文档，则不会有错。
所以仅仅是理论上来说，《title》是必要的。html4.01下的head中必须有title。
是必要的。html4.01下的head中必须有title。
$84 DOM操作
*1- DOM元素获取
<> document.querySelectorALL()方法
返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)
该方法接受三种类型的参数：id(#)，class(.)，标签
示例document.querySelectorAll('.file')[0]
<> getElementById()方法是返回对拥有指定 ID 的第一个对象的引用 并不是一个数组
<> getElementByTagName()返回带有指定标签名的对象集合 file不是标签名_(:з」∠)_
<> getElementSByClassName()返回特定类名的对象集合（IE8好像不适用）
*2-辨析
# test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
test.innerHTML的值的形式形如“<span style="color:red">test1</span> test2 ”。
# test.innerText:
从起始位置到终止位置的内容,但它去除Html标签
上例中的text.innerTest的值也就是形如“test1 test2”, 其中span标签去除了。
# test.outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
$85其他
*1-字符集
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
GBK是汉字编码，是双字节码，可表示繁体字和简体字。
ISO8859-2字符集，也称为 Latin-2，收集了东欧字符。
*2- http302状态码
HTTP状态码302表示被请求的资源暂时转移(Moved temporatily)，然后会给出一个转移后的URL，而浏览器在处理服务器返回的302错误时，原则上会重新建立一个TCP连接，然后再取重定向后的URL的页面；但是如果页面存在于缓存中，则不重新获取；
