分享
 
 
 

html基础学习笔记(2)

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

今天晚上继续。。。

5列表

1)无序列表:无序,就是没有特别的序号,也就是平等哦。。下面看个例子吧。

<ul><li>内容1<li>内容2<li>内容3</ul>(注:对于ul,可以添加属性type,属性值有disc,square,circle,这样就可以改变序号了◎)

2)有序列表:这个当然就是前面有序号咯。

<ol><li>内容1<li>内容2<li>内容3</ol>(注:对于ol,同样可以添加type属性,属性值可以是1,a,A,i,I,呵呵,自己测试一下。)另外,对于ol,可以从喜欢的序号开始排序,用的属性就是ol的start和li的value了,很明白吧:)

3)列表嵌套:嵌套,类似于树状菜单的东西。可以使用<ul><ul></ul></ul>(ol也一样)类似的格式进行使用。

4)定义列表:主要有dl,dt,dd,分别代表定义标识,头部和内容,使用方法:

<dl><dt>头部<dd>定义的内容</dl>(注:dt和dd不需要结束标记)

6表单

1)定义一个form:定义一个form标记,用于确定发送消息的类型和处理方式,其中必须的属性就是action了。<form action="http://zsu.edu.cn/..." method="post">(注:method用于说明传送数据的方式,还有get方式,不过现在常用post)。类似的有,<form action="mailto:mc02cxj@zsu.edu.cn" method="post">

2)大部分的form都是在<input>中处理的。如下面所示:

请输入名字<input type="text" name="username"><p>

请输入口令<input type="password" name="pword"><p>

请提出宝贵意见<textarea name="comment" rows=3 cols=20 >

</textarea><p>

<input type="submit" value="Submit form">

<input type="reset" value="Clear data">

自己可以修改一下属性并进行测试◎

3)复选框和单选框

<input type="checkbox" name="check1" value="check1">check1

<input type="checkbox" name="check2" checked value="check2">check2

<input type="checkbox" name="check3" checked value="check3">check3<p>(这是复选框)

<input type="radio" name="radio1" value="radio1">radio1

<input type="radio" name="radio2" checked value="radio2">radio2

<input type="radio" name="radio3" value="radio3">radio3<p>(这是单选框)

4)下拉菜单和滚动菜单

<select>

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select><p>(下拉菜单)

<select multiple size=5 name="1">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

</select><p>(滚动菜单,就是比下拉菜单多了个multiple属性和name属性,而size属性是可有可无)

7帧结构

什么是帧结构,就是在一个完整网页里边分页,当一个页的url发生变化,其他的可以不变:)使用帧结构可以使得网页更加多变,内容更加丰富,不过也会带来一定的麻烦,因为它打乱了原来的基本操作规则。

如何建立一个帧结构?如下面的例子所示。

<html>///注意:没有body的哦。。

<head>

<title>帧结构</title>

</head>

<frameset rows="50%,*" cols="50%,*">//定义了网页的分页结构,包括了行数和列数

<frame src="doc1.html">//引用网页的基本写法

<frameset rows="40%,50%">//定义了一个嵌套的帧

<frame src="doc2.html">

<frame src="doc3.html" scrolling="yes">//scrooling表示是否带有滚动条

</frameset>

<frame src="doc4.html" frameborder="0">//frameborder表示边框格式,1表示缺省,0表示无

<frame src="doc5.html" noresize>//noresize使得帧窗口的大小不可移动!

</frameset>

</html>

注:另外,如果在帧窗口中加入<a herf="新网页" target="_top">这样的话,当激活这个链接的时候,就清除了当前的帧结构,用新页代替,可以自己测试一下。

8表格

如何建立一个表格呢?

<table border=20 cellspacing=20 cellpadding=20> //大家可以测试一下,这3个分别表示的是什么。。其中border表示边框,如果不设置,那么显示的表格就没有边框。而cellsapcing是格间线宽度,cellpadding是内边框!

<caption align=center>数据</caption>

<tr>

<th>数据1</th><th>数据2</th>//标题,可以使用align属性进行设置其出现的位置

</tr>

<tr>

<td>一些数据</td><td>还有数据</td>//数据,可以使用align和valign对其上下左右的位置进行设置

</tr>

<tr>

<td>更多数据</td><td>最后数据</td>//还可以对其bgcolor属性进行设置数据的颜色

</tr>

</table>

注:还可以进行跨行和跨列的设置,用的是colspan和rowspan(看意思就知道了:))如: <th rowsspan=4>数据内容</th>

9CSS

什么是CSS:就是层叠式风格列表,类似于网页格式的模板,也相当于编程里边的类一样,定义了自己的风格,标记着属性的值(或许比喻不怎么恰当,就原谅一下咯。)下面给出一个完整的例子,大家注意看释: <html>

<head>

<title>CSS</title>

<style type="text/css">//用style标记,而且是在head里边定义的

h1{font-style:italic}

h2{text-style:right}

h3{font-family:arial}

h4{font-style:italic}

div{color:blue}// 定义形式:标记选择器{属性1:值1;属性2:值2;属性3:值3;......}

div code{color:red}//上下文:如果在网页中,<code>定义在<div>里边,那么就套用格式,如果没有,就不

h5,h6{color:orange}//一次多个选择器

p.aside{font-family:arial;font-style:italic}//定义了一个类,可以给文件中独立的块进行设置风格。

.arial{font-family:arial}//定义了通用类,使用方法与类相同

a:link{color:green}

a:active{color:blue;font-size:150%}

a:visite{color:red}//定义了伪类,所谓伪类,就是用于与用户交互操作有关的属性,如超链接等等。

</style>

</head>

<body>

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<div>用<strong><em>蓝色</em></strong>文字</div>

<div>是<code>红色</code>吗?</div>

<code>是红色吗?</code>

<h5>orange</h5>

<h6>orange</h6>

<p class=aside>爱逛街的老鼠??</p> //这就是类的使用方法,调用了class

</body>

</html>

注:由于css功能强大,所以只是简单写了写,以后有机会再专门写写

ye。。总算搞定了。。我这次的目的也只是学学皮毛,这样有助于学习xml。最后,希望大家技术进步。。呵呵!◎欢迎收看。。。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有