今天上课学习了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"/>
转载于:https://blog.51cto.com/2402766/506867