站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题张孝祥JavaScript教程笔记——HTML高级

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

摘要: 张孝祥JavaScript教程笔记——HTML高级
<textarea readonly style="border:none;font-family:Courier New;line-height:150%;width:760px;overflow-y:visible">

表格标签

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

其实页面一般都是有表格的,只是默认把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>来用;

:标题;

分帧的作用

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

<formulas></formulas>

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

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

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

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

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

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

大小够给了;

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

标签或者;

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

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

5个;

属性border指定边框的宽度;

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

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

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

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

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

target属性:可以是内置值,也可以是自己定义的name;

内定:_blank,_parent,_self,_top;

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

表单标签

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

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

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

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

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

Value属性用来设置初始值;

<form>的属性:

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

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

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

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

2POST方法,会把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’> 必须将多个radioname设置为一样的;如果各个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::虽然可以把提示的文本放在标签的旁边,但是如果想用windows快捷键迅速定位焦点并选择值,则是需要的;

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

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

头元素标签<head>

1,…………</b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal">2,<base> </b><b style="mso-bidi-font-weight: normal">指定网页中的超级链接的基准地址,以改变网页中所有使用相对地址的</b><b style="mso-bidi-font-weight: normal">URL</b><b style="mso-bidi-font-weight: normal">的基准地址;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 3"> <base href=http://www.sohu.com/kao/ target=”_blank”></span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> Href</span></b><b style="mso-bidi-font-weight: normal">属性设定该网页中所有使用</b><b style="mso-bidi-font-weight: normal">http</b><b style="mso-bidi-font-weight: normal">协议的相对</b><b style="mso-bidi-font-weight: normal">URL</b><b style="mso-bidi-font-weight: normal">地址的基准地址;比如网页中的</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> </span></b><b style="mso-bidi-font-weight: normal">不再是指向当前网页下的</b><b style="mso-bidi-font-weight: normal">index.html</b><b style="mso-bidi-font-weight: normal">,而是</b><b style="mso-bidi-font-weight: normal">http:www.sohu.com/kao/index.html</b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> Target</span></b><b style="mso-bidi-font-weight: normal">属性可以使得你免除在所有的</b><b style="mso-bidi-font-weight: normal"><a></b><b style="mso-bidi-font-weight: normal">标签中设置</b><b style="mso-bidi-font-weight: normal">target</b><b style="mso-bidi-font-weight: normal">属性,因为它的设置是全局的;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal">3,<link>></b><b style="mso-bidi-font-weight: normal">定义了当前文档和另一个文档或者资源之间的关系;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 1"> blog</span></b><b style="mso-bidi-font-weight: normal">上的一个例子:</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 42pt; TEXT-INDENT: 21pt"><b style="mso-bidi-font-weight: normal"><link> href="/skins/Cogitation/style.css" type="text/css" rel="stylesheet" media="all" ></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 42pt; TEXT-INDENT: 21pt"><b style="mso-bidi-font-weight: normal"><link> href="http://blog.csdn.net/format_jade/customcss.aspx" type="text/css" rel="stylesheet" media="all" ></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 42pt; TEXT-INDENT: 21pt"><b style="mso-bidi-font-weight: normal"><link> href="/skins/Cogitation/print.css" type="text/css" rel="stylesheet" media="print" ></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 42pt; TEXT-INDENT: 21pt"><b style="mso-bidi-font-weight: normal"><link> href="http://blog.csdn.net/format_jade/rss.aspx" title="RSS" type="applic</b><b style="mso-bidi-font-weight: normal">ation/rss+xml" rel="alternate" ></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 1"> href</span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> title </span></b><b style="mso-bidi-font-weight: normal">描述关系或者目标资源</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> type </span></b><b style="mso-bidi-font-weight: normal">目标资源的</b><b style="mso-bidi-font-weight: normal">MIME</b><b style="mso-bidi-font-weight: normal">类型;</b><b style="mso-bidi-font-weight: normal">text/css,text/javascript</b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> media </span></b><b style="mso-bidi-font-weight: normal">目标资源被接受的媒体;可以是</b><b style="mso-bidi-font-weight: normal">screen(default),print,projection,aural,braille,tty,tv,all;</b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 21pt; TEXT-INDENT: 21pt"><b style="mso-bidi-font-weight: normal">rel,rev</b><b style="mso-bidi-font-weight: normal">可以是</b><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> Contents Index Glossary Copyright Next Previous Start Help</span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> Bookmark Stylesheet Alternate Shortcut Icon</span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal">4,<meta></b><b style="mso-bidi-font-weight: normal">标签</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> </span></b><b style="mso-bidi-font-weight: normal">有两种类型的</b><b style="mso-bidi-font-weight: normal"><meta></b><b style="mso-bidi-font-weight: normal">,用属性名来划分,</b><b style="mso-bidi-font-weight: normal">name</b><b style="mso-bidi-font-weight: normal">属性和</b><b style="mso-bidi-font-weight: normal">http-equiv</b><b style="mso-bidi-font-weight: normal">属性;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 1"> </span></b><b style="mso-bidi-font-weight: normal">也就是说有</b><b style="mso-bidi-font-weight: normal">name</b><b style="mso-bidi-font-weight: normal">属性的</b><b style="mso-bidi-font-weight: normal"><meta></b><b style="mso-bidi-font-weight: normal">标签肯定没有</b><b style="mso-bidi-font-weight: normal">http-equiv</b><b style="mso-bidi-font-weight: normal">属性,反之一样;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> </span></b><b style="mso-bidi-font-weight: normal">比如:</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 42pt; TEXT-INDENT: 21pt"><b style="mso-bidi-font-weight: normal"><meta content=".Text" name="GENERATOR"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-spacerun: yes"> <shape id="_x0000_i1025" style="WIDTH: 425.25pt; HEIGHT: 87.75pt" type="#_x0000_t75"><imagedata o:title="" src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\01\clip_image005.png"></imagedata></shape></span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; tab-stops: 21.0pt 42.0pt 63.0pt 84.0pt 105.0pt 126.0pt 147.0pt 168.0pt 189.0pt 210.0pt 231.0pt 252.0pt 273.0pt 328.5pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> Name</span></b><b style="mso-bidi-font-weight: normal">属性可以是</b><b style="mso-bidi-font-weight: normal">:keywords,description,robots,generator,author</b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 3"> </span></b><b style="mso-bidi-font-weight: normal">这些属性值的效果都与</b><b style="mso-bidi-font-weight: normal"><meta></b><b style="mso-bidi-font-weight: normal">的属性</b><b style="mso-bidi-font-weight: normal">content</b><b style="mso-bidi-font-weight: normal">有关;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> </span></b><b style="mso-bidi-font-weight: normal">比如:</b><b style="mso-bidi-font-weight: normal"><meta content=".Text" name="GENERATOR"></b><b style="mso-bidi-font-weight: normal">就表示开发这个网页用的工具是</b><b style="mso-bidi-font-weight: normal">.text</b><b style="mso-bidi-font-weight: normal">;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 3"> </span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 2"> http-equiv</span></b><b style="mso-bidi-font-weight: normal">属性可以是</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt 105pt; TEXT-INDENT: -21pt"><b style="mso-bidi-font-weight: normal">1,Content-Type,<span style="mso-tab-count: 1"> </span></b><b style="mso-bidi-font-weight: normal">比如</b><b style="mso-bidi-font-weight: normal"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></b><b style="mso-bidi-font-weight: normal">告诉浏览器字符集是</b><b style="mso-bidi-font-weight: normal">utf-8,</b><b style="mso-bidi-font-weight: normal">当前页面是</b><b style="mso-bidi-font-weight: normal">html;</b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-spacerun: yes"> 2,refresh</span></b><b style="mso-bidi-font-weight: normal">,模拟告诉浏览器自动刷新;</b><b style="mso-bidi-font-weight: normal">content</b><b style="mso-bidi-font-weight: normal">指定时间以及自动刷新到的页面;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 5"> </span></b><b style="mso-bidi-font-weight: normal">比如</b><b style="mso-bidi-font-weight: normal"><meta http-equiv=’refresh’, content=’1;url=http://www.baidu.com’></b><b style="mso-bidi-font-weight: normal">会每隔一秒钟跳转到</b><b style="mso-bidi-font-weight: normal">baidu</b><b style="mso-bidi-font-weight: normal">上;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 4"> </span></b><b style="mso-bidi-font-weight: normal">一般网站都会屏蔽这些;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 4"> 3</span></b><b style="mso-bidi-font-weight: normal">,</b><b style="mso-bidi-font-weight: normal">expires</b><b style="mso-bidi-font-weight: normal">指定缓存过期日期;</b><b style="mso-bidi-font-weight: normal">content</b><b style="mso-bidi-font-weight: normal">应该是</b><b style="mso-bidi-font-weight: normal">GMT</b><b style="mso-bidi-font-weight: normal">时间格式</b><b style="mso-bidi-font-weight: normal">:Mon,12 May 2001 00:20 GMT</b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 4"> 4,Windows-Target</span></b><b style="mso-bidi-font-weight: normal">强制某个页面在某个窗口显示;</b><b style="mso-bidi-font-weight: normal"><meta http-equiv=”windows-target’ content=’-top’></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 4"> 5,pragma,content=no-cache;</span></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span style="mso-tab-count: 4"> 6,page-enter,page-exit </span></b><b style="mso-bidi-font-weight: normal">指定一些特殊效果;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt; TEXT-ALIGN: center" align="center"><b style="mso-bidi-font-weight: normal">分区标签</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><div></b><b style="mso-bidi-font-weight: normal">定义区块,之间是个很完整的段落区块;也就是说被</b><b style="mso-bidi-font-weight: normal"><div></b><b style="mso-bidi-font-weight: normal">圈在里面的元素的位置将由</b><b style="mso-bidi-font-weight: normal"><div></b><b style="mso-bidi-font-weight: normal">的属性来控制;</b><b style="mso-bidi-font-weight: normal"></b></p><p class="MsoNormal" style="MARGIN: 0cm 0cm 0pt"><b style="mso-bidi-font-weight: normal"><span></b><b style="mso-bidi-font-weight: normal">是个文本级的元素,可以在列表,单词之间做分割处理;</b><b style="mso-bidi-font-weight: normal"></b></p></span> <br /> <div style="font-size: 14px; line-height: 25px;"><strong></strong> </textarea> <br> <a href="/javascript/index.html">↑返回目录</a> <BR> 前一篇: <a href='/javascript/1/5558.html'>[原创]超越javascript系列之——极限之美,用javascript实现人工智能脚本(LispScript) </a> <br> 后一篇: <a href='/javascript/1/5560.html'>javascript小技巧 </a> </div> <!-- end: 正文 --> <!-- #EndEditable --> <!-- begin: footer --> <div id=footer><center> <a href="http://www.javanb.com/index.html">首页</a> | <a href="http://www.javanb.com/java-sitemap-bd.html">全站 Sitemap</a> | <a href="http://www.javanb.com/contact.html">联系我们</a> | <a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.javanb.com/');return(false);">设为首页</a> | <a href="#" onclick="window.external.AddFavorite('http://www.javanb.com/', 'Java 编程资料牛鼻站');return false;">收藏本站</a> <br>版权所有 Copyright © 2006-2007, Java 编程资料牛鼻站, All rights reserved <br>   </center></div> <!-- end: footer --> </div> </body><!-- #EndTemplate --></html>