HTML历史
了解HTML的历史和W3C；了解HTML和XHTML的区别；了解浏览器市场中的主流产品。
HTML的发展历史
1990年, Tim Berners-Lee 创立了HTML.
1995年, HTML2.0成为RFC(RFC 1866).
1997年, HTML4.0成为W3C标准.
… … …
HTML与XHTML的关系
XHTML(EXtensible HyperText Markup Language), 与 HTML4.0几乎是相同, 目标是取代 HTML.
HTML Day 01
2009/2/16
XHTML 可以看成是使用XML规范重新定义了的 HTML, 是更严格更纯净的 HTML版本.
几种XHTML和HTML文档声明
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">
主流的浏览器
IE
IE浏览器是用户数量最多的浏览器，超过80％的用户使用IE.
Firefox
由Mozilla基金会(http://www.mozilla.com/)与众多志愿者所开发，是目前世界浏览器市场使用率第二的浏览器。
Navigator
Netscape通信公司开发的网络客户器。它虽是一个商业软件，但它也提供了可在Unix，VMS，Macs和Microsoft Windows等操作系统上运行的免费版本。是浏览器的最早的创始者和先驱者（远远早于微软）。
Opera
Opera Web Browser是由Opera Software ASA出品的一款轻量级网络浏览器。
Google Chrome
Google在2008年新推出的浏览器。
了解HTML基本文档结构以及HTML与CSS的关系。
HTML基本文档结构:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=utf-8"/>
<title>浏览器标题</title>
<link href="1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>无题</h3>
<p>
一望二三里<br/>烟村四五家<br/>亭台六七座<br/>八九十枝花
</p>
</body>
</html>
CSS的作用
CSS意为 层叠样式表(Cascading Style Sheets)用于定义HTML元素的位置和样式。CSS样式定义通常存储在单独的文件中, 可以极大提高工作效率。
记住几个head以及几个常用的meta
base
用于指定页面中所有链接的基准 URL，例如 ：
<base href="http://hostname/root/" />
link
用于引用其他文档, 例如:
<link href="1.css“ rel="stylesheet“ type="text/css"/>
meta
• http-equiv="content-type"告知浏览器HTML页面的编码方式（HTML的实际编码方式因与之符合）。例如：
<meta http-equiv="content-type"
content="text/html; charset=utf-8">
• http-equiv="refresh"
指定页面刷新的频率，例如：
<meta http-equiv="refresh" content="3">
<meta http-equiv="refresh" content="3;
url=http://www.advocar.com">
• name="keywords"
为搜索引擎指定关键字，例如：
• <meta name="keywords" content=“java,php,oracle">
(更多内容参见《The Web Programmer's Desk Reference》)
掌握CSS基本语法和CSS选择器
CSS基本语法
selector {property:value; property:value; …}
• 选择器分组
可以对选择器进行组合, 这些选择器就可以共享样式,例如:
h1,h2,h3 {color:green}
• CSS继承
子元素将继承父元素的样式而不需要另加指定.
• 样式表方式
样式表允许以多种方式规定样式信息。所有的样式会根据下面的规则层叠于一个新的虚拟样式表中（优先级有低到高）。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 <head> 标签内部）
4. 内联样式（在 HTML 元素内部）
几种CSS选择器(selector)
• 简单选择器（Simple Selectors） 例如:
h1{color:blue} 针对所有的h1元素
• 类选择器（Class Selectors ）例如:
.info {color:red} 针对class属性为info的元素.
p.colored {color: blue} 只针对class属性为info的p元素.
• ID选择器（ID Selectors） 例如:
#wrap {background-color:#blue} 针对id属性为wrap的元素.
• 派生选择器（Contextual Selectors ）例如:
#content p {color:blue} 针对id是content元素中的p元素.
li strong { font-style: italic}针对li中的strong元素
掌握CSS定位技术
块内元素和行内元素
div、p 、h1等元素常常被称为“块级元素”（需要另开始一行）； span、 strong 等元素称为“行内元素” （不需要另开始一行）。
可以通过样式属性display改变此特性：
• display：none 不显示
• display：block 块级元素
• display: inline 行内元素
position属性
• static 默认的选项, 按照浏览器默认的方式摆放文档块。
• absolute 相对于父元素, 按top和left值指定的值摆放。
• relative 在按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移。
position定位实例（参见实例文档）
了解CSS内边距、外边距、边框等特性
文档框模型
内边距相关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-bottom
border-bottom-color
border-bottom-style
border-bottom-width
… … …
必须熟练的使用链接
<a>元素(锚)做链接
<a href="http://java.sun.com">Sun</a>
target属性确定链接页面显示的窗口
_blank(新窗口), _self(原窗口), _parent, _top
文档内导航
<a name="top"/> … … … <a href="#top">Top</a>
发送邮件
<a href="mailto:whatisjava@163.com?subject=Hello">
发送邮件</a>
图片作为链接
<a href="#">
<img border="0" src="img/next.gif" />
</a>
图片区域产生链接
<img src="nav.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>
针对于a的伪样式，可以指定a元素处于不同状态时的样式
a:link { color: red} 没有访问时
a:visited { color: blue} 访问后
a:active { color: lime} 鼠标点击但还没有放开时
a:hover { color: aqua} 鼠标指向时
样式实例
#d1 a:link {
text-decoration:none;
color:#6600FF;
}
#d1 a:hover {
text-decoration:underline;
color:#FF0000;
}
掌握HTML列表和表格基本操作
了解有序号和无序号列表的使用
• ul元素用于创建无号序列表
• ol元素用于创建有序号列表
• li元素表示列表项目
例如：
<ul>
<li>HTML</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>JavaScript</li>
</ol>
自定义编号的列表
<ul>
<li type="square">内容</li>
<ol>
<li>HTML</li>
<li>JavaScript</li>
</ol>
<li type="square">附录</li>
<ol>
<li type="i">HTML和CSS参考</li>
<li type="i">JavaScript参考</li>
</ol>
</ul>
基本表格元素
• table元素定义表格
• tr元素定义行
• td元素单元格
例如：
<table width="80%" border="1">
<tr>
<td width="60%">Name</td>
<td>age</td>
</tr>
<tr>
<td>Java</td>
<td>20</td>
</tr>
</table>
单元格间隔和单元格填充
table的cellspacing属性定义单元格之间的间距.
table的cellpadding属性定义单元格边界与单元格中内容的间距.
单元格的对齐方式
• align属性用于指明横向对齐方式：left center right
• valign属性纵向对齐方式：top middle bottom
单元格的合并
td的colspan用于指定单元格所占的列数, 用于横向合并单元格.
td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.
复杂表格实例：
<table border="1" width="60%">
<tr>
<td colspan="3" align="center">单元格一</td>
</tr>
<tr>
<td rowspan=“2" align="left" valign="middle">单元格二
</td>
<td align="right">单元格三</td>
<td align="right">单元格四</td>
</tr>
<tr align="right">
<td>单元格五</td>
<td>单元格六</td>
</tr>
</table>
了解HTTP GET和POST请求及响应的协议格式
GET请求
GET /form.html HTTP/1.1
… … …
Host: 192.168.5.124:8080
Connection: Keep-Alive
POST请求
POST /2 HTTP/1.1
… … …
Host: 192.168.5.124:8080
Content-Length: 35
Connection: Keep-Alive
Cache-Control: no-cache
name=whatisjava&password=whatisjava
响应
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
ETag: W/"597-1234716187571"
Last-Modified: Sun, 15 Feb 2009 16:43:07 GMT
Content-Type: text/html
Content-Length: 597
Date: Sun, 15 Feb 2009 16:43:19 GMT
<html>
… …
<body>
<form id="form1" name="form1" method="post" action="2">
… … …
<input type="submit" value="Submit"/>
</form>
</body>
</html>
掌握表单的基本原理。掌握GET和POST提交方式及其区别
表单的基本原理
form元素:
<form action=“url” method=“post”>
<input type=“text” name=“username”/>
<input type=“password” name=“password”/>
<input type=“submit” value=“Submit”/>
</form>
GET和POST方式提交数据及其区别
GET请求被设计用于请求资源，但可以通过请求参数的方式提交基于文本的数据:
http://...?username=“java”&password=“whatisjava”
由于请求参数作为地址的一部分受到浏览器的限制（例如：IE为2K个字符），因此GET提交的数据量不能过大。
POST请求被用于设计向服务器提交数据：
POST /uri HTTP/1.1 … … … Connection: Keep-Alive
username=java&password=whatisjava
提交的数据量会受到服务器的限制，但比GET方式会大很多; 另外POST方式还可以用于提交非文本数据(例如文件上传).
对于中文的处理
通过“%16进制编码的方式”表示, 例如:如果页面的编码方式为UTF-8,提交中文字符 “你好”, 浏览器提交对应内容为:
username=%E4%BD%A0%E5%A5%BD(E4BDA0和E5A5BD分别为“你” 和“好”的UTF-8编码的十六进制形式).
熟练掌握常用表单元素
Text Field
<input type="text" name="username" value="default"
size=5 maxlength="5" />
<input type=“password" name=“pwd"
value="default" maxlength="5" />
Text Area
<textarea name="content" cols="10" rows="5"> default
</textarea>
Check Box
<input type="checkbox" name="lang" value="zh“
checked="checked"/>中文
<input type="checkbox" name="lang" value="en"/> English
Radio Button
<input type="radio" name="sex"
value="male" checked="checked"/>Male
<input type="radio" name="sex" value="female" />Female
List/Menu
<select name="from" multiple="multiple">
<option value="beijing" selected="selected">北京</option>
<option value="shanghai">上海</option>
</select>
Button
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="普通按钮"/>
<button type="submit"><img src="img/next.jpg"></button>
Hidden
<input type="hidden" name="key" value="value"/>
3905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
