数据存储
图片会产生HTTP请求的几种情况 | 图片预加载技术
HTTP协议
HTML
- 块级 | 行内 | 行块级元素
| 常见的块级元素(自动换行， 可设置高宽 ) | 常见的行内元素（无法自动换行，无法设置宽高） | 常见的行块级元素(拥有内在尺寸，可设置高宽，不会自动换行 ) |
|---|---|---|
| div，h1-h6，p，pre，ul，ol，li，form，table，dl，dt，dd，hr 等 | a，img，span，i（斜体）,em（强调），sub(下标)，sup（上标），label 等。 | button，input，textarea，select，img（行内置换元素）等 |
- 置换 | 不可替换元素
| 置换元素 | 不可替换元素 |
|---|---|
<img>、<input>、<textarea>、<select>、<object> |
(x)html 的大多数元素是不可替换元素 |
| 内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本⾝⼀般拥有固有尺⼨（宽度，⾼度，宽⾼⽐）的元素，置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。 | 内容直接表现给用户端（如浏览器） |
例如： 浏览器会根据<img>标签的src属性的 值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 这些元素往往没有实际的内容，即是一个空元素。 |
例如： <label>是一个非置换元素，label中的内容将全被显示。 |
- 自然样式 | 语义样式标签
| 作用 | Physical Style Elements – 自然样式标签 | Semantic Style Elements – 语义样式标签 |
|---|---|---|
| 加粗 | b | strong（强调） |
| 斜体 | i | em（强调） |
| 下划线 | u | ins |
| s | del | |
预格式化文本，表示计算机代码片段 |
pre | code |
应该准确使用语义样式标签, 但不能滥用 , 如果不能确定时首选使用自然样式标签。
- 常见标签及其作用
| 标签 | 作用 |
|---|---|
<mark> |
高亮显示文本 |
<dfn> |
标记那些对特殊术语或短语的定义。通常用斜体来显示 |
<cite> |
定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。 |
<var> |
标签表示变量的名称，或者由用户提供的值。 |
<meta> |
位于文档的头部，不包含任何内容。元素可提供有关页面的元信息 |
<small> |
标签呈现小号字体效果。 |
<kbd> |
标签定义键盘文本。例如 键入<kbd>quit</kbd> quit 来退出程序，或者键入 <kbd>menu</kbd> menu 来返回主菜单。 |
<div>———— |
可定义文档中的分区或节（division/section），标签可以把文档分割为独立的、不同的部分。 |
自闭合标签有<input/><img/><br/><link/><hr/>等， 闭合标签和自闭合标签 可理解成 双标签和单标签。
- html5表单元素标签
| html5 | 作用 |
|---|---|
| 表单元素标签 | |
| datalist | 规定输入域的选项列表 |
| keygen | 提供一种 验证用户的可靠方法 |
| output | 用于不同类型的输出 |
| 方法 | |
| getCurrentPosition() | 获得用户的当前位置 |
| getLocation() | 地图定位 |
合法的HTML5标签<p><pre><img />
<script>
var blob = new Blob([ "Hello World!" ],{type: "text/plain" });
</script>Blob.type只读，一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。
<input>元素的type值可以是
hidden（隐藏的输入字段）
text（单行输入文本）
checkbox（复选框）
radio（单选按钮）
button（可点击按钮）
submit（提交按钮）
reset（重置按钮）
image（图像形式的提交按钮）
file（上传文件）
password（密码字段）
没有select（下拉菜单）
在<img>中必须要有的属性是src
head 标签中必不少的是<title>
- form表单中input元素的readonly与disabled属性
| readonly | disabled |
|---|---|
| 输入字段为只读。 | 当 input 元素加载时 禁用 此元素。 |
| input内容 会 随着表单提交 | input内容 不会 随着表单提交 |
| 通过js脚本 能 更改input的value | 通过js脚本 能 更改input的value |
表单提交时会触发Dom方法：submit
注意：onsubmit 在html dom 中称为事件
- viewport支持响应式设计
响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
<meta name="viewport" content="width=device-width, initial-scale=1">无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；页面应该有能力去自动响应用户的设备环境。
- 编码
GBK 通常指GB2312编码，只支持简体中文字
utf 通常指UTF-8，支持简体中文字、繁体中文字、英文、日文、韩文等语言（支持文字更广）全球通用
iso-8859-2编码 欧洲地区编码方式
- 注释
HTML的注释方法 <!--注释内容-->
CSS的注释方法 /*注释内容*/
JavaScript的注释方法 /* 多行注释方式 */ //单行注释方式
DHTML
- 概念：将 HTML、JavaScript、DOM 以及 CSS 组合在一起，用于创造动态性更强的网页。 通过 JavaScript 和HTML DOM，能够动态地改变 HTML 元素的样式。
包括：
①动态内容(Dynamic Content)：动态地更新网页内容，可“动态”地插入、修改或删除网页的元件，如文字、图像、标记等。
②动态排版样式(Dynamic Style Sheets)例如：当鼠标指针移到文章段落中时，段落能够变成蓝色，或者当鼠标指针移到一个超级链接上时，会自动生成一个下拉式子链接目录等。
- 作用：实现了网页从Web服务器下载后无需再经过服务的处理，而在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。使网页作者改变内容的外部特征而不强制用户再次下载全部内容。
优先级
在html中，帧元素（frameset）的优先级最高，表单元素比非表单元素的优先级要高。
所有的html元素又可以根据其显示分成两类：有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
有窗口元素包括：select元素，object元素，以及frames元素等等。
无窗口元素：大部分html元素都是无窗口元素。
样式
- 样式权重
| 样式 | 权重 |
|---|---|
| 内联 | 1000 |
| ID选择器 | 100 |
| 类、伪类、属性选择器 | 10 |
| 标签（类型）选择器、伪元素选择器 | 1 |
除!important ，内联权重最大！
clear : none | left | right | both.
一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。
- css 中可继承的属性
| 所有元素 | 内联元素 | 块状元素 | 列表元素 |
|---|---|---|---|
| visibility和cursor | letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction | text-indent和text-align | list-style、list-style-type、list-style-position、list-style-image |
- 盒子模型
IE盒子模型 和 标准盒子模型
相同点：
由四个部分组成 – margin,border,padding,content
不同点：
标准盒子模型中content是一个独立的部分，不包含其他部分
IE盒子模型中content包含了border、padding，是一个总体的概念
不换行必须设置
- word-break: normal | break-all | keep-all;可以让浏览器实现在任意位置的换行。
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。- white-space设置如何处理元素内的空白。
nowrap，文本不会换行，文本会在同一行上继续，直到遇到
<br>标签为止
overflow属性
定义溢出元素内容区的内容会如何处理。
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。
- 优先级
在不涉及样式的情况下，页面元素是 “从上往下” 解析的，因此，页面元素的优先显示 与结构摆放顺序是有关系 的，但与标签选用无关。
- link标签引入多个css外部文件时，
同时开始加载，先加载完成的优先解析；
如果多个文件中有相同的选择器规则，那么后面文件的规则将合并前面的规则。
- border
border-style:none;//无边框
border-width:0;//边框宽度为0px
- 区别
（1）性能差异
border:0; 浏览器对border-width、border-color进行渲染，占用内存。
border:none; 浏览器不进行渲染，不占用内存。
（2）浏览器兼容
IE7-不支持border:none;
始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。
- CSS Sprites
能减少图片的字节，能很好地减少网页的http请求，从而大大的提高页面的性能
整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位
js在页面不同位置加载顺序不同
JavaScript 放在HTML的<head>部分会先加载完js再加载页面，放在<body>部分会在加载页面时候加载
- 解析
根据浏览器对 HTML 文件的解析是 自上而下 的
放在<head></head>内的 JS 会被先请求，但是解析优先级由于 JS 引擎比浏览器渲染引擎要高 ，所以会导致 JS 先加载完才把主权交给浏览器渲染引擎，如果 JS 很大，就会因此会引起页面卡顿，等待 JS 加载完成。这就是为什么要把 JS放在</body>前的原因 。
JS代码放在<head></head>中，实际上代码的内容是被执行了的，只是那些对 DOM 的操作没有效果，因为主权还在 JS 引擎，页面的渲染还没交给渲染引擎，获取到的 DOM 节点是空的。
Web Worker
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
利用web worker，可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
验证表单
- web表单登录中用到的图形验证码的实现
服务器端生成验证码后一方面通过图片将验证码返回给客户端，同时在服务器端保存文本的验证码，由服务器端验证输入内容是否正确
出于安全考虑，不能直接在客户端进行验证，爬虫或者是恶意程序依旧可以通过各种手段获取你嵌入在html文本或者保存在cookie中的正确验证码文本，模拟表单提交来达到攻击的目的。
enctype 属性
规定在发送到服务器之前应该如何对表单数据进行编码。
属性值
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
text/plain 空格转换为 “+” 加号，但不对特殊字符编码。
点击事件
把鼠标移到按钮并点击时，会产生一串事件：
hover-> focus -> active（悬停 -> 聚焦 -> 响应）
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
关于IE、FF下面CSS的解释区别
IE6.0和firefox的div的内嵌div可以把父级的高度撑大
当设置为三列布局时，IE6.0的float宽度不能达到100％，而FireFox可以。当设置为两列布局时，两种浏览器都可以。
火狐浏览器中，非float的div前面有同一父级的float的div，此div若有背景图，要使用clear：both，才能显示背景图，而IE6.0中不用使用clear：both
在[text-decoration:underline]的属性下，IE6.0显示的下划线会比FireFox低一点。在FireFox中，部分笔画会在下划线的下面1个象素左右。
bootstrap
| 屏幕大小 | 应用 | device-width |
|---|---|---|
| 超小屏幕 | 手机（mobile） | – xs ( <768px ) |
| 小屏幕 | 平板（tablet） | – sm ( 768~991px ) |
| 中等屏幕 | 电脑（desktop） | – md ( 992~1170px ) |
| 大屏幕 | 大电脑（large desktop） | – lg ( >1170px ) |
min-device-width - max-device-width ~ -webkit-min-device-pixel-ratio（设备像素比）
iphone6s是375 - 667 ~ 2；iphone6s plus是414 - 736 ~ 3；
- 栅格系统
为了创建列（colume）之间的间隔，需要设置padding，而且需要设置margin为负值，消除第一个和最后一个之间padding的影响。而padding是自动设置的，margin需要手动修改；
bootstrap将全局的font-size设置为14px;
box-sizing初始为border-box。
MVC模型
是一种架构型的模式，本身不引入新功能，只是帮助我们将开发的结构组织的更加合理，使展示与模型分离、流程控制逻辑、业务逻辑调用与展示逻辑分离。
- Model（模型）：数据模型，提供要展示的数据，因此包含数据和行为，可以认为是领域模型或JavaBean组件（包含数据和行为），不过现在一般都分离开来：Value Object（数据） 和 服务层（行为）。也就是模型提供了模型数据查询和模型数据的状态更新等功能，包括数据和业务。
- View（视图）：负责进行模型的展示，一般就是我们见到的用户界面，客户想看到的东西。
- Controller（控制器）：接收用户请求，委托给模型进行处理（状态改变），处理完毕后把返回的模型数据返回给视图，由视图负责展示。
也就是说控制器做了个调度员的工作。
在标准的MVC中模型能主动推数据给视图进行更新（观察者设计模式，在模型上注册视图，当模型更新时自动更新视图）。但在Web开发中模型是无法主动推给视图（无法主动更新用户界面），因为在Web开发是请求-响应模型。模型变更之后，只有控制器（Controller）才能驱动视图变更或重新渲染视图
Ajax和Flash
- ajax
优势：
1.可搜索性
2.开放性
3.费用
4.易用性
5.易于开发。
劣势：
1.它可能破坏浏览器的后退功能
2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中 ，不过这些都有相关方法解决。
- Flash
优势：
1.多媒体处理
2.兼容性
3.矢量图形
4.客户端资源调度，可以更容易的调用浏览器以外的外部资源
劣势：
1.二进制格式
2.格式私有
3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间
4.性能问题
可搜索性：普通的文本网页会更有利于SEO。文本内容是搜索引擎容易检索的，而繁琐的swf字节码却是搜索引擎不愿触及的