/contents listing[目录表]:
1.html简介
2.html属性
3.html标签
4.html事件
5.html消息
/******************************************************
1.html简介
html简介
------------
文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。
在WWW上的一个超媒体文档称之为一个页面(page)。
作为一个组织或个人在万维网上开始点的页面称为主页Homepage,
或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接)。
在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。
Web页面也就是通常所说的网页,在本书中不作区分。
HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件,通过在文本文件中添加标记符,
可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,
对书写出错的标记将不指出其错误,且不停止其解释执行过程,
编制者只能通过显示效果来分析出错原因和出错部位。
但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
HTML之所以称为超文本标记语言,是因为文本中包含了所“超级链接”点。
所谓超级链接,就是一种URL指针,通过激活(点击)它,可使浏览器方便地获取新的网页。
这也是HTML获得广泛应用的最重要的原因之一。
由此可见,网页的本质就是HTML,通过结合使用其他的Web技术(脚本语言、CGI、组件等),
可以创造出功能强大的网页。
因而,HTML是Web编程的基础,也就是说万维网是建立在超文本基础之上的。
html结构
------------
<html>
<head>
<title>,<base>,<link>,<isindex>,<meta>
</head>
<body>
显示内容写在这里面
<form>
表单内容...
</form>
<table>
表内容...
</table>
</body>
</html>
******************************************************
2.html属性
HTML 和 XHTML 标签支持的标准属性
核心属性 (Core Attributes)
--------------------------------------
以下标签不提供下面的属性:
base、head、html、meta、param、script、style 、 title 元素。
class :规定元素的类名(classname)
id :规定元素的唯一 id
style :规定元素的行内样式(inline style)
title :规定元素的额外信息(可在工具提示中显示)
style属性详解:
格式:style="css样式字符串"
样式属性:
center:居中;font:字体名称;
basefont:字体s,strike:删除线,u:下划线
align:文本对齐方式,
bgcolor:背景色;color:文本颜色
实例:<p style="background-color:green">This is a paragraph.</p>
语言属性 (Language Attributes)
--------------------------------------
以下标签不提供下面的属性:
base、br、frame、frameset、hr、iframe、param 以及 script 元素。
dir :设置元素中内容的文本方向。
lang :设置元素中内容的语言代码
键盘属性 (Keyboard Attributes)
--------------------------------------
accesskey:设置访问元素的键盘快捷键。
tabindex :设置元素的 Tab 键控制次序。
******************************************************
3.html标签
--------------------------------------
多/单页面
frameset基本语法
<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>
在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。
frameset各窗口的尺寸设置
<frameset cols=#>
纵向排列多个窗口:
<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
横向排列多个窗口:
<frameset rows=25%,25%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>
纵横排列多个窗口:
<frameset cols=20%,*>
<frame src="A.html">
<frameset rows=40%,*>
<frame src="B.html">
<frame src="C.html">
</frameset>
</frameset>
窗口引用:
<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口
文档类型:<!DOCTYPE>
标题:<h1> to <h6>
实例:<h1>This is a heading</h1>
段落:<p>
实例:<p>This is a paragraph.</p>
链接:<a>
实例:<a href="http://blog.csdn.net/chinayaosir">This is a link</a>
换行:<br>
水平线:<hr>
图像:<img>
实例:<img src="abc.jpg" width="104" height="142" />
注释:<!--...-->
--------------------------------------
表单:
表单语法:
<form action="url" method=*>
...
<input type=typename />
...
</form>
typename=text,password,checkbox,radio,submit,reset,image,hidden
表单控件:
文本框:(Text fields)
功能:当用户要在表单中键入字母、数字等内容时,就会用到文本域。
例子:<form>First name: <input type="text" name="firstname" /></form>
密码框:(password fields)
功能:当用户要在表单中输入密码到文本域。
例子:<form>password: <input type="password" name="keypwd" /></form>
单选按钮(Radio Buttons)
功能:当用户从若干给定的的选择中选取其一时,就会用到单选框。
例子:<form><input type="radio" name="sex" value="male" /> Male</form>
复选框(Checkboxes)
功能:当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。
例子:<form><input type="checkbox" name="bike" />a bike </form>
确认按钮(submit button)
功能:当用户单击确认按钮时,表单的内容会被传送到另一个文件。
例子:
<form name="input" action="form_action_user.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
复拉按钮(reset button)
功能:当用户单击确认按钮时,表单的内容会被传送到另一个文件。
例子:
<form name="input" action="form_action_user.asp" method="get">
Username: <input type="text" name="user" />
<input type="reset" value="reset" />
</form>
按钮(button)
功能:在button 元素内部,您可以放置内容,比如文本或图像。
例子:<form> <input type="button" value="save"> </form>
隐藏元素(hidden)
功能:在网页中放置一个隐藏的元素。
例子:<form> <input type="hidder" name="param" value="test"> </form>
图像对象(image)
格式:<input type=image src=url>
功能:用图像对文字表达更加形象
例子:<form ><input type=image name=face src=f.gif></form>
--------------------------------------
其它控件对象:
标签文字(label)
功能:显示控件的标签
例子:<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
多行文本框(textarea)
功能:为了保存多行文字
例子:<form > <textarea name=comment rows=5 cols=60> </textarea> </form>
下拉列表(select)
功能:直拉从下拉列表中选择预设值
格式:<select name=*> <option> ... </select>
其它选项:<option selected> 和<option value=**>
例子:<form>
<select name=fruits>
<option>Banana
<option selected>Apple
<option value=My_Favorite>Orange
</select><p>
<input type=submit><input type=reset>
</form>
--------------------------------------
列表
无序列表:(unordered lists)
格式:<ul><li>...</ul>
例子:<ul> <li>Today <li>Tommorow</ul>
有序列表:(ordered lists)
格式:<ol><li>...</ol>
例子:<ol> <li>Today <li>Tommorow</ul>
定义列表(Definition lists)
格式:<dl><dt>...<dd>...</dl>
例子:<dl> <dt>Today <dd>Today is yesterday. <dt>Tomorrow <dd>Tomorrow is today. </dl>
--------------------------------------
表格
表格的基本语法
<table>...</table> - 定义表格
<tr>...</tr>定义表行
<th>...</th> 定义表头
<td>...</td> 定义表元(表格的具体数据)
跨多行、多列的表元
<table border>
<tr><th colspan=3> Morning Menu</th><tr><th>Food</th> <th>Drink</th> <th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th><th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
表格边框设置:
<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
表格大小设置:
<table border width=170 height=100>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
表元间隙设置:
<table border cellspacing=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
表元内部空白设置:
<table border cellpadding=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
表格内文字的对齐/布局
<table border width=160>
<tr> <th>Food</th><th>Drink</th><th>Sweet</th><tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</table>
--------------------------------------
文本格式化
粗体:<b>
斜体:<i>
强调:<em>
大号:<big>
强大:<Strong>
小号:<small>
上标:<sup>
下标:<sub>
方向:<bdo dir="rtl"或者"ltl">
******************************************************
4.html事件
HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为,
比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
窗口事件Window Events
---------------------------------
仅在 body 和 frameset 元素中有效。
onload :当文档被载入时执行脚本
onunload :当文档被卸下时执行脚本
表单元素事件 (Form Element Events)
---------------------------------
仅在 body 和 frameset 元素中有效。
onchange :当元素改变时执行脚本
onsubmit :当表单被提交时执行脚本
onreset :当表单被重置时执行脚本
onselect :当元素被选取时执行脚本
onblur :当元素失去焦点时执行脚本
onfocus :当元素获得焦点时执行脚本
图像事件 (Image Events)
---------------------------------
该属性用于 img 元素:
onabort :当图像加载中断时执行脚本
键盘事件 (Keyboard Events)
------------------------------------
在下列元素中无效:
base,bdo,br,frame,frameset,
head,html,iframe,meta,param,script,style,title.
onkeydown:当键盘被按下时执行脚本
onkeypress:当键盘被按下后又松开时执行脚本
onkeyup :当键盘被松开时执行脚本
鼠标事件 (Mouse Events)
------------------------------------
在下列元素中无效:
base、bdo、br、frame、frameset、head、
html、iframe、meta、param、script、style,title 元素。
onclick :当鼠标被单击时执行脚本
ondblclick:当鼠标被双击时执行脚本
onmousedown:当鼠标按钮被按下时执行脚本
onmousemove:当鼠标指针移动时执行脚本
onmouseout:当鼠标指针移出某元素时执行脚本
onmouseover:当鼠标指针悬停于某元素之上时执行脚本
onmouseup:当鼠标按钮被松开时执行脚本
******************************************************
5.html消息
当浏览器从 web 服务器请求服务时,可能会发生错误。
从而有可能会返回下面的一系列状态消息:
1xx: 信息
-----------------
100 Continue
服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。
101 Switching Protocols
服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。
2xx: 成功
-----------------
200 OK
请求成功(其后是对GET和POST请求的应答文档。
201 Created
请求被创建完成,同时新的资源被创建。
202 Accepted
供处理的请求已被接受,但是处理未完成。
203 Non-authoritative Information
文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝。
204 No Content
没有新文档。浏览器应该继续显示原来的文档。
如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。
205 Reset Content
没有新文档,但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content
客户发送了一个带有Range头的GET请求,服务器完成了它。
3xx: 重定向
-----------------
300 Multiple Choices
多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently
所请求的页面已经转移至新的url。
302 Found
所请求的页面已经临时转移至新的url。
303 See Other
所请求的页面可在别的url下被找到。
304 Not Modified
未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求
(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。
服务器告诉客户,原来缓冲的文档还可以继续使用。
305 Use Proxy
客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused
此代码被用于前一版本。目前已不再使用,但是代码依然被保留。
307 Temporary Redirect
被请求的页面已经临时移至新的url。
4xx: 客户端错误
-----------------
400 Bad Request
服务器未能理解请求。
401 Unauthorized
被请求的页面需要用户名和密码
402 Payment Required
此代码尚无法使用。
403 Forbidden
对被请求页面的访问被禁止。
404 Not Found
服务器无法找到被请求的页面。
405 Method Not Allowed
请求中指定的方法不被允许。
406 Not Acceptable
服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required
用户必须首先使用代理服务器进行验证,这样请求才会被处理。
408 Request Timeout
请求超出了服务器的等待时间。
409 Conflict
由于冲突,请求无法被完成。
410 Gone
被请求的页面不可用。
411 Length Required
"Content-Length" 未被定义。如果无此内容,服务器不会接受请求。
412 Precondition Failed
请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large
由于所请求的实体的太大,服务器不会接受请求。
414 Request-url Too Long
由于url太长,服务器不会接受请求。
当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。
415 Unsupported Media Type
由于媒介类型不被支持,服务器不会接受请求。
416
服务器不能满足客户在请求中指定的Range头。
5xx: 服务器错误
-----------------
500 Internal Server Error
请求未完成。服务器遇到不可预知的内部情况。
501 Not Implemented
请求未完成。服务器不支持所请求的功能。
502 Bad Gateway
请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable
请求未完成。服务器临时过载或无法响应。
504 Gateway Timeout
网关超时。
505 HTTP Version Not Supported
服务器不支持请求中指明的HTTP协议版本。
******************************************************
基本语法
尺寸设置
窗口间相互操作
外观
浮动窗口
字体
标题
字号
物理字体
逻辑字体
颜色
客户端字体
字符实体
文字布局
行的控制
文字的对齐
文字的分区
列表
定制列表元素
预格式化文本
空白
列表
文字布局
行的控制
文字的对齐
文字的分区
列表
定制列表元素
预格式化文本
空白
多列文本
视频剪辑