HTML学习笔记(4)
上一篇 / 下一篇 2008-01-05 21:20:13 / 个人分类:HTML
文字标签属性:51Testing软件测试网MHIN!D:[XQt
文字属性标记51Testing软件测试网 @X|bM|%f
1.文字颜色51Testing软件测试网/G;Qa$u)L b6B]
指定颜色 <font color=#> ... </font>51Testing软件测试网!n0Yr^k,L.p\2ZS
#=RRGGBB 16 进制数码51Testing软件测试网J!?.gHMc
文字属性标记
xw%Wu&xG02.文字字体51Testing软件测试网hJ&?&~@~Kcy` b
<font face=“#, #, ..., #”> ... </font>#=客户端可获得的字体51Testing软件测试网"s&W |x8GR,C] rO
文字属性标记
AiG0Kn6oe$b-z03.文字大小
{D?1d jO'n0<font size=#> ... </font>
!sX6Sd6BL3O0#=1, 2, 3, 4, 5, 6, 7 or +#, -#
c%jpa$Kk JY0文字属性标记
!y?oV(l^R04.文字标题51Testing软件测试网~'B4b|h P;N
<h#> ... </h#>51Testing软件测试网L |t&M!Z'i ItN;P;a
#=1, 2, 3, 4, 5, 6
:t]YJ{4L fw051Testing软件测试网D'sriv
行的控制
8DZ[FZ0g9I&}"N7q0段(Paragraph) (可以看作是空行) <p>51Testing软件测试网4q&o$Fvy
空白占位符
1e#u H;nY\8y^6D0行的控制51Testing软件测试网8X[dv` s
HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即51Testing软件测试网 QaFq)G NJ3J
51Testing软件测试网PQhc&XT@YraK
<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不
+V;@ b|Dl@(kX0
+C;z}#b.Q8u0是成对出现的。
J2KJ*U}tu"u0不换行<nobr>
0};h-R C,K%CtL&j051Testing软件测试网 m/Z MNsb&M
HTML文字与段落格式控制51Testing软件测试网t:W-bU9}F_r~E!W
<body>……
,tzk_W0 <i>倾斜文本</i>
,F{2oc]G0 <b>粗体文本</b>51Testing软件测试网T[}5Kp/U(n
<u>下划线文本</u>
,d*S t ~5Hb0BBk0 <s>删除线文本</s>51Testing软件测试网E&X$UK+^RW/c
……</body>
mq#f(^-R;p&z\051Testing软件测试网/Iw-v+AX#W6t
基本组成部分—HTML注释51Testing软件测试网_elQDoYr^)~Ez gK
HTML文档可以插入注释。注释内容不会在浏览器窗口显示51Testing软件测试网1Hv@)A;nl_;@
HTML注释的格式为:<!-- 注释内容 -- > <!--多行注释内容 -- >
;k D G&dej0Fb0
)z&_o(L Z:j+a0文字的对齐:
'c%X'c4] Ukq0<hn align=#>...</hn> (n=1,2,3,4,5,6)
:K!p[;Y6Lp0jF0<p align=#>...</p> (#=left, center, right)51Testing软件测试网%x$}b'X1B
51Testing软件测试网/~(q:w?9N*|/`B6W&~7o\
文字的分区显示
D8cDN!X$Rf@cy0<div align=#> ... </div> (#=left, center, right)
*o4q,Tm\%V+y:@&n0
4Z}$e@(IS4wu0HTML段落与分行控制
?:n)N5to.EE0居中--- <center>元素51Testing软件测试网)nRYKkE8d*w
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类51Testing软件测试网 VZb,o:x/?#|O+[.c8P
51Testing软件测试网7x@ [`VnD;E
似51Testing软件测试网X_!i:jLV!k-h]f2\
标尺线51Testing软件测试网[J:P*@?t
<hr size = #>:设定线宽
B ^ q?)T/P0 <hr width=#>:设定线长
e6A#G?^ Vg@V,M7{K+]0 <hr align=#>:设定对齐方式 #=left, right51Testing软件测试网?inC&\eI*QI
<hr color=#> :设定线的颜色51Testing软件测试网hy!G4s[8\J
无序列表元素
MjGjWd.\M0列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化51Testing软件测试网mW"_:h St+j}
[9Pu-lF tlQc0。
]NN,o @XC])r0无序列表是由<ul>和<li>元素定义的:51Testing软件测试网g#U0C*I;O5Pn
<ul>
G9Xl [y(sm0<li>sports</li>
/@7P0h`j:\x^0<li> food </li>51Testing软件测试网6|J#G-]"P N/\-d
<li> drink </li>
:Tb?.Md+IL0\0<li> friends </li>51Testing软件测试网;p(n'iiR#]Y
</ul>51Testing软件测试网]3E W)Pv%D`o
无序列表的默认符号是圆点。51Testing软件测试网6A E x p:e,m|Yr
<ul>元素有type属性,通过定义不同的type属性可以改变列表的项目符号。51Testing软件测试网%W|!x:`/G
目前,type属性的属性值有:disc(圆)、circle(圆圈)、square(方块)51Testing软件测试网iFF]@:XHl8Q;n'Q\
%?#^mV+TE;M^)Z]"X&] B0有序列表元素
rr"o-@U0有序列表由<ol>和<li>定义:
EnKxBv0<ol>
0_EOk0Rt/T&z x$`0 <li>sports</li>
gM&i%tL:j V/z0 <li> drink</li>51Testing软件测试网 ]f3uD R5O^
<li> friends</li>51Testing软件测试网PM3Fp|+?'?R&X
</ol>
#A PU7fAm1Uu,p3~0<ol>元素也有自己的type属性,type属性的属性值有1、A、a、I、i等。例如,我们以A、B、C……作为列51Testing软件测试网9x&x,Y CX zi
51Testing软件测试网$ea*t6w hRcu
表的编号51Testing软件测试网{u2N3q\
<ol>元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义<ol>元素51Testing软件测试网FS(J9c1h#j%Km!f S
51Testing软件测试网&OqK+h\hi
的start属性
&weYeujR051Testing软件测试网9{ zHI BsV M
超级链接—普通超级链接
#_[e-X ja4QR+f ^0超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不
$zq5V6M-W(Lt f]0
w mBl)` d N6yjP0复存在。所以,对超级链接的掌握具有特殊重要的意义。51Testing软件测试网(htS,kqF~/?
超级链接是用锚元素<a>定义的
"u:d7OZW0XVw0在<a>元素下,有元素属性href,href的属性值为一个URL地址
7lSzEYG Hn0如:<a href=“http://www.enet.com.cn/eschool”>指向学院的超级链接</a>51Testing软件测试网]Pz@Dh
如:<a href=“29.htm">普通超级链接</a>
hyB R`'yh:N0
[6iHXM,G#F @0超级链接—E-mail超级链接51Testing软件测试网s?{F/y)\/sv
超级链接可以指向E-mail地址
uB N#o@J8}T2vK0如:<a href=“mailto:hzhang@mail.enet.com.cn">指向E-mail地址的超级链接</a>
dY6wQ-U&Rm|;X0
0[[;[0w_*`v d@ O0超级链接—新开链接窗口
3w"j }b?0开一个新的(浏览器)窗口 (Target Window)
7yFhi3T&wJN6y0<a href="URL" target=“_blank"> ... </a>
ji7ziK}]dCC(x0
)V%o(z-ND2C FK0超级链接—去除下划线51Testing软件测试网F9{([4M QG"t
去掉超级连接的下划线:style=“text-decoration: none”51Testing软件测试网#ZWeKl
51Testing软件测试网&O&{}+W-`
超级链接——其他超级链接
!k-qcDEc a1I0WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用,如:Ftp等。实际上mailto也属于非WWW
,f&Pu A"?U2rVB }051Testing软件测试网 F!p.~ u*FE[
应用。我们可以类似的创建指向Ftp等的超级链接;51Testing软件测试网 F9d,HlF*oz
指向其他Internet应用的超级链接不是我们掌握的重点。51Testing软件测试网o3e,qw,Id`O
51Testing软件测试网:r(fv^7G B\
超级链接——锚点(书签)51Testing软件测试网;pM5P8B,n*[;?
<a name="aa">51Testing软件测试网Y{tA2U:r2[JP
<a href="#aa">指向本页面锚点aa的超级链接</a>51Testing软件测试网/E&_Q&gYl+M#T9n
<a href=“23.htm#top”>指向23页面的锚点top的超级链接</a>51Testing软件测试网$RZ:uJ |\N(|
51Testing软件测试网)MiD^9^:fz
下面是练习:51Testing软件测试网B3Zf#`0PUj7G
<HTML>
(Mtc2Xi0<HEAD>
7s"jE1F1aK9H-fH0<title>泡酸的角落</title>
nGzq6s CfnH Z"F H0<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>51Testing软件测试网#g L0R9p]!`Z s Q3n La
</HEAD>
hE(b o]d_ v0<BODY link="blue" vlink="red" alink="green">51Testing软件测试网;\`e.I?b^[
51Testing软件测试网-k@ ~qhBy?
<a name="top">51Testing软件测试网G8p2Fo]!\
51Testing软件测试网-?0BIlg
文字属性标记51Testing软件测试网 @X|bM|%f
1.文字颜色51Testing软件测试网/G;Qa$u)L b6B]
指定颜色 <font color=#> ... </font>51Testing软件测试网!n0Yr^k,L.p\2ZS
#=RRGGBB 16 进制数码51Testing软件测试网J!?.gHMc
文字属性标记
xw%Wu&xG02.文字字体51Testing软件测试网hJ&?&~@~Kcy` b
<font face=“#, #, ..., #”> ... </font>#=客户端可获得的字体51Testing软件测试网"s&W |x8GR,C] rO
文字属性标记
AiG0Kn6oe$b-z03.文字大小
{D?1d jO'n0<font size=#> ... </font>
!sX6Sd6BL3O0#=1, 2, 3, 4, 5, 6, 7 or +#, -#
c%jpa$Kk JY0文字属性标记
!y?oV(l^R04.文字标题51Testing软件测试网~'B4b|h P;N
<h#> ... </h#>51Testing软件测试网L |t&M!Z'i ItN;P;a
#=1, 2, 3, 4, 5, 6
:t]YJ{4L fw051Testing软件测试网D'sriv
行的控制
8DZ[FZ0g9I&}"N7q0段(Paragraph) (可以看作是空行) <p>51Testing软件测试网4q&o$Fvy
空白占位符
1e#u H;nY\8y^6D0行的控制51Testing软件测试网8X[dv` s
HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即51Testing软件测试网 QaFq)G NJ3J
51Testing软件测试网PQhc&XT@YraK
<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不
+V;@ b|Dl@(kX0
+C;z}#b.Q8u0是成对出现的。
J2KJ*U}tu"u0不换行<nobr>
0};h-R C,K%CtL&j051Testing软件测试网 m/Z MNsb&M
HTML文字与段落格式控制51Testing软件测试网t:W-bU9}F_r~E!W
<body>……
,tzk_W0 <i>倾斜文本</i>
,F{2oc]G0 <b>粗体文本</b>51Testing软件测试网T[}5Kp/U(n
<u>下划线文本</u>
,d*S t ~5Hb0BBk0 <s>删除线文本</s>51Testing软件测试网E&X$UK+^RW/c
……</body>
mq#f(^-R;p&z\051Testing软件测试网/Iw-v+AX#W6t
基本组成部分—HTML注释51Testing软件测试网_elQDoYr^)~Ez gK
HTML文档可以插入注释。注释内容不会在浏览器窗口显示51Testing软件测试网1Hv@)A;nl_;@
HTML注释的格式为:<!-- 注释内容 -- > <!--多行注释内容 -- >
;k D G&dej0Fb0
)z&_o(L Z:j+a0文字的对齐:
'c%X'c4] Ukq0<hn align=#>...</hn> (n=1,2,3,4,5,6)
:K!p[;Y6Lp0jF0<p align=#>...</p> (#=left, center, right)51Testing软件测试网%x$}b'X1B
51Testing软件测试网/~(q:w?9N*|/`B6W&~7o\
文字的分区显示
D8cDN!X$Rf@cy0<div align=#> ... </div> (#=left, center, right)
*o4q,Tm\%V+y:@&n0
4Z}$e@(IS4wu0HTML段落与分行控制
?:n)N5to.EE0居中--- <center>元素51Testing软件测试网)nRYKkE8d*w
<center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类51Testing软件测试网 VZb,o:x/?#|O+[.c8P
51Testing软件测试网7x@ [`VnD;E
似51Testing软件测试网X_!i:jLV!k-h]f2\
标尺线51Testing软件测试网[J:P*@?t
<hr size = #>:设定线宽
B ^ q?)T/P0 <hr width=#>:设定线长
e6A#G?^ Vg@V,M7{K+]0 <hr align=#>:设定对齐方式 #=left, right51Testing软件测试网?inC&\eI*QI
<hr color=#> :设定线的颜色51Testing软件测试网hy!G4s[8\J
无序列表元素
MjGjWd.\M0列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化51Testing软件测试网mW"_:h St+j}
[9Pu-lF tlQc0。
]NN,o @XC])r0无序列表是由<ul>和<li>元素定义的:51Testing软件测试网g#U0C*I;O5Pn
<ul>
G9Xl [y(sm0<li>sports</li>
/@7P0h`j:\x^0<li> food </li>51Testing软件测试网6|J#G-]"P N/\-d
<li> drink </li>
:Tb?.Md+IL0\0<li> friends </li>51Testing软件测试网;p(n'iiR#]Y
</ul>51Testing软件测试网]3E W)Pv%D`o
无序列表的默认符号是圆点。51Testing软件测试网6A E x p:e,m|Yr
<ul>元素有type属性,通过定义不同的type属性可以改变列表的项目符号。51Testing软件测试网%W|!x:`/G
目前,type属性的属性值有:disc(圆)、circle(圆圈)、square(方块)51Testing软件测试网iFF]@:XHl8Q;n'Q\
%?#^mV+TE;M^)Z]"X&] B0有序列表元素
rr"o-@U0有序列表由<ol>和<li>定义:
EnKxBv0<ol>
0_EOk0Rt/T&z x$`0 <li>sports</li>
gM&i%tL:j V/z0 <li> drink</li>51Testing软件测试网 ]f3uD R5O^
<li> friends</li>51Testing软件测试网PM3Fp|+?'?R&X
</ol>
#A PU7fAm1Uu,p3~0<ol>元素也有自己的type属性,type属性的属性值有1、A、a、I、i等。例如,我们以A、B、C……作为列51Testing软件测试网9x&x,Y CX zi
51Testing软件测试网$ea*t6w hRcu
表的编号51Testing软件测试网{u2N3q\
<ol>元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义<ol>元素51Testing软件测试网FS(J9c1h#j%Km!f S
51Testing软件测试网&OqK+h\hi
的start属性
&weYeujR051Testing软件测试网9{ zHI BsV M
超级链接—普通超级链接
#_[e-X ja4QR+f ^0超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不
$zq5V6M-W(Lt f]0
w mBl)` d N6yjP0复存在。所以,对超级链接的掌握具有特殊重要的意义。51Testing软件测试网(htS,kqF~/?
超级链接是用锚元素<a>定义的
"u:d7OZW0XVw0在<a>元素下,有元素属性href,href的属性值为一个URL地址
7lSzEYG Hn0如:<a href=“http://www.enet.com.cn/eschool”>指向学院的超级链接</a>51Testing软件测试网]Pz@Dh
如:<a href=“29.htm">普通超级链接</a>
hyB R`'yh:N0
[6iHXM,G#F @0超级链接—E-mail超级链接51Testing软件测试网s?{F/y)\/sv
超级链接可以指向E-mail地址
uB N#o@J8}T2vK0如:<a href=“mailto:hzhang@mail.enet.com.cn">指向E-mail地址的超级链接</a>
dY6wQ-U&Rm|;X0
0[[;[0w_*`v d@ O0超级链接—新开链接窗口
3w"j }b?0开一个新的(浏览器)窗口 (Target Window)
7yFhi3T&wJN6y0<a href="URL" target=“_blank"> ... </a>
ji7ziK}]dCC(x0
)V%o(z-ND2C FK0超级链接—去除下划线51Testing软件测试网F9{([4M QG"t
去掉超级连接的下划线:style=“text-decoration: none”51Testing软件测试网#ZWeKl
51Testing软件测试网&O&{}+W-`
超级链接——其他超级链接
!k-qcDEc a1I0WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用,如:Ftp等。实际上mailto也属于非WWW
,f&Pu A"?U2rVB }051Testing软件测试网 F!p.~ u*FE[
应用。我们可以类似的创建指向Ftp等的超级链接;51Testing软件测试网 F9d,HlF*oz
指向其他Internet应用的超级链接不是我们掌握的重点。51Testing软件测试网o3e,qw,Id`O
51Testing软件测试网:r(fv^7G B\
超级链接——锚点(书签)51Testing软件测试网;pM5P8B,n*[;?
<a name="aa">51Testing软件测试网Y{tA2U:r2[JP
<a href="#aa">指向本页面锚点aa的超级链接</a>51Testing软件测试网/E&_Q&gYl+M#T9n
<a href=“23.htm#top”>指向23页面的锚点top的超级链接</a>51Testing软件测试网$RZ:uJ |\N(|
51Testing软件测试网)MiD^9^:fz
下面是练习:51Testing软件测试网B3Zf#`0PUj7G
<HTML>
(Mtc2Xi0<HEAD>
7s"jE1F1aK9H-fH0<title>泡酸的角落</title>
nGzq6s CfnH Z"F H0<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”>51Testing软件测试网#g L0R9p]!`Z s Q3n La
</HEAD>
hE(b o]d_ v0<BODY link="blue" vlink="red" alink="green">51Testing软件测试网;\`e.I?b^[
51Testing软件测试网-k@ ~qhBy?
<a name="top">51Testing软件测试网G8p2Fo]!\
51Testing软件测试网-?0BIlg