» 您尚未 登录   注册 | 社区服务 | 帮助 | 社区 | 无图版


常州五颜六色网络技术有限公司 -> 网站建设 -> html基础学习笔记(2)
 XML   RSS 2.0   WAP 

--> 本页主题: html基础学习笔记(2) 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

html基础学习笔记(2)

html基础学习笔记(2) z13"S(5D~  
出处   -uO< ]  
,ISq7*%F  
今天晚上继续。。。 4_r8ynq{z  
NSb< 7_L  
5列表 q. BqOa:  
[k."R@?  
1)无序列表:无序,就是没有特别的序号,也就是平等哦。。下面看个例子吧。 5\QNGRu"  
UxzwgVT  
<ul><li>内容1<li>内容2<li>内容3</ul>(注:对于ul,可以添加属性type,属性值有disc,square,circle,这样就可以改变序号了◎) r OB\u|Pg  
a[9;Okm #  
2)有序列表:这个当然就是前面有序号咯。 1Rp|*>  
y=  
<ol><li>内容1<li>内容2<li>内容3</ol>(注:对于ol,同样可以添加type属性,属性值可以是1,a,A,i,I,呵呵,自己测试一下。)另外,对于ol,可以从喜欢的序号开始排序,用的属性就是ol的start和li的value了,很明白吧:) 9iS3.LCfX  
$8_*LR$  
3)列表嵌套:嵌套,类似于树状菜单的东西。可以使用<ul><ul></ul></ul>(ol也一样)类似的格式进行使用。 P?]q*KViM  
8eOQRC33  
4)定义列表:主要有dl,dt,dd,分别代表定义标识,头部和内容,使用方法: L/<Up   
`I m;@_J  
<dl><dt>头部<dd>定义的内容</dl>(注:dt和dd不需要结束标记) O5k's  
cs@5K$v  
6表单 uc7Y8iO  
\DGm[/P  
1)定义一个form:定义一个form标记,用于确定发送消息的类型和处理方式,其中必须的属性就是action了。<form action="http://zsu.edu.cn/..." method="post">(注:method用于说明传送数据的方式,还有get方式,不过现在常用post)。类似的有,<form action="mailto:mc02cxj@zsu.edu.cn" method="post"> D0x+b2x^  
T<!`~#kM  
2)大部分的form都是在<input>中处理的。如下面所示: p}(w"?2  
{v]>sn;P1  
请输入名字<input type="text" name="username"><p> 9=JU &/!  
请输入口令<input type="password" name="pword"><p> c#{<| .  
请提出宝贵意见<textarea name="comment" rows=3 cols=20 > #+_Oy Z*  
</textarea><p> I;mtyS  
<input type="submit" value="Submit form"> p1Lx\   
<input type="reset" value="Clear data"> \=5CNe  
AvV.faa  
自己可以修改一下属性并进行测试◎ WtlIrdc  
Ho"FB|e  
3)复选框和单选框 8E0Rg/DnT  
u $sX6  
<input type="checkbox" name="check1" value="check1">check1 Y1 -cz:  
<input type="checkbox" name="check2" checked value="check2">check2 )n0g6  
<input type="checkbox" name="check3" checked value="check3">check3<p>(这是复选框) '`3-X];p  
<input type="radio" name="radio1" value="radio1">radio1 5'z&kl0"S  
<input type="radio" name="radio2" checked value="radio2">radio2 #Q$4EQB  
<input type="radio" name="radio3" value="radio3">radio3<p>(这是单选框) yY&(?6\{<<  
93'%aSDI%  
4)下拉菜单和滚动菜单 Q&F@[k  
W tzV|e,  
<select> uH f~KYL  
  <option>1</option> {s`1+6_&Vz  
  <option>2</option> :Z< 5iLq  
  <option>3</option> nh E!Pk  
  <option>4</option> FG8bP  
  <option>5</option> ~ Q]B}qdm  
</select><p>(下拉菜单) @pG\5Jnf  
<select multiple size=5 name="1"> qC3 rHT]  
  <option>1</option> T`WFY  
  <option>2</option> qKSM*k~  
  <option>3</option> @nZFw.  
  <option>4</option> ^|sQkufo  
  <option>5</option> OI`Lb\8pP  
</select><p>(滚动菜单,就是比下拉菜单多了个multiple属性和name属性,而size属性是可有可无) I&(cdKY z  
H%sQVE7m  
7帧结构 B2,! 0Re  
GN~:rdd  
什么是帧结构,就是在一个完整网页里边分页,当一个页的url发生变化,其他的可以不变:)使用帧结构可以使得网页更加多变,内容更加丰富,不过也会带来一定的麻烦,因为它打乱了原来的基本操作规则。 #Xn#e  
s*!2oj  
如何建立一个帧结构?如下面的例子所示。 ".@SQgyb0  
:V_$?S  
<html>///注意:没有body的哦。。 IXg${I}_Q  
<head> | z('yy$  
<title>帧结构</title> 5Y,e}+I>  
</head> wvc?2~`  
<frameset rows="50%,*" cols="50%,*">//定义了网页的分页结构,包括了行数和列数 Q5jP`<zWU  
<frame src="doc1.html">//引用网页的基本写法 _zpn+XVdQ  
<frameset rows="40%,50%">//定义了一个嵌套的帧 I|`K;a  
<frame src="doc2.html"> AX1\L |tJS  
<frame src="doc3.html" scrolling="yes">//scrooling表示是否带有滚动条 Lv_6Mf(  
</frameset> Q% dpGI  
<frame src="doc4.html" frameborder="0">//frameborder表示边框格式,1表示缺省,0表示无 %d?%^) u,  
<frame src="doc5.html" noresize>//noresize使得帧窗口的大小不可移动! F\]rxl4(L  
</frameset> J%[K;WjrZJ  
</html> p(U'Ydl~  
kKjYMYT6  
注:另外,如果在帧窗口中加入<a herf="新网页" target="_top">这样的话,当激活这个链接的时候,就清除了当前的帧结构,用新页代替,可以自己测试一下。 f5yd2wKy6  
^QnVYTM  
8表格 *PMql$  
oF*Y$OEu?c  
如何建立一个表格呢? cw^FOV*  
> PYe"  
<table border=20 cellspacing=20 cellpadding=20> //大家可以测试一下,这3个分别表示的是什么。。其中border表示边框,如果不设置,那么显示的表格就没有边框。而cellsapcing是格间线宽度,cellpadding是内边框! ^X_%e|  
<caption align=center>数据</caption> t4JGd)r  
<tr> _WSJg1  
<th>数据1</th><th>数据2</th>//标题,可以使用align属性进行设置其出现的位置 L@2H>Lh35  
</tr> zcNV<tx  
<tr> a v`eA`)S  
<td>一些数据</td><td>还有数据</td>//数据,可以使用align和valign对其上下左右的位置进行设置 4,aBNuxWd  
</tr> A] F K\  
<tr> d+IPa<N  
<td>更多数据</td><td>最后数据</td>//还可以对其bgcolor属性进行设置数据的颜色 od|pI5St  
</tr> fe Q%L  
</table> JZc5U}i  
-S|L+">=Z  
注:还可以进行跨行和跨列的设置,用的是colspan和rowspan(看意思就知道了:))如:               <th rowsspan=4>数据内容</th> `#(4K4]1.  
$@U`zy"Y  
9CSS fD RQ(}  
%v|,-B7Yx  
什么是CSS:就是层叠式风格列表,类似于网页格式的模板,也相当于编程里边的类一样,定义了自己的风格,标记着属性的值(或许比喻不怎么恰当,就原谅一下咯。)下面给出一个完整的例子,大家注意看释: <html> 4s"HO/  
<head> iA< EJ  
<title>CSS</title> d 6L(Q(:s  
<style type="text/css">//用style标记,而且是在head里边定义的 dB/Ep c&   
h1{font-style:italic} %|u"0/  
h2{text-style:right} .O,gl$y}  
h3{font-family:arial} &3^40s/+  
h4{font-style:italic} =]^* -f}J9  
div{color:blue}// 定义形式:标记选择器{属性1:值1;属性2:值2;属性3:值3;......} "Fke(?X'  
div code{color:red}//上下文:如果在网页中,<code>定义在<div>里边,那么就套用格式,如果没有,就不 ~k J#IA  
h5,h6{color:orange}//一次多个选择器 b&e? 6h^G  
p.aside{font-family:arial;font-style:italic}//定义了一个类,可以给文件中独立的块进行设置风格。 c]n4vhUa5  
.arial{font-family:arial}//定义了通用类,使用方法与类相同 ` Y ut 1N  
a:link{color:green} 4dy)g)wM  
a:active{color:blue;font-size:150%} }W YY5L8^  
a:visite{color:red}//定义了伪类,所谓伪类,就是用于与用户交互操作有关的属性,如超链接等等。 Bq _<v)M*  
</style> sn *s7v:  
</head> `  ^6}Dn  
<body> F6 UOo.L)I  
<h1>标题1</h1>  CZuxH  
<h2>标题2</h2> ;;U2I5 M7  
<h3>标题3</h3> cAL&>T  
<h4>标题4</h4> 3O]e  
<div>用<strong><em>蓝色</em></strong>文字</div> bc 0|tJc  
<div>是<code>红色</code>吗?</div> crm nh4-  
<code>是红色吗?</code> wF&\@H  
<h5>orange</h5> Pq`4Y K  
<h6>orange</h6> l"vT@ g|  
<p class=aside>爱逛街的老鼠??</p> //这就是类的使用方法,调用了class 't>Qj7vh0  
</body> pGOS'.K%t8  
</html> (_W[~df 4  
|6uEf/*DX  
注:由于css功能强大,所以只是简单写了写,以后有机会再专门写写 9 np<r82  
gG $o8c-  
ye。。总算搞定了。。我这次的目的也只是学学皮毛,这样有助于学习xml。最后,希望大家技术进步。。呵呵!◎欢迎收看。。。

[楼 主] | Posted: 2006-04-03 14:29 顶端

常州五颜六色网络技术有限公司 -> 网站建设



Copyright © 2005-2009 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Total 0.013236(s) query 4, Gzip enabled
会员言论不代表本站立场 本站法律顾问:北京汇泽律师事务所 韩律师
QQ:点击这里给我发消息 /点击这里给我发消息 /点击这里给我发消息