HTML 版本特点：
HTML5:
<!DOCTYPE html>
<meta charset="utf-8">
HTML4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transactional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv=Content-type content="text/html;charset=utf-8">
单标记必须闭合 -> 比如<br>必须写成<br />
单属性必须添加属性值 -> <input type="radio" checked />必须写为<input type="radio checked="checked" />
标记和属性必须使用小写 <Body><BODY>都是错的，必须携程<body>
属性的属性值必须使用""
JavaScript
标识符：变量、函数、属性的名字或者函数的参数。ECMAScript标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写。
要在整个脚本中启用严格模式，可以在顶部添加如下代码“use strict"
如果在函数内部的上方包含这条编码提示，也可以指定函数在严格模式下运行
function doSomething(){
"use strict";
}关键字：break doinstanceof typeof caseelse newvar
catchfinally returnvoid continue for switch while
debuggerfunction thiswith defaultif throwdelete
intry
保留字：abstract enumint shortbollean exportinterface static
byteextends longsuper charfinal nativesychronized
classfloat packagethrows constgoto privatetransient
debuggerimplements protectedvolatile doubleimport public
第五版把在非严格模式下运行时的保留字缩减为下列这些
classenum extendssuper
在严格模式下，第五版还对以下保留字施加了限制
implementspackage publicinterface privatestatic letprotected
yield
简单数据类型（也称为基本数据类型）: Undefined, Null, Bolean, Number, String
复杂数据类型: Object
各种类型转换为Boolean规则
数据类型 转换为true的值转换为false的值
Boolean truefalse
String 任何非空字符串""（空字符串)
Number 任何非零数字值（包括无穷大）0
Object 任何对象null
Undefined n/aundefined
由于保存浮点数值需要的内存空间是保存整数值的两倍，因此ECMASscipt会不失时机地将浮点数值转换为零数值。显然，如果小数点后面没有跟任何数字，那么这个数字就可以作为整数值来保存。同样的，如果浮点数值本身表示的就是一个整数（如1.0）那么该值也会被转换为整数
var floatNum1 = 1; // 小数点后面没有数字--解析为1
var floatNum2 = 10.0 // 整数--解析为10
在默认情况下，ECMAScript会将那些小数点后面带有6个零以上的浮点数值转换为以e表示法表示的数值（例如0.0000003会被转换为3e-7)
NaN与任何值都不相等，包括NaN本身
有3个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。第一个函数，即转型函数Number()可以用于任何数据类型，而另两个函数则专门用于把字符串转换成数值
Number()函数的转换规则如下。
如果是Boolean值，true和false将分别被转换为1和0。
如果是数字值，只是简单的传入和返回。
如果是null值，返回0。
如果是undefined，返回NaN。
如果是字符串，遵循下列规则：
如果字符串中只包含数字（包括前面带正号或负号的情况），则将其转换为十进制数值，即"1"会变成1，"123"会变成123，而"011"会变成11（注意：前导的零被忽略了）；
如果字符串中包含有效的浮点格式，如"1.1"，则将其转换为对应的浮点数值（同样，也会忽略前导零）；
如果字符串中包含有效的十六进制格式，例如"0xf"，则将其转换为相同大小的十进制整数值；
如果字符串是空的（不包含任何字符），则将其转换为0；
如果字符串中包含除上述格式之外的字符，则将其转换为NaN。
var text = "This is the letter sigma: \u03a3.";
在不知道要转换的值是不是null或undefined的情况下，还可以使用转型函数String()，这个函数能够将任何类型的值转换为字符串
Object类型所具有的任何属性和方法也同样存在于更具体的对象中
Object的每个实例都具有下列属性和方法:
constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是Object()
hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty("name")）
isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型（第5章将讨论原型）。
propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用for-in语句（本章后面将会讨论）来枚举。与hasOwnProperty()方法一样，作为参数的属性名必须以字符串形式指定。
toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应
toString()：返回对象的字符串表示。
valueOf()：返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
逻辑与操作可以应用于任何类型的操作数，而不仅仅是布尔值。在有一个操作数不是布尔值的情况下，逻辑与操作就不一定返回布尔值；此时，它遵循下列规则
如果第一个操作数是对象，则返回第二个操作数
如果第二个操作数是对象，则只有在第一个操作数的求值结果为true的情况下才会返回该对象
如果两个操作数都是对象，则返回第二个操作数
如果有一个操作数是null，则返回null
如果有一个操作数是NaN，则返回NaN
如果有一个操作数是undefined，则返回undefined
与ECMAScript中的其他操作符一样，当关系操作符的操作数使用了非数值时，也要进行数据转换或完成某些奇怪的操作。以下就是相应的规则
如果两个操作数都是数值，则执行数值比较。
如果两个操作数都是字符串，则比较两个字符串对应的字符编码值。
如果一个操作数是数值，则将另一个操作数转换为一个数值，然后执行数值比较。
如果一个操作数是对象，则调用这个对象的valueOf()方法，用得到的结果按照前面的规则执行比较。如果对象没有valueOf()方法，则调用toString()方法，并用得到的结果根据前面的规则执行比较。
如果一个操作数是布尔值，则先将其转换为数值，然后再执行比较
var result = "23" < 3; //false 此时，字符串"23"会被转换成数值23，然后再与3进行比较，因此就会得到合理的结果。在比较数值和字符串时，字符串都会被转换成数值，然后再以数值方式与另一个数值比较
var result = "a" < 3; // false，因为"a"被转换成了NaN
在转换不同的数据类型时，相等(==)和不相等(!=)操作符遵循下列基本规则：
如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为1；
如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；
如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf()方法，用得到的基本类型值按照前面的规则进行比较；
这两个操作符在进行比较时则要遵循下列规则。
null和undefined是相等的。
要比较相等性之前，不能将null和undefined转换成其他任何值。
如果有一个操作数是NaN，则相等操作符返回false，而不相等操作符返回true。重要提示：即使两个操作数都是NaN，相等操作符也返回false；因为按照规则，NaN不等于NaN。
如果两个操作数都是对象，则比较它们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true；否则，返回false。
with语句的作用是将代码的作用域设置到一个特定的对象中。
with语句的语法如下：
with (expression) statement; 定义with语句的目的主要是为了简化多次编写同一个对象的工作，如下面的例子所示：
var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href; 上面几行代码都包含location对象。如果使用with语句，可以把上面的代码改写成如下所示：
with(location){
var qs = search.substring(1);
var hostName = hostname;
var url = href;
} 在这个重写后的例子中，使用with语句关联了location对象。这意味着在with语句的代码块内部，每个变量首先被认为是一个局部变量，而如果在局部环境中找不到该变量的定义，就会查询location对象中是否有同名的属性。如果发现了同名属性，则以location对象属性的值作为变量的值。（不建议使用）
switch语句在比较值时使用的是全等操作符，因此不会发生类型转换（例如，字符串"10"不等于数值10）。
实际上，在函数体内可以通过arguments对象来访问这个参数数组，从而获取传递给函数的每一个参数
function doAdd() {
if(arguments.length == 1) {
alert(arguments[0] + 10);
} else if (arguments.length == 2) {
alert(arguments[0] + arguments[1]);
}
}
doAdd(10); //20
doAdd(30, 20); //50 另一个与参数相关的重要方面，就是arguments对象可以与命名参数一起使用，如下面的例子所示：
function doAdd(num1, num2) {
if(arguments.length == 1) {
alert(num1 + 10);
} else if (arguments.length == 2) {
alert(arguments[0] + num2);
}
} 关于arguments的行为，还有一点比较有意思。那就是它的值永远与对应命名参数的值保持同步。
使用CSS样式的方式
内链式样式表：<body style="background-color:green; margin:0;"></body>
嵌入式样式表：<style type="text/css"></style>需要将样式放在<head></head>中
引入式样式表：<link rel="StyleSheet" type="text/css" href="style.css">
选择器优先级 id>class>html
子类: body div{ }
多个选择器: div,p,a{ }
css颜色:
{color:red;}
{color:#f00;}
{color:rgb(255,0,0);}
{color:rgba(255,0,0,1);}最后一位为透明度（0-1）
font-size
px:设置一个固定值
%:父元素字体的百分比
larger:比父元素更大
smaller:比父元素更小
inherit:和父元素相同
{background-image:url(image/bg.gif)}
background:背景颜色，url地址，重复，位置
background:#f60 url(images/bg,jpg) no-repeat top center
横向排列
text-align:left;
text-align:center;
text-align:right;
文本行高
line-height:10%; /*基于字体大小的百分比行高*/
line-height:20px;
text-indent:10%; /*父元素的百分比*/
text-indent:20px;
text-indent:inherit; /*继承父元素*/
字符间距
letter-spacing:normal;
letter-spacing:-10px;
letter-spacing:inherit; /*继承父元素*/
单词间距
word-spacing:normal;
word-spacing:px;
word-spacing:inherit;/*继承父元素*/
文字方向
direction:ltr;/*从左到右*/
direction:rtl;/*从右到左*/
direction:inherit;/*继承父元素*/
文本大小写
text-transform:none;
text-transform:capitalize;/*每个单词首字母大写*/
text-transform:uppercase;/*都大写*/
text-transform:lowercase;/*都小写*/
text-transform:inherit;
盒子模型
padding会增加容器自身的宽高
定位方式position
relative正常定位，根据当前位置
absolute根据父元素进行定位
fixed根据浏览器窗口进行定位
static没有定位
inherit继承
内联元素宽高不起作用
即便子元素的z-index小于父元素，子元素也不会显示在父元素的后面
在浮动后紧邻的元素会受到浮动的影响，跑到浮动元素的后面
清除浮动clear:both;
为了消除浮动元素带来的影响，也可以在浮动元素后添加个无内容的元素，在该元素上设置clear:both;
判断IE
<!--[if 条件 版本]>那么显示<![endif]-->
不等于：<!--[if !IE 8]>除了IE8都显示<![endif]-->
小于：<!--[if lt IE 8]>小于IE8显示<![endif]-->
大于：<!--[if gt IE 8]>大于IE8显示<![endif]-->
小于等于：<!--[if lte IE 8]>小于等于IE8都显示<![endif]-->
大于等于：<!--[if gte IE 8]>大于等于IE8都显示<![endif]-->
大于和小于之间：<!--[if (gt IE 5)&(lt IE 8)]>大于IE5且小于IE8<![endif]-->
或：<!--[if (IE 7)|(IE 8)]>IE7或IE8<![endif]-->
仅：<!--[if IE 8]>只有IE8<![endif]-->
去掉所有元素的margin和padding
*{margin:0;padding:0}
HTML5中新的网页结构
header元素表示页面中的一个区域或者整个页面的标题<header></header>
nav元素表示页面中的导航链接部分<nav></nav>
article元素表示页面中的一块与上下文不相关的独立内容，比如一片文章中的文章<article></article>
section表示页面中的一块内容区块，比如章节的页眉、页脚等等。也可以和hn(h1,h2...)等一起使用，标识出文档的结构<section></section>
aside元素表示article元素的内容之外的，和内容相关的辅助信息<aside></aside>
footer元素表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等<footer></footer>
和其他不相关的独立内容用article
一块内容的不同部分分块用section，section中要有标题
内容的附属部分，比如广告，引用放在aside中
nav元素的使用场合
1.传统的导航条2.侧边栏导航3.内页导航4.翻页操作
time元素
<time datetime="2014-9-28">时间</time>
<time datetime="2014-9-28">9月28</time>
<time datetime="2014-9-28">今天时间</time>
<time datetime="2014-9-28T22:30">9月28晚上10点半</time>
<time datetime="2014-9-28T2:30Z">UTC标准时间10点半</time>
<time datetime="2014-9-28T22:30+8:00">中国时间9月28晚上10点半</time>
在元素里面包含了pubdate属性的话，就是表示当前文章的发布时间
hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组
通常情况下，文章只有一个主标题的时候，是不需要hgroup的
<hgroup>
<h1>asda</h1>
<h2>asdas</h2>
</hgroup>
address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。
address元素还用来展示和文章的相关的联系人的所有联系信息
figure元素是一种元素的组合，带有可选标题。figure元素用来在表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响
figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内其他元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素
<figure>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<figcaption>image</figcaption>
</figure>
details元素是一种标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，
该元素内部的子元素应该被展开显示。当该元素属性值为false时，其内部的子元素应被收缩起来不显示。该属性的默认值为false，当页面打开
其内部的子元素应处于收缩状态。
summary元素从属于detail元素，用鼠标点击summary元素的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details
元素内没有summary元素，浏览器会提供默认的文字以供点击，例如“details”。目前只有Chrome支持
mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考价值作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意
mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了原文作者不相关的其他目的而需要突出显示或者
高亮显示的文字上面。 mark元素最主要的目的就是吸引当前用户的注意。 mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的
而把作者没有表示出来的内容重点表示出来
progress元素代表一个任务的完成进度，这个进度可以是不确定的，表示进度正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字
（比如100）之间的数字来表示准确的进度情况（比如百分比）
该元素具有两个表示当前任务完成情况的属性，value属性表示已经完成了多少工作量，max属性表示总共又多少工作量。工作量的单位是随意的，不指定的
属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0
在html5中废除的元素
1.能使用CSS代替的元素
basefont,big,center,font,s,strike,tt,u
2.不再使用frame框架
html5大纲
关于HTML的大纲编排，我们可以划分为“显示编排”和“隐式编排”两种
1.显示编排是指明确使用section元素进行分块来创建网页文档，每个内容区块内使用标题(h1-h6)
2.隐式编排就是我们不适用section元素进行明确的区块划分，而是根据我们写的(h1-h6，hgroup)元素进行自动
创建区块，因为html5分析器可以根据不同级别的标题判断出对应的内容区块
3.标题分级：不同的标题有不同的级别，在（h1-h6）中，h1的级别最高，而h6的级别最低。所以在隐式编排的
情况下就会按照一下规则生成
1）如果出现新的标题比上一个标题级别低，那么将会生成下级内容区块
2）如果新出现的标题比上面出现的一个标题级别高，或者两者级别相同，那么就生成新的内容区块
4不同的内容区块可以使用相同级别的标题，父内容区块与子内容区块都可以使用相同级别的h1标题
<body>
<header>
<h1>网页大纲编写实战</h1>
<nav>
<ul>
<li><a href="index.html" >首页</a> </li>
<li><a href="index2.html">内容页</a> </li>
<li><a href="index3.html">联系我们</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<section>
<h1>文章评论列表：</h1>
<article>
<h1>评论标题A</h1>
<P>评论内容A</P>
</article>
<article>
<h1>评论标题B</h1>
<p>评论标题B</p>
</article>
</section>
</article>
<footer>
<small>麦子学院版权所有</small>
</footer>
</body>
4289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
