今天上课学习了HTML老师给了一些笔记，大部分都是老师课上讲解的内容，所以我也没有记什么笔记，只要把老师的笔记看好就可以了，写在这里就当是复习了，希望对我和大家都有帮助。

       HTML  Day  01

                                                                         2011年3月4日 21:47:39
 
 
了解 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.  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
用于引用其他文档, 例如:
   <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"/>