<< First < Previous Next > Last >>

January 09

css层叠样式(1)----植入样式表

植入样式表：

所有的样式表信息都列于HTML文件的顶部：

<HTML>
<STYLE TYPE="text/css">

</STYLE>
<HEAD>
<TITLE>My First Stylesheet</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of the Web Design Gods</H1>
<P>Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>

入样式表规则后，浏览器在整个HTML页面中都执行该规则。如果你想对网页一次性加入样式表，就可采用该方法。

链接到样式表上：

它的使用方法：产生一个普通的网页，但使用 <STYLE>规则，而是在<HEAD>内使用<LINK>标签：

<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>

(使用链接的样式表时，你无须使用注释标签。)

现在生成一个单另的文本文件，起名mystyles.css (或者其任何你喜欢的名字)。文件内容如下：

H1 { color: green; font-family: impact }
P { background: yellow; font-family: courier }

如同发布HTML文件那样，将这个CSS文件布到你的服务器中。在浏览器中观看网时，你会发现浏览器将依照链接标签将有链接了的HTML网页按照样式表的规则示，在HREF属性中你可以选择使用绝对相对URL。

输入样式表：

输入外部样式表的方法同链接的方法类似。不同之处在于链接法不能同其它方法结合使用，但输入法则可以。例：

<HTML>
<STYLE TYPE="text/css">

</STYLE>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
</HEAD>
<BODY>
<H1>Stylesheets: The Tool of
the Web Design Gods</H1>
<P>Amaze your friends! Squash
your enemies!</P>
</BODY>
</HTML>

而其中输入的 company.css文件内容如下：

H1 { color: green; font-family: times }
P { background: yellow; font-family: courier }

在本例中，浏览器首先输入 company.css的规则 ( @import 必须打头), 然后加入移植的规则从而为这个网页产生规则集合。

请注意，对于H1在外部样式表文件和植入的样式表中都设定了规则。在两者冲突的情况下，浏览器应执行哪一项规则呢？植入的规则此时将占上风。

在行内加入样式

<HTML>
<HEAD>
<TITLE>My First Stylesheet
</TITLE>
</HEAD>
<BODY>
<H1 STYLE="color: orange; font-family: impact">Stylesheets: The Tool of the Web Design Gods</H1>
<P STYLE="background: yellow; font-family: courier">Amaze your friends! Squash your enemies!</P>
</BODY>
</HTML>

分类

我先前已经讲过所有的HTML标签都可以用作选择，并附加样式表说明.但是如果你想达到的目的比这还要复杂该如何处理呢？比如,你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示，你能做到吗？

这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。这些规则（不论是植入的还是外部样式表文件）将以以下方式显示：

P.first { color: green } P.second { color: purple } P.third { color: gray }

你的HTML代码如下：

<P CLASS=first>The first paragraph, with a class name of "first."</P> <P CLASS=second>The second paragraph, with a class name of "second."</P> <P CLASS=third>The third paragraph, with a class name of "third."</P>

你可以给类别起任何一种名字，但不要忘了在样式表规则中类别名称前加一个句号（即英文中的 .）

你还可以生成不加任何HTML标签的分类：

.first { color: green }

这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，并应用到网页<BODY>中，而设定的文字将以绿色显示。情景选择：如果你想让所有加重显示的文字都以红色显示，但条件是只有当这些加显示的文字出现在通常的主体文字内时。不可能吗？利用样式表可以实现你最狂野的梦想。情景选择将使你梦想成真，心想事成。情景选择要求你设定一个可以执行选择说明的情景即可。

P B { color: red } <H1><B>Emma Thompson</B>, Actress </H1> <P>Dramatic actor, inspired comedienne. Is there <B>nothing</B> she can't do?</P>

样式表的规则告诉浏览器只将所有<P>之内加重显示的文字以红色显示。所以，<P>之外标题的加重文字不会以红色显示，而<P>之内的文字则是。注释即使是用样式表制作出的非常简练的代码也应该加上注释。利用样式表代码就可以做到这一点。例：

P.first { color: green } /* green for the first paragraph of every page */H1 { text-indent: 10px; font-family: verdana } IMG { margin-top: 100px } /* give all images a top margin */

屏幕就是一个战场，在一个HTML文件中，如果有3种不同的样式表规则都使用P作为其选择。输入的样式表指示浏览器将<P>文字用红色显示，而植入的样式表指示浏览器用蓝色显示，而行内样式表指示浏览器用黄色。那么可怜的浏览器该听谁的呢？好在支持样式表的浏览器自身配有样式表的串接顺序来应付这种情形。总有几种样式表规则要比其它的规则更重要。根据正式的规定，以下为样式表的串接顺序：

Inline styles （行内样式）
Embedded styles （植入样式）
Linked styles （链接样式）
Imported styles （输入样式）
Default browser styles（缺省浏览器样式）

浏览器将按照上述顺序执行样式表的指令。但是还要一个问题。如果同一种类的多个规则相互冲突怎么办？比如，如果一项植入样式表规则将<P>以绿色显示，而另一个规则要求以红色显示？多亏聪明的样式表标准的发明人，对于这种冲突也有一个顺序，但很复杂。这里有一个极其简单的解决顺序：

使用特别说明的样式表规则，例：
BODY { color: green } P { color: red }

有一项规则特别说明<P> 中的文字一红色显示，但它同时也继承了<BODY>的绿色规定。但是特别说明了的规则的重要性要大于继承的规则，所以<P>之内的文字一红色显示。
应用继承的样式表规则
如果不存在第1步中所列的特别说明的规则（比如存在特别说明了的多项规则），则浏览器转向执行继承的规则。如果找不到继承的规则，则浏览器转向执行第3步。
按照样式表规则在HTML中的显示顺序执行。
P { color: green } P { color: red }

当无法适用上述规则时，浏览器将根据规则在代码中显示顺序执行。在上例中，<P>作为讲座一红色显示，因为它是最后给出的规则。

注意：正式的串接样式表规定对于串接顺序有更详细的规定。但由于执行规定Netscape Communicator 和Internet Explorer都不支持，所以本文中不再细述。最后一个问题：如果样式表规则同HTML标签冲突时，如何处理？我们看一下这个例子：

I { font-family: impact } <P>I think <I><FONT FACE="Times"> East of Eden</FONT></I> is Stein beck's best novel.</P>

该例中样式表规则要求浏览器使用Impact，但是传统的HTML<FONT FACE>标签要求用Times字体，一个很明显的传统。根据正式的样式表规定，应该优先执行样式表规则。但是最主要的几种浏览器Netscape 和IE 4.0 都规定应优先执行HTML。唉.......

12:01 PM | Add a comment | Permalink | Blog it | STUDY

html语法(10)----多窗口页面(Frames)

基本语法

<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>

在 <noframes> 标记后的文字将只出现在不支持 FRAMES 的浏览器中。

        <HTML>
        <HEAD>
        </HEAD>
        <FRAMESET>
             <FRAME SRC="url">
             <NOFRAMES> ... </NOFRAMES>
        </FRAMESET>
        </HTML>

各窗口的尺寸设置

<frameset cols=#>

<frameset cols=30%,20%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>

<frameset rows=#>

横向排列多个窗口：

<frameset rows=25%,25%,50%>
<frame src="A.html">
<frame src="B.html">
<frame src="C.html">
</frameset>

COLS & ROWS

纵横排列多个窗口：

<frameset cols=20%,*>
<frame src="A.html">
     <frameset rows=40%,*>
     <frame src="B.html">
     <frame src="C.html">
     </frameset>
</frameset>

A	B
	C

不允许各窗口改变大小 <frame noresize>

缺省设置是允许各窗口改变大小的。

各窗口间相互操作(Frame Target)

窗口标识(Frame Name)
<frame name=#>
<a href=url target=#>

<frameset cols=50%,50%>
<frame src="A.html">
<frame src="B.html" name="HELLO">
</frameset>

特殊的 4 类操作(很有用喔)

<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口

Frame 的外观(Appearance)

各窗口边框的设置 <frame frameborder=#> #=yes, no / 1, 0

<frameset rows=30%,*>
<frame src="Acol.html" frameborder=1>
<frameset cols=30%,*>
     <frame src="Bcol.html" frameborder=0>
     <frame src="Ccol.html" frameborder=0>
</frameset>
</frameset>

示例

(A 有边框，B、C 没有)

A
B	C

各窗口间空白区域的设置
<frameset framespacing=#> #=空白区域的大小

<frameset rows=30%,* framespacing=100>
<frame src="Acol.html">
<frameset cols=30%,*>
     <frame src="Bcol.html">
     <frame src="Ccol.html">
</frameset>
</frameset>

示例

A
B	C

边框色彩 <frameset bordercolor=#>

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<frameset rows=30%,* bordercolor=red>
<frame src="Acol.html">
<frameset cols=30%,*>
     <frame src="Bcol.html">
     <frame src="Ccol.html">
</frameset>
</frameset>

示例

A
B	C

页面空白(Margin) <frame marginwidth=# marginheight=#>

<frameset cols=50%,50%>
<frame src="A.html">
<frame src="A.html" 
    marginwidth=50 
    marginheight=50>
</frameset>

示例

AAAA

AA
AA

卷滚条设置 <frame scrolling=#> #=yes, no, auto

#=缺省值是 auto。

浮动窗口(Floating Frame)

<iframe src=# name=##> ... </iframe>
#=初始页面的 URL
##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
... = 此处文字将只出现在不支持 FRAMES 的浏览器中。

<center>
<iframe src="A.html" name="window">
   Here is a Floating Frame
</iframe>
<br><br>
<a href="A.html" target="window">Load A</A><BR>
<a href="B.html" target="window">Load B</A><BR>
<a href="Ccol.html" target="window">Load C</A><BR>
</center>

Pre

10:57 AM | Add a comment | Permalink | Blog it | STUDY

html语法(9)---- 表格进阶(TABLE ADVANCED)

表格的色彩

表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">

#=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<table border height=100 width=200 align=center>
<tr><th bgcolor=ffaa00>Food</th>
    <th bgcolor=Red>Drink</th>
    <th rowspan=2 background="URL">Sweet</th>
<tr bgcolor=white><td>A</td><td>B</td>
</table>

Food	Drink	Sweet
A	B	Sweet

表格边框的色彩
<table bordercolor=#>

<table cellspacing=5 border=5 bodercolor=#ffaa00>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

Food	Drink	Sweet
A	B	C

表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>

<table cellspacing=5 border=5 
     bordercolorlight=White bordercolordark=blue>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

Food	Drink	Sweet
A	B	C

表格的分组显示(Structured Table)

按行分组
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer)

<table border>
<thead>
     <tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>


Food	Drink	Sweet
A	B	C
D	E	F

按列分组
<colgroup align=#> #=left, right, center

<table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
</table>


Food	Drink	Sweet
A	B	C
D	E	F

列的属性控制
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center

<table border width=160>
<colgroup>
     <col align=center span=2>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
</table>


Food	Drink	Sweet
A	B	C
D	E	F

表格中边框的显示

显示所有 4 个边框 <table frame=box>

<table border frame=box>
<thead>
     <tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>


Food	Drink	Sweet
A	B	C
D	E	F

只显示上边框 <table frame=above>


Food	Drink	Sweet
A	B	C
D	E	F

只显示下边框 <table frame=below>


Food	Drink	Sweet
A	B	C
D	E	F

只显示上、下边框 <table frame=hsides>


Food	Drink	Sweet
A	B	C
D	E	F

只显示左、右边框 <table frame=vsides>


Food	Drink	Sweet
A	B	C
D	E	F

只显示左边框 <table frame=lhs>


Food	Drink	Sweet
A	B	C
D	E	F

只显示右边框 <table frame=rhs>


Food	Drink	Sweet
A	B	C
D	E	F

不显示任何边框 <table frame=void>


Food	Drink	Sweet
A	B	C
D	E	F

表格中分隔线(Rules)的显示

显示所有分隔线 <table rules=all>

<table border rules=all>
<colgroup><col align=center span=2>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
     <tbody>
          <tr><td rowspan=3 align=right>Total $-00.0</td>
     </tbody>
</table>


Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只显示组(Groups)与组之间的分隔线 <table rules=groups>


Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只显示行与行之间的分隔线 <table rules=rows>


Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

只显示列与列之间的分隔线 <table rules=cols>


Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

不显示任何分隔线 <table rules=none>


Food	Drink	Sweet
A	B	C
D	E	F
Total $-00.0

Pre	Next

10:46 AM | Add a comment | Permalink | Blog it | STUDY

html语法(8)---表格(TABLE)标记(TAGS)

表格的基本语法

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

带边框的表格：

<table border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

Food	Drink	Sweet
A	B	C

不带边框的表格：

Food	Drink	Sweet
A	B	C

跨多行、多列的表元(Table Span)

跨多列的表元 <th colspan=#>

<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>

Moring Menu
Food	Drink	Sweet
A	B	C

跨多行的表元 <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>

Morning Menu	Food	A
	Drink	B
	Sweet	C

表格尺寸设置

边框尺寸设置： <table border=#>

<table border=10>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

Food	Drink	Sweet
A	B	C

<table border width=# height=#>

表格尺寸设置：

<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>

Food	Drink	Sweet
A	B	C

<table border cellspacing=#>

表元间隙设置：

<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>

Food	Drink	Sweet
A	B	C

<table border cellpadding=#>

表元内部空白设置：

<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>

Food	Drink	Sweet
A	B	C

表格内文字的对齐/布局

<tr align=#>

<th align=#> #=left, center, right

<td align=#>

<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>

Food	Drink	Sweet
A	B	C

<tr valign=#>

<th valign=#> #=top, middle, bottom, baseline

<td valign=#>

<table border height=100>
<tr>
                <th>Food</th><th>Drink</th>
                <th>Sweet</th><th>Other</th>
<tr>
                <td valign=top>A</td>
                <td valign=middle>B</td>
                <td valign=bottom>C</td>
                <td valign=baseline>D</td>
</table>

Food	Drink	Sweet	Other
A	B	C	D

表格在页面中的对齐/布局(Floating Table)

<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.

Food	Drink	Sweet
A	B	C

My favorites...
cookies,chocolates,and more.

<table align=right>

<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.

Food	Drink	Sweet
A	B	C

My favorites...
cookies,chocolates,and more.

表格的标题

<caption align=#> ... </caption> #=left, center, right

<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

Lunch
Food	Drink	Sweet
A	B	C

<caption valign=#> ... </caption> #=top, bottom

valign=top is default.

<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>

Lunch
Food	Drink	Sweet
A	B	C

Pre	Next

10:23 AM | Add a comment | Permalink | Blog it | STUDY

January 08

html语法(7)---表单(FORM)标记(TAGS)

基本语法

表单的基本语法

`<form action="url" method=*> ... ... <input type=submit> <input type=reset> </form>`

*=GET, POST

表单中提供给用户的输入形式

`<input type=* name=**>`

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

表单中提供给用户的输入形式

`<input type=* name=**>`

*=text, password, checkbox, radio, image, hidden, submit, reset

**=Symbolic Name for CGI script

文字输入和密码输入

*=text, password

<input type=>
<input type= value=**>

<form action=/cgi-bin/post-query method=POST>
您的姓名: 
<input type=text name=姓名><br>
您的主页的网址: 
<input type=text name=网址 value=http://><br>
密码: 
<input type=password name=密码><br>
<input type=submit value="发送"><input type=reset value="重设">
</form>

<input type=* size=**>
<input type=* maxlength=**>

<form action=/cgi-bin/post-query method=POST>
<input type=text name=a01 size=40><br>
<input type=text name=a02 maxlength=5><br>
<input type=submit><input type=reset>
</form>

复选框(Checkbox)和单选框(RadioButton)

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<form action=/cgi-bin/post-query method=POST>
<input type=checkbox name=水果1>
        香蕉<p>
<input type=checkbox name=水果2 checked>
        苹果<p>
<input type=checkbox name=水果3 value=橘子>
        桔子<p>
<input type=submit><input type=reset>
</form>

<input type=radio value=**>
<input type=radio value=** checked>
<form action=/cgi-bin/post-query method=POST>
<input type=radio name=水果>
        香蕉<p>
<input type=radio name=水果 checked>
        苹果<p>
<input type=radio name=水果 value=橘子>
        桔子<p>
<input type=submit><input type=reset>
</form>
 
隐藏表单的元素 <input type=hidden value=*>
<form action=/cgi-bin/post-query method=POST>
<input type=hidden name=add value=hoge@hoge.jp>
Here is a hidden element. <p>
<input type=submit><input type=reset>
</form>
列表框(Selectable Menu) 
基本语法
<select name=*>
<option> ...
</select> 
<option selected>
<option value=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits>
        <option>香蕉
        <option selected>苹果
        <option value=My_Favorite>桔子
</select><p>
<input type=submit><input type=reset>
</form>

<select size=**>
<form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3>
        <option>香蕉
        <option selected>苹果
        <option value=My_Favorite>桔子
        <option>桃子
</select><p>
<input type=submit><input type=reset>
</form>
 
<select size=** multiple>
注意，是用 Ctrl 键配合鼠标实现多选。
(和 MS-WINDOWS 的 File Manager 一样) <form action=/cgi-bin/post-query method=POST>
<select name=fruits size=3 multiple>
        <option selected>香蕉
        <option selected>苹果
        <option value=My_Favorite>桔子
        <option selected>桃子
</select><p>
<input type=submit><input type=reset>
</form>
 
 
文本区域
<textarea name=* rows=** cols=**> ... <textarea>
<form action=/cgi-bin/post-query method=POST>
<textarea name=comment rows=5 cols=60>
</textarea>
<P>
<input type=submit><input type=reset>
</form>

对于很长的行是否进行换行的设置(Word Wrapping) 
<textarea wrap=off> ... </textarea>
不换行，是缺省设置。 
<textarea wrap=soft> ... </textarea>
“软换行”，好象 MS－WORD 里的“软回车”。 
<form action=/cgi-bin/post-query method=POST>
<textarea wrap=soft name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>
<textarea wrap=hard> ... </textarea>
“硬换行”，好象 MS－WORD 里的“硬回车”。 <form action=/cgi-bin/post-query method=POST>
<textarea wrap=hard name=comment rows=5 cols=25> </textarea><P>
<input type=submit><input type=reset>
</form>

Pre	Next

11:10 AM | Add a comment | Permalink | Blog it

html语法(6)----图象(IMAGE)标记(TAGS)

链接图象的基本语法

<img src=#> #=图象的 URL

<img alt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字

<img src="URL" alt=""> 哈－－－哈

图象和文字的对齐

<img align=#> #=top, middle, bottom
<img src=URL align=top> My face!

哈－－－哈

<img src=URL align=middle> My face!

哈－－－哈

<img src=URL align=bottom> My face!

哈－－－哈

只有一行文字才可以放在图象的两边。
Only one text line can be flown into the both side of Image.

图象在页面中的对齐/布局(Floating Image)

<img align=left>

<img src=URL align=left>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>

My Face!
It is always
smiling.
Hahaha....

<br clear=all>

<img src=URL align=left>My Face!<br> It is always <br clear=all> smiling.<br> Hahaha....<br>

My Face!
It is always

smiling
Hahaha....

<img vspace=# hspace=#> #=value
<img src=URL align=left vspace=20 hspace=30>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>

My Face!
It is always
smiling.
Hahaha....

边框

<img border=#> #=value

<img src=URL border=15>

客户端图象映射图(Client Side Image Map)

#
shape="rect" coords="A,A',B,B'"
(A,A')=Upper Left, (B,B')=Lower Right
shape="circle" coords="A,A',R'"
(A,A')=Center, R=Radius
shape="poly" coords="A,A',B,B',C,C'..."
(A,A'>=First Corner, (B,B')=Second Corner, ...

Pre	Next

10:04 AM | Add a comment | Permalink | Blog it | STUDY

html语法(5)----文字布局(TEXT STYLE)标记(TAGS)

行的控制

段(Paragraph) (可以看作是空行) <p>

你好吗？<p>很好。

你好吗？

很好

换行 <br>

你好吗？<br>很好。

你好吗？
很好。

不换行<nobr>

<nobr> 请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！ </nobr>

请改变您浏览器窗口的宽度，使之小于这一行的宽度，看看这个标记的作用！

文字的对齐(Alignment)

<hn align=#>...</hn>
<p align=#>...</p> #=left, center, right

<h3 align=center>Hello<\h3> <h3 align=right>Hello<\h3>

Hello

<center>...</center>

<center>Hello</center>

Hello

文字的分区(Division)显示

<div align=left> ... </div>

<div align=left> Can you feel happiness without unpleasant? <br> Please show me your smile. </div>

Can you feel happiness without unpleasant?
Please show me your smile.

<div align=center> ... </div>

Can you feel happiness without unpleasant?
Please show me your smile.

<div align=right> ... </div>

Can you feel happiness without unpleasant?
Please show me your smile.

列表

无序列表 <ul><li>...</ul>

<ul> <li>Today <li>Tommorow </ul>

Today
Tommorow

有序列表 <ol><li>...</ol>

<ol> <li>Today <li>Tommorow </ol>

Today
Tommorow

定义列表(Definition lists) <dl><dt>...<dd>...</dl>

<dl> <dt>Today <dd>Today is yesterday. <dt>Tomorrow <dd>Tomorrow is today. </dl>

Today: Today will be yesterday.
Tomorrow: Tomorrow will be today.

Definition lists Compact <dl compact><dt>...<dd>...</dl>

Today: Today will be yesterday.
Next: Tomorrow will be today.

<dl compact> <dt>Today <dd>Today is yesterday. <dt>Tomorrow <dd>Tomorrow is today. </dl>

定制列表元素

定制表中的标记 <li type=#> #=disk, circle, square

<ul> <li type=disc>ONE <li type=circle>TWO <li type=square>THREE </ul>

ONE
TWO
THREE

定制有序列表表中的序号 <li type=#> #=A, a, I, i, 1

<ol><li type=A>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=a>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=I>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=i>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

<ol><li type=1>ONE-ONE <li>ONE-TWO</ol>

ONE-ONE
ONE-TWO

定制有序列表表中的序号的起始值 <ol start=#> #=number

<ol start=5>
<li type=A>ONE-ONE
<li>ONE-TWO
        <ol start=10>
        <li>TWO-ONE
        <li type=i>TWO-TWO
</ol></ol>

ONE-ONE
ONE-TWO
1. TWO-ONE
2. TWO-TWO

预格式化文本(Preformatted Text)

<pre>...</pre>

<pre> Please use your card. VISA Master <b>Here is an order form.</b> <ul><li>Fax <li>Air Mail</ul> </pre>

Please use your card
VISA    Master
Here is an order form.

Fax
Air Mail

<listing>...</listing>

<listing> Please use your card. VISA Master <b>Here is an order form.</b> <ul><li>Fax <li>Air Mail</ul> </listing>

Please use your card.
VISA    Master
Here is order form.

Fax
Air Mail

<xmp>...</xmp>

<xmp> Please use your card. VISA Master <b>Here is an order form.</b> <ul><li>Fax <li>Air Mail</ul> </xmp>

Please use your card.
VISA    Master
<b>Here is order form.</b>
<ul><li>Fax
<li>Air Mail</ul>

空白(Spacer)

<spacer type="horizontal" size=#> #=水平空白宽度
<spacer type="vertical" size=#> #=竖直空白高度

YESTERDAY <spacer type="horizontal" size=50> TODAY <spacer type="vertical" size=50> TOMORROW

YESTERDAY TODAY TOMORROW

<spacer type="block" width=# height=# align=##>
#=空白的尺寸
##=top, middle, bottom, left, right

<spacer type="block" width=150 height=50 align=left> YESTERDAY<br> TODAY<br> TOMORROW

YESTERDAY
TODAY
TOMORROW

多列文本

<multicol cols=#> ... </multicol> #=列的数目

<multicol cols=2> text text text... </multicol>

<multicol gutter=#> ... </multicol> #=列间的空白

<multicol cols=2 gutter=100> text text text... </multicol>

<multicol width=#> ... </multicol> #=列的宽度

<multicol cols=2 width=400> text text text... </multicol>

其它

块引用(Blockquote) <blockquote>...</blockquote>

Her Song: <blockquote> When I was young, I listened to the radio waiting for my favorite songs.... </blockquote>

Her Song:

When I was young, I listened to the radio waiting for my favorite songs....

闪烁 <blink>...</blink>

<BLINK> 闪烁！闪烁！ </BLINK>

闪烁！闪烁！

Pre	Next

9:12 AM | Add a comment | Permalink | Blog it | STUDY

January 03

html语法(4)---字体标记

第二章字体(FONT)标记(TAGS)

------------------------------------------------------------------

标题字体(Header)

<h#> ... </h#> #=1, 2, 3, 4, 5, 6
h1>今天天气真好！</h1>
今天天气真好！

<h2>今天天气真好！</h2>
今天天气真好！

<h3>今天天气真好！</h3>
今天天气真好！

<h4>今天天气真好！</h4>
今天天气真好！

<h5>今天天气真好！</h5>
今天天气真好！

<h6>今天天气真好！</h6>
今天天气真好！

<hn>---</hn> 这些标记显示黑体字。
<hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。
因此在一行中无法使用不同大小的字体。

物理字体(Physical Style)

<b>今天天气真好！</b> 今天天气真好！

<i>今天天气真好！</i> 今天天气真好！

<u>今天天气真好！</u> 今天天气真好！

<tt>今天天气真好！</tt> 今天天气真好！

<sup>今天天气真好！</sup> ^{今天天气真好！}

<sub>今天天气真好！</sub>_{今天天气真好！}

<s>今天天气真好！</s> ~~今天天气真好！~~

<strike>今天天气真好！</strike> ~~今天天气真好！~~

逻辑字体(Logical Style)

<em>今天天气真好！</em> 今天天气真好！

<strong>今天天气真好！</strong> 今天天气真好！

<code>今天天气真好！</code> 今天天气真好！

<samp>今天天气真好！</samp> 今天天气真好！

<kbd>今天天气真好！</kbd> 今天天气真好！

<var>今天天气真好！</var> 今天天气真好！

<dfn>今天天气真好！</dfn> 今天天气真好！

<cite>今天天气真好！</cite> 今天天气真好！

<small>今天天气真好！</small> 今天天气真好！

<big>今天天气真好！</big> 今天天气真好！

指定“字体大小”的标记和“指定字体”的标记的组合使用
<i><font size=5>
<b>今天</b> 天气<font size=6> 真好！</font>
</font></i>
今天天气真好!

字体颜色

指定颜色 <font color=#> ... </font>
#=rrggbb 16 进制数码，或者是下列预定义色彩：
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
<font color=ffffff>White</font> &
<font color=white>White</font>

White & White

客户端字体(Font Face)

<font face="#, #, ..., #"> ... </font>
#=客户端可获得的字体
<font face="Arial, Helvetica"> Hellow World!</font>

Hellow World!

客户端字体(Font Face)示例

字符实体(Entities)

&#; #=字符实体名称或者 ascii 值
HTML2.0 的字符集
&           &
<            <
>            >
"          "

HTML2.0 字符实体名称列表
HTML3.2 字符实体名称列表
ISO 字符实体名称列表

---------------------------------------------------------------------------

Pre	Next

12:00 PM | Add a comment | Permalink | Blog it | STUDY

January 02

html语法(3)---加入多媒体

嵌入多媒体文本(EMBED)

基本语法 <embed src=#> #=URL

本标记可以用来在主页中嵌入多媒体文本，如：
电影(movie), 声音(sound), 虚拟现实语言(vrml)... ...
体会 <embed> 标记，您需要把 plugin 安装完备。
请注意：embed attributes are different between each plugins.

背景音乐

<bgsound src=#> #=WAV 文件的 URL
<bgsound loop=#> #=循环数

插入视频剪辑

<img src="url.gif" dynsrc="url.avi">
用 url.avi 这一 AVI(Video for MS－WINDOWS) 文件来播放视频；
用 url.gif 这一 GIF 图象作为视频的封面，即：在浏览器
尚未完全读入 AVI 文件时，先在 AVI 播放区域显示该图象。

何时开始播放 AVI <img start=#> #=fileopen, mouseover

缺省值是 #=fileopen，即在链接到含本标记的页面(如本页)时开始播放 AVI。

mouseover 是指您把鼠标移到 AVI 播放区域之上时才开始播放 AVI。

也可以两者同时设置：<img start=fileopen,mouseover>

另外，用鼠标在 AVI 播放区域点击一下，也将令浏览器开始播放该 AVI。

控制条 <img controls>

用来在视频窗口下附加 MS－WINDOWS 的 AVI 播放控制条。

<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI" controls>

循环播放 <img loop=#>
<loop=infinite> 将循环播放不止。

延时 <img loopdelay=#> #=毫秒数
<img src="SAMPLE-S.GIF" dynsrc="SAMPLE-S.AVI"
loop=3 loopdelay=250>

Pre	Next

11:21 AM | Add a comment | Permalink | Blog it | STUDY

html语法(2)--会移动的文字

会移动的文字(Marquee)

基本语法

我会动啦~~

我从左移

我从右移

我绕着走

<marquee behavior=slide>我走一次就歇了</marquee>

我走一次就歇了

<marquee behavior=alternate>我来回走走</marquee>

我来回走走

我走三趟

我的好快

<marquee loop=3 scrollamount=20 scrolldelay=500>我走一步停一步</marquee>

我走一步停一步

对齐上沿

对齐中间

对齐下沿

面积

空白

Pre	Next

10:57 AM | Add a comment | Permalink | Blog it | STUDY

html语法(1)----页面标记

html页面和标记

HTML 文件的基本结构

<body>

<head>

<tile>,<base>,<link>,<isindex>,<meta>,

</head>

<body>

html 的正文写在这里......

</body>

</html>

语言字符集(charsets)的信息

#= us-ascii,iso-8859-1,xmac-roman

#= iso-8859-2,xmac-ce,iso-2022-jp

#= x-sjis,x-euc-jp,euc-kr,iso-2022-kr

#= gb2312, gb_2312-80,x-euc-tw

#= x-cns11643-1, x-cns11643-2, big5

可在HTML文件中设置MIME字符集信息。你在浏览主页时，最好自已在浏览器的先项菜单日内选择相应的语言（language encoding）但是如果html文件中写明了设置，浏览器就会自动设置语言选项。否则，您　在浏览此主页时将可能混乱。

背景色彩和文字色彩

bgcolor-----背景色彩

text-----非可链接文字色彩

link-----可链接文字色彩

alink-----正被点击可链接文字色彩

link-----已经点击可链接文字文字色彩

#=rrggbb

色彩是用 16 进制的红－绿－蓝(red-green-blue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

页面空白(Margin)

页面左边的空白<body leftmargin=#>

页面右边的空白<body topmargin=#>

链接(Link)

基本语法<a href="URL">.......</a>

这是一个<a href="http://www.cctv.com">至cctv链接的例子</a>

至cctv链接的例子

跳转到页面的另外一个地方

<a href="#jump-here">到jmup-here的位置<a>

到jmup-here的位置

jmup-here

跳转到另一页面的另外一个地方

<a href="#jump-here">到jmup-here的位置<a>

开一个新的窗口

基本语法<a href="URL"＆nbsp;target="Window_name">.......</a>

打开一个新的CCTV窗口

标尺线

<hr>

Black,Olive,Teal,Red,Blue, Maroon,NavyGray,Lime, Fuchsia,White, Green,Purple, Silver,yellow, Aqua

3:27 AM | Add a comment | Permalink | Blog it | STUDY

December 31

年终检讨

今天可是今年最后一天了.我突然想到陈安之的一句话,失败不是成功之母,检讨才是成功之母.

每年检讨一次,那么每年有一次改正错误的机会,每月检讨一次,每年有12次改正错误的机会.而每天检讨一次,一年有三百六十五次改正错误的机会.

事实上错误是显而易见的,但KILL着ERR就要一点勇气了.从今年的二月分来校,到现在差不多都一年了.这其中我哪也没有去过.一是没有时间,二是也没有什么钱来做这些.事实上最重要的一点是我买了电脑.这是我很大一部分原因哪也没有去的原因.如果你在网上,你可以找到任何一个地方的事情,感受别人的体验.

关于生活,呆在寝室里居多,平常去下食堂,上下自习就OK了.大部分时间用在上网上面了.明年要尽量多做些有意义的事情了.仅管哪些有义无义,我并不知道,但可不要天天对着电脑啦.

大一上期去的最多地方是火车站.丫的,就是为了买个票.现在懒的理票的事.下期去的最多的地方二手电脑市场,大概差不多二十多次吧.哈,这其中我的口才也锻炼不少呀.但比起已经成精的二手市场老板来说那可是小巫见大巫了.那些人硬是没话说,其中卖二手手提的,那更是百炼成精.他们走的可都是水货,装成可怜西西的说赚不了什么钱.我去,那东西,一次至少要赚你好几百,如果他狠心肠的话你会更惨.

今年给我们寝买了二台电脑.然后给我他们寝老乡配了两台电脑.还好没出现过干什么问题,倒是路由器经常出现问题.

来到北方,北方的天可是真冷啊,零下十多度家常便饭.但是不常下雪,因为很干燥,这学期算是下雪的也就那么三次吧.第一次还挺开心的,但后来,雪被人踩踏,很脏,而且灰尘积累也就不那么讨人喜欢.雪也不过是暂时掩盖了事物的真像而已.

学校主楼那有人用积雪堆成了一个大拇指.过了几天我去看了看,不知道被谁一脚把大拇指踏断了.唉,这就是现在学生的素质.说到素质,真不知道怎么说这里的人.他们似乎是很用功,他们把图书馆的座位长期占着.每当我一大早心情不错跑去上自习,没见着几个人,但却被人用书全占了.我从心里鄙视这帮人.真够可恶的.

为考试而学习,学习成绩最好的人不一定是最好的.我对于文凭,我无可耐何.多少人的追求.一个学士,矾土学位证书就真的如此重要吗.为何不更努力去学习更有用的东西,而是费尽心机去考个什么证书.证书本无所用,它只不过证明你学习过.重要的是学习过程.我最讨厌的是那些应试书藉,编写乱七八糟.莫明其妙的让人记一些莫明其妙的概念.传说中中国的学生对于考试的能力可是一流的,他们总有办法在考试中获得高分.我可真是很惭愧呀.

也没什么好检讨的.总之今年也没做什么事.HOPE,明年能够平平安安,学业有成~~

3:23 PM | Add a comment | Permalink | Blog it | LIFE

December 30

关于等待

又到一年放假时,远方的游子大概都张罗回家了吧.

离放假还有十几天,可我已经很不愿意呆在学校了.尽管我知道回家了会没有什么事干.但总觉的不回家心里失落落的.我总觉的时间过的很慢,尽管我知道我可以抓紧时间多学下习,但总是无法摆脱将要放假的急躁.

学校的课上完了,在学校呆了一年,却发现理想与现实有着惊人的差异.在这一年中,至少有2/3的时间花在上网上面了.我不知道网络带给我什么.但我知道网络彻底变化了我的世界.任何事情,我都尝试着在网上找到答案.我所面对的生活,我遇到的问题,总有人比我先遇到,总有热心人解答.但也有意外.

互联网就像一座森林,什么样的动物都有.从狂妄自大的小人,到各行各业的高手.但高手也不一定会乐意帮助一窍有通的小菜.关于计算机,上大学之前我只知道游戏,但上大学之后,我懂得了很多.其中也沉迷很多东西.但任何事情都不会是简单的事,学计算机同样是件十分辛苦的事,远比玩游戏要复杂的多.

来时从家带了一台500的电脑,这也许是我最怀念的一台,可惜后来回为显示器问题我竟然把她卖了.后来买了台笔计本电脑,再后来合买了一台台式电脑.我总算意识到了我的错误,对性能的追求就像追赶飞驰的列车我们这些泛泛之辈是永远也无法追到的.

关于学习,我发现我竟然可以对着计算机系的同学夸夸其谈,因为他们就像我对我们的专业一样知之甚少.当然不排除高手级的人物,你是不可能比的上的.至少我所在大学是很少人意识到他们对专业的意识是一文不值.

对于计算机的学习,从初二学会五笔,到高考完后学PS.从大一看的厚厚一叠杂志,到大一上期的VB.后来还对UNIX沉迷过一段时间.后来自学了C,又学了C++,最终决定学VC.我不知道这其中我的思想发生了多少次变化.但是我的确是这么做了.但又不总是那么的用功.我曾想我要把图书馆的计算机书看完,但我发现我根本就没这本事.我常常莫明其妙的什么事也不干,于是就逛论坛,看电影打发时间.对于专业的学习,我更觉惭愧.因为我没有听过一节课,状态好时我就看下书,不好时就用睡觉打发无趣的时光.但对于我所看到人当中,除了少数像高中用功的人外,大部分就是这么做的.我曾经认为不用点名的话我的日子过的会很好,但我错了.上课并不是一文不值的.至少你能在课上看下教科书,然后排除无所事从的尴尬状态.这大概就是上大学还必须上课的唯一理由吧.

我不知道我以后的路在何方,你和大部分大学生一样的困或,因为我们不优秀,我们除了花钱,泡MM,上网,吃,泡的外啥也不会.如果要让一群废物去上战场消耗敌人的子弹,我想很多人都愿意去的.有时我真的很愿意去做一些事情,有些是因为做不到,而有些是没有足够的勇气.当和你在一起的人都不无所事事的人时,你会发现你也是这样的人了.

北方的雪是那么的迷人,但远不及自己对家的渴望.北方的菜说实话真不适合南方人的口味.一年花了九千的生活费,我想算是比较高的了.娱乐,吃,酒,哥们,泡MM.生活一层不变又有多少人愿意.碌碌无为只有无耐.青春就在这样一句玩笑,一句真情中流走了.

4:40 PM | Add a comment | Permalink | Blog it | LIFE

Blog

基本语法

<frameset> ... </frameset><frame src="url"> <noframes> ... </noframes>

各窗口的尺寸设置

<frameset cols=#>

<frameset rows=#>

COLS & ROWS

不允许各窗口改变大小 <frame noresize>

各窗口间相互操作(Frame Target)

窗口标识(Frame Name) <frame name=#><a href=url target=#>

<a href=url target=_blank> 新窗口<a href=url target=_self> 本窗口<a href=url target=_parent> 父窗口<a href=url target=_top> 整个浏览器窗口

Frame 的外观(Appearance)

各窗口边框的设置 <frame frameborder=#> #=yes, no / 1, 0

各窗口间空白区域的设置 <frameset framespacing=#> #=空白区域的大小

边框色彩 <frameset bordercolor=#>

页面空白(Margin) <frame marginwidth=# marginheight=#>

卷滚条设置 <frame scrolling=#> #=yes, no, auto

浮动窗口(Floating Frame)

<iframe src=# name=##> ... </iframe> #=初始页面的 URL##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)... = 此处文字将只出现在不支持 FRAMES 的浏览器中。

表元的背景色彩和背景图象<th bgcolor=#> <th background="URL">

表格边框的色彩 <table bordercolor=#>

表格边框色彩的亮度控制 <table bordercolorlight=#><table bordercolordark=#>

按行分组 <thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer)

按列分组 <colgroup align=#> #=left, right, center

列的属性控制 <col span=#> #=从左数起，具有指定属性的列的列数<col align=#> #=left, right, center

显示所有 4 个边框 <table frame=box>

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示上、下边框 <table frame=hsides>

只显示左、右边框 <table frame=vsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

显示所有分隔线 <table rules=all>

只显示组(Groups)与组之间的分隔线 <table rules=groups>

只显示行与行之间的分隔线 <table rules=rows>

只显示列与列之间的分隔线 <table rules=cols>

不显示任何分隔线 <table rules=none>

<table>...</table> - 定义表格<tr> - 定义表行<th> - 定义表头<td> - 定义表元(表格的具体数据)

跨多列的表元 <th colspan=#>

跨多行的表元 <th rowspan=#>

<table border width=# height=#>

<table border cellspacing=#>

<table border cellpadding=#>

<tr align=#>

<th align=#> #=left, center, right

<td align=#>

<tr valign=#>

<th valign=#> #=top, middle, bottom, baseline

<td valign=#>

<table align=left> <table align="left" border> <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> </table> My favorites...<br> cookies, chocolates, and more.

<table align=right>

<caption align=#> ... </caption> #=left, center, right

<caption valign=#> ... </caption> #=top, bottom

表单的基本语法

<form action="url" method=*>... ... <input type=submit> <input type=reset></form>

表单中提供给用户的输入形式

<input type=* name=**>

表单中提供给用户的输入形式

<input type=* name=**>

<input type=*><input type=* value=**>

<input type=* size=**><input type=* maxlength=**>

<input type=checkbox><input type=checkbox checked><input type=checkbox value=**>

<input type=radio value=**><input type=radio value=** checked>

<input type=hidden value=*>

基本语法

<select name=*><option> ...</select>

<option selected><option value=**>

<select size=**>

<select size=** multiple>

<textarea name=* rows=** cols=**> ... <textarea>

对于很长的行是否进行换行的设置(Word Wrapping)

<textarea wrap=off> ... </textarea>

<textarea wrap=soft> ... </textarea>

<textarea wrap=hard> ... </textarea>

链接图象的基本语法

<img src=#> #=图象的 URL

<img alt=#> #=在浏览器尚未完全读入图象时，在图象位置显示的文字

图象和文字的对齐

<img align=#> #=top, middle, bottom<img src=URL align=top> My face!

<frameset> ... </frameset>
<frame src="url">
<noframes> ... </noframes>

窗口标识(Frame Name)
<frame name=#>
<a href=url target=#>

<a href=url target=_blank> 新窗口
<a href=url target=_self> 本窗口
<a href=url target=_parent> 父窗口
<a href=url target=_top> 整个浏览器窗口

各窗口间空白区域的设置
<frameset framespacing=#> #=空白区域的大小

<iframe src=# name=##> ... </iframe>
#=初始页面的 URL
##=窗口标识(Frame Name)(之后可对此标识进行各窗口间相互操作)
... = 此处文字将只出现在不支持 FRAMES 的浏览器中。

表元的背景色彩和背景图象
<th bgcolor=#>
<th background="URL">

表格边框的色彩
<table bordercolor=#>

表格边框色彩的亮度控制
<table bordercolorlight=#>
<table bordercolordark=#>

按行分组
<thead> ... </thead> - 表的题头(Header)
<tbody> ... </tbody> - 表的正文(Body)
<tfoot> ... </tfoot> - 表的脚注(Footer)

按列分组
<colgroup align=#> #=left, right, center

列的属性控制
<col span=#> #=从左数起，具有指定属性的列的列数
<col align=#> #=left, right, center

<table>...</table> - 定义表格
<tr> - 定义表行
<th> - 定义表头
<td> - 定义表元(表格的具体数据)

<table align=left>
<table align="left" border> <tr><th>Food</th><th>Drink</th><th>Sweet</th> <tr><td>A</td><td>B</td><td>C</td> </table> My favorites...<br> cookies, chocolates, and more.

`<form action="url" method=*> ... ... <input type=submit> <input type=reset> </form>`

`<input type=* name=**>`

`<input type=* name=**>`

<input type=>
<input type= value=**>

<input type=* size=**>
<input type=* maxlength=**>

<input type=checkbox>
<input type=checkbox checked>
<input type=checkbox value=**>

<input type=radio value=>
<input type=radio value= checked>

<select name=*>
<option> ...
</select>

<option selected>
<option value=**>

<textarea name=* rows= cols=> ... <textarea>

<img alt=#>
#=在浏览器尚未完全读入图象时，在图象位置显示的文字

<img align=#> #=top, middle, bottom
<img src=URL align=top> My face!

<hn align=#>...</hn>
<p align=#>...</p> #=left, center, right

<spacer type="horizontal" size=#> #=水平空白宽度
<spacer type="vertical" size=#> #=竖直空白高度

<spacer type="block" width=# height=# align=##>
#=空白的尺寸
##=top, middle, bottom, left, right

第二章字体(FONT)标记(TAGS)

<hn>---</hn> 这些标记显示黑体字。
<hn>---</hn> 这些标记自动插入一个空行，不必用 <p> 标记再加空行。
因此在一行中无法使用不同大小的字体。