HTML
Html介绍
（1）什么是html，发展历史
制作网页的标记语言.
Hypertext Markup Language的英文缩写,即超文本标记语言.
是一种标记语言,不需要编译,直接由浏览器执行.
是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.
是大小写不敏感的.
HTML是由W3C的维护的(http://www.w3school.com.cn/)
1997年, HTML4.0成为W3C标准
（2）w3c、web标准
结构：html,xhtml,xml
表现：CSS
行为：W3C DOM，ECMAScript
（3）xhtml与文档类型声明
EXtensible Hypertext Markup Language，html-->xml 过渡。
常见的文档类型声明
XHTML 过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 严格型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML严格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML松散型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（4）主要浏览器
IE浏览器是用户数量最多的浏览器，超过80％的用户使用IE.
Firefox
由Mozilla基金会所开发，市场使用率第二。
Navigator
Netscape通信公司开发，是浏览器的最早的创始者和先驱者。
Google Chrome
Google在2008年新推出的浏览器
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
（1）meta
http-equiv="content-type"告知浏览器HTML页面的编码方式。
http-equiv="refresh",指定页面刷新的频率。
name="keywords"，为搜索引擎指定关键字.
CSS
（1）什么是css
Cascading Style Sheets(层叠样式表)。标准网页设计中CSS负责网页内容的表现。
（2）css的基本语法
selector {property:value; property:value; …}
（3）css选择器
简单选择器
例如: h1{color:blue} 针对所有的h1元素
类选择器
例如:.msg {color:red} 针对class属性为msg的元素.
p.msg {color: blue} 只针对class属性为msg的p元素.
ID选择器
例如:#err {background-color:#blue} 针对id属性为err的元素.
派生选择器
例如:
#content p {color:blue}
针对id是content元素中的p元素.
li span { font-color: red}针对li中的span元素
（4）选择器分组
可以对选择器进行组合, 这些选择器就可以共享样式,例如:
h1,h2,h3 {color:green}
（5）css继承
子元素将继承父元素的样式而不需要另加指定
（6）样式表的引入与优先级
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
（7）css定位
diplay属性
display：none 不显示
display：block 块级元素
display: inline 行内元素
position属性
static 默认的选项, 按照浏览器默认的方式摆放。
absolute 相对于父元素, 按top和left值指定的值摆放。
relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移
（8）盒模型
内容(content)、填充(padding)、边框(border)、边界(margin)
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也
具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西
（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆
放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。
内边距相关CSS属性
例如：
h1 {padding: 10px 20px 30px 20%;}
相当于
h1 {
padding-top: 10px;
padding-right:20px;
padding-bottom:30px;
padding-left: 20%;
}
其中padding属性的书写顺序为从top开始顺时针旋转，既top、right、bottom、left；设置为百分数意为相对于
父元素的width的百分比。
外边距相关CSS属性
例如：
h1 {margin : 10px 0px 15px 5px} 和padding类似
p {margin : 10%} 相对于父元素的width
body{margin: 0}
边框相关CSS属性
border-style 针对所有边框的样式
border-width 针对所有边框设置宽度
border-color针对所有边框中可见部分的颜色。
也可这样设置：
border:宽度、样式（ashed/solid）、颜色
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
Form
<form action = "" method = "post" name = "frm">
//action = "" 提交目的地
//method 显示类型 post 隐式 get 显式
<input type = "text" name = "user" size = "20" maxlength = "30" value = ""> //文本框
<input type = "password" name = "pwd"> //密码框
<input type = "radio" name = "sex" value = "男" checked> //checked 默认被选中
<input type = "radio" name = "sex" value = "女"> //单选框 只要name相同就是同一组，同组中只能有一个被选中
<input type = "checkbox" name = "like" value = "体育" checked>
<input type = "checkbox" name = "like" value = "音乐">
<input type = "checkbox" name = "like" value = "美术"> //多选框 只要name相同就是同一组，一组只能可以选择多个
<input type = "file" name = "photo"> //文本浏览框
<input type = "button" value = "登陆" name = "login"> //按钮
<input type = "submit" value = "提交" name = "submit"> //提交按钮 提交到 action 所指向的地方
<input type = "reset" value = "重置" name = "reset"> //重置按钮 重置表单所有的信息框
<input type = "hidden" name = "hidden"> //隐藏空间 看不到的按钮，长用来当页面中间变量使用 可以给它赋值 value = ""
<select name = "bithday"> //下拉列表框
<option value = "1990" selected>1990</option>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993">1993</option>
</select>
<textarea cols = "40" rows = "6" name = "txta"></textarea> //文本域
</form>
<table border = "1" align = "center" bgcolor = "red" bordercolor = "yellow">
//border 边框样式 align 对齐方式 left/center/right bgcolor 背景颜色 bordercolor 边框颜色
<tr>
<td colspan = "2" rowspan = "2">天晴数码</td> //colspan 水平跨越 rowspan 垂直跨越
</tr>
</table>
Style
<style type = "text/css">
.x{
font-size : 50px; //字的大小
font-weight : 800; //字的粗细（500~900）
font-family: "楷体_GB2312"; //字的样式
font-style : italic; //normal 正常 italic 斜体
color ：red; //字的颜色
text-align : center; //字的对齐方式 left/center/right
text-decoration : none; //划线 none/underline/overline/linethrough 正常/下划线/上划线/删除线
line-height : 150px; //行间距
letter-spacing : 50px; //字间距
background-color : red; //背景颜色
border : 1px solid red; //边框粗细为1px 边框形式为直线 边框颜色为 红色
}
</style>
<style type="text/css">
a:link { text-decoration:none;color:#FFCC33} //link 正常没有被访问过的链接
a:visited { text-decoration:none;color:#FFCC33} //visited 已经访问过的链接
a:active { text-decoration:underline;color:#FF6600} //active 正在点击的链接
a:hover { text-decoration:blink;color:#CC33CC} //hover 鼠标选中的链接
</style>
页面分割
<frameset cols = "20%,*" frameborder = yes/no border = "40" bordercolor = "red">
//分割方式为纵向分割 rows为横向分割 frameborder有无边限 border边框粗细0~100 bordercolor边框颜色
<frame src = "1.html" scrolling = "auto" noresize name = "right">
//scrolling页面有无滚动条 auto自动 yes有 no无 noresize 固定边框
<frame src = "2.html">
</frameset>
<a href = "a.html" target = "b.html">超级连接</a> //连接到a.html 在 b.html 页显示
<b>加粗字体bold</b>
<i>斜体字italic</i>
<u>下画线字underlined</u>
<s>带删除线文字strikethrough</s>
<sup>上标字superscript</sup>
<sub>下标字subscript</sub>
<marquee direction="right" behavior="alternate" width="600" scrollamount="3">shmilcy</marquee>
//marquee 滚动标签 direction 决定滚动方向 behavior 决定滚动方式 width /height 决定滚动空间 scrollamount 决定滚动速度
this.stop(); 停 this.start();运动
<font color="#0066cc" size = "6" face="楷体_GB2312">See how much I love you</font>
<hr size = "2" width ="100%" color="#00ccff"></hr>
<img src = "a.jps"> //插入图片
<embed src = "" autostart = "false" loop = "2"> //插入视频，autostart 为是否自动播放 true/false loop 为播放次数
（1）什么是html，发展历史
制作网页的标记语言.
Hypertext Markup Language的英文缩写,即超文本标记语言.
是一种标记语言,不需要编译,直接由浏览器执行.
是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.
是大小写不敏感的.
HTML是由W3C的维护的(http://www.w3school.com.cn/)
1997年, HTML4.0成为W3C标准
（2）w3c、web标准
结构：html,xhtml,xml
表现：CSS
行为：W3C DOM，ECMAScript
（3）xhtml与文档类型声明
EXtensible Hypertext Markup Language，html-->xml 过渡。
常见的文档类型声明
XHTML 过渡型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 严格型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML严格型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML松散型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（4）主要浏览器
IE浏览器是用户数量最多的浏览器，超过80％的用户使用IE.
Firefox
由Mozilla基金会所开发，市场使用率第二。
Navigator
Netscape通信公司开发，是浏览器的最早的创始者和先驱者。
Google Chrome
Google在2008年新推出的浏览器
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
（1）meta
http-equiv="content-type"告知浏览器HTML页面的编码方式。
http-equiv="refresh",指定页面刷新的频率。
name="keywords"，为搜索引擎指定关键字.
CSS
（1）什么是css
Cascading Style Sheets(层叠样式表)。标准网页设计中CSS负责网页内容的表现。
（2）css的基本语法
selector {property:value; property:value; …}
（3）css选择器
简单选择器
例如: h1{color:blue} 针对所有的h1元素
类选择器
例如:.msg {color:red} 针对class属性为msg的元素.
p.msg {color: blue} 只针对class属性为msg的p元素.
ID选择器
例如:#err {background-color:#blue} 针对id属性为err的元素.
派生选择器
例如:
#content p {color:blue}
针对id是content元素中的p元素.
li span { font-color: red}针对li中的span元素
（4）选择器分组
可以对选择器进行组合, 这些选择器就可以共享样式,例如:
h1,h2,h3 {color:green}
（5）css继承
子元素将继承父元素的样式而不需要另加指定
（6）样式表的引入与优先级
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
（7）css定位
diplay属性
display：none 不显示
display：block 块级元素
display: inline 行内元素
position属性
static 默认的选项, 按照浏览器默认的方式摆放。
absolute 相对于父元素, 按top和left值指定的值摆放。
relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移
（8）盒模型
内容(content)、填充(padding)、边框(border)、边界(margin)
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也
具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西
（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆
放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。
内边距相关CSS属性
例如：
h1 {padding: 10px 20px 30px 20%;}
相当于
h1 {
padding-top: 10px;
padding-right:20px;
padding-bottom:30px;
padding-left: 20%;
}
其中padding属性的书写顺序为从top开始顺时针旋转，既top、right、bottom、left；设置为百分数意为相对于
父元素的width的百分比。
外边距相关CSS属性
例如：
h1 {margin : 10px 0px 15px 5px} 和padding类似
p {margin : 10%} 相对于父元素的width
body{margin: 0}
边框相关CSS属性
border-style 针对所有边框的样式
border-width 针对所有边框设置宽度
border-color针对所有边框中可见部分的颜色。
也可这样设置：
border:宽度、样式（ashed/solid）、颜色
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
Form
<form action = "" method = "post" name = "frm">
//action = "" 提交目的地
//method 显示类型 post 隐式 get 显式
<input type = "text" name = "user" size = "20" maxlength = "30" value = ""> //文本框
<input type = "password" name = "pwd"> //密码框
<input type = "radio" name = "sex" value = "男" checked> //checked 默认被选中
<input type = "radio" name = "sex" value = "女"> //单选框 只要name相同就是同一组，同组中只能有一个被选中
<input type = "checkbox" name = "like" value = "体育" checked>
<input type = "checkbox" name = "like" value = "音乐">
<input type = "checkbox" name = "like" value = "美术"> //多选框 只要name相同就是同一组，一组只能可以选择多个
<input type = "file" name = "photo"> //文本浏览框
<input type = "button" value = "登陆" name = "login"> //按钮
<input type = "submit" value = "提交" name = "submit"> //提交按钮 提交到 action 所指向的地方
<input type = "reset" value = "重置" name = "reset"> //重置按钮 重置表单所有的信息框
<input type = "hidden" name = "hidden"> //隐藏空间 看不到的按钮，长用来当页面中间变量使用 可以给它赋值 value = ""
<select name = "bithday"> //下拉列表框
<option value = "1990" selected>1990</option>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993">1993</option>
</select>
<textarea cols = "40" rows = "6" name = "txta"></textarea> //文本域
</form>
<table border = "1" align = "center" bgcolor = "red" bordercolor = "yellow">
//border 边框样式 align 对齐方式 left/center/right bgcolor 背景颜色 bordercolor 边框颜色
<tr>
<td colspan = "2" rowspan = "2">天晴数码</td> //colspan 水平跨越 rowspan 垂直跨越
</tr>
</table>
Style
<style type = "text/css">
.x{
font-size : 50px; //字的大小
font-weight : 800; //字的粗细（500~900）
font-family: "楷体_GB2312"; //字的样式
font-style : italic; //normal 正常 italic 斜体
color ：red; //字的颜色
text-align : center; //字的对齐方式 left/center/right
text-decoration : none; //划线 none/underline/overline/linethrough 正常/下划线/上划线/删除线
line-height : 150px; //行间距
letter-spacing : 50px; //字间距
background-color : red; //背景颜色
border : 1px solid red; //边框粗细为1px 边框形式为直线 边框颜色为 红色
}
</style>
<style type="text/css">
a:link { text-decoration:none;color:#FFCC33} //link 正常没有被访问过的链接
a:visited { text-decoration:none;color:#FFCC33} //visited 已经访问过的链接
a:active { text-decoration:underline;color:#FF6600} //active 正在点击的链接
a:hover { text-decoration:blink;color:#CC33CC} //hover 鼠标选中的链接
</style>
页面分割
<frameset cols = "20%,*" frameborder = yes/no border = "40" bordercolor = "red">
//分割方式为纵向分割 rows为横向分割 frameborder有无边限 border边框粗细0~100 bordercolor边框颜色
<frame src = "1.html" scrolling = "auto" noresize name = "right">
//scrolling页面有无滚动条 auto自动 yes有 no无 noresize 固定边框
<frame src = "2.html">
</frameset>
<a href = "a.html" target = "b.html">超级连接</a> //连接到a.html 在 b.html 页显示
<b>加粗字体bold</b>
<i>斜体字italic</i>
<u>下画线字underlined</u>
<s>带删除线文字strikethrough</s>
<sup>上标字superscript</sup>
<sub>下标字subscript</sub>
<marquee direction="right" behavior="alternate" width="600" scrollamount="3">shmilcy</marquee>
//marquee 滚动标签 direction 决定滚动方向 behavior 决定滚动方式 width /height 决定滚动空间 scrollamount 决定滚动速度
this.stop(); 停 this.start();运动
<font color="#0066cc" size = "6" face="楷体_GB2312">See how much I love you</font>
<hr size = "2" width ="100%" color="#00ccff"></hr>
<img src = "a.jps"> //插入图片
<embed src = "" autostart = "false" loop = "2"> //插入视频，autostart 为是否自动播放 true/false loop 为播放次数