HTML语言高级

来源：互联网发布：软件管家官网编辑：程序博客网时间：2024/05/22 10:32

表格标签
帧标签
表单标签
头元素
分区标签

【一、表格】

用表格来对页面进行布局。表格的作用：（1）可以以行列对齐的形式来显示文本和数字信息；（2）用来固定文本和图形的显示位置

对于许多网页设计者而言，在创建结构化的WEB页面时，他们开始的工作就是绘制表格，将整个页面划分成若干区域，在各个区域中填充具体的页面内容，设计者通过这种方式来完成对整个页面的规划。一些大网站的首页都是用表格来组织页面的内容的，这种网页设计的思路，是很值得大家借鉴的。

表格标签：

属性：bgcolor（表格的背景色）、border（边框的宽度）、bordercolor（表格边框颜色）、bordercolorlight（边框的明亮部分的颜色，只有在border>=1时才有效）、bordercolordark（边框的昏暗部分的颜色，只有在border>=1时才有效）、cellspacing（各个单元格之间的间隔大小）、cellpadding（用于设置各个表格的单元格的边框和内容之间的间隔）、width（表格的宽度，为像素值或百分比）、height（表格的高度）

标题标签：

<caption></caption>：用来设置表格的标题，必须紧跟在<table>标签之后。

行标签：

<tr></tr>：只能放在table标签对中使用，在tr标签对当中不能直接加入文本，只能嵌入td标签对。

属性：align（水平对齐方式，设置为左中右）、valign（设置单元格中的内容与单元格边框的垂直对齐方式，top、middle、bottom）、bgcolor（一行的背景颜色）

列标签：

<td></td>：文本内容只能加入td标签对中。

属性：width（某个单元格的宽度，为像素值或百分比）、height（高度）、align（设置某个单元格中的内容与该单元格的边框的对齐方式，只对某个单元格有效）、valign（用于设置单元格中的内容的垂直对齐方式）、colspan（用于设置一个单元格所跨占的列数，缺省值为1）、rowspan（一个单元格所跨占的行数，缺省值为1）、nowrap（禁止浏览器对单元格中过长的内容自动进行换行显示，不用设置值，只要写上nowrap）。

<th></th>：用法与td标签对的用法完全一样，只是它里面的文本内容的显示效果通常都是黑体居中的文字，对大多数表格式数据来说都包含有一行或者一列表头，用来说明某一列或某一行的属性类别，可用th标签来将其与普通类容区分开来。

【二、帧】

分帧的作用：一个浏览器文档当中只能够显示一个网页文件，但是如果在HTML文件当中使用框架标签，就可以将一个浏览器文档窗口分隔成多个子窗口，在每个子窗口当中都可以显示一个独立的网页文件。

典型的框架式网页是这样的（以下包含了四个网页文件，其中一个是主文档，主文档生成了框架集）：

其中这里面的每一个子窗口都被称之为帧（frame），每个帧都可以显示一个HTML文件，多个帧组成了一个框架集，框架集通常的使用方法就是在一个帧窗口当中放置一个网页文件，网页当中可以包含多个超链接条目（如左边的窗口），当访问者点击超链接条目，就可以将超链接所指向的网页文件显示在另外一个指定的子窗口当中（如右边的帧窗口）。如果要在一个浏览器文档窗口中显示一个以上的网页，就应该使用框架标签，由于浏览器对每一个这样的帧都保持一个单独的URL，因此浏览器可以向任何一个帧当中加载一个新的WEB页面，而不会改变其他的帧窗口中的显示内容。如果要在一个web站点当中，通过一个导航菜单（类似左边子窗口），来在这个站点当中各个页面间进行切换，那么使用框架就可以使导航菜单窗口一直保持可见，而切换页面可以由另一个帧窗口显示。

<frameset>标签：不能定义在<body>标签对当中，也不能在frameset中嵌入body，frameset只是用来划分帧窗口，而不能够显示其他的网页元素。

属性：rows、cols、border、frameborder（值为0或1）

<frame>标签：放在frameset标签对之间，用来定义一个具体的帧窗口。

属性：src、name（对应target的值）、scrolling（帧窗口的边框上是否有滚动条，no或yes，默认为浏览器自己来决定是否显示滚动条）、noresize（指定用户是否可以用鼠标拖曳每个子窗口之间的分隔线来调整每个帧的大小。设置就会禁止拖曳，不用赋值。）

<a href="">的target属性：对应帧的name，若name不存在，则会打开一个新的窗口显示该链接指定的网页。如果超链接的源网页显示在一个帧窗口中，并且在整个浏览器窗口中还有一个名称与这个target属性设置值相同的帧，当用户单击超链接，超链接网页就会显示在这个值对应的帧窗口中。

四个内置的取值：_blank（新的窗口没有名称）、_parent（表示当前帧的父帧窗口，只有当源网页是在帧窗口中时有效）、_self（表示在超链接的源网页窗口中显示目标网页，默认值）、_top（最顶层窗口，只有当源网页是在帧窗口中时有效）

<noframes>标签：用来在不支持frameset标签的浏览器中显示文本和图像信息，首先要在noframes中嵌入body标签对，然后在body中添加其他标签。

可使用Microsoft Visual Studio.NET创建框架集。

<iframe>标签：不需要放在frameset标签之间，它的作用是在一个网页中插入一个简单的帧窗口，在这个帧窗口当中可以显示另一个网页文件，实现一种画中画的效果。iframe标签对中放置的文本，只会在浏览器不支持iframe标签时才会显示，这样就可以提示用户的浏览器不支持iframe标签对。

属性：与frame标签的属性类似

【三、表单】

在使用搜索引擎或者进行用户信息登陆时都会使用到表单，比如注册用户信息的界面。表单在web网页当中是用来让访问者填写信息，从而让web服务器能得到用户填写的信息，使web服务器和用户之间具有交互的功能。一般情况下，当用户填写完了表单信息之后，点击提交，表单内容就会从客户端的浏览器中传递单web服务器上，让后经过jsp、vsp、cgi的服务器端程序处理之后，返回一个页面到浏览器上。

<form>标签：用来创建一个表单，即定义表单的开始和结束位置。

属性：action、method、target、title、enctype等。

action：用来设置接收和处理浏览器递交的表单内容的服务器程序的URL。例如：<form action="http://www.it315.org/counter.cgi">，表示当用户提交表单时，服务器将使用这个counter.cgi程序来处理。也可以将action设置为使用mailto协议的URL地址，则这些表单的结果会作为电子邮件的内容发送出去。当没有设置action属性，或者设置值等于空字符串，这个form表单元素所在的网页的URL地址就将作为action的默认值被使用。

method：用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST。

当没有设置method属性时，method的默认值就是GET，使用GET方式，web浏览器会将form标签中的各个表单字段元素以及它的设置值，按照URL参数的形式赋在action属性所指定的URL地址后面，然后作为一个整体一起发送给web服务器，关于这种带有参数的URL地址格式，参数部分与资源名称之间用？分隔，每个参数之间用&分隔，参数名与参数值之间用=分隔（如：？name=zhangsan&password=123），使用get方式传送数据不能超过1K。

POST方式，浏览器将把form标签中的各个表单字段元素以及其中的数据作为http消息的实体内容发送给www服务器，在这种情况下，在浏览器中的地址栏就看不到参数部分的信息了。POST方式可传送的数据量比GET方式传送的数据量大得多，一般情况下，如果用来处理表单数据的服务器程序不会改变www服务器端存储的数据，那么就可以采用GET方式来提交表单数据，例如我们用来对数据库进行查询的表单，通常都是使用GET方式，但是，当要提交询问口令的表单时就不能使用GET形式；如果处理表单的结果会引起www服务器上存储的数据的变化，例如要将一个用户的注册信息存储到数据库当中，就应该用POST形式。

target属性用来指定服务器返回结果显示的目标窗口或目标帧。

title属性用来设置当网站访问者的鼠标在表单上的任一位置停留过几秒时，浏览器用黄色小浮标显示的文本（如表单的名称或描述）。

enctype属性指示浏览器使用哪种编码方式将表单数据传送给www服务器。该属性可以有两种取值：application/x-www-form-urlencoded和multipart/form-data，默认的设置值为前者，使用这种编码方式，浏览器在递交表单数据时会先自动对表单中的字符进行URL编码处理，然后将编码后的数据交给WWW服务器。一般情况下不需要修改。

表单字段元素标签

（一个表单可以向www服务器传递多个信息，因此每个信息都要使用一个名称来进行标识，而这些信息正是由各个表单字段元素来产生的，因此嵌套在form标签对之中的每个表单字段元素都应该有一个name属性，用于指定表单字段元素的名称，这样www服务器才可以依据这些名称了解到传递给它的每个值分别是由哪个表单字段元素产生的。www服务器程序就是通过表单字段元素的名称来获得相应表单字段元素的设置值的，没有指定name属性的表单字段元素的数据是不会传递给www服务器的。）

<input type=”submit“>：提交按钮。必须放在form标签对之间的，所有的表单都至少有一个提交按钮，当访问者单击提交按钮，将表单的结果发送到action所指定的URL地址所指向的服务器程序，如果一个表单中没有提交按钮，那么这个表单就没有意义了。value属性指定按钮显示的文本，如果设置了name属性，那么点击提交按钮时，会将name和value值传送给服务器。一个表单中可以有多个提交按钮，但是只有被点击的按钮的name和value会被传送给服务器。

<input type="reset”>：重置按钮。点击重置按钮，会将表单上所有的元素设置为初始值。重置按钮的name和value都不会被传送给服务器。

<input type=“text” >：单行文本输入区域。size属性指定文本输入区域的宽度（字符个数）；maxlength设置最多能输入的字符个数；readonly属性设置之后文本内容不可变，但可以获得焦点；disabled属性设置之后文本区变灰色，不可获得焦点，在提交表单的时候，浏览器就不会将这个文本区域中的值传送给服务器。

<input type="checkbox">：复选框。checked设置首次显示时，复选框是否被选中，不需要赋值；value值等于1，则表示选中。

<input type="radio">：单选按钮。checked设置首次显示时，复选框是否被选中，不需要赋值；value值等于1，则表示选中。

<input type="hidden">：隐藏的表单字段元素。不会显示在浏览器上，但是当用户提交表单时，浏览器会将隐藏字段元素的name和value值发送给服务器，可以用这个字段元素来预设某些要传递的信息。例如，有一个网站的用户注册过程，需要两个步奏完成，每一个步奏都对应一个表单网页，在第一步的表单中填写了姓名，进入第二个表单中需要填写爱好和特长等，在用户递交第二个表单网页时需要将第一个网页中搜集到的用户名也传送给服务器，这样就需要在第二个网页表单中加入一个隐藏的表单字段元素，让value等于第一个网页中搜集到的用户名。

<input type="password">：密码输入区域。输入字符时，会将每个字符显示为*号，使得文本内容不可见。使用这样的字段的表单，最好将表单的递交方式设置为POST。

<input type="button">：普通类型按钮。通常需要与某种脚本程序相联系，用来告诉浏览器点击该按钮时应该执行什么程序。

<input type="file">：文本输入框和浏览按钮，供用户选择上传到服务器的文件名。用于实现浏览器通过HTML的form表单向服务器上传效果。通过form表单上传文件时必须将form表单的Method属性设置为POST，将enctype设置为“multipart/form-data"。文件名和文件的内容就会作为HTTP消息的实体内容上传到服务器，服务器从HTTP消息内容的实体部分可以取出文件名以及完整的文件内容。

<input type="image">：在表单上创建一个图像元素，源文件由src属性指定，没有value属性，form表单中的图像元素可以代替提交按钮，当单击图像元素，表单中的其他字段元素的信息和图像上单击时的xy坐标一起传送给服务器，若name=map，则x坐标对应的参数名为map.x。

<select></select><option></option>：用来在表单中创建一个下拉列表框或者一个多条目列表框（可单选或多选）。select标签的属性：multiple（按住ctrl可多选）、size（设定列表框中可见的选项数目，默认值为1，此时select显示效果为下拉列表框）。<option>必须嵌套在select中，一个option创建一个条目，option的属性：value、selected。单击选择项，option的value和select的name会一起传送服务器，如果在option中没有设置value，那么浏览器会将选择项的显示文本传送给服务器。浏览器在刚开始显示列表框，或者通过reset按钮重置表单时，列表框自动选择含selected的属性的列表项。实现取消选项：可将空值作为列表框的第一个条目，该条目被选中表示放弃选择，将空值传送给服务器。

<textarea></textarea>：用来在form中创建一个能输入多行文本的文本框。属性为cols、rows。列和行以字符个数为单位，没有设置初值的value属性。

<label>：可用来设置快捷键（Alt+?）。属性：for、accesskey。对每一个需要使用快捷键进行控制的表单字段元素设置id属性值，然后在label标签中设置for属性，for的值跟被控制的元素的id一样，label的accesskey指定for对应的快捷键?。可在提示文本的后面加上(<u>?</u>)，用来提示用户用什么快捷键。

【四、头元素】

头元素值位于<head></head>标签对之间的元素。这些元素用来标明网页文件的有关信息，例如文档标题，搜索引擎的关键字内容等。

<title></title>：网页的显示标题（浏览器的标题栏上）。

<base>：用于指定网页中的超链接的基准地址，以改变网页中所有使用相对地址的URL的基准地址。属性：href、target。href设定该网页中所有使用HTTP协议的相对URL地址的基准地址，若网页中有如<a href="index.html"></a>这样的超链接，它不会再像没有使用base时那样表示当前网页相同目录下的index.html，而是指向了base的href属性所指定的基准地址下的index.html。target属性设定该网页中所有的超链接显示的目标窗口，在base中设定target属性，就可以在所有的超链接的<a>标签中省略设定target。

<link>：定义了当前文档和另一个文档或资源之间的关系。例如当前网页文档的显示样式是由另一个样式定义文件来控制的，就需要使用link来说明这种关系。属性：HREF（包含另一个文档或资源的URL地址，必须填写）、REL与REV（定义了link所链接的两个资源之间的关系类型，其中REL表示链接源是在当前文档中定义的，href定义了链接目标，REV则相反。在link中必须具有两个属性中的一个。）、TITLE（可选）、TYPE（给出了目标资源的MIME类型）、MEDIA（指定显示目标资源的介质：screen计算机屏幕、print打印机、projection投影机、aural扬声器、braille感觉设备、tty打字机、tv电视机、all所有设备，可多选，用逗号分隔）。

<meta>：有两种类型的meta，用name和http-equiv属性来划分。name用于在网页中加入一些关于网页的描述信息，例如网页的关键字（可供网页搜索引擎机器人查找、分类）、网页的描述信息等。http-equiv属性用于在HTML文档中模拟HTTP协议的相应消息头，例如高速浏览器是否缓存该网页、使用什么样的字符集来显示网页内容、隔多长时间自动刷新网页等等。当浏览器通过HTTP协议访问WWW服务器上的网页文件时，服务器除了返回网页本身的内容之外，还在返回网页内容之前传送一部分被称为HTTP消息头的内容给浏览器，这部分内容是在浏览器中用查看源文件的方式所看不到的，通过查看源文件只能看到网页文件本身的内容，HTTP消息头中的信息相当于服务器传给浏览器的一些暗号指令，用于通知浏览器采取一些特殊的动作和行为，例如通知浏览器查看当前网页时所应该使用的字符编码、是否在本地缓存当前网页、当前网页到期的时间、是否间隔一段时间后刷新网页或者跳转到其他网页。

当name设置为Keywords时，用来告诉搜索引擎机器人，将content中的内容作为网页的关键词添加到搜索引擎中，许多搜索引擎通过Robot和Spider来搜索和记录与某个关键字有关的网站及网页的URL地址。如果content中用逗号将多个关键字间隔开。

当name设置为Description时，用来告诉搜索引擎把content中的内容作为网页的简要描述添加到搜索引擎当中。许多流行的搜索引擎在显示搜索的结果信息时，通常都要在某个目标链接下面显示一段对这个目标的简要描述信息。

当name设置为Robots,,,,,,,

当name设置为Generator时用于说明编辑这个网页文件时所使用的工具软件的名称。

【五、分区标签】

<div></div>：区域标签，用来将若干相邻的HTML元素组合成一个区域块，对这个区域块进行设置和操作，就可以完成对区域块中所有的元素的设置和操作。例如要想将两个文本和一个图像在WEB页面的左右边界之间居中放置，我们用div就不必为这三个HTML标签逐个添加align属性。

div标签可以用来组合其他的HTML元素，但不能嵌套在段落元素当中，例如，<p>aa<div>bb</div>cc</p>的结果是不确定的。div标签应用于级联样式表和客户端脚本编程时会更显威力，div最终的目标就是要为设计者提供另外一种组织页面的能力。

<span></span>：专用于级联样式表和客户端脚本编程中，用于在同一行文本内选取一个片段。例如要将文本”zhangsan"中的前半部分“zhang"单独选取出来，就可以使用<span>zhang</span>san。与div的区别在于，div是一个定义区块的元素（一块内容），div标签之间是一个完整的段落区块，而span标签对是一个文本集的定义元素，是可以在段落甚至是列表条目中使用的元素，当你想为一组单词进行分割处理时就应该使用span标签对。

思考与实践：

0 0