阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
html基础学习笔记（2）
html基础学习笔记（2） 26/<\{q~
出处 Z5v_- +K
xF{%@t
今天晚上继续。。。 '/<\X{l8
?w(hPUd!2
5列表 7R6B}B?/
#Gi`s?
1）无序列表：无序，就是没有特别的序号，也就是平等哦。。下面看个例子吧。 KyrZ&E.`
:lXY% [!6P
<ul><li>内容1<li>内容2<li>内容3</ul>（注：对于ul，可以添加属性type，属性值有disc,square,circle，这样就可以改变序号了◎） t)j$lmQ n
R|*0_!O:[
2）有序列表：这个当然就是前面有序号咯。 %!t9)pNc
5,
,'hAq_
<ol><li>内容1<li>内容2<li>内容3</ol>（注：对于ol，同样可以添加type属性，属性值可以是1，a，A，i，I，呵呵，自己测试一下。）另外，对于ol，可以从喜欢的序号开始排序，用的属性就是ol的start和li的value了，很明白吧：） =!L}/Dl
9_wDh0b~p
3）列表嵌套：嵌套，类似于树状菜单的东西。可以使用<ul><ul></ul></ul>(ol也一样)类似的格式进行使用。 I ;rW!Hb
HsTY* ^V
4）定义列表：主要有dl，dt，dd，分别代表定义标识，头部和内容，使用方法： GcN}I= 4|
FNUs
.d"
<dl><dt>头部<dd>定义的内容</dl>（注：dt和dd不需要结束标记） Q >4NUq
)w4U]inJ$"
6表单 3:xx:Jt
:=*G7ZyW$
1）定义一个form：定义一个form标记，用于确定发送消息的类型和处理方式，其中必须的属性就是action了。<form action="http://zsu.edu.cn/..." method="post">（注：method用于说明传送数据的方式，还有get方式，不过现在常用post）。类似的有，<form action="mailto:mc02cxj@zsu.edu.cn" method="post"> Zq &'a_
2'=)ese
2)大部分的form都是在<input>中处理的。如下面所示： G0!6rDu2,
!4Zy$6 9R
请输入名字<input type="text" name="username"><p> /
1Gmga5
请输入口令<input type="password" name="pword"><p> $,:mq>]![{
请提出宝贵意见<textarea name="comment" rows=3 cols=20 > 'AK '(cZ
</textarea><p> &-FG}|*4M
<input type="submit" value="Submit form"> ??aO3 Vm{
<input type="reset" value="Clear data"> 0p[k7W u
w t GS"L
自己可以修改一下属性并进行测试◎ 5|0/$ SWd*
c`x4."m
3）复选框和单选框 vfn[&WN]
z*.G0D Fw
<input type="checkbox" name="check1" value="check1">check1 cvy
5|;- u
<input type="checkbox" name="check2" checked value="check2">check2 V+D5<nICr
<input type="checkbox" name="check3" checked value="check3">check3<p>（这是复选框） u (3 uZ:
<input type="radio" name="radio1" value="radio1">radio1 !pU^?Hy=
<input type="radio" name="radio2" checked value="radio2">radio2 z59;Qk
<input type="radio" name="radio3" value="radio3">radio3<p>（这是单选框）
v/xlb&Xx
i 1w ]j
4）下拉菜单和滚动菜单 p #w8$Qjp
e.L&A |
<select> ,<+:x l
<option>1</option> |L
Jv*
<option>2</option> v&G9HiH
<option>3</option> JE{ cZ<NNH
<option>4</option> jFg19C{=X
<option>5</option> >{(c \oMD
</select><p>（下拉菜单） =Bc{0p*
<select multiple size=5 name="1"> `L$ Av9X\
<option>1</option> 9$U>St
<option>2</option> ~ t2" L|i
<option>3</option> 4J`-&05O
<option>4</option> U~sC%Ri-@U
<option>5</option> K!(WcoA&2i
</select><p>（滚动菜单，就是比下拉菜单多了个multiple属性和name属性，而size属性是可有可无） a}` M[%d7
ubZuvWZ
7帧结构 >Giw\|:f(
)IK%Dg(v
什么是帧结构，就是在一个完整网页里边分页，当一个页的url发生变化，其他的可以不变：）使用帧结构可以使得网页更加多变，内容更加丰富，不过也会带来一定的麻烦，因为它打乱了原来的基本操作规则。
h8p{
cEp/qzAiD%
如何建立一个帧结构？如下面的例子所示。 YH%U$eS#g
;7E"@b,tPN
<html>///注意：没有body的哦。。 t:lDFv4s
<head> hC{2LLu;n
<title>帧结构</title> cuG;1,?b
</head> D5@}L$ u
<frameset rows="50%,*" cols="50%,*">//定义了网页的分页结构，包括了行数和列数 h$~$a;2cR
<frame src="doc1.html">//引用网页的基本写法 *a_QuEw _k
<frameset rows="40%,50%">//定义了一个嵌套的帧 xzMpT ZQ
<frame src="doc2.html"> w U]8hkl?
<frame src="doc3.html" scrolling="yes">//scrooling表示是否带有滚动条 "/^kFsvp
</frameset> j;Lp@~M
<frame src="doc4.html" frameborder="0">//frameborder表示边框格式，1表示缺省，0表示无 [KO\!u|?YS
<frame src="doc5.html" noresize>//noresize使得帧窗口的大小不可移动！ ]Zay9jD}c-
</frameset> Nt<Ac&6
s
</html> WV|9d}5
[A!=Hv_$
注：另外，如果在帧窗口中加入<a herf="新网页" target="_top">这样的话，当激活这个链接的时候，就清除了当前的帧结构，用新页代替，可以自己测试一下。 k
;
vOPcw
8B S$ 6Pa
8表格 =5pwNi_S
rA_ r$X
如何建立一个表格呢？ lg (>n&
pek5P4W_
<table border=20 cellspacing=20 cellpadding=20> //大家可以测试一下，这3个分别表示的是什么。。其中border表示边框，如果不设置，那么显示的表格就没有边框。而cellsapcing是格间线宽度，cellpadding是内边框！ @M }`nKXM
<caption align=center>数据</caption> |@>Zc5M
Y$
<tr> :e_yOT}}
<th>数据1</th><th>数据2</th>//标题，可以使用align属性进行设置其出现的位置 jI}{0LW&F&
</tr> # zd}xla0]
<tr> ^&c|z3 5F
<td>一些数据</td><td>还有数据</td>//数据，可以使用align和valign对其上下左右的位置进行设置 9Cb>J
</tr> "0"8Rp&V|
<tr> R&R{I/;i*.
<td>更多数据</td><td>最后数据</td>//还可以对其bgcolor属性进行设置数据的颜色 {}PBYX R
</tr> ~]K<V h`
</table> a)L=+Z
K)8 m?sf/
注：还可以进行跨行和跨列的设置，用的是colspan和rowspan（看意思就知道了：））如： <th rowsspan=4>数据内容</th> E"H> [E
'-X913eG!
9CSS Cd'SPaR
}
xzbg
什么是CSS：就是层叠式风格列表，类似于网页格式的模板，也相当于编程里边的类一样，定义了自己的风格，标记着属性的值（或许比喻不怎么恰当，就原谅一下咯。）下面给出一个完整的例子，大家注意看释: <html> 0 .t 1p(x;
<head> PmE2T\{s!
<title>CSS</title> w`0r`\#V/
<style type="text/css">//用style标记，而且是在head里边定义的 ?jBh=X\]:
h1{font-style:italic} B7qiC
X}pD
h2{text-style:right} ~{O@tt)F
h3{font-family:arial} n 1)m(,{
h4{font-style:italic} j]_"MMwk$<
div{color:blue}// 定义形式：标记选择器{属性1：值1；属性2：值2；属性3：值3；......} b<rJ@1qtJ
div code{color:red}//上下文：如果在网页中，<code>定义在<div>里边，那么就套用格式，如果没有，就不 TBqJ.a
h5,h6{color:orange}//一次多个选择器 A|U_$!cLZ
p.aside{font-family:arial;font-style:italic}//定义了一个类,可以给文件中独立的块进行设置风格。 HPR*:t
.arial{font-family:arial}//定义了通用类，使用方法与类相同 |2~fO yA+
a:link{color:green} BK:S:
a:active{color:blue;font-size:150%} @=[ SsS
a:visite{color:red}//定义了伪类，所谓伪类，就是用于与用户交互操作有关的属性，如超链接等等。 &Ex Yul
</style> (ye l
</head> N^. !l_
<body> &Qdd\h#
<h1>标题1</h1> aTy&"
<h2>标题2</h2> =' cr@ [~i
<h3>标题3</h3> e$^ O_e
<h4>标题4</h4> ^Cwz A B
<div>用<strong><em>蓝色</em></strong>文字</div> ^25[%aJI
<div>是<code>红色</code>吗？</div> Y<S,Xr;J:
<code>是红色吗？</code> @GG Pw9a
<h5>orange</h5> s^$zO p9
<h6>orange</h6> ` 0k
<p class=aside>爱逛街的老鼠？？</p> //这就是类的使用方法，调用了class @`ttyI^1f
</body> Y Dyi6x,
</html> ,wlh0;,
f&B u_r
注：由于css功能强大，所以只是简单写了写，以后有机会再专门写写 |vnfY;
;z1
/tf}8d
ye。。总算搞定了。。我这次的目的也只是学学皮毛，这样有助于学习xml。最后，希望大家技术进步。。呵呵！◎欢迎收看。。。
|
|
|
|
[楼 主]
|
Posted: 2006-04-03 14:29 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> html基础学习笔记（2）
