第一章
什么是HTML文件？
- 类似于txt、word文本记录文件
- 需要使用浏览器打开
- 展示文字和其他信息
- 使用标签实现对信息展示方式的加工
什么是HTML？
- 超文本标记语言：HyperText Markup Language
- 超文本：指页面内可以包含图片、视频、音频、程序等非文字元素
- 标记语言：实现信息的格式改变
HTML、CSS、JavaScript 之间的关系
HTML：组织内容和结构（布局）
CSS：对现有内容进行美化（样式）
JS：响应用户的交互（交互）
第二章 HTML概述
HTML标准的网页结构
<!DOCTYPE html> ------ 描述网页文档类型
<html> ------ 网页顶级元素，即根元素
<head> ------ 网页头元信息，用户不可见部分，描述建站时间作者等内容
</head>
<body> ------ 网页的身体，用户可见部分
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>
HTML 元素
元素：由开始标签与结束标签包裹的部分
<xxx>..</xxx>-
元素格式：
<标签 属性="值"> <body color="yellow"> -
标签类型
双标签：有头尾的标签
<xx>1234</xx>
单标签：只有头没有尾<xx>或<xx /> 属性：属性为HTML元素提供附加信息，属性总是以名称/值对的形式出现。
注释：使用 `` 可在HTML插入注释，也可作为<u>条件注释</u>或<u>程序识别标签</u>
头部元素
<head> ----- 给搜索引擎识别的部分
<meta name="author"> ----- 网页文档描述
<title>标签名</title> ----- 浏览器标签页头名、收藏夹标题、搜索引擎结果标题
<link rel="stylesheet" type="text/css" href="theme.css"> --- 引用外部CSS
<base href="http://www.w3school.com.cn/i/" target="_blank" /> ----- 页面上的所有链接规定默认地址或默认目标
<script type="text/javascript">document.write("Hello World!")</script> ----- 用于定义客户端脚本
<style type="text/css">h1 {color:red}</style> ----- 定义级联样式表，规定在浏览器中如何呈现HTML文档
<style>..</style> ----- 引入嵌入样式表
</head>
- meta标签：用来提供有关页面的元信息说明、关键字、作者、语言字符集charset；其属性包括name属性和http-equiv属性。（content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的）
- name属性：用于描述网页，语法格式是
<meta name="参数" content="具体的参数值">
name的参数：Keywords(关键字)robots(机器人向导)description(网站内容描述)author(作者)- http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，语法格式是
<meta http-equiv="参数" content="参数变量值">
http-equivd的参数：Expires(到期时间)Pragma(缓存允许)Refresh(自动刷新并指向新页面)Set-Cookie(cookie设定)Window-target(强制独立页面显示)content-Type(设定页面使用的字符集)
- http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，语法格式是
- name属性：用于描述网页，语法格式是
- link 标签：定义文档与外部资源的关系，如引用外部CSS
-
rel=stylesheet的作用：rel属性用于设置对象和链接目的间的关系，说白了就是指明你链进来的对象是个什么东西的,而此次Stylesheet定义的是一个外部加载的样式表 -
type="text/css"的作用：告诉浏览器，这段标签内包含的内容是css或text；如果不定义的话，有些CSS效果会被浏览器解释得不一样
-
元素的两种类型
块级元素
block-level：一个“层”“容器”或“盒子”，将所要的东西打包在内，分小节方便自己查看（完整独占一行宽度），比如<div><p><h1><ul>内联元素
inline：包裹标记或隔离一段中的某些内容，一个文本容器，方便后续CSS美化，使其产生视觉上的变化（不会一新行开始，只占自身所需宽度大小），无法设置宽和高，比如<span><b><a>-
行内块元素
inline-block：具有inline的优点，又可以设置宽和高，缺点是相邻块间会有空白空隙，比如<img /><input /><td>div和span都是无任何属性的空元素，在整个HTML标记中没有任何作用，只应用于CSS样式
Style 样式
为元素增加指定style属性，一般把style样式写在head头部文件处以方便修改，有三种方法插入样式：
引入样式表 （推荐）
<link rel="stylesheet" type="text/css" href="style.css">
嵌入样式表 （一般）
<head>
<style type="text/css">
body{background-color:red;}
p{margin-left:20px;}
</style>
</head>
内联样式表 （不推荐）
<p style="color:green">
<style>..</style> 里的样式代码可以放到css里，运行效果相同
HTML 框架
框架：将浏览器划分成不同的部分，每部分加载不同的页面，实现同一浏览器中加载多个页面的效果
-
<frameset..></frameset>（放于body或head之外）左右框尺寸cols上下框尺寸rows边框粗细border显示边框控制frameborder边框间距framespacing拖动控制noresize -
<frame..></frame>（放于frameset之中）框架名name框架页面来源src拖动条显示控制scrolling拖动控制noresizeframe通过src链接指定本地html文件或指定网站来加载页面
<iframe></iframe>内联框架：在网页内固定一个区域显示另一个网页
使用框架的坏处：
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
<frame><frameset><noframes>在HTML5中已被弃用
补充知识
-
Lorem一个乱数假文生成器，尽管该短语毫无意义，但它却历史悠久。用以测试所用字体的粗细、设计及其他重要特点。
第三章 HTML样式
基本样式
-
标题
<h1..></h1><h1 ~ h6>h1 align=
"center"/"left"/"right"/"justify" -
段落
<p..></p>p
align="center"/"left"/"right"/"justify" 换行
<br><br /><nobr>不拆行</nobr>-
水平线
<hr><hr />hr
sizewidthcoloralignnoshade="noshade" 规定文字属性
<font..></font>
colorfacesize特殊符号 （字符实体Entities）
空格 < <> >& &¥ ¥× ×-
主体
<body></body>body
alinkbackgroundbgcolorlinktextvlink（不推荐对其直接使用样式） -
总文档
<html></html>html
xmlnsmanifest
高级样式
-
超链接
<a href="url"></a>打开方式target锚点名称name类型type媒介media下载download字符集charset坐标coords链接语言hreflang关系rel被关系rev发送邮件mailto形状shape通过锚
name定位跳转到本页面的某个段落位置（相当于书签）：<a href="#C1">第六章</a> ---- （点此） ... <a name="C1">第六章</a> ---- （跳到此） <p>本章讲解的内容是...</p> 图片
<img scr="url">
图片路径src替换文本alt对齐方式align宽度width高度height边框粗细border水平间距hspace垂直间距vspace服务器端图像位置映射ismap客户器端图像可点映射usemap图像长文档描述longdesc配合<map><area></map>实现图片映射-
表格
<table></table>-
属性：
背景色bgcolorwidth边框粗细borderbordercolorlightbordercolordark格间距cellspacing格边距cellpaddingsummaryrules围绕边框frame背景图background列组合colgroup -
表格结构
行块<tr></tr>单元块<td></td>表头块<th></th>表格标题<caption></caption>列属性<col></col>页眉<thead></thead>主体<tbody></tbody>页脚<tfoot></tfoot>合并跨行rowspan对齐align
<table border="2"> <tr> /* tr=row th=head td=date */ <th>一班</th> <th>二班</th> <th>三班</th> </tr> <tr> <td>200</td> <td>300</td> <td>100</td> </tr> <tr> <td>亚军</td> <td>冠军</td> <td>季军</td> </tr> </table>显示如下：
一班 二班 三班 200 300 100 亚军 冠军 季军 -
-
列表
-
无序列表
tpye=
实心方块square/实心圆disc/空心圆circle<ul tpye=""> <li>..</li> <li>..</li> </ul> -
有序列表
tpye="A/a/1/I/i"起始值start降序reversed<ol tpye="A" start="3"> <li>..</li> <li>..</li> </ol> -
特殊列表
<dl> /* dl=definition-list dt=title dd=description */ <dt>中国城市</dt> <dd>北京</dd><dd>上海</dd><dd>广州</dd> <dt>美国城市</dt> <dd>洛杉矶</dd><dd>纽约</dd><dd>华盛顿</dd> </dl>
-
-
表单
<form..></form><form action="接受表单内容的服务器地址" method="获取方式" enctype="编码方式" target="打开方式"> 【账号】 用户：<input type="text"> 密码：<input type="password"> 【复选框】 你喜欢的水果有？ 苹果<input type="checkbox"> 雪梨<input type="checkbox" checked(默认选中)> 香蕉<input type="checkbox"> 【单选框】（选项男和女放于sex组中才能从中选择） 你的性别是？ 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> 【按钮】 <input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"> <button type="button">第二种实现按钮的方式</button> 【隐藏域】 <input type="hidden" value="此信息会隐藏发送出去" name="hid"> 【下拉列表】 请选择你常用的网站？ <select class="" name="区域组" multiple(加上此属性即可多选)> <option>百度</option> <option>谷歌</option> <option>腾讯</option> <option seleced>默认选择项</option> </select> 【文本域】（可放于form之外） <textarea rows="8" cols="80" name="gerenxinxi">请在此填写个人信息 </textarea> </form>获取方式：method="get"（将数据附在链接上发送）/ "post"（直接将数据附在表单主体中发送）
input的属性：
<input type="text" name="定义控件名" value="默认写入文字" placeholder="预期提示信息" size="输入框长度" maxlength="最大可输入字数">button的作用：当
<button>标签放到了<form>标签中（如username与password并存时）会触发提交功能，或者让JS给予反馈作用（如弹出展开内容），能放置文本或图像，单独存在时无实际作用。
文本格式化
-
文字修饰
<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><em>强调</em><sup>上标</sup><sub>下标</sub><del>删除线</del><ins>插入</ins><small>缩小</small><strong>加重强调</strong><big>扩大</big> -
计算机输出标签
<code>代码</code><samp>代码样本</samp><kbd>键盘码</kbd><var>变量</var><tt>等宽</tt>预格式保留文本布局标记
<pre></pre>
可以保留文本里的源代码，保持原有格式，如用于显示散文段落或者计算机程序语言-
代码标记
<code></code>用于突出某一小段代码，与pre区别是code是行内元素，pre是块级元素。
-
引用标签
-
地址标签
<address></address>定义文档或文章的作者/拥有者的联系信息，文本会呈现为斜体。
-
缩写标签
<abbr>专门为显示显示英文缩写准备的标签，当鼠标指在缩写文字上面时就会显示其全拼；原缩写标签
<acronym>在html5中已被舍弃。This is a <abbr title="HyperText Markup Language">HTML</abbr>. -
文字方向标签
<bdo>带有
dir="ltl"(从左往右)/"rtl"(从右往左)属性，会改变输出方向，镜面显示，如Here变成ereH -
块引用
长引用
<blockquote>：使文本上下添加换行，左侧添加缩进短引用
<q>：被包裹的文本会添加双引号 定义特殊术语
<dfn>定义</dfn>著作标题
<cite>引文</cite>
-
物理字体与逻辑字体的区别：
我们知道字体有大小、颜色、斜、粗、下划线等等属性，称这些为字体的风格。这种风格分为指定字体“样式”的物理风格（如粗、斜、下划线）和指定文本“作用”的逻辑风格（如示例文字、缩小文字）；就像去餐馆吃饭，点菜的时候，A告诉炒菜的师傅“炒得多一点”，这是物理风格，直接指定样式；B告诉炒菜的师傅“炒得辣一点”，这是逻辑风格，指定作用；逻辑风格是W3C组织推荐使用的。
第四章 CSS样式
CSS：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。
-
CSS语法：
选择器名{属性名:属性值;}（图已挂）
CSS选择器：为了简化代码，使html元素快速改变样式，故把代码写到css里，无需存写在html中，通过link标签在头文件中引入映射文件
引入CSS的方法：
嵌入式内联式外联式
选择器
-
.class或#id：类选择器 ID选择器html中： <span id="three">333</span> <span class="three">333</span> css中： #three{color:green;} .three{color:green;}html中： <div class="box">盒子</div> css中： .box{ color:blue; font-size:15px; }html中： <div class="pink font20">盒子1</div> <div class="font20">盒子2</div> css中： .pink{ color:pink; } .font20{ font-size:20px; }两种方法效果都一样，区别不大，只是命名规则上，id独一无二，常用以定义布局名，class用以定义散件的类名；
*：所有的都改变elem,elem：分组多选，使用逗号可选择多个元素统一更改[attribute]：属性选择器，对拥有指定属性及属性值的元素来更改-
x contextual：派生选择器，对指定元素的上下文检索并选择下一元素更改样式-
elem elem：后代选择器，可选择父元素下的所有层级的某个子元素更改 -
elem>elem：子元素选择器，只对其直接子级元素进行更改，范围变小且对孙元素无效 -
elem+elem：相邻兄弟选择器，只对所属父层级之下的同辈级进行改变
-
-
elem:pse-class：伪类选择器，用于向某些选择器添加特殊的效果-
a:hover：悬停选择器，当鼠标悬停在所指内容上时样式改变 -
a:active：点击选择器，点击访问时链接所改变的样式 -
a:link：未访问选择器，未点击访问时链接默认样式 -
a:visited：已访问选择器，已点击访问过链接样式 -
x:focus：焦点锁定，目标被选中后（获得焦点）锁定一个样式 -
x:first-child：第一子元素选择器 -
x:lang：向带有指定lang属性的元素添加样式
-
-
elem:pse-elem：伪元素选择器，用于向某些选择器设置特殊效果-
x:first-line：首行选择器，用于向指定元素的首行文本设置特殊样式 -
x:first-letter：首字母选择器，向指定元素的文本首个字母设置特殊样式 -
x:before：可以在元素的内容前面插入新内容 -
x:after：可以在元素的内容之后插入新内容
-
CSS 优先级和权重
- 全局优先级：id＞class＞html
- css的优先级：最新最底下的部分会优先使用并覆盖之前的部分，即服从后者
- html的优先级：link＜style标签＜style属性，即
内＞外（越靠近越优先） - link映射css文件的优先级：同样服从后者
- 明确程度优先级：所属关系越明确，即子集越所多，优先级会更高
-
!important：特权最高级的破坏规则者，无视其他优先级，最优先更改，慎用 - 继承：父标签定义的样式会继承给子子孙孙
CSS 基本属性
-
字体属性
font-
字体大小
font-sizefont-size:
1em/40px/100%/smaller/larger/inherit;未设定字体的默认大小是 16 像素，推荐使用em
-
字体系列
font-familyfont-family:
Microsoft YaHei/微软雅黑,serif,'New York';可单独规定也可按排序存在字体的优先级，如没微软雅黑，则会显示serif字体，引号表示字体名中带有空格使用要包含起来
-
字体粗细
font-weightfont-weight:
normal/bold/bolder/lighter/100~900; -
字体风格
font-stylefont-style:
normal/italic/oblique/inherit; -
大写字母样式文本
font-variantfont-variant:
normal/small-caps/inherit;
-
-
背景属性
background-
背景颜色
background-colorbackground-color:
red/#f60/rgb(255,0,0); -
背景图片
background-imagebackground-image:
url(bg.jpg); -
背景图片重复方式
background-repeatbackground-repeat:
repeat/repeat-x/repeat-y/no-repeat; -
背景定位
background-positionbackground-position:
center/left top/20px 80px/66% 33%;// 通过规定x与y的横纵位置来定位背景
-
背景固定
background-attachmentbackground-attachment:
fixed/scroll;// 固定背景图像，使其不随页面其余部分的滚动而移动
-
合并简写方式
background:
#ff6600 url(bg.jpg) no-repeat fixed 20px 80px;
-
-
文本属性
-
水平对齐方式
text-align（盒子里的内容水平对齐，而不是让盒子进行对齐）text-align：
left/center/right/justify; -
首行缩进
text-indenttext-indent:
40px/inherit; -
字符大小写转换
text-transformtext-transform:
none/uppercase/lowercase/capitalize; -
首行缩进
text-indenttext-indent:
5em/-5em/20%; -
文本下划线装饰
text-decorationtext-decoration:
none/underline/overline/line-through/blink; -
文本颜色属性
colorcolor:
green/#ff6600/#f60/rgb(255,0,0)/rgba(255,0,0,0.6);// 颜色名 十六进制 简写 rgb值 rgba透明值
-
文本行高
line-heightline-height:
20px/50%; -
字符间距
letter-spacing:
normal/10px/-8px/inherit;word-spacing:
30px/-0.5em;一个是字母间隔（letter），另一个是单字/单词间隔（word），作用不同
-
文本书写方向
directiondirection:
ltr/rtl; -
空白符处理
white-spacewhite-space:
pre/nowrap/pre-wrap/pre-line;
-
-
列表属性
list- 标记类型
list-style-type - 标记位置
list-style-position - 图片标记
list-style-image - 标记简写方式
list-style
- 标记类型
-
表格属性
-
表标题位置
caption-sidecaption-side:
bottom/top; -
空表格隐藏
empty-cellsempty-cells:
hide/show; -
表格布局宽度算法
table-layouttable-layout:
fixed/automatic;控制表格是否随表格中内容的增加而扩张
-
第五章 盒子模型
- CSS盒模型（box model）本质上是一个封装周围的HTML元素的盒子，它包括边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒模型基本属性
内边距、边框和外边距都是可选的，默认值是零
-
内边距
padding可用值
10px0.25em2ex20%，但不接受负值-
单边内边距属性
padding-toppadding-rightpadding-bottompadding-left 内边距的百分比数值是相对于其父元素的width宽度来计算的
-
外边距
margin接受任何长度单位、百分数值与负值
-
单边外边距属性
margin-topmargin-rightmargin-bottommargin-left另外，
margin-left:20px;等效于margin:auto auto auto 20px;
！注意！！！块元素的垂直外边距会发生合并，合并后会取最大值，详看相关文档！
-
边框
border-
边框风格
border-styleborder-style:
none/solid/dashed/dotted/double/outset;单边边框
border-top-styleborder-right-styleborder-bottom-styleborder-left-style -
边框宽度
border-widthborder-width:
10px/thin/medium/thick;单边边框宽度
border-top-widthborder-right-widthborder-bottom-widthborder-left-width无边框：把样式设成
border-style:none;，即可取消边框显示 -
边框颜色
border-colorborder-color:
red;单边边框颜色
border-top-colorborder-right-colorborder-bottom-colorborder-left-color默认边框颜色为元素本身的前景色；若未声明边框颜色，它将与元素的文本颜色相同，若无文本则会继承父元素的文本颜色
设置一个透明且占宽度的边框
border-color:transparent; -
边框合并
border-collapseborder-collapse:collapse;
-
边框轮廓
outlineoutlineoutline-coloroutline-styleoutline-width
-
盒模型定位
-
布局属性
-
定位方式 position
开启相对定位relative根据父元素（绝对）定位absolute根据窗口固定定位fixed没有定位static继承inherit 离页面顶点距离 left right top bottom
-
层覆盖先后顺序（优先级）
z-index:
01 -
显示属性 display（可以内联块级转换）
层不显示且不占位none块级显示block内联显示inline具有宽高的行内块元素inline-block -
显示效果visibility
可见visible隐藏并占位hidden -
溢出处理 overflow（子元素大小超过父元素的大小）
溢出可见visible溢出隐藏hidden强制滚动scroll溢出自动按需滚动auto -
浮动属性 float
leftright -
清除浮动 clear
noneleftright清除影响最大的浮动both -
透明度
opacity:0~1;使元素背景透明不支持IE8即以下浏览器，可使用
filter:alpha(opacity=0~100);属性代替支持IE6，但IE Tester软件中无法测试（bug)
-
-
说明：
- 不同的浏览器对外边距（margin）有不同的默认值，故为适应不同浏览器，开始可使用
*{margin:0;}来消除浏览器默认的外边距 - 所有元素都是矩形
- 不同的浏览器对外边距（margin）有不同的默认值，故为适应不同浏览器，开始可使用
box-sizing：限制边框的大小，不会使因内容的宽和高更改而改变
一般写box之前会添加一个*{box-sizing:border-box;}来先限定填写内容的位置大小，方便之后的更改，原始默认的content-box会覆盖掉，此时边框就不会随内容宽和高的增加而往外扩张normalize.css：初始化元素样式的css文件，解决不同浏览器兼容问题的规范标准，统一规则。
max-width：定义一个最大宽度，只要设备超过这个极限都按此极限显示。
边距重叠：在网页中垂直方向的相邻外边距会发生重叠，即相邻垂直外边距会取最大值而不是取和；且子元素的外边距也会传递给相邻的父元素
内联元素的盒模型：不能设置width和height，可以设置内边距和边框，但垂直方向的内边距和边框不会影响页面布局，即会悬在上方；同时只支持水平外边距
浮动 float
文档流Normal flow：默认的一种排列方式（从上到下 从左到右）即最底层的板块
脱离文档流：脱离之后，将不再在文档流中占据空间，而是处于浮动状态
-
float 浮动的特点：
使盒子块悬空起来，脱离文档流，不排队
原空间被后面的元素占用（相当于自行另起一个图层悬浮），即其他元素向上移
当其他元素也跟随前者浮动时，其将会跟着前者排队（左浮排在后，右浮排在前）
若浮动元素前者是一个未浮动元素（本身为块元素），则其不会超过前者
全部浮动，可实现横向排列
块元素浮动后宽度和高度都被内容撑开；内联元素浮动后自身会变成块元素
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，故有时可通过浮动来设置环绕图片效果
解决高度坍塌问题
在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高则父元素就多高；当子元素浮动脱离文档流后，此时会导致子元素无法撑起父元素的高度，父元素会坍塌失去高度，即底层没有了内容；跟着父元素之后的所有元素都会向上移动，将导致页面混乱，所有在开发中一定要避免出现高度坍塌的问题。
对于上诉问题，我们有两种解决方案：
- 可以将父元素高度写死，但写死后父元素将不能自动适应子元素，故此方法不推荐
- 开启BFC（对IE6无效）
- 设置zoom（IE6专用）
- 清除浮动
开启BFC
根据W3C标准，在页面中的元素都隐含一个默认关闭的属性叫BFC（Block Formatting Context），当开启BFC以后，元素将会具有如下的特性：
- 父元素的垂直外边距不会和子元素重叠
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素可以包含浮动的子元素
如何开启元素的BFC：（无法直接开启，只能间接开启）
- 设置元素浮动（可以撑开，但是会失去宽度，且后元素会前移）
- 设置元素绝对定位（问题同上）
- 设置元素为inline-block（可以撑开，会失去宽度，但后元素不会前移）
- 将元素的overflow设置为一个非visible的值，如
overflow:hidden;（副作用最小，推荐）
IE6中没有BFC，但具有另一个隐含属性
hasLayout，该属性的作用和BFC类似，开启方式很多，但副作用最小的方式是添加zoom:1;（即放大倍数）
清除浮动
由于受到盒子A浮动的影响，盒子B整体会向上移动，此时我们希望清除掉盒子A浮动对后元素产生的影响，故要使用clear属性，当清除浮动影响后，元素会回到盒子A浮动之前的位置。
清除浮动对后面元素方法与影响：
在浮动元素之后的div元素的样式中添加
clear:both;（上边距设置会显示无效）在浮动元素后面添加一个空的div元素，设置样式为
clear:both;（但添加无意义结构会过于累赘）通过after伪类向元素的最后添加一个空白块元素，然后清除浮动，既可解决margin-top和父元素失去高度的问题，又不会添加多余div（推荐使用）
.boxA:after{ content:""; display:block; clear:both; }但由于IE6不支持after伪类，在后添加一个
.boxA{zoom:1;}即可解决问题
清除浮动的方法
其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
额外标签法
是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。
父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果。（BFC后面讲解）
可以给父级添加： overflow为 hidden|auto|scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
使用after伪元素清除浮动
:after 方式为空元素的升级版，好处是不用单独加标签了
使用方法：
.clearfix:after { /* 普通浏览器用 */
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { *zoom: 1; } /* IE6/7专用 */
/* 由于IE6/7不支持:after伪类，需要使用zoom:1触发hasLayout */
/* “*”只能被IE浏览器特定识别 */
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。
使用before和after双伪元素清除浮动
使用方法：
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after { clear:both; }
.clearfix { *zoom:1; }
优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
定位
即将元素摆放到页面的指定任意位置
-
position:relative;相对定位- 开启相对定位：相对于元素在文档流中原来位置进行定位
- 若不设置偏移量，元素则不会发生变化
- 当开启元素定位（即非static值）时，可通过
leftrighttopbottom四个属性来设置元素的偏移量，一般只需要两个偏移量即可进行定位 - 相对定位元素并不会脱离文档流，依然占用原位置，只是灵魂出窍了
- 相对定位会使元素提升一个层级，会覆盖住文档流上的内容
- 相对定位不会改变元素本身性质，块依然是块，内联还是内联
-
position:absolute;绝对定位- 开启绝对定位，会使元素脱离文档流
- 若不设置偏移量，元素则不会发生变化
- 绝对定位相对于离它最近的祖先元素进行定位的，若所有的祖先元素都未开启定位，则叫相对于浏览器窗口进行定位（一般情况，开启元素绝对定位时都会同时开启父元素的相对定位）
- 绝对对定位也会使元素提升一个层级
- 绝对对定位会改变元素本身性质，内联会变成块，块元素的宽和高默认都被内容撑开
-
position:fixed;固定定位- 固定定位是一种特殊的绝对定位，大部分特点和绝对定位相同
- 不同点：
- 永远相对于浏览器窗口进行定位
- 会固定显示在浏览器窗口某个位置，不会随滚动条滚动
- IE6不支持固定定位
-
z-index:1/2/3;元素层级- 若元素全都开启了定位，则从结构上，最靠下的元素会盖住上面的元素
- 此时可通过z-index设置来提高层级数，越高越优先显示
- 只有开启定位的元素才能使用z-index，即对static无效
- 父元素的层级再高，也不会盖住子元素
盒模型特殊属性
-
使div内文字居中
.nav{
text-align: center;/div内文字水平居中/
line-height: 高度;/div内文字垂直居中/
}
第六章 Flex布局
弹性盒子（Flexible Box）：用来为盒装模型提供最大的灵活性，任一容器都可以指定为Flex布局。
-
flex布局：在父级标题下使用
.box{display:flex;}或者.box{display: inline-flex;}注意，设为Flex布局以后，子元素（项目）的float、clear和vertical-align属性将失效。
flex容器（flex container）：即采用Flex布局的元素。它的所有子元素自动成为容器成员，称为Flex项目（flex item）
容器属性（整体）
-
flex-direction：决定主轴的方向，即项目的排列方向
row/row-reverse/column/column-reverse -
flex-wrap：决定对应的换行方式
nowrap/wrap/wrap-reverse flex-flow：flex-direction与flex-wrap的合并简写形式
-
justify-content：定义项目在主轴上的水平对齐方式
flex-start/flex-end/center/space-between/space-around -
align-items：定义项目对应项目垂直对齐方式
flex-start/flex-end/center/baseline/stretch -
align-content：定义多根轴线的对齐方式
flex-start/flex-end/center/stretch/space-between/space-around
项目属性（单独）
order：定义项目的排列顺序，即为单个项目定序号，序号越小越排前，默认值为0
flex-grow：定义项目的相对放大比例，即占据容器比例，默认值为0
flex-shrink：定义项目的相对缩小比例，默认值为1
flex-basis：定义在分配多余空间前，项目占句的主轴空间
flex：
flex-grow、flex-shrink与flex-basis的合并简写形式-
align-self：允许单个项目有与其他项目不一样的对齐方式，即某项目的垂直对齐方式（可覆盖align-items属性）
auto/flex-start/flex-end/center/baseline/stretch
第七章 响应式布局
什么是响应式 Web 设计？
- RWD 指的是响应式 Web 设计（Responsive Web Design）
- RWD 能够以可变尺寸传递网页
- RWD 对于平板和移动设备是必需的
<meta name="viewport" content="width=device, initial-scale=1.0">
<!--viewport视窗 宽度=设备宽度 初始1倍缩放-->
<link rel="stylesheet" href="common.css">
<link media="(orientation:landscape)and(min-width:500px)" rel="stylesheet" href="desktop.css">
当手机横向landscape或纵向portrait和屏幕小于
<link media="max-width:500px"rel="stylesheet" href="mobile.css">
媒体查询 Media query
使用 Bootstrap
另一个创建响应式设计的方法，是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机
第八章 HTML5
HTML5 新增元素
-
新增语义布局结构
页眉<header>导航<nav>内容节<section>侧边栏<aside>页脚<footer>地址<address>时间<time>文章<article>细节<details>细节标题<summary>独立内容流<figure>独立内容标题<figcaption>主内容<main>带记号文本<mark>内容节<section>：通常由标题及其内容组成，不推荐没有标题内容使用，非普通容器，当容器需要直接定义样式或脚本行为时，直接用div即可，不要与article元素混淆，section模块更加独立；另外，也可以使用div布局或者table表格布局时间<time>：显示时间模块，内部通常存在一个datetime属性表示显示时间的格式 另一个pubdate属性可以定义发布日期标题组<hgroup>：当存在子标题（二级标题）时，将h1与h2放于hgroup中，方便管理 -
新增其他元素
视频流video音频流audio画布canvasembedprogressmetertimerubyrtrpwbrcommanddatalistdatagridkeygenoutputsourcemenu -
新增input元素的类型
emailurlnumberrangeDate Pickers -
新增全局属性
内容可编辑contentEditable全局可编辑designMode隐藏内容hidden拼写检测spellcheckTAB跳转焦点顺序tabindex
HTML5相对于HTML4的语法改变
DOCTYPE声明简化
指定字符编码代码简化
-
HTML5的布尔值
<input type="checkbox" checked> <input type="checkbox" checked=""> <input type="checkbox" checked="checked"> ------ 前三个可表示“true”真值 <input type="checkbox"> ------ 默认不填则表示"false"假值 可省略引号
HTML5 新标签
-
语义标签
<header>头部/页眉</header> <nav>导航栏</nav> <footer>底部/页脚</footer> <article>文章</article> <section>内容节/区域</section> <!-- 类似于div --> <aside>侧边栏</aside> -
datalist 自动补全选项列表（配合<input>元素使用）
<input type="text" value="请输入明星" list="star"/> <datalist id="star"> <option value="刘德华">刘德华</option> <option value="刘若英">刘若英</option> <option value="刘晓庆">刘晓庆</option> <option value="戚薇">戚薇</option> <option value="戚继光">戚继光</option> </datalist> <!说明：当输入框里写入一个“刘”/“戚”字时，会自动弹出预设好的值让你选择> -
fieldset 将表单内的相关元素包裹成块
<fieldset> <legend>用户登录</legend> 用户名: <input type="text"><br /> 密 码: <input type="password"> </fieldset>
- 新增 input type 属性
<input type="xxxx">
email 输入邮箱格式的文本
tel 输入手机号码格式的文本
url 输入网址格式的文本
number 输入数字格式
search 定义用于搜索的文本字段
range 定义一个自由拖动滑块
time/date/month/week 输入相关时间格式的文本（可点选控件）
color 定义拾色器
file 定义一个上传按钮（供本地文件上传）
- 新增 input 其他属性
placeholder 输入框内提示信息（点中时文字消失）
<input type="text" placeholder="请输入用户名">
autofocus 网页加载到此页面时，点中焦点自动选中此输入框
<input type="text" autofocus>
multiple 上传文件可多选
<input type="file" multiple>
autocomplete 填写并提交后，当再次加载此页面，会自动弹出填写过的信息
<input type="text" autocomplete="off"> on/off 控制开关
required 必填项
<input type="text" required>
-
其他新增语义布局结构
<address> 地址 <time> 时间 <details> 细节 <summary> 细节标题 <figure> 独立内容流块 <figcaption> 独立内容标题 <main> 主内容 <mark> 带记号文本 <hgroup> 标题组（通常将h1与h2放于hgroup中 方便管理）
多媒体标签
- embed：嵌入一个多媒体插件 （如 优酷/土豆/爱奇艺的播放界面）
-
audio 音频流
以隐藏播放控件的方式播放背景音乐 <audio src="music.mp3"></audio> 使用播放控件方式插入音乐 <audio xxxxxx> control显示控件 autoplay自动播放 loop循环播放 <source src="music.mp3"> <source src="music.ogg"> 当浏览器不支持mp3解码，则选择ogg文件 您的浏览器不支持HTML音频播放功能 不支持提示信息 </audio> -
video 视频流
使用与audio相同 <video></video> 新增 width height 调节播放控件宽和高 -
其他多媒体类型
canvas 画布progressmetertimerubyrtrpwbrcommanddatalistdatagridkeygenoutputsourcemenu
CSS3 新增选择器
<p>微软的Internet Explorer(IE)是当今最流行的因特网浏览器。它发布于1995年，并于1998年在使用人数上超过了Netscape。Firefox是由Mozilla发展而来的新式浏览器。</p>
<ul>
<li class="test">我是第一个</li>
<li class="two123">我是第二个</li>
<li class="twotabc">我是第三个</li>
<li class="abcfour">我是第四个</li>
<li class="ggg-four">我是第五个</li>
<li class="bug">我是第六个</li>
<li class="bug_ee">我是第七个</li>
<li class="hhbug">我是第八个</li>
<li class="bug345">我是第九个</li>
<li class="test">我是第十个</li>
</ul>
结构伪类选择器
ul li:first-child {/* 选择第一个li */}
ul li:last-child {/* 选择最后一个li */}
ul li:nth-child(6) {/* 括号内填6，故选择第六个li */}
ul li:nth-child(2n) {/* 括号内填2n，选择偶数li */}
ul li:nth-child(2n+1) {/* 括号内填2n+1，选择奇数li */}
/*（注：n=0,1,2,3,4……）*/
属性选择器
ul li[class=test] {/* 选择类名全称为test的li（第一个和第十个）*/}
ul li[class$=four]{/* 选择类名结尾为four的li（第四个和第五个）*/}
ul li[class^=two]{/* 选择类名开头为two的li（第二个和第三个）*/}
ul li[class*=bug]{/* 选择类名中带有bug字符的li（第六、七、八、九个）*/}
伪元素选择器
p::first-letter{/* 选择元素内第一个字母或字（选择“微”字）*/}
p::first-line{/* 选择元素的第一行（以浏览器显示的第一行为准）*/}
p::selection{/* 被鼠标高亮选中的字段 */}
/* selection只能使用 color/background/cursor/outline 这4个属性*/
p::befor {content:"开始";} /* 在p元素内部内容前插入新内容*/
p::after {content:"结束";} /* 在p元素内部内容后插入新内容*/
/* content 是必要的属性,被插入的块默认是行内元素，*/
/* 改动之后：「开始微软的Inter... ...新式浏览器。结束」 */
常见用途：伪元素是一个可以直接插入元素的选择器
div { /* 普通div盒子 */ width：200px; height：30px; border：1px solid #ccc; font-family:"icomoon"; position:relative; } div:：before{ /* 使用末尾伪类选择器 */ content:"\ea51"; /* 这里直接在css中插入字体图标(图标v) */ position:absolute; right：10px; top：5px;
CSS3 盒模型
在老版本中，当一个盒子给定了width和height，若要加上padding值，盒子内容就会被撑开，即盒子实际大小与原给定的宽与高不相符。CSS3中，如果限定了 box-sizing: border-box ，padding值将不再影响原始给定的宽与高。
box-sizing: content-box /* 默认旧标准 内撑模式，大小=w+h+p+b */
box-sizing: border-box /* 变为盒模型 内减模式，内容不会撑开盒子 */
过渡
从一个状态渐渐的平滑过渡到另外一个状态
- transition 简写，统一设置四个过渡属性
- transition-property 规定应用过渡的 CSS 属性的名称
- transition-duration 定义过渡效果所需时间（单位为
s，默认为 0s） - transition-timing-function 规定过渡效果的时间曲线（默认为 "ease"）
- transition-delay 规定过渡效果何时开始（默认为 0s，表示立马开始）
【语法格式】transition: 属性名 所需时间 运动曲线 开始时间;
div {
width: 200px;
height: 100px;
background-color: pink;
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
/* transtion 要放在div里 而不是hover里 */
/* 如果有多组属性变化，需用逗号隔开 */
}
div:hover { /* 鼠标经过盒子，宽变600 高变300 */
width: 600px;
height: 300px;
}
transition: all 0.6s;
/* 所有属性都要变化，用all即可，同时后两个属性可以省略 */
【过渡函数】
2D变形
- translate(x, y) 移动
translate(50px,50px);
/* 将文字或图像在水平和垂直方向 分别移动50像素(x、y可为负值) */
translateX(x); /* 单独设置X轴移动 */
translateY(y); /* 单独设置Y轴移动 */
/* 【应用】可取代定位或浮动 */
/* 【应用】让定位的盒子水平居中，取代margin:0 auto; */
.box {
width: 500px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 移动到自身的一半位置 */
}
- transform: scale(x, y) 缩放
transform:scale(0.8,1);
/* 使元素在水平方向上缩小20%，垂直方向不改变 */
/* 取值范围0.01~0.09，默认值为1，若设为2即为放大2倍 */
transform:scaleX(x); /* 单独设置水平缩放 */
transform:scaleY(y); /* 单独设置垂直缩放 */
- transform:rotate(deg) 旋转
- transform-origin(x, y) 调整变形原点
/* rotate 取值是度数，单位为deg，取负值表示逆时针旋转 */
/* 旋转原点也可用px像素值精确位置 */
transform-origin: left top;/* 改变元素旋转原点为左上角 */
transform: rotate(45deg); /* 再进行顺时针45度旋转 */
- transform:skew(deg,deg) 倾斜
transform:skew(30deg,0deg); /* 水平方向倾斜30度，处置方向保持不变 */
/* 取值可为负值，第二个参数可不写（默认为0）*/
3D变形
- transform:rotateX(deg) x轴旋转
- transform:rotateY(deg) y轴旋转
- transform:rotateZ(deg) z轴旋转
img { transition:all 0.5s ease 0s; }
img:hover { /* 鼠标放于图片上时，进行X/Y/Z旋转 */
transform:rotateX(180deg);
transform:rotateY(180deg);
transform:rotateZ(180deg);
/* 合并写法 */
transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg);
}
-
translateZ(z) Z轴移动
直观表现形式为大小的变化，实质是XY平面相对于视点的远近变化（这里参照于perspective属性），比如设置了perspective为200px，那么translateZ(z)的值越接近200，即离得越近，看上去就越大，超过200就看不到了，因为相当于跑到后脑勺去了，正常情况下，是看不到自己的后脑勺的
translate3d(x,y,z)
backface-visibility 设置当元素不面向屏幕时 是否可见
perspective 透视
动画
【语法】animation:动画名称 花费时间 运动曲线 开始时间 播放次数 是否反方向;
@keyframes 动画名称 { /* 动画关键帧设置 */
from{ ... } /* 开始位置变化情况 */
to{ ... } /* 结束位置变化情况 */
} /* 也可以用百分数来设置变换帧为 0%{} 50%{} 100%{} */
/* 【几个属性值说明】 */
animation-iteration-count:infinite; /* 无限循环播放，无单位*/
animation-direction:alternate; /* 动画轮流反向播放 */
animation-play-state:paused; /* 暂停动画 */
浏览器前缀
| 浏览器前缀 | 浏览器 |
|---|---|
| -webkit- | Google Chrome, Safari, Android Browser |
| -moz- | Firefox |
| -o- | Opera |
| -ms- | Internet Explorer, Edge |
| -khtml- | Konqueror |
flex 伸缩布局
- 设置flex布局
在父级元素 添加 display: flex;
[注意]设为Flex布局后，子元素的 float、clear、vertical-align 属性将失效。
-
父元素属性（容器）
- flex-direction 主轴排列方向
- flex-wrap 换行方式
- justify-content 水平对齐方式
- align-items 垂直对齐方式
- align-content 多根轴线对齐方式
-
子元素属性（项目）
- order 排列顺序（序号越小越排前，默认值为0）
- align-self 允许单独与其他项目不同的对齐方式（可覆盖align-items属性）
- flex-grow 相对放大比例（即占据容器比例，默认值为0）
- flex-shrink 相对缩小比例（默认值为1）
- flex-basis （定义在分配多余空间前，项目占据的主轴空间）
flex：flex-grow flex-shrink flex-basis; /* 合并简写 */ /* 一般只设 flex: x; 表示自己占据整体的x份 */
优雅降级和渐进增强
-
渐进增强 progressive enhancement
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
-
优雅降级 graceful degradation
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：渐进增强是向上兼容，优雅降级是向下兼容
建议： 现在互联网发展很快， 连微软公司都抛弃了ie浏览器，转而支持edge这样的高版本浏览器，我们很多情况下没有必要再时刻想着低版本浏览器，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。
BFC
Block formatting context：块级格式化上下文
W3C 规范： display属性为block、list-item、table的元素，会产生BFC
-
触发BFC
- position 为 absolute / fixed
- display 为 inline-block / table-cell / table-caption / flex / inline-flex
- float 不为 none
- overflow 不为 visible
-
BFC元素所具有的特性
- 在BFC中，盒子从顶端开始垂直地一个接一个地排列；
- 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
- 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；
- BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；
- 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。
-
BFC的主要用途
-
清除元素内部浮动
把父元素设为BFC即可清理子元素浮动。 最常见用法： 1.在父元素上设置 overflow: hidden; 2.对于IE6，加上 zoom:1; -
解决外边距合并问题
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠，那么创建不属于同一个BFC，就不会发生margin重叠。 -
制作右侧自适应的盒子问题
普通流体元素BFC后，为了和浮动元素不产生任何交集，顺着浮动边缘形成自己的封闭上下文。
-
-
总结
BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素，反之也如此。包括浮动和外边距合并等。因此，有了此特性，布局时就不会出现意外情况。
HTML5 新增API
网络状态
旧方法：通过window.navigator.onLine来检测
-
H5方法：通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
- window.online 用户网络连接时被调用
- window.offline 用户网络断开时被调用
全屏方法
HTML5规范允许用户自定义网页上任一元素全屏显示。
- requestFullScreen() 开启全屏显示
- cancelFullScreen() 关闭全屏显示
- fullScreen() 检测当前是否处于全屏 返回布尔值
- :full-screen 全屏伪类选择器 css中使用
// 以上方法均存在兼容性处理，不同浏览器需要添加前缀如
webkitRequestFullScreen() //webkit内核浏览器
mozRequestFullScreen() //Gecko内核浏览器
oRequestFullScreen() //Opera浏览器
msRequestFullscreen() //微软浏览器 's'需要小写
文件读取
把上传的文件中内容显示到页面，或上传完毕图片显示缩略图到页面上
// 1.上传文件借助于文件域 读取文件
var file = document.querySelector("input");
var div = document.querySelector("div");
var img = document.querySelector("img");
file.onchange = function () { //onchange 当发生改变时
console.log(file); // 等同于console.log(this)
console.log(this.files); // 返回上传文件的数组集合
// 2.选择文件 读取文件里的内容
//fileReader对象：HTML5新增内建对象 可读取本地文件内容
var reader = new FileReader(); //初始化一个对象
//readAsText()方法 读取文件中的文本内容
//readAsDataURL()方法 把图片转变成一大串字符代码 可通过url引用
reader.readAsText(this.files[0]); //括号中选择指定对象
reader.readAsDataURL(this.files[0]);
// 注意：当此文件内容读取完毕后，会自动把内容存放到result属性里
// 3. 把读取内容显示到页面中
// 使用onload 当加载完毕后
reader.onload = function () {
div.innerHTML = this.result; //文本读取
img.src = this.result; //图片显示
}
}
地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
<p id="demo">点击这个按钮，获得您的坐标：</p>
<button onclick="getLocation()">试一下</button>
<script>
var x = document.getElementById("demo");
// 当点击按钮后触发此函数
function getLocation() {
// 判断当前设备是否支持 地理定位
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
// 如果支持 就获得当前地理位置 调用getCurrentPosition方法
// showPosition 调用成功 调用函数 显示当前位置
// showError 调用失败 调用函数
} else { // 如果设备不支持 返回提示
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
// 调用成功函数 返回当前位置的经纬度
function showPosition(position) {
x.innerHTML =
"Latitude: " + position.coords.latitude + // 获得当前的纬度
"<br />Longitude: " + position.coords.longitude; // 获得当前的经度
}
// 调用失败
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED: // 用户无法定位的要求
x.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE: // 位置信息不可用
x.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT: // 获取用户位置的请求超时
x.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR: // 发生了一个不明错误
x.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
http://lbsyun.baidu.com/ 百度地图api
拖拽和释放
-
任何元素都可设置元素为可拖放
- 设置方法：为标签元素要设置属性
draggable=true - 注意：链接和图片默认是可拖动的，不需要 draggable 属性
- 设置方法：为标签元素要设置属性
-
被拖动源对象可触发事件
- ondragstart：源对象开始被拖动
- ondrag：源对象被拖动过程中（无论鼠标是否动作，不断执行）
- ondragend：源对象被拖动结束
-
拖动源对象进入到目标对象上方可触发事件
ondragenter：目标对象被源对象拖动着进入
ondragover：目标对象被源对象拖动着悬停在上方（不断执行）
ondragleave：源对象拖动着离开了目标对象
-
ondrop：源对象拖动着在目标对象上方释放/松手
ondrop事件默认被阻止，若想触发，需要在ondragover事件里阻止默认行为，两种方法
return false;e.preventDefault()
Web存储
-
数据存储类型
- cookie
- sessionStorage
- localStorage
- WebSQL
- IndexDB
-
特性
- 设置、读取方便，页面刷新不会丢失数据
- 容量较大，sessionStorage约5M、localStorage约20M
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
-
window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口（页面）下数据可以共享
-
window.localStorage
- 永久生效，除非手动删除 关闭页面也会存在
- 可以多窗口（页面）共享（同一浏览器可以共享）
-
方法
- setItem(key, value) 设置存储内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容
应用缓存
在HTML5中可以构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件
- 优势
- 可配置需要缓存的资源
- 网络无连接应用仍可用
- 本地读取缓存资源，提升访问速度，增强用户体验
- 减少请求，缓解服务器负担
7.2 缓存清单
创建了一个后缀名为xxx.appcache的文件，然后在需要使用应用缓存在html页面开头添加属性
manifest="xxx.appcache"，路径要保证正确。
CACHE MANIFEST
# 第一行必须规定这样写
# 为注释
CACHE:
# 此部分写需要缓存的资源 (如css image js等)
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
NETWORK:
# 此部分要写指定需要有网络才可访问的在线资源，无网络不访问(可使用通配符)
./images/img1.jpg
./images/img2.jpg
FALLBACK:
# 此部分为备用资源 当访问不到某个资源时，自动由另一个资源替换
./images/img4.jpg ./images/img5.jpg
- 其它
-
CACHE:可省略，这种情况下将需要缓存的资源写在CACHE MANIFEST - 可指定多个
CACHE:NETWORK:FALLBACK:无顺序限制 - 只有当xxx.appcache文件内容发生改变时，或手动清除缓存后，才会重新缓存
- chrome可通过chrome://appcache-internals/工具和离线模式来调试管理应用缓存
-
