HTML相关技术基础知识
个人整理收藏 灰常给力
<td>第二行第一列</td>
<td>第二行第二列<td>
</tr>
</table>
</body?
</htm>
在这个示例程序中展示了表格的基木用法,其中<able/able>标签的含义是表格,这个表格还有
属性 borders='1’,含义是这个表格的边框是1像素。在表格中间有<tr><tr>标签,这个标签的含义
是格的行,在行中间有<t<d>,这个标签的含义是衣格的列。在<tdx/td>中间有文字,这些是这个
单元格要显示的内容。其中<td<td>标签必需用在<tr><tr>之间,而<trx<tr>标签只可以用在
table>< /table>之间。如果这三对标签的位置或者是顺序用错,整个表格就不能正常显示
按照上面介绍的标签的语义,上面这段程序表小的就是一个两行两列的表格。在浏览器中的运行效
果如图3,2所示。
表格标签示例-" icrosoft Internet Er.,口x
文件¢)编辑g查看收藏)工具(”麝
地址①图c: uments and Settings \AK②转到
第一行第一列第一行第二列
第二行第一列第二行第二列
完毕
我的电脑
图32表格示例程序运行效果
上面这个示例程序仅仅展示了一个简单的布局,而常见的复杂布局都可以是利用表格的嵌套来实
现,这也是在很长一段时间内开发人员采取最多的一种布局于段。
2. DIV
在以往的Web页面开发中,表格是首选的布局元素,但是近来DIV元素越来越受开发者的欢迎,
究其愿意就是定位比较方便,可以采取相对定位,也可借助于CSS绝对定位,同时采用DV作为布局
元系可以避免像表格那样的层层嵌套。
其实层也就是一个容器,在里面可以放任何需要展示的内容。和表格的使用方法类似。在章节3.3.3
中我们将结合CSS详细解样DIV的使用方法
在浏览—个网站的时候,我们经常会遇到一些链接,单击这些链接就会导航的其他的页面。这个链
接使用的就是<a</a>超链接标签,这个标签可以像下面这个稈序中这样使用
文件名: Link htm|-
<html>
<head>
<ttle>超链接示例</te>
</head>
<body>
< a href="htt: ww.sohu. com" target="bank">搜狐<a>
</html>
在这个稈序中定义了一个超链接。
<ahref=""target="blank">fx3/l</a>
<a><a>是超链接的标签,其中hrcf是链接的地址,在这里我们指向ht:/
aright-” blank”指的是在一个新的浏览器窗口打廾这个链接,这个属性的值还可以选择self、 parent、
top。“搜狐”是我们显示在这个链接标签中的内容,单击这两个字的时候就跳转到链接地址。上面这
个例子中href属性是必不可少的。 targert是可选的属性。这个程序的运行效果如图3.3所示。
单击“搜狐”这个链接就会在新窗口打开搜狐网站主页面。
注意:在HIML中对字母的大小写不敏感,同祥一个标签大些小写都不影响显示的效果
4.<img>
在目前的网站开发中,对图片的依赖是其他元素所不能替代的,一个漂亮的网页往往是由一系列图
片组合而成。在这里介绍HTML中图像标签<jimg>的使用方法,具体方法参考下面例子。
文件名: Image. html
<html>
head>
ttfe图片使用示例<tite
head
<body>
<img src=" hand. gif/>
</body>
</htm>
ig>是图像标签,src属性指明了图像文件的位置,上面这个程序运行效果如图3.4所示。
超链接示例-■ microsoft Internet Explorer -dx
图片使用示開- crosoft Internet Explor回
文件响)查看(收藏()工具”但堂编银奋收⊙工具①粗
搜狐
萄完毕
□我的电庭
完毕
一国我的电脑
佟3.3超链接小例程序运行效果
图3.4图片使用小例程序运行效果
注意:HTML文裆的源文件都是以htm或者htm作为后缀名。在上面这个程序中,图片和HTML
文档在放在同一个文件夹中,所以只用给Src属性提供文件名即可,如杲图片和HIML文档不在同一个
文件夹中就需要提供相对的访问路径。
3.14HTML表单标签
前面讲述的都是HML向用户展示信息的标签,在本节要介绍的内容就是HTML用来收集用户输
入的标签。<form/ form>是表单标签,只有在这个标签中的用户输入才会被提交给服务器。表单标签
的使用方法类似下面这种格式。
form action="method="get"></form>
其中 action属性指明了处理这个表单数据的对象。 method属性指明传送这个表单中的数据所使用的
方法, method属性有两个值可选,get提交衣单的吋候,表单的所有的输入都会显示在浏览器的地址栏
中,而且get对所能提交数据的大小也比较小,因为所有提交的内容都要显示在地止栏,而URL的大小
是有限制的。 method还可以选择post方法,这个方法对提交数据的时候不在浏览器的地址栏中显示,
而且所能支持数据量比较大
在表单中可以包含用输入标签收集用户输入的数据,其中< <Input>< input>是输入标签,使用方法类
似下面这种格式
<input type="text"></input>
其中ψype属性指明了用户的输入方式,uype可以选择的值如图3.5所示。
heck
file
hi dde
于pass"ord
r3010
H reset
bmi t
text
图3.5输入标签type属性取值范围
其中 button就是一个简单的按钮; checkbox是复选框,file是文件选择刈话框; hidden是隐藏域,当
要提父一个值又不想在页面显示的时候用到这个选项; 1mage是构造图片按钮:; password是密码输入框,
当输入的时侯输入的值自动变为小黑点; radio是单选按钮; reset是重置按钮,这个按钮实现的功能是把
当前表单中所有已经输入的值清空; submit是提交按钮,单击这个按钮就会把表单中所有的输入数据提
交给 action对应的处理对象,对」一个表单来说这个按钮是必不可缺的,因为表单的目的就是提交用户
输入到服务器,当然少不了提交按钮;tcxt是文本输入框,在表单中也是用的比较多的。
除了< Input></inpt>输入标签外,在表单中还有< select></ select标签,这个标签是个下拉列衣,
其中每一个下拉选项都是由< option< option>组成的。下面给出一个简单的表单示例,仅仅是展示如何
使用上面介绍的各种常用的输入标签,具体代码如下。
1-件名: Form. htm|-
<html>
<head>
tte>表单使用示例</ite>
</head>
<form action=method="post">
用户名: cinput type="text"name=" userName"> </input<br>
2 RA: <input type="password"name="password"></input<br>
重新输入密码 input type=" password"name=" rePassword"><nput><br>
性别:< nput type="rado"name="sex"va|ue="男">男
<input type="radio"name="sex"value=3>3<br>
出生日期:< select name="brth">
< option value="0">一请选择一< option>
<option value=1981>1981 </option>
<option value=1982 >1982</option>
<option value=1983">1983</option>
<option value=1984 >1984</option>
<option value=1985>1985</option>
<option value=1986>1986</option>
</ select>年<br>
兴趣:< nput name="hab"type=" checkbox"vaue="1">音乐< /input>
<input name="habit"type="checkbox "value=2">a179 </input>
<input name=habit" type="checkbox"value=3>pEs</input><br>
< nput type=" submit"vaUe="提交"/>
< nput type="rese"vaue="取消"/
</form>
bod
</html>
这个程序展小了一个简单的表单,展小了最长用的儿种输入标签的用法。其中
性别:< input type="rado"name="sex"vaue="男">男
< input type="rado"name="se"vae="女">女<br>
单选按钮的使用需要注意,属于一组的单选按钮名称必需一样,例如在这个示例中男、女选项只能
选择个,那么只有它们的名宇相同才可以实现。否则两个按钮都可以选择
稈序中的提交按钮如果不提供 value值的话亼在按钮上显示默认的“提交査询内容”;同样重置按
钮如果不提供 value值,也将显示默认值“重置”。上面这个表单的运行效果如图3.6所示
表单使用示例-■ icrosoft Internet Explorer
‖文件()编指()查看0)收藏()工具()帮助0
地址)]c: Docunents and SattingsAKY桌面 broot\form2转到
用户名
密码
:●●●●
重新输入密码:
性别:c男C女
出生日期
兴趣:□音乐动漫电
提交取消
图完毕
「我的电脑
图36表单使用示例程序运行效果
3.1.5HTML其他标签
在木章只是介绍了HIML最基木最常用的几个标签,HTML还有很多其他标签,例如应用程序标
签中可以加入不同动态程序代码,多媒体标签中可以加入多媒体文件, Flash标签中可以加入 Flash动圃,
文本标签可以用各种方式组织文本内容的显示。
读者如果要深入全面的研究HTML标签,可以参考这方面的参考手册。在本书中不再对这些内容
进行详细的介绍
32 JavaScript基础知识
Java Script的出现给静态的HTML网页带来很大的变化。 JavaScript增加了HTML网页的互动性
使以前单调的静态页面变得富有交玍性,它可以在浏览器端实现一系列动态的功能,仅仅依靠浏览器就
可以完成一些与用户的互动。在下面的章节中将要简单介绍这种技术的基础知识
321什么是 JavaScript
JavaScript是一种简单的脚本语言,可以在浏览尜中直接运行,无需服务器端的支持。这种胆本语
言可以直接嵌套在HTML代码中,它响应一系列的事件,当一个 javaScript函数响应的动作发生时,浏
览器就会执行对应的 JavaScript代码,从而在浏览器端实现与客户的交互
322 JavaScript中的事件
在IIML的标签中,绝大鄗分都可以触发一些事件,例如鼠标单击、双击、鼠标经过、鼠标离开
等一系。 Javascript最主要的功能就是与用户的交互,而用户只能在表单中提交输入内容,所以表单的
所有输入标签都可以出发鼠标事件、键檻事件等 JavaScript所能响应的常见事件。
在这里我们不在—一列举每一个HTML标签所能触发的事件,在下面仅仅以一个普通按钮所能触
发的事件为例介绍 JavaScript的事件,其他方法的处理过程都是相同的。
如图3.7就是一个简单的按钮所能触发的事件的列表
onclick
号 dblclick
inFocus
onkeydown
号 ormousedow
onmouseout
onmouseup
elect
图3.7按钮标签所能触发的事件列表
下面介绍如何通过这样一个事件调用一个 Java Script函数,具体代码如下所示。
1-件名: Event htm
<htm>
ttfe>事件触发示例</tte
<script language="javascript">
function test(
lert"事件触发测试!"
p
/head
<body>
<form action=method="post">
< input type="butn"vaue=”单击事件测试" onclick="test(y>
≤/orm>
</body>
</htmI>
在上血这个程序中可以看出,单选按钮触发一个鼠标单击事件,当鼠标单击这个按钮的时候,浏览
器就会调用 JavaScript中的tst0这个方法, testo)方法的功能就是弹出一个如图38所示的对话框,其中
对话框中显示的内容就是test()方法中 alert中间的参数内容。
Microsoft Internet Explorer x
!
事牛触发测试
图38 javAscript鼠标单击测试弹出的对话框
<script language=javascript>
function testo
aer"事件触发测试!"
/script>
上面这段代码就是 JavaScript代码的典型格式,所有的 Javascript代码都是以函数( function)的方
式存在的,HTML触发的动作对应的就是这甲面的方法。
注意:当 JavaScript的代码量比较大的时候,或者在多个页面都会用到同样功能的 JavaScript代码
的时候,可以把这些 Java script代码放在一个以j为后缀名的文件中。然后在HTML页面中接照<srip
src-"s< script这种格式进行引用,其中srτ是js文件放置的相对路径
323 JavaScript中的对象简介
Javascript所实现的动态功能,基木上都是对HTML文档或者是HTML文档运行的坏境进行的操作
那么要实现这些动态功能就必需找到相应的对象。 JavaScript中有已经定义过的对象供开发者调用,在
了解这些对象之前先看图3.9所示的内谷。
window
navigator
screen
history
location
document
图3.9在浏览器窗口中的文档对象模型
图3.9中的内容是一个简单的HTML文档在浏览器窗口中的文档对象模型,其中 window、 navigator、
screen、 history、 location都是HIML文档运行所需的环境对象, document对象才是前面讲述的HIML
文档,当然这个 document对象还可以划分出html、head、body等分支。
口 window对象是所有对象中最顶层的对象,HTML文档在 window对象中显示。
口 navigator对象可以读取浏览器相关的信息。
口 screen对象可以读取浏览器运行的物理环境,例如屏幕的宽和高,此处的单位为像素。
口 document对象是整个网页HTML内容,每个HTML文档被浏览器加载以后都会在内存中刘始
化一个 document对象
history对象可以控制浏览器的前进和后退。
location对象可以控制贞血的崁转。
在接下来的章节中将对最常用的 window对象、 location对象、 document对象进行详细的介绍
324 window对象简介
如图39所小, window对象是所有 Javascript对象中最顶层的对象,整个HTML文档就是在一个浏
览器的一个窗口,即 window对象中显示。当打开一个浏览器窗口以后,甚至是一个空白窗口,这时侯
在內存中间已经定义了个 window对象。 window对象所提供的方法很多,在下面的内容中将进行对最
常用的几种方法进行介绍。
1.窗体的创建和关闭
利用 window对象可以新建浏览器窗口,也可以关闭浏览器窗口,下面来看具体的操作代码。
1-0件名: Window htm-
<html>
<head>
<ttfe>窗体的创建和关闭示例<htte
<script type="text/javascript">
Var win
function create Wino[
win=window open(" ,,width=300, height=200");
function closeWin(t
if (win)t
win.close (
</script>
</head>
<body>
<form>
nput type-" button"vaue="创建新窗口" onclick-" create Win(">
< nput type=" button"vaUe="关闭新窗口" onclick=" closeN(y">
</form>
</body>
这个程序在浏览器中运行以后,界面上会有两个按钮,鼠标单击“创建新窗口”按钮会弹出一个新
的浏览器窗口,这个窗口的宽为300像素,高为200像素。鼠标单击“关闭新窗口”,这个弹出窗口就
会被关闭。
上:面这个程序中用到的就是 window对象的open和 close两个方法,open方法新建一个窗口, close
方法关闭指定窗∏。
2.三种常用的对话框
在 window对象中,有三种常用的对话框,第一种是警告对话框,第二种是确认对话框,第三种是
输入对话框。在面这个小例中展小了这三个对话框的用法
-0文件名: Dialog. htm
<html>
ttfe>三种常用的对话框</ite>
<script type="text/javascript">
function alertDialog(i
aler("您成功执行了这个操作。");
function confirmDialogo(
f(window. confirm("您确认要进行这个操作吗?")
alert("您选择了确定!");
alert(("您选择了取消");
function promptDialog(t
var input=window.prompt("请输入内容:");
if(input l=null)
window. alert("您输入的内容为"+inpu
</head>
<body>
<form>
< nput type="buln" value="警告对话框" onclick=" alertDialogo"
cinput type=" button" value="确认对话框" onclick=" confirmDialogo">
< input type=" button"vaue="输入对话框" onclick=" promptDialog(">
</form>
</html>
上面这个程序在浏览器中运行以后,鼠标单击“警告对话框”按钮,会弹出如图3.10所示的对话框。
鼠标单击“确认对话框”按钮,会弹出如图3.11所示的对话框
鼠标单击“输入对话框”按钮,会弹出如图3.12所示的对话框。
poorer用尸提示
脚本提示
!
您成功执行了这个作。
2)您确要行这个换作吗?
请输入内容
匚定
匚髓定。取消」
undefined
图3.10警告对话框
3.11确认对话框
图3.12输入对话框
在上面这个程序中,对后两种对话框的返冋值也进行了示例处理,读者可以参照上面的格式稍加修
改就可以用到自己的程序中去。
32.5 document对象简介
document对象是在具体的开发过程中用的最频繁的对象,利用 document对象可以访问页面上任何
的元素。通过控制这些元素可以完成与用户的互动。
1.利用 document定位HTML页面元素
所有的HTML页面元素都可以用 document, getElement Byldo这个方法访问,还有一部分HTML页
面元素可以使用数组来访问,例如表单元素就可以使用 document:foms[“ formName”]或者是
document forms[" formIndex:米访问,其中 formName是表单的名称, formIndex是表单的序号
当HTML页面中使用了 iframe时,使用 document对象定位 iframe中的元素时,首先要取得 iframe
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h59923.shtml