一、创建Web页
|
序号
|
标签符号
|
命令作用
|
备注
| |||
|
1
|
<HEAD>
<TITLE></TITLE> </HEAD> |
为建立HTML文件头应放入的信息，以及在浏览窗口的标题框内一什么样的名称去调用该文件。
|
<HEAD>
<TITLE>我的主页</TITLE> </HEAD> | |||
|
2
|
<EM>,</EM>
|
强调显示
|
隐式格式化标记
| |||
|
3
|
<HR>
|
空标记
|
上下两句话之间被一条水平线隔开
| |||
|
4
|
<P>,</P>
|
段落标记
|
多数情况下，Web浏览器只认识字间只有一个空格，忽略字间的其他空格和HTML文件中加入的回车。
| |||
|
5
|
<BR>
|
分行标记
|
它在Web文件中强制实现换行
| |||
|
6
|
<!-- ..... -->
|
注释标记
|
通常使用注释标记是处于个人目的的，因此可以用注释写上一个版权信息或者个人情况
| |||
|
7
|
<H1>,</H1>
|
标题标记
|
第一级字号最大，用于总标题
| |||
|
8
|
<H2>,</H2>
|
第二级小一些，用于大分标题
| ||||
|
9
|
<H3>,</H3>
|
第三级再小些，用于小分标题
| ||||
|
10
|
<H4>,</H4>
|
第四级字号大小和正常字号相同
| ||||
|
11
|
<H5>,</H5>
|
第五级也加强调，但比正常字号小
| ||||
|
12
|
<H6>,</H6>
|
第六级最小
| ||||
|
13
|
<B>,</B>
|
强调显示标记
|
黑体
| |||
|
14
|
<I>,</I>
|
斜体
| ||||
|
15
|
<U>,</U>
|
下划线文本
| ||||
|
16
|
<TT>,</TT>
|
隐式标记
|
一般再现为等宽字体文
| |||
|
17
|
<EM>,</EM>
|
进一步强调，一般为斜体
| ||||
|
18
|
<STRONG>,</STRONG>
|
进一步强调，一般为黑体
| ||||
|
19
|
<CODE>,</CODE>
|
程序员的HTML标记.HTML早期被用来编制计算机程序应用说明，为计算机编程人员提供便利和建议。后来，HTML2.0标准提供了一些（逻辑的》HTML标记，从而使HTML设计人员可以对文本做标记使得该文本能够更容易展示计算机编程代码。
|
编程行，一般再现为等宽字体，如<TT>
| |||
|
20
|
<KBD>,</KBD>
|
键盘文本，一般再现为等宽字体
| ||||
|
21
|
<SAMP>,</SAMP>
|
样本输出，一般再现为等宽字体
| ||||
|
22
|
<VAR>,</VAR>
|
变量，一般为等宽字体
| ||||
|
23
|
<CITE>,</CITE>
|
排版类标记
|
引文，一般再现为斜体
| |||
|
24
|
<BLOCKQUOTE>, </BLOCKQUOTE>
|
块引述，一般再现为缩格正文
| ||||
|
25
|
<DFN>,</DFN>
|
排版类标记
|
术语定义，一般再现为正常文体
| |||
|
26
|
<ADDRESS>,</ADDRESS>
|
地址，一般再现为斜体
| ||||
|
27
|
<PRE>,</PRE>
|
预格式化文本标记
|
它是为了正确保留放置在执行标记和结束标记之间的空格和回车而设计的
| |||
二、表单与图像
|
序号
|
标签符号
|
命令作用
|
备注
|
|
1
|
<OL>,</OL>
|
由于编号的表单
|
编号表单情况下，LI插入一个数字，非编号表单情况下，插入一个圆点。如：<OL><LI>....<LI>....</OL>
|
|
2
|
<UL>,</UL>
|
由于非编号的表单
| |
|
3
|
<LI>
|
插入数字或圆点
| |
|
4
|
<MENU>,</MENU>
|
菜单表单
|
建立一个菜单表单或目录表单，如：<MENU><LI>...<LI>...</MENU>
|
|
5
|
<DIR>,<DIR>
|
目录表单
| |
|
6
|
<DL>,</DL>
|
（空标记）定义表单
|
如：<DL><DT>...<DD>...<DL>
|
|
7
|
<DD>
|
（空标记）定义内容
| |
|
8
|
<DT>
|
定义名称
|
一般占Web页的一行，必要时也可转入下一行。
|
|
合理用<DL>、<DD>、<DT>等标签命令可以进行嵌套，做出美观的页面
| |||
|
9
|
〈IMG〉
|
插入图像
|
格式为：〈IMG SRC="image URL> 图像文件地址
|
|
10
|
〈ALT〉
|
图像标记属性
|
ALT属性进行处理的方法是用正文描述原有的信息情况，看不到图像的用户能看到文字说明如：〈IMG SRC="image1.gif" ALT="我爱你">
|
|
11
|
<ALIGN>
|
图像如何显示
|
<IMG SRC="图像 URL" ALIGN="方向"> ALIGN="BOTTOM"是缺省值 ,TOP说明正文跟图像顶部对齐，MIDDLE说明正文跟图像顶部对齐
|
三、超文本及其链接
|
序号
|
标签符号
|
命令作用
|
备注
|
|
1
|
<A>,</A>
|
（锚标记）创造超文本和超媒体链接中的基本的链。
|
如：<A HREF="URL"显示屏幕内容</A>
|
|
2
|
#
|
文本内部段链接（一个网界面页内）
|
如：<A HREF="链宿锚名称">屏幕显示内容<A/>......<A NAME="链宿锚名称"屏幕显示内容/<A>
|
|
3
|
<BASE>
|
<BASE>与DOS的path语句的功能很相似的。BASE标记告诉浏览器当前处理的网页采用相对URL，它们的基地址或基础URL在标记中定义。然后浏览器认定相对URL中推倒得来，而不必利用HTML文件的当前记录。
|
<BASE>只能在<HEAD>之间出现
|
|
4
|
<LINK>
|
<LINK>标记用于在当前文件和另一个URL之间建立一个超文本联系。通常LINK标记并不在用户观察的Web窗口中创建一个可点击的超文本链接。编写程序时可以利用<LINK>标记的长处，例如，创建一个采用定义关系的工具栏的程序.<LINK>标记通常有以下两种格式：〈LINK HREF="URL" REL="relationship">或
〈LINK HREF="URL" REV="relationship"> 通常<LINK>被用来给Web网站的其他HTML文件创建一个作者自定义的结构，例如属性REL定义HREF URL对当前文件的关系，而REV反过来定义当前文件和HREF与URL之间的关系。下面是两个LINK语句的例子：
〈LINK HREF=""http://www.virtual.com.cn/index.html "REL="PARENT"> <LINK HREF="http://www.virtual.com.cn/product2.html REV=“CHILD"> REV="MADE"链接可能会是频繁使用的一个〈LINK〉，它告诉用户是谁创建了这个HTML页。不过，LINK的这个用法在大多数浏览器中实际上并未调用mailto:这个的链接。此外它 把作者的E-Mail地址告诉观察源代码的人们，如：
<LINK HREF=""mailto:amtec@hitnet.hit.edu.cn">mailto:amtec@hitnet.hit.edu.cn" REV="MADE" REL="AUTHOR"> 在文本主体中也应该包含一个：锚标记，使人们响应你的Web页。更多的关于<LINK>的信息，和各种REL，REV取值可以从： http//www.sq.com/papers/Relationships.html中得到。 | |
|
5
|
<ISINDEX>
|
把〈ISINDEX〉标记加到文件的〈HEAD〉中可以使一些W服务器搜索引擎在W页上查找关键字。如果你的W服务器提供这样一个搜索引擎、用户的浏览器又支持查询的话，当该页被装入时，用户将会看到一个简单的查询框，然后用户就可以键入在你的页上想查找的文本了。这个标记直截了当，并无需更多的属性，参见下面的例子；
〈HEAD〉 〈ISINDEX〉 〈/HEAD〉 如果有人使用你的Web服务器,你可以问用户是否应该包含〈ISINDEX〉标记。如果管理员提供了一个基于服务器的查询引擎，或是你使用这个〈ISINDEX〉标记，或是用户自己把〈ISINDEX〉标记加入到你自己的文件中。 | |
|
6
|
使用超媒体链接
|
通过Internet传输多媒体文件的中心使用正确的传输协议。大多数情况下，是使用http://协议。如：
<A HREF="http//www.hit.edu.cn/amtec/info.qu">简短电影<a>。注意：虽然ftp://协议也可以传递多媒体文件，但是一些浏览器会把它解释为用户把文件下载到自己的计算机中，而不会起用相应的应用程序。 | |
|
7
|
与图像的链接
|
图像与其他所有的类型的HTML标记一样，只要在锚标记内放置〈IMG〉标记，就可以创建可点击的图像，它可以代替链接中的描述正文。例：
<A HREF="http://www.virtual.com.cn/"><IMG SRC="Vlogo.gif" ALT="虚拟公司">。 | |
四、HTML交互方法
|
序号
|
标签名称
|
命令作用
|
备注
|
|
1
|
图像映像
|
图像映像(img map)以Web用的普通图像（GIF或JPEG格式）为基础，然后用其他程序在该图像上部映射热区 （hot zone，可点击去）构成。当把图像映像加入到Web页上时，它允许用户通过点击图像的不同部分访问不同的HTML页。因为每一个热区都有一相应的URL，并且每个热区对应于图像的某个部分，因此，Web网站的运行既图像化有可交互。可以通过MapEdit Web网站下载程序的最新版本。http://www.boutel.com/mapedit/
| |
|
2
|
在Web页中加图像映像
|
图像映像和可点击的图像之间唯一的主要区别是在<IMG>标记中增加了一个新的属性<ISMAP>。如：
<IMG SRC="graghic.ext" ISMAP> | |
|
3
|
〈TEXTAREA〉，〈/TEXTAREA〉
|
报表正文域和属性
|
如：〈TEXTAREA NAME="varible_name" ROWS="number" COLS="number>"
〈/TEXTAREA> 注：属性是正文串的变量名。它被送往Web服务器上的脚本进行处理。ROWS（行）和COLS（列）取值不同，正文域的大小就不同。最好限制在COLS为80，ROWS为24左右。 |
|
4
|
〈FORM>,</FORM>
|
创建报表
|
格式：<FORM METHOD="how-to-send" ACTION="URL of script">
...form data... </FORM> 注：〈FORM〉标记有两个属性：METHOD（方法）和ACTION（行动）。METHOD属性取值为POST或ACTION, POST用得很普片，它可以发送大量的数据。属性ACTION直接接受脚本URL，由它处理从报表来的处理。脚本经常被存储在Web服务器上称为bin/或者cgi_bin/的字目录中。例如：反馈报表例子 <FORM> <FORM METHOD="POST" ACTON="hnit.edu.cn/cgi_bn/feedback"> ...... </FORM> |
|
5
|
<INPUT>
|
报表输入
|
〈INPUT TYPE="type_of_box" NAME="variable" SIZE="number" MAXLENGHT="number">
从技术上来说，〈INPUT〉标记只需要属性TYPE和NAME，不过输入标记的其他类型也接受VALUE属性。 1、TEXT TYPE属性的第一个取值是文本TEXT，它创建单行文本，正文区长度由你选择。 2、CHECKBOX 检验框也是一种TYPE的取值，它用来给报表创建检验框式的界面。当在两个中选择时它最合适。 3、RADIO （按钮）与CHECKBOX一样，用于对事先确定的选项进行选择。它和CHECKBOX不同的是仅仅接受多个选项中的一个响应。 4、RESET （复位）使得〈INPUT〉标记具备清除HTML报表的能力。RESET生成一个按钮，其名称就是VALUE中的字符串。功能是清除所有键入的值。
5、SUBMIT （提交）这个类型使〈INPUT〉有能力自动提交进入HTML报表之中的数据。SUBMIT类型只接受VALUE属性，它可以用来重新命名按钮。 |
|
6
|
<SELECTED>,</SELECTED>
|
创建滚式动菜单
|
SELECTED〉（选择）标记跟〈TEXTAREA〉标记一样，也是包装标记。基本格式如下：
<SELECTED NAME="variable"> <OPTION SELECTED VALUE="value"> Menu text <OPTION VALUE="value"> Menu text ...... </SELECTED> |
|
7
|
CGI-BIN Script和报表数据的处理
|
使用CGI-BIN脚本
|
大多数情况下，设计CGI-BIN脚本是为了从用户处接受数据，接着有计划地生成HTML代码作为响应。脚本通常用于处理报表数据，但也能用于添加计数器和可变图像（不同时间表现不同图像）之类的内容。例如：为了在页中加一个计数器需要有如下内容：
<IMG SRC="/cig-bin/counter.pl"> 它使脚本counter.pl运行并返回一个值。此值将是一个图像文件名，用于显示里程表风格的图像。 在此不介绍如何实际生成脚本。大多数情况下，CGI-BIN脚本用Perl、C、Visual Basic或象AppleScript这样的脚本语言编写。 在报表情况下，是用ACTION属性在〈FROM〉标记中调用CGI-BIN脚本，脚步接收到数据后，使用生成一HTML结果，然后送回浏览器。 |
|
接受报表数据
|
前面讲过有两种不同的METHOD（方法）可以将数据传递给已创建的脚本来进行处理。两种方法是：GET和POST它们使数据以不同的方式传送。最好用POST。
| ||
五、页面排版
|
序号
|
标签名称
|
命令作用
|
备注
|
|
1
|
<TR>,</TR>
|
表格行
|
|
|
2
|
<DT>
|
表格数据
|
|
|
3
|
〈TH〉
|
行列标题标记
|
|
|
4
|
WIDTH
|
宽度属性
|
建议取数值
|
|
5
|
COLS
|
列属性
|
|
|
6
|
BORDER
|
边界属性
|
|
|
7
|
CELLSPACING
|
表栏（CELL）空白属性
|
|
|
8
|
CELLPADDING
|
表栏填充属性
|
|
|
9
|
图像控制
|
显示图像位置
|
格式：<IMG SRC="URL" ALT="text description" ALIGN="Direction">ALIGN的属性取值为：TOP（顶）、MIDDLE(中）、BOTTOM（底）、LEFT（左）、RIGHT(右）。
|
|
10
|
<INSERT>
|
插入多媒体内容
|
除了DATA（数据）和TYPE（类型）之外，<INSERT>的属性还有ALIGN（定位），WIDTH（宽度），HEIGHT（高度）和BORDER（边界）。格式如：<INSRET ALIGN="direction">
LEFT、RIGHT、CENTER TEXTTOP、MIDDLE、BASELINE 、TEXTBOTTOM、WIDTH、HEIGHT,采用数值和单位（如px为象素，in为英寸），这两种属性定义下载的对象的大小。具体例子如： <A HREF="intro.html"><INSERT DATA="intro.moov" TYPE="video/quicktime" ALIGN="LEFT" WIDTH="3in" HEIGHT="2in" BORDER="2" </INSERT></A> |
|
11
|
<PRAMA>
|
<INSERT>和标记〈PRAMA〉及〈IMG〉经常一起合用
|
〈IMG〉标记用于〈INSERT〉要插入多媒体文件而浏览器不能处理的场合。比如浏览器接受了一个Macromedia Director多媒体文件，但它又处理不了，可以用〈IMG〉内容代替。<PARAM>标记用于向〈INSERT〉标记提供附加的参数，比如一段录象剪辑要播放多少遍。〈PARAM〉标记取元素NAME（名称）和VALUE（值），但和表格标记时的情况很不一样。
各种类型的多媒体文件需要不同的NAME和VALUE值，因此想要发送特定对象类型时必须注意这个问题。
如果要插入一次就不需要〈PRAMA〉标记。你可以观察源代码，了解使用多媒体对象新的方法。例：
<INSERT DATA="ship.avi" TYPE="application/avi"> <PRAMA NAME="loop" VALUE="infinite"></INSERT> 〈IMG〉标记在<INSERT>
定义之内的情况和在别的场合是一样的，只是ALIGN属性没有必要，因为〈IMG〉会仅仅用来直接代替插入的多媒体对象。可以象这样添加〈IMG〉： <INSERT DATA="ship.avi" TYPE="application/avi"> <PRAMA NAME="loop" VALUE="infinite"><IMG SRC="ship.gif ALT="The ship"></INSERT> 这样常常会用图像代替不能显示的多媒体文件，或许你可以使装载的那幅图像告诉用户丢失了什么。 |
|
12
|
背景图像
|
显示背景
|
如：〈BODY BACKGROUND="winlogo.fig">
|
|
13
|
在Web页上加客户端映像
|
客户端映像要求两部分不同的编码段：〈IMG〉标记码段以及新〈MAP〉标记码段。〈MAP〉是一种包装标记，它的作用很象映像文件，只是它不是独立的文件，而是HTML文件的一部分。
| |
|
14
|
USEMAP
|
为了创建客户端图像映像，需要增加新属性USEMAP如下：
〈IMG SRC="map_name.gif" USEMAP="#section_name"> 属性USEMAP（使用图像）接受段块式的超级链接，因此可以在同一HTML文件中存储映像定义信息。 | |
|
15
|
〈MAP〉，〈/MAP〉
|
表示采用段块式的NAME属性。在它的内部可以用〈AREA〉来为客户端定义热区
|
如：<MAP NAME="section_name">
<AREA SHAPE="shape1"COORDS="coordinate numbers" HREF="URL"> <AREASHAPE="shape2" COORDS="coordinate numbers" HREF="URL"> ...... </MAP> |
|
16
|
<AREA>与<MAP>例子
|
〈MAP NAME="mymap"〉
<AREA SHAPE="PLOY" COORDS="1,0,1,72,108,0" HREF="index.html <AREA SHAPE="PLOY" COORDS="154,0,109,0,88,14,154,71" HREF="ftp.html <AREA SHAPE="PLOY" COORDS="0,0,288,71" HREF="help.html | |
|
17
|
<AREA>
|
RECT
|
要求四个坐标，左上角和右上角顶点坐标
|
|
CIRCLE
|
要求四个坐标，圆心X、Y坐标以及半径
| ||
|
PLOYGON
|
要求每一顶点有一坐标
| ||
|
POINT
|
只需一个坐标
| ||
六、HTML标准
|
序号
|
标签名称
|
命令作用
|
备注
|
|
由于HTML在不断的变化，要想知道最新发展最好查询：http://www.w3.org/
| |||
|
1
|
<MATH>
|
HTML数学标记
|
格式为：<MATH>数学公式/置标<MATH>
|
|
2
|
<SUB>
|
将文本转换为下标
|
A2=453的源代码为：<MAHT>A<SUB>2</SUB>=45<SUP>3</SUP>
|
|
3
|
<SUP>
|
将文本转换为上标
| |
|
4
|
<BOX>
|
用作不可见的括号、界符和积分号，以及引指有的项要放在某项的上面。
|
|
|
5
|
<OVER>
|
实际放置操作
|
|
|
6
|
<VEC>
|
向量符
|
|
|
7
|
<BAR>
|
横杠符
|
|
|
8
|
<DOT>
|
点符
|
|
|
9
|
<DDOT>
|
双点符
|
|
|
10
|
<HAT>
|
冒符
|
|
|
11
|
<TILDE>
|
波浪符
|
|
|
12
|
<SQRT>
|
方根标记
|
|
|
13
|
<ROOT>,</ROOT>
|
OF用来定义根的指数
| |
|
14
|
〈TEXT〉,</TEXT>
|
文本标记
|
经常与其它数学相结合使用
|
|
15
|
<STYLE>，</STYLE>
|
风格标记
|
在HTML中的风格页中使用<STYLE>标记是最容易理解的.在文件的<HEAD>段中使用<STYLE>包装标记规定想要加入Web页的风格元素.其基本格式如下:
<HEAD> <TITLE>Doc title</TITLE> <STYLE TYPE="MIME type"> ...... </STYLE> </HEAD> |
|
16
|
<LINK>
|
<LINK>标记能使单一风格页为网站上多页使用。例如：<LINK TITLE="link_doc_title" REL=stylesheet HREF="URL"TYPE="text/cass">
TYPE能接受所有报表的风格页，这里使用CSS；TITLE应该是同这个远地的文件名称相同；HREF URL应该是当前页要用的包括〈STYLE〉定义在内的文件的URL。参见例子：
<LINK TITLE="MY STYLE" REL=stylesheet HREF="my.style" TYPE="text/cass"> | |
|
17
|
<DIV>,</DIV>
|
分界和定位属性
|
分界（division)标记<DIV>,它允许对文件的特定部分赋予属性。<DIV>是个包装标记，把不同的风格用于标记之间的所有内容，包括图像在内。它给予了设计者另一层Web页组织手段。<DIV>处于<BODY>的下一层，它的操作如下：
<DIV CLASS="class_name" ALIGN="direction"> ...HTML markup... </DIV> <DIV>能够采用属性ALIGN（定位），它能接受LEFT（左齐）、CENTER（居中）、RIGHT（右齐）或者JUSTIFY（满行）等赋值。 |
|
18
|
背景和字体
|
例子：<BODYBACKGROUND="PATTERN.GIF" BGPROGERTIES="fixed" LEFTMARGIN="30" TOPMARGIN="30">解释如下：
BGPROGERTIES的唯一取值是“固定”，也即背景不动。 LEFTMARGIN表示左边空白 TOPMARGIN表示右边空白 | |
|
19
|
背景声BGSOUND
|
例子：〈BGSOUND SRC="intro.au" LOOP="2">声音文件的扩展名一般为：.au或.wav以及midi.
| |
|
20
|
IE对<IMG>的扩展
|
DYNSRC
|
在中加入一个SRC属性，表示不能播放视频文件时，显示一幅图像。
|
|
START
|
取值为FILEOPEN或MOUSEOVER。前者表示打开网页时播放，后者表示鼠标移到上面时播放。
| ||
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
