ASPXHTML常用标记.docx

ASPXHTML常用标记.docx

《ASPXHTML常用标记.docx》由会员分享，可在线阅读，更多相关《ASPXHTML常用标记.docx（17页珍藏版）》请在冰豆网上搜索。

ASPXHTML常用标记

ASPXHTML常用标记

作为网页的主体部分，可以设置很多的属性，这些属性用于定义网页的总体风格。

而XHTML的常用标记都放在BODY标记里面。

1．字体标记

在对网页中显示文字的字体、大小和颜色进行设置时，可以使用元素。

元素的属性有color、size、face等。

color属性用于指定字体的颜色，如果不设置该属性，则默认字体颜色为黑色。

size属性用于指定字体大小，其值1～7从小到大表示字体。

face属性用于设置字体格式。

元素各属性格式如下：

蓝色3号黑体

上述代码中，表示与之间的所有字符均以3号、蓝色、黑体形式显示。

元素还可以与元素和元素结合使用，前者设置字体为粗体，后者设置字体为斜体。

这两种元素也需要设置关闭符号和，以设置其作用范围。

例如：

蓝色3号斜黑体

如果对一个对象使用多种标记定义样式，原则上标记之间不要交叉，即标记允许嵌套，但要注意嵌套的顺序。

下面是一个使用字体标记设置字体大小和颜色的实例，代码如下所示。

文件名：

font.html

这是普通文字

这是大小为15，红色显示的文字

执行上述代码，结果如图2-1所示。

图2-1字体标记

2．图片标记

网页中最引人入胜的莫过于那丰富多彩的图像了。

成功的站点中不能没有绚丽的图像，否则便使浏览者觉得索然无味。

下面介绍XHTML语言中的基本图像标记：

。

其基本语法结构如下：

align=top|middle|center|bottom|left|right

class=typeid=Valuename=value

src=urltitle=textalt=valueborder=n

height=nwidth=nhspace=nvspace=n

ismap=imageusemap=url

onload=functiononabort=functiononerror=function

dynsrc=urlcontrols=controlsloop=n

start=type>

从上述代码中可以看出，关于基本图像标记的应用参数多达21项。

当然，我们实际应用的只是其中几项，只有在需要实现特殊效果的情况下，才需要使用较多的参数。

语法中各参数的具体含义如表2-2所示。

表2-2图片标记

名称

解释

align

指定图像的位置是靠左、靠右、居中、靠上或者是靠底。

默认情况下是靠上，即align＝top。

在图文混排时，这个参数很有用。

class和id

分别指定图像所属的类型和图像的id号。

name

用于设定图像的名称。

src

规定插入的图像的url地址，也就是含路径的图像文件名。

title

设定图像的标题。

alt

表示图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，先显示有关此图像的信息。

border

设定图片的边框。

height和width

分别用于指定图像的高度和宽度，可以与图片原来的宽度和高度不同。

hspace和vspace

分别用于设定图像的左右边框大小和上下边框大小，在图文混排时会用到。

ismp和usemap

在应用图像地图时使用。

ismap表示图像地图的数据存放在服务器中，当鼠标在图像上的某个区域上时，可以将此区域的坐标传送给服务器处理。

usemap则用于设定图像地图的名称。

onload、onabort、onerror

对应于设定的子程序，分别在图像被载入、取消载入、载入出错的情况下各自对应的子程序，不常用。

dynsrc

指定要下载的影像片断的url地址。

controls

设定影像播放的控制接钮。

loop

指定影像片断的播放次数，当loop=-1时，影像片断将循环播放直至页面更新。

start

设定何时开始播放影像片断，有三种选择：

start=fileopen表示页面载入后即开始播放，默认的就是这种状态；start=mouseover表示当鼠标移到影像上即开始播放；start=fileopen,mouseover表示当有上面两种情况之一发生时就开始播放。

下面是一个向网页中添加图片的实例，代码如下所示。

文件名：

img.html

下面为网页添加一张图片

执行上述代码，结果如图2-2所示。

图2-2图片标记

3．段落标记

一篇文章由标题和正文组成，正文又是由多个段落组成的，所以可以说段落是构成文章的主体。

既然一篇文章是由多个段落组成的，那么又如何区分段落呢？

段落与段落之间有什么不同呢？

带着这些问题来学习本小节的段落标记。

在学习段落与段落的区别前，先了解段落的基本语法，段落语法代码是由尖括号对里放置p的双标记来表示，在标记对里面放置的内容就构成了一个段落。

段落完整语法表示如下。

这里表示段落

在标记对中就表示的一个段落，那么怎样在一篇文章中存放多个段落呢？

很简单，每个标签对就表示一个段落，有多少段落就有多少，这就是从代码上区别段落与段落的不同。

同理，从网页表现出的效果来看段落，段落与段落间有一行空格不显示任何内容，也就是常常看到新闻中的段落间有空行。

那么可以利用XHTML的段落标记来显示出文章内容美观效果，使用户对文章理解有层次感。

段落不管是在新闻还是书籍中都会出现，下面请看段落在网页中如何表现其效果，代码如下所示。

文件名：

p.html

—这是注解，不会在网页中显示，下面表示有4个段落-->

这里表示段落一

段落二

段落三

段落四

在上述代码中，存在一行注解和四个对，注解在XHTML标记中用

—注解内容-->，浏览解释注解行时，不会在网页中显示出来，只起注解作用，让网页制作者更好地理解XHTML代码，而4个段落由4个标记对组成的段落表示，每个段落都是不同内容。

段落和段落间的空行效果与正常的换行是不相同的，如图2-3所示。

图2-3段落标记

段落中的空格，当浏览器解释XHTML文件多个空格时，自动去掉多余的空格，只显示出一个空格效果，即不管XHTML中加上多少空格，都被看作一个空格。

如果想出现多个空格的效果，必需加上XHTML代码" "，想要多个空格，可以加上多个" "代码，注意后面的分号。

段落之间要空一行，从上面效果中可以看出，四个段落中间有三行空出来的，这只是段落与段落间的间隔。

4．强制换行

写文章时，往往要在一个段落中间另起一行，这就要用到换行，在网页中也是可以换行的，但需要换行标记。

换行可以在行文中另起一行，显示出段落层次性，给人的感觉更有亲和力。

在网页编写代码时的换行与按回车键的换行是不同的，即在编写XHTML代码中的回车只多了一行空格，在代码中另起一行，但浏览器解释时，会忽视多余空格，只保留一个空格的位置。

从上一节得知，网页显示时会去掉里面的空格，与正常文档换行不同，所以没达到换行效果。

而今天学习的换行就是在网页编写换行代码标记后将在页面中显示出换行效果，当浏览器在解释换行代码时会强制换行，这样在网页中就达到用户在输入时的换行标记效果。

换行标记不会成对出现。

语法是在尖括号中包括br的单标记，其完整语法代码如下所示：

一个
标记表示换一行，如果在一行文字中出现多次
，就会换行多次，应当记住，本代码是强制换行，表示内容从下一行的头部开始。

在下面实例中是一行文字多次出现换行符的用法，代码如下所示。

文件名：

br.html

—注解：

在一行不换行的文本中，多次出现换行符-->

这几天心里颇不宁静。

今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，
在这满月的月光里，总该另有一番样子吧。

月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；
妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。

我悄悄地披了大衫，带上门出去。

执行上述代码，结果如图2-4所示。

图2-4换行标记

代码
是告诉浏览器强制换行，并不在网页中显示。

从上面图中看到的是自动换行。

5．添加注释

制作大型网站的时侯，每个网页程序员所做的工作都会不同，但相互依赖其他程序员写的代码。

为了在同一个项目中让其他程序员看得明白，常常用注释来说明代码功能。

注释代码的内容不会在网页中显示，只起到注释作用，如一个网页中头部用注释说明该页面的作用和创建日期，和本网页所展示的功能等，让其他程序员或学习者看到注释就知道代码内容。

在前面的代码中，多次出现了注解符，而且在注解内容中，笔者都在前面标记"注解：

"，为了告诉初学者代码的意义，所采用的一种解说代码方法，并不会在网页中显示注解内的内容。

注释语法比较容易，可以在单行中存在注释，同时也可以多行一起注释，单行注释完整语法如下：

--这里放注释-->

在一行中，在尖括号中放置感叹号"！

"和两个"-"，接下来放置注释内容，最后一定要结束注释，结束注释用两个"-"和另一个尖括号组成，即上面代码表示了单行注释。

如果网页代码中，只需要注释一行，可以用上面的注释。

如果有多行同时需要注释，那是不是每行都用尖括号包围呢？

答案是不需要的。

其实还有一种方法可以注释多行，请看下面代码：

--

这里放注释

第二行注释

第三行注释

-->

即在注释处以"

--"开始，在多行后用"-->"结束，其里面的内容就是注释内容，不会在网页中显示。

多行注释与单行注释类似的，只不过中间多次换行，值得注意的是注释标记对的结束标记一定不要忘。

下面用实例来演示在XHTML代码中包含注释，有单行和多行的，然后通过内容的显示了解被注释的内容是否在网页中显示。

代码如下所示。

文件名：

Comments.html

html中的注释是看不到的

--

第一行注释内容

第二行注释内容

第三行注释内容

-->

你能看到上面的注释内容吗?

在上述代码中，标签内输入的文字有多行，没有被注释的在网页中已显示，而被注释的代码没有看到，这就是注释标记在XHTML代码中所起的作用，效果如图2-5所示。

图2-5注释标记

注释的尖括号不能交叉，不要忘记注解符后面的结束符。

6．表格

表格在网页中可以表现出Word中的表格效果，即在Word中要表现的表格效果可以在网页中显示，这就需要XHTML中的表格标记。

表格标记不仅仅用于表现表格中的效果，还可以用表格来给网页布局，布局中的表格是不需要表格中的边框的，故需要对表格进行设置。

表格是XHTML常用的标签，代表在网页中插入一张表格。

表格是用table标签对表示的标签对，其他语法形式如下：

—设置表格标记-->

这只是表示一张表格而已，但表格常常是有行和列的，那么，如何在表格内表示行和列呢？

这又要另外二个代码，标签对表示表行，每出现一个代表表格的一行；标签对表示表头，表头是在表格上显示下面列的；标签对表示表元，表元就是在表格中显示的每一方格。

下面的实例说明表格的基本语法，代码如下所示。

文件名：

Table.html

—设置表格和边框-->

—设置表格中的表头-->

姓名

年龄

—设置表格中的表项-->

张三

28

在上述代码中，

或者如下表示：

—设置表格中td的跨多行-->

与跨多行一样，跨多列也放在td和th中，表示在一行中跨多列表元。

语法用colspan表示，完整语法如下：

—设置表格中跨多列-->

或

colspan与rowspan要分清楚，表示跨多行和跨多列在表格中的单元格布局不一样。

●表格内文字的对齐方式

在表格内，文字对齐有在tr、th和td中对齐。

在tr设置对齐方式后，tr内的th和td都按设置的要求对齐，同理在多行中可以设置不同的tr对齐方式，th和td都可以设置其里面的文字或图片的对齐。

对齐语法用align表示，后面接的值是left、center和right，分别代表向左、居中和向右对齐，语法形式如下：

—设置表格对齐-->

上面代表对齐在tr、th和td中，#表示align后面接的值，即left、center和right中的一个。

下面是一个文字在表格内对齐方式的实例，代码如下所示。

文件名：

TableAlign.html

—设置表格边框和宽度-->

—设置表格的行居中对齐-->

—设置表格行向右对齐-->

—设置表格对齐为默认值，即向左-->

在上述代码中，表格第一行用居中对齐，第二行向右对齐，第三行默认的向左对齐，可以省略不写。

执行上述代码，结果如图2-7所示。

图2-7表格内文字的对齐方式

7．表单

表单是一个能够包含表单元素的容器，表单元素是能够让用户在表单中输入信息的元素，可以这样说，表单里面包含表单元素。

表单在动态网页中常用，用来收集用户的信息，保存到数据库中。

表单语法是由一对标签对组成。

—设置表单标记对-->

在上面的表单中就可以包含表单元素，用表单元素获取信息。

不同的表单元素所表现的功能也不一样，如input输入类型有text、password等等，分别用于输入文本和密码。

表单有两个属性会常用到，就是action和method，form中的action是表示表单提交后发送URL地址，发送的方式用method表示，可选择的参数有GET和POST。

GET传输量比较小，而POST传输值比较大，这是二者最基本的区别。

下面是一个简单的表单提交实例，代码如下所示。

文件名：

from.html

—设置表单，并在表单中输入参数-->

—设置文本框-->

姓名：

—设置密码框-->

密码：

—设置按钮提交-->

在上述代码中，表单上有两个输入框和一个按钮，当单击"提交"按钮后，表单使用表单元素来收集信息，然后通过GET方法传到request.asp（本页面是ASP的动态页）页面。

执行上述代码，结果如图2-8所示。

图2-8表单

action后面的值因动态语言不同而后缀不一样。

Method的值只能是GET和POST的一种。

在上面的实例中可以看到，在表单里面用到语法，表示在表单中输入选项，完整的语法代码如下：

其中#代码可选项，text、password、checkbox、radio、hidden、submit和reset。

分别代表：

文本、密码、多选框、单选框、隐藏、提交按钮和重置按钮，这就是上面常讲到的表单元素。