第八讲 初试HTML和CSS语言Word文档格式.docx
《第八讲 初试HTML和CSS语言Word文档格式.docx》由会员分享，可在线阅读，更多相关《第八讲 初试HTML和CSS语言Word文档格式.docx（18页珍藏版）》请在冰豆网上搜索。
method="
post"
action="
"
inputtype="
text"
name="
textfield"
/body>
这个表单里面只有一个文本域。
我们可以看到，插入文本域的方法是在<
标签之中设置type属性，这也是插入其他表单域的方法。
下面我们分别介绍如何向网页中插入表单域，以及如何设置这些表单域的属性。
在Dreamweaver的设计视图中查看代码26，可以看到一个被红色虚线包围的文本框。
这表明这是一个表单。
在浏览器中查看这段代码是看不到红色的虚线的。
1.文本域
文本域的作用是供浏览者输入信息。
文本域有三种：
单行文本域，多行文本域以及密码文本域。
下面我们分别对其进行介绍。
单行文本域：
单行文本域不支持换行，无论浏览者输入的文字多么长，它都将其显示在同一行中，如果文字的长度超过了单行文本域的长度，那么单行文本域会自动将前面已经输入的字符隐藏，从而保证最后输入的字符处于可见状态。
一个完整的单行文本域对应的HTML代码有代码27给出：
代码27
size="
25"
maxlength="
90"
value="
这是一个单行文本域"
下面我们逐一介绍如何使用各种参数设置文本域的属性。
type：
表单域类型，我们通过将type属性的参数设为text，将这个表单域设定为单行表单域。
name：
表单域名称，我们必须为表单域指定一个名称，以区分其他的表单域。
size：
字符宽度，即单行表单域一行中所能输入的字符数。
maxsize：
最大字符长度，这里可以规定该单行文本域可以输入的最大字符数。
当浏览者舒服的字符数超过最大字符长度所规定的长度以后，超过的部分将不被接受。
这里需要注意的是，maxsize的参数可以比size的参数小，也就是说，最大字符长度可以小于字符宽度。
value：
初始值，最初显示在单行文本域中的内容。
在上面的代码中，我们将value的参数设为“这是一个单行文本域”，因此，在使用浏览器预览的时候，这些文字就出现在单行文本域的内部。
初始值的字数不受最大字符长度的限制。
我们可以在浏览器中预览这段代码。
多行文本域：
多行文本域支持换行，当浏览者输入的字符的长度超过了表单域长度的时候，就可以通过换行将其分航显示。
一个完整的多行文本域对应的HTML代码由代码28给出
代码28
textareaname="
cols="
30"
rows="
5"
wrap="
OFF"
这是一个多行文本域<
/textarea>
可以看到，我们并不是使用<
inputtype=****……>
的形式创建一个多行文本域，而是直接使用了一个<
textarea>
标签，下面我们就介绍<
标签中可以使用那些属性。
与其他表单域一样，我们必须为这个多行文本域命名，命名的规则与前面介绍的一样。
cols：
多行文本域字符宽度，这个属性与单行文本域的size属性基本相同。
rows：
行数，用来设定多行文本域的行数。
如果不对这一属性进行设置，那么改文本域的行数将不受限制。
wrap：
换行方式，在默认的情况下，文本域不提供自动换行功能，即只有浏览者按回车键，多行文本域中的内容才会换行。
wrap的参数有三个：
off（关闭）、virtual（虚拟）和physical（实体）。
将参数设为off与不设置wrap属性的效果一样，都是取消自动换行。
如果将wrap属性设为virtual，那么在浏览者输入的字符数超过多行文本域的字符宽度时，浏览器将自动换行输入。
但是在向服务器提交浏览者输入的数据时，这种换行将被忽略。
如果将wrap属性设为physical，那么那么在浏览者输入的字符数超过多行文本域的字符宽度时，浏览器将自动换行输入，而且，在向服务器提交数据的时候，这种换行也同时被提交到服务器上。
可以在浏览器中预览代码28的显示效果。
密码域：
密码域大家都不会陌生，当我们使用网络服务商提供的免费电子邮件时，需要输入用户名和密码进行登陆，其中，用于输入用户名的就是单行文本域，而用来输入密码的就是密码域。
在密码域中，所有输入的字符都是以*开代替的，这样可以防止密码被他人看到。
下面的代码29就是密码域所对应HTML的代码。
代码29
html>
head>
title>
无标题文档<
/title>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/head>
password"
这是一个多行文本域"
/html>
通过阅读代码29，我们可以看到，密码域所对应的参数设置方式与单行文本域基本相同，只是type属性的参数应改为password。
2.按钮
按钮的作用是执行某种操作，例如将指定的内容提交到服务器上，或者重置前面的表单域中的内容。
在表单域对象中，有两种按钮，一种按钮对应的type参数为submit，功能是将位于该按钮所属的表单的内容提交到服务器上；
另一种按钮对应的type参数为reset，功能是重置改按钮所属表单中的全部内容。
在按钮对应的参数中，value初始值参数对应的是显示在按钮上的文字。
下面的代码30给出了一个完整按钮所对应的HTML代码。
代码30
submit"
Submit"
提交"
reset"
Submit2"
重置"
可以在浏览器中预览代码30的显示效果。
3.复选框
复选框提供了一种多项选择，浏览者可以在复选框对应的选项中选择一个或者多个选项。
一般复选框都应该多个同时使用，否则就没有必要使用复选框。
下面的代码31给出了复选框对应的HTML代码。
代码31
checkbox"
游泳"
checked>
游泳<
br>
checkbox2"
跑步"
跑步<
checkbox3"
骑单车"
骑单车
下面我们介绍一下复选框对应的各项参数的意义。
表单域类型，这里我们将其参数设为checkbox，意味着创建了一个复选框。
表单域名称，前面已经介绍过，这里就不在重复。
选定值，该复选框将向服务器提交的数据。
checked：
初始值，如果在<
标签中插入这个属性，那么在浏览器中预览时，该复选框会被自动选中。
可以在浏览器中预览代码31的显示效果。
第一个选项“游泳”被选中了。
用户也可以同时选择其他选项。
4.单选框
单选框的功能是让浏览者在众多选项中选择一个。
一般单选框也是多个一起出现，但是浏览者只能从中选择一个。
例如，最常见的单选框就是在选择性别的时候使用的。
下面的代码32给出了用于选择性别的单选框对应的HTML代码。
代码32
radio"
radiobutton"
男"
男<
女"
女
单选框的属性设置方法与复选框基本相同，唯一的区别在于，对于复选框，我们可以将每个复选框设为checked，但是对于单选框，却只能将其中之一设为checked。
如果将所有的单选框都设为checked，那么浏览器在加载该页面时，将自动取消对前面各项的选择，而只将最后一个单选框显示为checked。
可以在浏览器中查看该段代码的效果。
5.列表和菜单
列表和菜单同样提供了一种供浏览者从中选择某个选项的功能，但是与单选框和复选框相比，列表和菜单的好处在于可以在占用较少页面空间的情况下提供更多的选项。
列表：
列表的功能与选项框的功能非常接近，而且我们可以通过使用相应的属性设置是否允许列表支持多选。
下面的代码33给出了一个完整的列表对应的HTML代码。
代码33
selectname="
select"
multiplesize="
4"
option>
选项1<
/option>
选项2<
选项3<
/select>
下面我们逐一对创建列表使用到的标签和对应的选项进行说明。
select>
：
列表标签，通过使用该标签，我们可以创建一个列表。
在<
标签中，主要有三个选项，name、multiple和size。
通过插入multiple属性，我们可以允许列表支持多项选择，这样列表就执行了与复选框同样的功能，浏览者只需要在选择选项的同时按住Ctrl键或者Shift键就可以选择多个选项。
size属性规定了列表的行数，我们可以输入适当的数字，以控制列表的外观。
用来创建对应的选项。
菜单：
菜单提供了与单选框完全相同的功能，不过却占用了更少的页面空间。
我们只需要将代码33中的multiple属性和size属性去掉，就可以创建一个菜单。
可以在浏览器中查看去掉multiple属性和size属性的代码33的效果。
6.文件域
使用文件域允许浏览者将一些文件上传到服务器上，例如图片，Flash影片等，通常一些论坛都支持这样的功能。
若要使用文件域，表单的method属性的参数必须设置为POST。
为了保证文件得到正确的编码，我们需要在<
标签中手工添加ENCTYPE="
multipart/form-data"
下面的代码34给出了插入文件域的完整代码。
代码34
enctype="
file"
99"
可以看出，插入文件域的外观与单行文本域基本相同，除了多出一个“浏览”按钮。
事实上，从代码34中我们可以看到，插入文件域的属性及对应的参数设置与单行文本域基本相同。
可以在浏览器中预览这段代码。
可以单击“浏览”按钮，在打开的对话框中选中一个文件，最后单击“打开”按钮。
7.图像域
通过插入图像域，我们可以创建一个图像提交按钮，该按钮的功能与“提交”按钮完全相同，但是看起来更有些富于变化。
下面的代码35给出了创建图像域所对应的HTML代码。
代码35
image"
border="
0"
src="
file:
///D|/007.jpg"
width="
64"
height="
43"
alt="
该按钮的外观与普通图像没有任何的区别，但是可以执行向服务器提交表单的功能。
并且，其对应的属性与普通的图像基本相同，因此这是就不在重复介绍了。
8.隐藏域
隐藏域对于网页浏览者来说是不可见的，它们是放置在文档中收集或发送信息的不可见元素。
隐藏域信息将使用用户定义的名称，在表单提交时被传送给服务器。
隐藏域对应的HTML代码有代码36给出。
代码36
hidden"
hiddenField"
已浏览"
由于以上代码的效果无法在浏览器中预览，因此我们在这里只给出其对应的代码。
而且，其相应的属性设置已经在前面都介绍过了。
9.跳转菜单
使用跳转菜单，浏览者可以很方便地从当前页面跳转到其他的页面。
其功能不亚于使用框架做成的目录，但是好处在于占用较少的页面空间。
下面的代码37给出了创建跳转菜单需要使用的HTML代码。
代码37
scriptlanguage="
JavaScript"
!
--
functionMM_jumpMenu（targ,selObj,restore）{//v3.0eval
（targ+"
.location='
+selObj.options[selObj.selectedIndex].value+"
'
）;
if（restore）selObj.selectedIndex=0;
}
//-->
/script>
menu1"
onChange="
MM_jumpMenu（'
parent'
this,0）"
optionvalue="
index.htm"
selected>
首页<
intro.htm"
公司简介<
branches.htm"
部门设置<
products.htm"
产品概况<
可以注意到，代码37中使用到了JavaScript，这是为了实现菜单的跳转功能所必须的。
我们在这里并不介绍如何使用JavaScript，如果读者需要了解如何使用JavaScript，可以参考相应的教材。
这里同样使用了<
标签，并为其设置了value属性，其目的是指明将要跳转到文件的名称。
可以用浏览器浏览这段代码的显示效果。
8．2CSS入门
CSS就是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表。
网页设计最初是用HTML标记来定义页面文档及格式，但HTML标记不能满足更多的文档样式需求，为了解决这个问题，在1997年W3C（TheWorldWideWebConsortium）颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1。
自CSS1的版本之后，又在1998年5月发布了CSS2版本，样式表得到了更多的充实。
W3C把DHTML（DynamicHTML）分为三个部分来实现：
脚本语言（包括JavaScript、Vbscript等）、支持动态效果的浏览器（包括InternetExplorer、NetscapeNavigator等）和CSS样式表。
用户可以用CSS精确的控制页面里每一个元素的字体样式、背景、排列方式、区域尺寸、四周加入边框等。
使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时定义多个页面，大大减少了重复劳动的工作量。
当然，CSS需要InternetExplorer4.0和Netscape4.0以上的浏览器支持，有些效果需要更高版本的浏览器支持。
8.2.1在网页中加入CSS
要想在浏览器中显示出了CSS效果，就要让浏览器识别并调用CSS。
这里介绍四种在页面中插入样式表的方法：
链入外部样式表、内部样式表、导入外表样式表和内嵌样式。
1．链入外部样式表
链入外部样式表是把样式表保存为一个样式表文件，然后在页面中用<
link>
标记链接到这个样式表文件，这个<
标记必须放到页面的<
区内，如下：
……
linkrel="
stylesheet"
type="
text/css"
href="
mystyle.css"
上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。
rel=”stylesheet”是指在页面中使用这个外部的样式表。
type=”text/css”是指文件的类型是样式表文本。
href=”mystyle.css”是文件所在的位置。
一个外部样式表文件可以应用于多个页面。
当改变这个样式表文件时，所有页面的样式都随之而改变。
在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览。
样式表文件可以用任何文本编辑器打开并编辑，文件扩展名为.css。
内容是定义的样式表，不包含HTML标记。
mystyle.css定义水平线的颜色为红色、段落左边的空白边距为20象素、页面的背景图片为images目录下的back40.gif文件，这个文件的内容如下：
hr{color:
red}
p{margin-left:
20px}
body{background-image:
url（"
images/back40.gif"
）}
2．内部样式表
内部样式表是把样式表放到页面的<
区里，这些定义的样式就应用到页面中了，样式表是用<
style>
标记插入的，从下例中可以看出<
标记的用法：
styletype="
/style>
有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。
为了避免这样的情况发生，用加HTML注释的方式（<
--注释-->
）隐藏内容而不让它显示：
body{background-i
升级会员 