参考文章:
http://www.51testing.com/?59943/action_viewspace_itemid_98728.html
HTML.chm
一、 HTML基础
1、HTML标记符的作用
2、网页的基本结构,html、head、title、body标记
3、网页中插入注释和特殊符号
二、文本格式
1、字符格式:font、b、i、u、hn
2、段落格式:p、pre、hr、br
3、列表格式:ol、ul、li、dl、dt、dd
三、超级链接和图像
1、超级链接a的使用
2、插入图像
3、图像映射
四、表格和框架
1、表格的使用:table、tr、td和th标记,细线表格和不规则表格
2、创建框架结构:frameset、frame、iframe
五、其它网页元素
1、 表单:form、input、textarea、select、label。
2、滚动字幕marquee
3、网页插件的使用
六.CSS+DIV
DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
CSS单元的位置和层次-div标签
div接口=数字图像数据接口
Cascading Style Sheets(CSS)是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning(CSS-P)是 CSS 的一个扩展,它可用来控制任何东西在网页上或是说在窗口中的位置。
ul: unordered lists
ol: ordered lists
li: Lists
ol 有序列表:
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为:
1……
2……
3……
ul 无序列表,表现为li前面是大圆点而不是123:
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略 dl dt dd的用法:
dl 内容块
dt 内容块的标题
dd 内容
可以这么写:
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt 和dd中可以再加入 ol ul li和p,理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。
七.表格
看看表格的基本语法:
<table>...</table> - 定义表格
<tr> ...</tr>- 定义表行
<th> ...</th>- 定义表头
<td> ...</td>- 定义表元
下面看看它的示例:
<table border="1"> <!--border是表格的边框属性,=“1”,即边框的宽为一象素-->
<tr> <!--定义表格的行-->
<th>Food</th><th>Drink</th><th>Sweet</th> <!--定义表格的表头,即标题-->
</tr> <!--行结束-->
<tr>
<td>A</td><td>B</td><td>C</td> <!--定义表格的表元-->
</tr>
</table>
跨多行、多列的表元(Table Span)
跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3> Morning Menu</th></tr> <!--colspan=3,跨三列表元-->
<tr><th>Food</th><th>Drink</th><th>Sweet</th></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3> Morning Menu</th> <!--rowspan=3,跨三行表元-->
<th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>
其余的如表格居中,间隙,大小等省略。
八.框架
<HTML>
<HEAD>
<TITLE>框窗实作</TITLE>
</HEAD>
<FRAMESET COLS="120,*" >
<FRAME SRC="a.htm" NAME="1">
<FRAME SRC="b.htm" NAME="2">
</FRAMESET>
</HTML>
九.表单
<FORM>
喜好:
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">电影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看书
</FORM>
十.排版卷标
分段卷标p
<p align="left">文字靠左</p> 文字靠左
<p align="center">文字置中</p> 文字置中
<p align="right">文字靠右</p> 文字靠右
置中卷标<center>
<center>这是最中间</center>
向右缩排卷标<blockquote>
<blockquote>缩排1单位</blockquote>
<blockquote><blockquote>缩排2单位</blockquote></blockquote>
十一.链接
网站链接 好站 <a href="http://www.wrclub.net">好站</a>
电子邮件链接 写信给朋友 <a href="mailto:fuxing@wrclub.net">写信给朋友</a>
ftp链接 下载档案 <a href="ftp://ftp.wrclub.net">下载档案</a>
news链接 seednet news服务 <a href="news:news.wrclub.net">seednet news服务</a>
gopher链接 seednet gopher服务 <a href="gopher://gopher.wrclub.net/">seednet gopher服务</a>
bbs链接 seednet gopher服务 <a href="telnet://bbs.wrclub.net/">seednet bbs服务</a>
o target=框窗名称:这在『框架标志』中也有提到,而且也只有在框架(框窗 or frame)中才用得到。正常而言,框窗有各自的名称,因此,我们可以利用此标志,来指定链接的内容显示到哪一个框窗中。
o target=_blank:将链接的画面内容,开在新的浏览窗口中。
o target=_parent:将链接的画面内容,当成文件的上一个画面。
o target=_self:将链接的画面内容,显示在目前的窗口中。
o target=_top:这个参数可以解决新链接的画面内容,被旧框窗包围的困扰,使用这参数,会将整个画面重新显示成链接的画面内容。
十二.背景标识
背景卷标<body bgcolor="#ffffff" background="bg.jpg">
内文、连结文字颜色设定:<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000">
十三.HTML示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Descrīption" CONTENT="">
<link rel="" type="text/css" href="">
<link rel="" type="text/css" href="">
<scrīpt src="XX/xx/xx.JS" type="txt/javascrīpt">
<scrīpt src="XX/xx/xx.JS" type="txt/javascrīpt">
...
</HEAD>
<BODY>
<scrīpt src="XX.JS" type="text/javascrīpt">
<scrīpt src="XX.JS" type="text/javascrīpt">
<div id="head">
<div class="top">
<div class="top_banner">
<div id="logo"></div>
<div id="HOME_top_fla">
<div id="new_menu">
<ul>
<li class="top_nav4"/>
<a href="XX.html">首 页</a>
<li class="top_nav4"/>
<li class="top_nav4"/>
...
</ul>
...
<div id="home_no1">
</BODY>
</HTML>