分享
 
 
 

张孝祥JavaScript教程笔记——HTML高级

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

表格标签

表格可以固定文本或图像的显示位置,一般可以用来布局整个页面;

其实页面一般都是有表格的,只是默认把boder设置为0,所以看起来

没有表格线;

<tr>一行;<td>一列;

<table>属性:

bocolor,border,bordercolorlight,bordercolordark,cellspacing,

cellpadding,width,height

<tr>属性:align,valign,bgcolor

<td>属性:width,heigth,align,valign,colspan设置一个单元值占的列,

rowspan设置一个单元值占的行,nowrap,禁止自动换行;

<table>,<tr>,<td>都有的属性,只是作用范围不一样,分别是针对整个表,整行,一个单元值;

html中会在遇到-,空格,中文字符等特殊字符的时候自动换行,也就是说它尽量保持一段

英文字符串的完整;

广阔的想法就是我们不一定要让每个单元值只是嵌入文本,还可以是超级链接,图像;

应该把<th>当作<td>来用;

<caption>:标题;

分帧的作用

有没有观看过CSDN的网站,就是分帧的效果;

而我们的花样年华却……..ugley!人家mgao 网都是;

分帧就类似Java GUI设计中的分割窗,但最主要的还是堆栈布局管理器的效果;

<frameset>不能嵌套在<body>中;使用<frameset>的页面不能再使用<body>;

<frameset>只是整体布局,具体有几个帧窗口,得看<frame>嵌套在<frametset>中的个数;

<frameset>应该使用属性中的一个:rows,cols;分别规定有几行,列窗口以及各个窗口的大小;

比如 cols=”20,10,30%,*”就代表了被分为四个窗口,*代表把剩余的

大小够给了;

当然在<frameset>属性里定义了几个帧窗口,就应该在它里面嵌套几

<frame>标签或者<frameset>;

不要尝试同时使用rows,cols,那样很难看的;但是只要你把帧的个数算对了就行了:

举个例子:rows=*,*,* cols=*,* 这样的<frameset>应该需要6个<frame>而不是

5个;

属性border指定边框的宽度;

<fram>属性:src指定该帧窗口指向的URL;

name,必须给类堆栈显示窗口命名;以供提供超链接的窗口中的href指向的网页的

target能够等于类堆栈显示的命名;

scrolling:是否显示滚动条,默认为auto;

noresize:指定用户是否可以调整各个帧窗口的大小;

<a href=””>的target属性:可以是内置值,也可以是自己定义的name;

内定:_blank,_parent,_self,_top;

<noframe>标签,照顾不支持<frameset>标签的浏览器;可以在<noframe>里嵌套<body>;

表单标签

表单内容会传给WWW服务器;

服务器根据表单的name属性来获得值;

所有表单字段元素都应该有个name属性,包括提交按钮;

没有name属性的表单字段是不会被提交到服务器的,包括提交按钮;

这里所说的提交到服务器是指在url中的查询串中是否有name=value那项;

Value属性用来设置初始值;

<form>的属性:

Action :指定处理表单内容的程序的URL;不设置的时候,默认为这个网页的URL;

Method:服务器端的处理方式;默认为GET;

1,GET方法:提交的name=value 对会被编进请求的URL中,当然会编码的,比如如果有个name是”country”,值为“中国”的字段被提交后,我们发现URL里的这部分是这样的:country=%D6%D0%B9%FA 这就是对汉字的编码;

这就提供了一个查询字符串的URL编码的方法:让一个form的method是GET,然后写一个提交字段,然后输入要查询的字符串,然后……..GET方法的URL的大小不能超过1k;

2,POST方法,会把name=value等字段信息编进HTTP请求实体里,所以在请求的URL里是看不见这些name=value对的;post提交信息多;

所以我们发现如果要传送给服务器的请求只是请求数据而不改变服务器的数据,比如查询数据库的关键字,就可以用get方法;如果是安全信息,比如用户密码等,get方法显然会暴露这些信息给浏览器,所以该用post方法;

所以我们发现我们的buct的花样年华还做的不错,用的是post方法,而www.baidu.com就 典型地使用了get方法来传递查询请求;

3,target指定服务器返回的数据的目标窗口

4,title鼠标停留时,浮现的文本;

5,enctype指定浏览器对表单数据的编码方式;默认:application/x-www-form-urlencoded

表单字段元素标签

1:一个表单至少需要一个提交按钮:

<input type=’submit’>

//你可以发现,所有的name属性都不会在页面上现实出来;而所有的value属性都是要显示在页面上的;

每个name=value对都会被发送到服务器,包括提交按钮的name=value属性也没什么特殊的地方,只是当提交按钮的

Value没有设置的时候,浏览器会以一个默认的值做为提交按钮的value而不是象其他表单元素标签如果没有设置value

将为空;

再提醒一次,name属性是必须要有的,包括提交按钮,除非你想某个表单元素标签请求信息不被发送到服务器;

但是对提交按钮来说,有了name属性还不一定会被发送,这不象其他的表单元素标签,只要有name属性就可以被发送请求

信息,对提交按钮来说,必须被点击了才会提交请求;

所以说,对所有表单元素标签来说,没有name属性一定不会被提交请求信息;有了name属性,除了提交按钮外,其他表单元素

都会被提交请求信息;当然还有checkbox被选择了后;

2:<input type=’reset’> 重置为原始代码中定义的value,没有定义的为空;

这个标签的信心不会被提交

3:<input type=’text’> 属性size指文本框的长度,是以字符个数为度量的;maxlength最多输入的字符个数;

属性readonly,顾名思义; disabled,取消焦点,本字段被忽略,不会被提交;

4:<input type=’checkbox’>

5:<input type=’radio’> 必须将多个radio的name设置为一样的;如果各个name不一样,那就是checkbox的效果了:一个按钮提交一

一个name=value的信息对,各个信息对之间没有联系;也可以是同一个name有多个value值;注意,这里说的checkbox的效果

而不是radio,radio的目的是让一个name只有一个value被提交;

6:<input type=’hidden’>浏览器不会显示,但是会被提交给服务器;可以被用来预设信息;

7:<input type=’password’>是单行文本的变体,只是输入字符不可见而已;这样其实一点都不安全,如果用GET方法的话,还是会被

人在URL中看见,所以如用到这个标签的话,页面提交一般都是用post;

8:<input type=’button’>与脚本动作密切相关,可以认为submit按钮是它的一个已经内置了动作的按钮;

9:<input type=’file’>可以创建一个上传文件的局面:一个‘浏览’按钮,一个文本输入框;被提交的信息仍然遵守name=value的规则;

如果method=get,这时候只提交了path和文件名;如果要真正提交文件内容给服务器一定要用post方法,并且enctype=”multipart/form=data”,文件内容会做为HTTP的实体传送给服务器;

10:<input type=’image’> 可以用来提交表单,举个例子:

<input type=image name=map src='x.jpg'> </input>

如果你点击这个图像的话,将回提交鼠标点击的坐标map.x=206&map.y=149和其他的表单标签信息;

和submit一个效果;

11:<select>的属性:multiple,size 列表框;size=1时就是下列列表框;默认为1;

需要嵌套子标签<option> value,selected属性;

被提交的将是<select>的name=<option>的value;所以说这个字段的name是<select>提供的,value是<option>提供的;

列表框一旦被选择一次,以后只能是更换选择而不能放弃选择,所以我们应该给列表中中放一个无意义的项<option>以

使用户在点击了一次列表框后想放弃的时候来点击这个<option>

12:<textarea>的属性:cols,rows; <textarea>和</textarea>之间的文字就是初始的值;

13:<label> :虽然可以把提示的文本放在标签的旁边,但是如果想用windows快捷键迅速定位焦点并选择值,则<label>是需要的;

使用很简单:<label for=’usr’ accesskey=’a’>…….

<input ……….id=usr> 这样的话,只要你用alt+a键就可以定位到这个input上来;

头元素标签<head>

1,<title>…………

2,<base> 指定网页中的超级链接的基准地址,以改变网页中所有使用相对地址的URL的基准地址;

<base href=http://www.sohu.com/kao/ target=”_blank”>

Href属性设定该网页中所有使用http协议的相对URL地址的基准地址;比如网页中的

<a hred=’index.html’>不再是指向当前网页下的index.html,而是http:www.sohu.com/kao/index.html

Target属性可以使得你免除在所有的<a>标签中设置target属性,因为它的设置是全局的;

3,<link>定义了当前文档和另一个文档或者资源之间的关系;

blog上的一个例子:

<link href="/skins/Cogitation/style.css" type="text/css" rel="stylesheet" media="all" >

<link href="http://blog.csdn.net/format_jade/customcss.aspx" type="text/css" rel="stylesheet" media="all" >

<link href="/skins/Cogitation/print.css" type="text/css" rel="stylesheet" media="print" >

<link href="http://blog.csdn.net/format_jade/rss.aspx" title="RSS" type="application/rss+xml" rel="alternate" >

href

title 描述关系或者目标资源

type 目标资源的MIME类型;text/css,text/javascript

media 目标资源被接受的媒体;可以是screen(default),print,projection,aural,braille,tty,tv,all;

rel,rev可以是 Contents Index Glossary Copyright Next Previous Start Help

Bookmark Stylesheet Alternate Shortcut Icon

4,<meta>标签

有两种类型的<meta>,用属性名来划分,name属性和http-equiv属性;

也就是说有name属性的<meta>标签肯定没有http-equiv属性,反之一样;

比如:

<meta content=".Text" name="GENERATOR">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Name属性可以是:keywords,description,robots,generator,author

这些属性值的效果都与<meta>的属性content有关;

比如:<meta content=".Text" name="GENERATOR">就表示开发这个网页用的工具是.text;

http-equiv属性可以是

1,Content-Type, 比如<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />告诉浏览器字符集是utf-8,当前页面是html;

2,refresh,模拟告诉浏览器自动刷新;content指定时间以及自动刷新到的页面;

比如<meta http-equiv=’refresh’, content=’1;url=http://www.baidu.com’>会每隔一秒钟跳转到baidu上;

一般网站都会屏蔽这些;

3,expires指定缓存过期日期;content应该是GMT时间格式:Mon,12 May 2001 00:20 GMT

4,Windows-Target强制某个页面在某个窗口显示;<meta http-equiv=”windows-target’ content=’-top’>

5,pragma,content=no-cache;

6,page-enter,page-exit 指定一些特殊效果;

分区标签

<div>定义区块,之间是个很完整的段落区块;也就是说被<div>圈在里面的元素的位置将由<div>的属性来控制;

<span>是个文本级的元素,可以在列表,单词之间做分割处理;

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
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- 王朝網路 版權所有