了解html的常识
web:
在适用Internet、维护工作量等方面，B/S比C/S要强得多的多；但在运行速度、数据安全、
人机交互等方面，B/S远不如C/S。综合起来可以发现，凡是C/S的强项，便是B/S的弱项，反之亦然
1、了解一些html基本常识
（1）什么是html，发展历史
制作网页的标记语言.
Hypertext Markup Language的英文缩写,即超文本标记语言.
是一种标记语言,不需要编译,直接由浏览器执行.
是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.
是大小写不敏感的.
HTML是由W3C的维护的(http://www.w3school.com.cn/)
1990年, Tim Berners-Lee 创立了HTML,web之父
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年新推出的浏览器
2、掌握html基本结构及主要标记的使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--
<meta http-equiv="refresh" content="3;url=http://bbs.tarena.com.cn">
<meta http-equiv="refresh" content="3">
-->
<title>html01</title>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<h1>欢迎来到达内</h1>
<p>欢迎大家来到<a href="http://bbs.tarena.com.cn">达内</a></p>
<h2>在这里，你可以</h2>
<ul>
<li>学java</li>
<li>有机会找到人生的另外一半</li>
</ul>
</body>
</html>
（1）meta
http-equiv="content-type"告知浏览器HTML页面的编码方式。
http-equiv="refresh",指定页面刷新的频率。
name="keywords"，为搜索引擎指定关键字，例如：
<meta name="keywords" content=“tarena","java">
（2）link
（3）列表
ul元素用于创建无号序列表
ol元素用于创建有序号列表
li元素表示列表项目
（4）块级元素与行内元素
div、p 、h1等元素常常被称为“块级元素”（需要另开始一行）；
span、 strong 等元素称为“行内元素” （不需要另开始一行）
3、掌握链接的使用
（1）基本语法
<a href="http://www.sina.com" target="">sina</a>
target属性确定链接页面显示的窗口
_blank(新窗口), _self(原窗口)
（2）文档内导航
<a name="top"/> … … … <a href="#top">to top</a>
（3）发送邮件
<a href="mailto:[email protected]?subject=hello">发送邮件</a>
（4）图片作为链接
<a href="#"><img border="0" src="img/dl.gif" /></a>
（5）图片区域产生链接
<img src="index04.jpg" width="500" height="500" border="0" usemap="#m1" />
<map name="m1" id="m1">
<area shape="rect" coords="…" href="#" />
<area shape="circle" coords="…" href="#" />
<area shape="poly" coords="…" href="#" />
</map>
当shape="rect"（矩形）时，coords的值为左上角和右下角的坐标值; 当shape="poly"（多边形）时，
为各顶点值; 当shape="circle"（圆形）时，为圆心坐 标值和半径值。 coords值依照图片大小的不同
和所希望链接区域的不同而有所不同
</map>
（6）链接中的伪样式
a:link { color: red} 没有访问时
a:visited { color: blue} 访问后
a:active { color: lime} 鼠标点击但还没有放开时
a:hover { color: aqua} 鼠标指向时
4、掌握表格的使用
table元素定义表格
tr元素定义行
td元素单元格
单元格间隔和单元格填充
table的cellspacing属性定义单元格之间的间距.
table的cellpadding属性定义单元格边界与单元格中内容的间距.
单元格的对齐方式
align属性用于指明横向对齐方式：left center right
valign属性纵向对齐方式：top middle bottom
单元格的合并
td的colspan用于指定单元格所占的列数, 用于横向合并单元格.
td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.
5、熟练掌握表单的使用
表单的作用
常用属性
action
method
input
text checkbox radio submit reset image button
select textarea
6、了解css，掌握一些比较核心（程序员应该掌握）的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
7、框架
<html>
<head>
<frameset cols="50%,*" border="1">
<frame src="left.html" name="f1" noresize="true" />
<frame src="right.html" name="f2" marginwidth="50" marginheight="60" />
</frameset>
</head>
</html>
在适用Internet、维护工作量等方面，B/S比C/S要强得多的多；但在运行速度、数据安全、
人机交互等方面，B/S远不如C/S。综合起来可以发现，凡是C/S的强项，便是B/S的弱项，反之亦然
1、了解一些html基本常识
（1）什么是html，发展历史
制作网页的标记语言.
Hypertext Markup Language的英文缩写,即超文本标记语言.
是一种标记语言,不需要编译,直接由浏览器执行.
是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.
是大小写不敏感的.
HTML是由W3C的维护的(http://www.w3school.com.cn/)
1990年, Tim Berners-Lee 创立了HTML,web之父
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年新推出的浏览器
2、掌握html基本结构及主要标记的使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<!--
<meta http-equiv="refresh" content="3;url=http://bbs.tarena.com.cn">
<meta http-equiv="refresh" content="3">
-->
<title>html01</title>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<h1>欢迎来到达内</h1>
<p>欢迎大家来到<a href="http://bbs.tarena.com.cn">达内</a></p>
<h2>在这里，你可以</h2>
<ul>
<li>学java</li>
<li>有机会找到人生的另外一半</li>
</ul>
</body>
</html>
（1）meta
http-equiv="content-type"告知浏览器HTML页面的编码方式。
http-equiv="refresh",指定页面刷新的频率。
name="keywords"，为搜索引擎指定关键字，例如：
<meta name="keywords" content=“tarena","java">
（2）link
（3）列表
ul元素用于创建无号序列表
ol元素用于创建有序号列表
li元素表示列表项目
（4）块级元素与行内元素
div、p 、h1等元素常常被称为“块级元素”（需要另开始一行）；
span、 strong 等元素称为“行内元素” （不需要另开始一行）
3、掌握链接的使用
（1）基本语法
<a href="http://www.sina.com" target="">sina</a>
target属性确定链接页面显示的窗口
_blank(新窗口), _self(原窗口)
（2）文档内导航
<a name="top"/> … … … <a href="#top">to top</a>
（3）发送邮件
<a href="mailto:[email protected]?subject=hello">发送邮件</a>
（4）图片作为链接
<a href="#"><img border="0" src="img/dl.gif" /></a>
（5）图片区域产生链接
<img src="index04.jpg" width="500" height="500" border="0" usemap="#m1" />
<map name="m1" id="m1">
<area shape="rect" coords="…" href="#" />
<area shape="circle" coords="…" href="#" />
<area shape="poly" coords="…" href="#" />
</map>
当shape="rect"（矩形）时，coords的值为左上角和右下角的坐标值; 当shape="poly"（多边形）时，
为各顶点值; 当shape="circle"（圆形）时，为圆心坐 标值和半径值。 coords值依照图片大小的不同
和所希望链接区域的不同而有所不同
</map>
（6）链接中的伪样式
a:link { color: red} 没有访问时
a:visited { color: blue} 访问后
a:active { color: lime} 鼠标点击但还没有放开时
a:hover { color: aqua} 鼠标指向时
4、掌握表格的使用
table元素定义表格
tr元素定义行
td元素单元格
单元格间隔和单元格填充
table的cellspacing属性定义单元格之间的间距.
table的cellpadding属性定义单元格边界与单元格中内容的间距.
单元格的对齐方式
align属性用于指明横向对齐方式：left center right
valign属性纵向对齐方式：top middle bottom
单元格的合并
td的colspan用于指定单元格所占的列数, 用于横向合并单元格.
td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.
5、熟练掌握表单的使用
表单的作用
常用属性
action
method
input
text checkbox radio submit reset image button
select textarea
6、了解css，掌握一些比较核心（程序员应该掌握）的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
7、框架
<html>
<head>
<frameset cols="50%,*" border="1">
<frame src="left.html" name="f1" noresize="true" />
<frame src="right.html" name="f2" marginwidth="50" marginheight="60" />
</frameset>
</head>
</html>