文章目录
HTMLCSS样式表css的三种添加方式：背景样式有两种：背景颜色表示background-color背景图片表示 文本样式文本颜色color缩进的表示方法（数值可以为负）text-indent边距大小（类似悬挂缩进）padding 行间距（行高）line-height英文单词间距word-spacing字符间距（汉字、英文字母之间）letter-spacing对齐方式text-align文字方向direction变形、变换（英文）text-transform文字装饰（划线）text-decoration空白字符处理（英文）white-space阴影text-shadow轮廓outline-style；outline-color；outline-width 字体font-family斜体font-style小号大写字体font-variant加粗font-weight字体大小font-size 列表list-style-type图像做序号list-style-image:url()卷绕后位置list-style-position列表样式组合 表格table容器外距离容器内距离表格布局layout 定位position选择器 JavaScript变量var变量空间 计算判断循环whiledo....whilefor(...)无限循环的写法不同循环的比较break与continue 函数定义函数return函数变量（对象） 数组（可变大）数组的方式创建数组访问数组数组长度.length可写自动添加（可扩展性）转换数组为字符串堆栈操作队列操作排序操作自己写比较数组操作数组连接数组截取（切片）splice 对象创建对象访问对象属性删除对象属性遍历所有属性构造方法（函数）原型对象原型问题组合原型和构造方法 浏览器里的JavaScript（window）全局对象documentHTML中的JavaScript存在方式外部JavaScript文件事件处理器body事件简单对话框状态栏定时器window的控制方法window.open()window.close(); location对象 documentDocument Object Modeldocument的成员图像事件HTML
html最初是排版语言
html标记表达了“是什么”，而不是外观怎么样？
有些标签样式虽然相同，但是浏览器知道它们是不同的东西。
外观由浏览器和样式表CSS决定。
title属性可以用于所有html标记
id属性可以用在其他p、h1、h2…等表达结构的标签里
html里多个连续空白符只当作一个
http，ftp等都是协议头
<!DOCTYPE HTML> <!--标准网页声明（遵循规范）--><html> <!--网页主体标签--><head> <!--配置、选项标记（源代码文件的头，不在内容页面显示）--><meta charset=utf-8"> <!--unicode编码字符集--><title>标题名字</title> <!--网页标题标签--></head><body> <!--显示内容主体标签--><hgroup> <!--表示连续标题--><h1>标题</h1> <!--内容标题标签，标题自成一行-->......<h6>小标题</h6></hgroup><br> <!--段落内换行（分行）--><hr> <!--水平线可以加属性,变量等于值（如：<hr width=50%>，不带百分号表示50像素大小)属性间用空格隔开（如：<hr width=50% align=left size=10>)--><wbr> .....</wbr> <!--用于英文单词在换行时加连字符--><b>....</b> <!--加粗，b和i标签可以互相嵌套--><i>....</i> <!--斜体，b和i标签可以互相嵌套--><tt>....</tt> <!--打字机字体、等宽西方文字字体--><small>....</small> <!--小号字体--><del>....</del> <!--删除标签（删除线）--><ins>....</ins> <!--添加标签（下划线）--><s>...</s> <!--表示过时的（删除线）--><mark>....</mark> <!--高亮标记--><em>....</em> <!--强调（斜体）--><strong>....</strong> <!--着重（粗体）--><dfn>....</dfn> <!--定义（斜体）--><code>....</code> <!--代码（小号字体）--><samp>....</samp> <!--例子代码（小号字体）--><kbd>....</kbd> <!--键盘用户输入（小号字体）--><var>....</var> <!--变量（斜体）--><cite>....</cite><!--引用（斜体）--><sup>....</sup> <!--上标，可嵌套--><sub>....</sub> <!--下标，可嵌套--><address> <!--地址标签，可包含多行-->....</address><blockquote> <!--缩进标签，可包含多行，可嵌套-->.....</blockquote><q>....</q> <!--引用标签，带引号--><pre> <!--预格式化，不会改变文本原有格式-->...</pre><abbr title="中华人民共和国">PRC</abbr> <!--缩写标签--><bdo dir=rtl>....</bdo> <!--文本方向标签，rtl表示从右向左--><bdi>...</bdi> <!--隔离标签，使文本脱离其父元素的文本方向设置-->><!--表示大于，如：a>2--><<!--表示小于，如：a<2-->& <!--表示&符号--> <!--表示空格（不可打断）-->Ü(ü) <!--表示Ü（ü）--><ul> <!--无序列表，用圆点标示--><li>....</li> <!--列表项目-->.....</ul><!--有序列表和无序列表可以相互嵌套--><ol start=2> <!--有序列表，用有序数字标示，start=2表示从2开始标示--><li>....</li> <!--列表项目-->.....</ol><dl> <!--定义列表，可以有多个<dt>项目--><dt>...</dt> <!--列表中的项目--><dd>...</dd> <!--对项目的描述--></dl><img src="******.jpg" alt="..." width="200"height="400"/> <!--图片标签，相当于一个字符。alt属性表示另选的，在图片无法加载时alt的内容会显示出来。src属性支持3种通用格式图片：jpg、gif、pmg--><iframe src=" height=400 width=600"></iframe> <!--创建网页浏览窗口，点击后会跳到新建窗口--><a href="" targer=_blank>网易新闻</a> <!--超文本链接标记(文字或者图片),从当前网页直接跳转，加target=_blank表示在新的网页打开,下划线不能少。--><table border="1"> <!--表格标签，一个表格相当一个字符--><caption>表格</caption><thead> <!--表头。当表很长时，翻转会仍保持表头不动--><tr> <!--一行--><th>OS</th> <!--单元格表头--><th>Chinese</th><th>French</th></tr></thead><tbody> <!--表的内容--><tr><td>ios5</td> <!--单元格--><td>yes</td><td>yes</td></tr><tr><td colspan="3">Windows</td> <!--占据3列（格）--></tr></tbody><tfoot> <!--表的脚注，长表格翻转时，脚注保持不动--></tfoot></table> <p>......</p> <!--分段标签，也可以用title属性--><p title="第一节">...</p><p id="here"> <!--通过<a href="#here">...</a>可以链接起来--></body></html>
CSS样式表
CSS=层叠样式表
HTML表达结构，CSS表达样式
样式和内容/结构式分离的
属性之间用分号 ; 隔开
css的三种添加方式：
引入外部CSS文件头部head内加入style标记，定义一系列css规则（全局）单个标记里加入style属性（局部、内嵌）背景样式有两种：
纯色背景图片做背景（全局/局部）背景颜色表示background-color
1，十六进制RGB表示
范围#000000~#FFFFFF
如：style=”background-color:#00FFFF"
2，数字RGB表示
范围（0-255， 0-255，0-255）
如：style=”background-color:rgb(255,255,0)"
透明度a（阿尔法通道），范围0-1（1表示完整颜色，没有透明度）。如：rgba(255,255,0,0.5)
3，颜色英文单词表示
如：style=“background-color:red”
背景图片表示
图片引用：image：url(…图片位置…)表示：
style=“background-image:url(00002.jpg)”
图片重复填充方式：background-repeat
1，style=“background-repeat:no-repeat” //不重复
2，style=“background-repeat:no-repeat” //不重复在中心显示。
3，style=“background-repeat:repeat-x”; //只在x方向填充（水平方向），垂直方向用y。
图片滚动与否：background-attachment
跟着文字滚动background-attachment:scroll;（默认值）不跟着文字滚动用background-attachment:fixed;
图片位置：background-position:center顶部用top，右边用right，右上用top right表示（空格隔开），用像素表示（100px 100px）空格隔开。
文本样式
文本颜色color
同背景颜色表示方式一样，区别在文本是color、背景是background-color。
缩进的表示方法（数值可以为负）text-indent
1，缩进字体倍数大小em（相对值），推荐常用
style=“text-indent: 2em”
2，缩进页面百分比（相对值）：如%10
3，按尺寸缩进（绝对值）：如2in，2cm，2mm，20px，20pt分别是英尺、厘米、毫米、像素点、磅（1/72磅）。
边距大小（类似悬挂缩进）padding
style=“padding: 2em”
行间距（行高）line-height
style=“line-height:2em”
2em和2的效果一样，都表示字体倍数，也可以用小数，如1.5
normal正常的，默认的
英文单词间距word-spacing
style=“word-spacing:10px”;
字符间距（汉字、英文字母之间）letter-spacing
style=“letter-spacing:10px”;
对齐方式text-align
style=“text-align:left”;左对齐，
right右对齐
center中间对齐
justify两端对齐
文字方向direction
style="direction:ltr"从左到右（默认）
rtl从右到左
变形、变换（英文）text-transform
style=“text-transform:uppercase”,字母都改为大写
lowercase小写
capitalize首字母大写
文字装饰（划线）text-decoration
style=“text-decoration:underline overline line-through” 下划线、上划线和删除线的组合，可以单独使用
空白字符处理（英文）white-space
style=“white-space:normal” 默认（连续空格等空表符省略掉）
pre 空格等不会省略（包括换行），但是不会自动卷绕（根据页面大小自动换行）
pre-wrap可以自动卷绕
pre-line合并空白符，只保留换行
nowrap不做任何卷绕，只有一行，空白符会省略
阴影text-shadow
text-shadow:3px 5px 5px rgba(0,255,0,0.5)
四个参数的意思依次是：x轴向右延申3个点，y轴向下延申5个点，阴影扩散范围5个点，颜色
多个阴影之间用逗号‘，’分隔
text-shadow:0px -1px 0px #000000,0px 1px 3px #606060
轮廓outline-style；outline-color；outline-width
轮廓类型必须有outline-style:solid; 实线
dotted点线，
dashed虚线，
groove凹槽（立体）
ridge凸槽（立体）
inset凹边
outset凸边
double双线，加宽度参数时表示双线间的距离
outline-color:red; 红色线
outline-width:thin默认宽度 细的
outline-width:10px 十个像素点宽
字体font-family
非具体字体的五种类型
style="font-family:serif"截线、衬线体（矢量字体）
sans-serif不带截线
monospace等宽字体
cursive手写体
fantasy无法归类的
具体的字体
style=“font-family:hei”;黑体字
"font-family:Times, TimesNR, serif"多种字体选择
斜体font-style
font-style:nomal一般字体，正常的字体
italic 斜体字
obique浏览器计算的斜体
小号大写字体font-variant
font-variant：small-caps 小的大写字体
加粗font-weight
font-weight:bold 加粗，可用100到900的数字代替
字体大小font-size
font-size: 2em 两倍字体大小，最好用em不要用cm等绝对值
列表list-style-type
style="list-style-type:disc"实心圆点（默认）
circle空心圆
square实心方块
图像做序号list-style-image:url()
“list-style-image:url(0003.jpg)”
卷绕后位置list-style-position
list-style-position:inside;卷绕后行首在列表标记范围里
outside卷绕后行首在列表标记范围外
列表样式组合
list-style:outside circle
表格table
相邻元素距离取两者边距最大值，不相加
style=“border: 1px solid blue; border-collapse:collapse” 蓝色实线，相邻的表格线折叠合并
border-collapse:seperate 相邻表格线保持分开状态
width:50px;宽度
height:100px;高度
vertical-align:top垂直对齐：顶部对齐
text-align:right水平对齐：右对齐，left、bottom、center左、底、中心
caption-side:bottom标题位置：最下面，top最上面
<th style="border: 1px solid blue;width:50px;height:100px;vertical-align:top;text-align:right;padding:10px">语文</th>
容器外距离
padding-top: 10px单独指定内上边距
padding: 10 15 20 25指定上、右、下、左（顺时针）内边距
容器内距离
margin:10px上下左右距离
margin: 10px, 15px,20px,25px上右下左
表格布局layout
table-layout: automatic全自动，
fixed根据第一行单元格大小计算表格列宽
定位position
相对定位relative浮动定位float绝对定位absolute<div>...<p>...<span>...</span>... <!--段内分段（块）--></p>...</div>分区
相对定位:有可能覆盖相邻元素
style=“position:relative; left:-20px; bottom: -20px”
绝对定位：相对于已定位的最近一个上层来说
style=“position:absolute; left:-20px; bottom:-20px”
浮动定位：相对于当前浏览器大小的位置（图片）
img src=“0003.jpg” width=200 style="float: left"左
float:right右
float:none不浮动（默认）
选择器
在head标签内通过style指定相同类标签的样式
元素选择器
p,th,td {border: 1px solid blue}多个元素指定同一个样式选择器
p {background-color:red}同一个元素指定不同样式类选择器
*.important { color:red}不指定标签
p .important {color: green}指定标签（class）
标签内指定类名class=“important”，指定多个类名class=“important warning”id选择器
*#important {color:red} , id选择器
标签内指定id=“important warning”后代选择器
p em {background-color:red}指定p内的em标签内的背景颜色
如p和em之间有 > 符号，表示em是p紧邻的下一层才有效，两者间有其他层则不生效。p > em {…}相邻兄弟选择器
h1 + p {background-color:red}表示和h1紧邻的p标签才生效属性选择器
*[title] {color:red}指定带title属性的标签的颜色
<!DOCTYPE HTML><html><head><title>我的页面</title><meta charset="utf-8"><style> /* 2，头部style标记 */p {background-color:gray;} /*指定段落标签p的样式*/</style> </head><body><p style="color:red">5月13日星期六，半夜</p> <!--指定段落字体颜色--><p style="background-color:yellow;"> <!--*3，标记里的style属性（内嵌）*-->我的第一个HTML页面</p><p style="text-indent: 2em;padding:2em;line-height:2em"> <!--text-indent表示缩进，em表示当前字体的倍数-->“夜晚好像永远也不会结束，”kim斜躺在轻便的柳条椅藤条椅里轻轻的叹息了一声。舞厅被装声称南方庄园的风格，暗色的和白色的皱纹纸带缠绕在闪烁的水晶灯上，把原本柔和的灯光，幻化成点点星光，好像在橡木地板上跳动。</p></body></html>
JavaScript
是一种可以在浏览器中运行的脚本语言主要用来实现在浏览器端的动作1,用户交互
2,数据处理是解释性语言源代码放在HTML里头
1,在head中定义函数<script language="JavaScript">
2,在相应标记中定义动作<onXXX=" ">每一条语句以分号 ; 结尾document.write(…)在html页面里显示alert(…) 弹窗显示
<!DOCTYPE HTML><html><body><script>document.write("Hello World!");//document是对象，点(.)是方法，write是动作</script></body></html>
变量var
组成：字母、数字、下划线（第一个字符不能是数字）
var hello;
hello = “Hello”;
变量空间
定义在任何函数之外的变量属于全局（整个网页）空间，在网页的任何地方都可以使用定义在某个函数内部的变量属于局部（函数内部）空间，只在函数内部有效局部有和全局重名的变量是，采用局部的计算
数值运算
字符（串）比较运算（比较字符ascii码大小）
比较运算结果是：true / false
判断
if…else if…else
switch…case
循环
while
do…while
for(…)
无限循环的写法
while(true) { }
do {} while (true);
for ( ; ; ) { }
不同循环的比较
三种循环（while、do和for）的动能是等价的如果需要循环至少执行一次，do…while通常是更好的选择当循环的次数是固定的，或者很容易计算得到的时候，选择for循环break与continue
break：跳出循环
continue：跳过当前循环步，进入循环的下一轮
函数
函数就是一段代码，我们给它起个名字，放起来，以后可以用JavaScript有很多内置函数，能帮我们实现很多有用的功能定义函数
function fun_name() {}
function fun_name(a,b) {}
return
从函数中返回值
函数变量（对象）
var f = new Function(“x”,“y”,“return x*y”);
等价于
function f(x,y) {return x*y;}
数组（可变大）
当你需要放一些数据，特别是每个数据将通过一个对于的索引数字来访问时，你需要数组比如，要记录一个班所有学生的成绩，你可以：var m1=89;
var m2=78;
var m3=90;
数组的方式
var marks = new Array();
marks[0] = 89;
marks[1] = 78;
marks[2] = 90;
创建数组
var a = new Array();
var b = new Array(size);
var c = new Array(d1,d2,…,dn);
var d = [d1,d2,…,dn]
访问数组
[]运算符访问数组中的一个单元a[0],可读可写索引从0开始a[x] = n直接创建了数组中的一个单元x，并且赋了值n
数组长度
a.length给出数组a的长度，是其中最大的下标+1
var colors = [“red”,“blue”,“green”];
var names = [];
alert(colors.length);
alert(names.length);
.length可写
重新定义长度后，超出部分的元素会被丢掉
var colors = [“red”,“blue”,“green”];
colors.length = 2;
alert(colors[2]);
自动添加（可扩展性）
colors[colors.length] = “black”; 在数组末尾添加元素
colors.length永远比数组最大下标大1
转换数组为字符串
var colors = [“red”,“blue”,“green”];
alert(colors.toString());
alert(colors.valueOf());
alert(colors);
alert(colors.join(","));
alert(colors.join("||"));
堆栈操作
var colors = new Array();
var count = colors.push(“red”,“green”);
alert(count);
count = colors.push(“black”);
alert(count);
var item = colors.pop();
alert(item);
alert(colors.length);
队列操作
var colors = new Array();
var count = colors.push(“red”,“green”);
alert(count);
count = colors.push(“black”);
alert(count);
var item = colors.shift();
alert(item);
alert(colors.length);
排序操作
var values = [0,1,5,10,15];
values.sort(); //从小到大
alert(values); //0,1,10,15,5
values = [1,2,3,4,5];
values.reverse(); //反转
alert(values);
自己写比较
function compare(value1, value2)
{
if(value1<value2)
{
return 1;
}
else if(value1>value2)
{
return -1;
}
else
{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
数组操作
数组连接
colors2 =colors.concat(“yellow”,[“black”,“brown”]);
数组截取（切片）
colors3 = colors.slice(1,4); 截取1-3，不包括4。
splice
splice(开始位置，删除个数，插入元素…);删除:splice(0,2);
插入:splice(2,0,“red”, “green”);
替换:splice(2,1, “red”, “green”);
对象
对象是JavaScript的一种复合数据类型，它可以把多个数据集中在一个变量中，并给其中的每个数据起名字。或者说，对象是一个属性集合，每个属性有自己的名字和值。JavaScript不像其他OOP语言那样有类的概念，不是先设计类再制造对象。创建对象
var o = new Object();
var ciclr = {x:0,y:0,radius:2};
访问对象属性
.运算符var book = new Object();
book.title = “HTML5秘籍” ;
book.translator = “李松峰”;
book.chapter1 = new Object();
book.chapter1.title = “HTML5简介”;
即使构造时不存在的属性也可以在今后随时增加
删除对象属性
delete book.chapter1;
book.chapter1 = null;
遍历所有属性
for(var x in o) …
对于对象o里面的每一个属性都遍历，x是代指
直接用x只能遍历属性名要得到属性值，用o[x]表示
（这里用o.x会出错，因为o没有名称叫x的属性）
<script>var o = new Object();o.name = "John Mike";o.age = 30;o.salary = 300;for(var x in o){alert(x+"="+o[x]);}</script>
构造方法（函数）
构造函数1，不直接制造对象
2，通过this来定义成员
3，没有return
function Rect(w,h)
{
this.width = w;
this.height = h;
this.area = function() {return this.width*this.height;
};
}
var r = new Rect(5,10);
alert(r.area());
只定义了构造函数就可以构造任意数量的对象
原型对象
对象的prototype属性制定了它的原型对象，可以运用.运算符直接读它的原型对象的属性当写这个属性时才在它自己内部产生实际的属性person1.name = “Greg”; // 有赋值写入
/*代码无法运行！！！！！！！！！！*/function Person(){}Person.prototype.name = "Nicholas";Person.prototype.age = 29;Person.prototype.job = "Software Engineer";Person.prototype.sayName = function(){alert(this.name);};var person1 = new Person();person1.sayName();var person2 = new Person();person2.sayName();alert(person1.sayName == person2.sayName); person1.name = "Greg";alert(person1.name);alert(person2.name);
原型问题
person1.friends.push(“Van”);并没有赋值，所以person2.friends的值同样改变
function Person(){}Person.prototype = {constructor:Person,name: "Nicholas",age: 29,job: "Software Engineer",friends : ["Shelby", "Court"],sayName : function() {alert(this.name);}};var person1 = new Person();var person2 = new Person();person1.friends.push("Van");alert(person1.friends);alert(person2.friends);
组合原型和构造方法
function Person(name, age,job){this.name = name;this.age = age;this.job = job;this.friends = ["Shelby", "Court"];}Person.prototype = {constructor : Person,sayName: function() {alert(this.name);}};var person1 = new Person("Nicholas", 29, "Software Engineer");var person2 = new Person("Greg", 27, "Doctor");person1.friends.push("Van");alert(person1.friends);alert(person2.friends);alert(person1.friends == person2.friends); // falsealert(person1.sayName == person2.sayName); //true
浏览器里的JavaScript（window）
全局对象
浏览器的全局对象是window所有全局的变量实际上是window的成员var answer = 12;
alert(window.answer);
document
window.document表示浏览器窗口中的HTML页面document.write()将内容写入页面页面中的元素就是document里的成员// 这里的document和window.document是一样的for(x in document)document.write(x+"<br/>");
HTML中的JavaScript存在方式
在<script></script>标记中放<head>中：定义一些函数，后面可以用
放<body>中：执行动作在<script>的src属性或archive指定的外部文件中在某个HTML标记的事件处理器中
外部JavaScript文件
<script src = "util.js"></script>一个纯粹的代码文件，没有HTML标记事件处理器
<p onMouseOver="alert('hi');"><p onMouseOver="alert('hi');" onMouseOut="alert('bye');">onMouseClick…body事件
onLoadonUnload简单对话框
alert() 直接弹出confirm() 选择是/否prompt() 弹出输入框if( confirm(“还要继续么？”))
{
alert(“继续”);
}
else
{
alert(“再见”);
}
var name = prompt(“你的名字是：”);
alert(“你好”+name);
状态栏
status =defaultStatus =<p onMouseOver="status='网易云学习';"onMouseOut ="status='';">网易云学习</p>
定时器
setlnterval()1，动作
2，时间间隔
<head><meta charset=utf-8><script>count=10;function update() {if(count > 0){status = count--;}}</script></head><body onload='setInterval("update()", 1000)'>
1000的单位是毫秒
window的控制方法
window.open()
w=window.open(“smallwin.html”,“smallwin”,“width=400,height=350,status=yes,resizable=yes”);w.close();w.moveT(0,0);
window.close();
location对象
window.location代表当前文档的URL
alert(location);location=“”;
document
段落paragraph
图片images
表格table
链接links
表单form
Document Object Model
文档对象模型document对象的成员提供了HTML文档的信息访问document的元素
方法1：img的src
<img src="dahai.jpg"><script>alert(document.images[0].src);for(x in document){document.write(x+"<br/>");}</script>
方法2：img的name
<img name="dahai"src="dahai.jpg"><script>alert(document.dahai);for(x in document){document.write(x+"<br/>");}</script>
方法3：p的name
<p name="dancing">一个段落</p><script>alert(document.getElementsByName("dancing"));for(x in document){document.write(x+"<br/>");}</script>
方法4：p的id
<p id="p1" name="dancing">一个段落</p><script>alert(document.getElementsById("p1"));for(x in document){document.write(x+"<br/>");}</script>
document的成员
anchors[]
forms[]
images[]
cookie
title
bgColor
fgColor
linkColor
alinkColor
vlinkColor
图像
image对象的src可以改写以装入一幅新的图片可以创建Image()对象来提前装载图片onLoad事件表明图片装载完成查看大小：alert(document.dahai.height);
修改大小：document.dahai.height=100;
<body onLoad="setInterval('show()',200)"><img name="anm" src="0.jpg" width=300></img><script>var images = new Array(6);var index = 1;for(var i=0; i<6; i++){images[i]=new Image();images[i].src=i+".jpg";}function show(){document.anm.src=images[index].src;index=(index+1)%6;}</script>
