HTML基本结构与常用标记

1、附录 AHTML 基本结构与常用标记1 HTML 简介我们在浏览器上看到的网页其实是 HTML 文件构成的，HTML 是“HypertextMarkupLanguage（超文本标记语言”的英文缩写。它是一种可以在网上传输，并被浏览器认识和翻译成页面显示出来的文件。“超文本”是指页面内既可以包含文字，也可以包含图片、声音、视频、链接和程序等非文字的元素。尽管 WW 物然是 HTM 而用最多的地方，但是它还被应用到其他很多的领域，例如使用 HTMLM 使新闻、消息和 E-mail 更加具有吸引力，甚至可以用 HTM 床开发独立的和以网络为核心的应用程序。随着技术的发展，HTML 曾加了许多新功能和

2、新特性，HTML 已经变成了一个更加丰富、更加有用的标记语言。1 .HTML 文件的编辑与运行在编写 HTM 戊件时，如果文件中不包含 ASP 之类的动态服务器页面代码，则只要有一个可以编辑 HTMLt 件的编辑器和一个可浏览 HTML 文件的浏览器就可以了。把编辑后的文件以“.html”或“.htm”为扩展名保存，使用浏览器就可以直接打开；如果文件中包含了 ASP之类的代码，则编辑 HTML 文件后应该将其以“.asp”等为扩展名保存，并置于 Web 服务器端,再通过浏览器进行访问。如果直接用浏览器打开，则其中的动态服务器页面代码不会被执行。编辑 HTML 的文件的编辑器必须是能够编辑纯文本

3、的，或者是可以将其他文本转换成纯文本的。最简单的编辑器莫过于 Windows 系统的“记事本”，占用系统资源最少。但是使用时每一个 HTML 标记都要网页设计者自己写出，故很熟悉 HTML 的设计者可以选用。而对更多的人来说，使用本章 3.1.3 介绍的网页制作工具软件来用编辑 HTM 戊件则是更好的选择。这些工具软件可以自动把你的“所见即所得”的页面编辑操作转换成 HTML 标记，使得你不必每个标记都得去写；也可以立即把你的写的 HTML 标记以网页显示出来。如此可以大大提高编辑HTN 戊件，设计网页的效率。2 .HTML 文件的基本结构HTM 戊件总是以HTML 标记开头，它告诉 WebJ

4、 览器，它正在处理的是 HTML 的文件。类似地，文件中最后一行总是/HTML 市记，它是 HTML 文件的结束标记。 文件中所有的文本和 HTMLfe 记者 B 包含在 HTML 的这个起始和结束标记间。HTML 勺基本结构：标记 HTML 文件的开始标记首部的开始标记首部的内容，如网页标题标记首部的结束标记主体的开始标记网页内容，如网页文本标记主体的结束标记 HTM 戍件的结束如图 1 所示的网页对应的 HTML 文件如图 2 所示。站点发布信息|此网页的HTML注释中包含了配置信息，这J些瓯置信息是用户用Microsoft站点发布向导”或其他使用该向导的程序（如使用 FrontPad,井

5、宜所角的角户名和密幕与使用窗无毕找的电崎图中注明了HTML 和/HTML 标记，首部标记和主体标记。其中首部标记、主体标记以及其他标记的作用见本节后面及 3.7 节的解说。3 .HTML 文件的命名HTML 文件是以文本方式存储的文件。文件命名格式为:文件名.Htm图 1站点发布信息”网页文件名.html文件名为字母或数字组成的字符串，字符之间不能有空格，但可以有下划线。4 .版本信息迄今为止 HTML 已公布了多个版本，最新的规范是 HTML4.0O 一个完整的 HTM 戊件通常是以版本声明开始的，用以指明文件语法的定义，版本声明标记是5 .标题信息HTML 文件首部位于文件开始标记HTML

6、 豆后，并由开始标记HEAD 和结束标记定义。首部内容包括标题名、文本文件的地址、创作信息等文件信息说明，并由专门标记定义，它们都不在浏览器窗口内显示。首部内使用的主要标记有：标记HEAD 标记首部白开始，/HEAD：#记首部的结束。和标记每个 HTML 文件都有一个标题名，在浏览器中作为窗口名称显示在该窗口的最上方标题栏内。网页标题名要写在标记之间，并且标记应包含在HEAD 和和/HEAD：#记之间。一个网页只能有一个网页标题名， 而且标记中不能包含其他标记。 由于许多浏览器将网页名称放在窗口上的标题框中，因而，页面标题就像是页面的门面，一定要短小精悍，反映页面内容，同时由于浏览器标题栏空间

7、有限，标题不要太长，一般上限是 50-60 个字符，多余的字符将被截掉。(3)标记META 标记是一个单标记，用于指明 HTML 文件自身的某些信息，例如文件创建工具、文件作者的信息等。格式为：或使用的属性有：name 指定特性名http-equiv 定义标记的特性content 指定特性的值(4)主体标 t 己BODY 和和网页中的主要内容就是网页的主体，它写在之间，而/BODY 和记对包含在/HTML 和记对之内。文件主体定义了网页显示的内容，如文字、链接、图像、表格或者其他对象。设计制作网页，实际上主要是设计BODY 和/BODY 标记之间的文本和图形内容及各种标记。与BODY 相关的属

8、，f 主要有：background 图像设置网页的背景bgcolor 设置网页的背景色text 设置网页文本的颜色link 设置超文本链接尚未访问文本时的颜色，默认为蓝色vlink 设置超文本链接已经访问文本的颜色，通常为紫色alink 设置超文本链接被选择瞬间时文本的颜色2 常用 HTML 标记简介1.基本结构标记HTMLB 记的基本结构由两大部分组成：首部标记主体标记BODY 和首部标记和主体标记的主体内容又由其他的标记和文本组成。在 HTML 文档中，有的标记只能出现在首部标记中，大多数标记则只能在正文标记中出现。在首部中出现的标记书写顺序没有严格要求，而在正文中出现的标记的次序不能随意

9、改动，改动后会改娈 HTML 文档的输出形式。一个 HTML 文档应具有下面的结构：表明 HTML 文档开始表明文件头开始表明文件头结束表明正文开始表明正文结束表明 HTML 文档结束2.文本结构标记当我们要在浏览器中显示文本时，我们可以用文本结构标记来实现，但要注意，文本结构标记是位于/BODY 和记之间的。常用文本结构标记如下。标记对是用来创建一个段落，在此标记对之间加入的文本将按照段落的格式显示在浏览器上。另外，标记还可以使用 ALIGN 属性来说明对齐方式。语法是：。BR 混一个单一的标记，没有结束标记，作用是用来创建一个回车换行。如果把BR激在标记对的外边，将创建一个行距较大的回车换

10、行，若把BR澈在标记对的里边，将创建一个行距较小的回车换行。(3) 在/BLOCKQUOTEW 之间加入的文本将会在浏览器中按两边缩进的方式显示出来。(4) 标记对用来排版大块 Html 段落，也用于格式化表，此标记对的用法与标记又非常相似，同样有 ALIGN 对齐方式。3 列表标记网页中的列表使用如下的标记来创建。(1) 用来创建目录表，作为无序列表。(2) MENU 用来创建菜单列表，作为无序列表。(3) ,用来创建一个普通的列表，/DT 拥来创建表中的上层项目，用来分创建列表中的最下层项目。/DT 环口/DD 都必须放在标记对之间。(4) /OL 而记对用来创建一个标有数字的列表，标记对

11、用来创建一个标有圆点的列表，标记用来创建一个列表项，该标记只能在标记对之间使用。若放在/OL 整间则在每个列表项前加上一个数字，若在之间则在每个列表项前加上一个圆点。4 超级链接标记超级链接是 Html 语言的一大特色，正因为有了它，我们对内容的浏览才能够具有灵活性和网络性。(1) 本标记对的属性 HREF 是不可缺少的，标记对之间加入需要链接的文本或图像。HREF 的形式可以是 URL 形式，即网址或相对路径,也可以是 MAILTO 形式，即发送 E-MAIL 形式。如：这是我的网站或者这是我的电子邮箱此外，还具有 TARGET1 性，此属性用来指明浏览的目标框架。这将在框架标记中作详细的说

12、明。这里简单说说，如果不使用 TARGET!性，当浏览者点击了链接之后，将在原来的浏览窗口中浏览新的 HTMS 档；如果使用 TARGETI 性且其值等于“-BLANK”,则点击链接之后，将打开一个新的浏览窗口来浏览新的 HTM 戊档。(2) 本标记对要结合标记对使用才有效果。标记对用来在 HTML文档中创建一个标签，属性 NAME不可缺少的，它的值也即是标签名，如：此处创建了一个标签创建标签是为了在 HTML 文档中创建一些链接，以便能够找到同一文档中的有标签的地方。要找到标签所在地，就必须使用标记对。如要找到“标签名”这个标签，就要编写如下代码：点击此处将使浏览器跳到“标签名处(3) 为用

13、户端的图像映像指定链接，它的属性值为 NAME.(4) 用于定义热区或区域。使用的属性有 SHAPE(定义形状)与 COORDS 定义一个以逗号分隔的坐标列表)。5 表格标记表格标记对于制用网页是非常重要的， 现在的很多网页都是使用多重表格， 主要是因为表格不但可以定位文本或图像的输出，而且还可以在表格中进行任意的背景和前景颜色的设置。(1)/TABLE 标记对用来创建一个表格，它有八个属性值，分别为：:设置表格的背景色。:设置边框的宽度，若不设此属性，则边宽为零。:设置边框的颜色。:设置边框明亮部分的颜色。:设置边框昏暗部分的颜色。:设置表格格子之间空间的大小。:设置表格格子边框与内容之间空

14、间的大小。:设置表格的宽度。以上各个属性可以结合使用，有关宽度、大小的单位用绝对像素值。而有关颜色的属性使用十六进制RGB色码或 HTMLL言给定的颜色常量名。与/TR 而记对用来创建表格中的每一行，而/TD 而记对用来创建表格一行中每一个格子，例如要创建一个一行三列的表格，则标记就可按如下方式书写:最外层，创建一个表格创建一行要输出的文本创建三个格子要输出的文本要输出的文本最外层。(3) 标记对用来设置表格头，通常是黑体居中文字。(4) 为表格定义一个标题，使用属性 ALIGN 指定标题的位置。6 框架标记创建框架页面时，我们也可以根据框架标记编制出任意的框架集合。它的标记如下：(1)该标记

15、对用来定义主文档中有几个框架并且各个框架是如何排列的。该标记放在框架的主文档的/BOD 怖记对的外边，也可以嵌在其他框架文档中，并且可以嵌套使用。它具有 ROWS 口 COLS 属性， 使用FRAMESE 标记时这两个属性至少必须选择一个， 否则浏览器只显示第一个定义的帧。ROWSI 来规定主文档中各个本 g 架的行定位，而 COLS 用来规定主文档中各个框架的列定位。FRAME 标标记放在 ，用来定义某一个具体的框架。FRAME 标标记具有 SRCNAME1 性，这两个属性都是必须要取值的。SRC 定义此框架的源 HTML 文件名，浏览器将会在此框架中显示 SRC 指定的 HTML 文件。N

16、AM 既此框架的名字，当此框架要建立超链接时必须要用到。FRAM 南记还有 SCROLLINGSNORESIZE性,SCROLLING!来指定是否显示滚动条，取值可以是“YES(显示)、“NO(不显示)、“AUTO(需要时显示)。NORESIZE1 性直接加入标记中即可使用，不需赋值，它用来禁止用户调整一个框架的大小。(3)/NOFRAMES 已对也是放在/FRAMESET记记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。7 表单标记(1) /FRO 峭己用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。FROM 标记具有 action、metho

17、d 和 target 属性。Action 用来处理程序的程序名，method 属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和POST 勺其中一个。GETT 式是处理程序从当前 Html 文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在 1KB 以下。POSTT 式与 GET 方式相反，它是当前的 Html 文档把数据传送给处理程序，彳送的数据量要比使用 GET 方式的大的多。target 属性用来指定目标窗口或目标框架。(2) 标记用来定义一个用户输入区，用户可以在其中输入信息。此标记放在己对之间。标记中共提供了八种类型的输入区域，具体是哪一种类型由 type

18、 属性来决定。(3) /SELECT 标 记标 记 用 来 创 建一 个 下 拉 式 列 表或 可 以 复 选 的列 表 框 。 此 标 记放 在己对之间。SELECTS 有 multiple、name 和 size 属性。Multiple 属性不用赋值，直接加入标志中即可使用，加入发此属性后列表框就成了可多选的了。Nam 既此列表框的名字。Size 属性用来设置列表的高度，默认时值为 1,若没有设置 multiple 属性，显示的将是一个弹出式的列表框。(4) /TEXTAREA1来创建一个可以输入多行的文本框，此标记对用于己对之间。 有 namecols 和 rows 属性。 cols 和

19、 rows 属性分别用来设置文本框的列数和行数，以字符为单位。8 音、视频与图像标记与特殊效果标记网页中如果加入音频、视频与图像，可以使网页显得更加的绚丽多彩。它们的标记如下：(1) IMG 市记并不是真正的把图像给加入到 HTML 文档中，而是将标记对的 SRC 属性赋值，这个值是图形文件的文件名，当然包括路径，路径可以是相对路径也可以是网址。SRC 属性在IMG 市记中是必须赋值的，是标记中不可缺少的一部分。除此之外，IMG 漏记还有 ALTALIGN、 BORDERWIDTHDHEIGHT 属性。 其中 ALT 属性是指当鼠标移动到图像上时显示的文本， ALIGN是图像的对齐的方式，BO

20、RDER!性是图像的边框，可以取大于或等于零的整数，WIDTHSHEIGHT 属性是指图像的宽与高。(2) BGSOUN 标记用来加入音频。也是利用标记对的 SRCW 性赋值，SRC 的值为路径，也是标记中不可缺少的。该标记有一个特殊的属性为 LOOP 用来控制音频的播入次数，当取值为-1 时，指不限制播放次数。(3) EMBE 的记用来加入视频。该标记也是利用 SRC 属性值来赋值实现的，功能与上面的相同。(4) /NOEMBED已对用来设定当不支持视频播放的浏览器浏览网页时显示的文本或图像。(5) /MARQUEE 已对用来设置滚动字幕。该标记有八个属性值，其中 BGCOLO 属性值表示背

21、景色，SCROLLAMOUNT速度，SCROLLDELAY 性值表示延迟，WIDTH 和 HEIGHT 分别表示该字幕的宽与高，LOOP 表示该字幕的循环次数，DIRECTION 属性值表示滚动的方向，ALIGN 表示对齐方式。3 常用 HTML 标记汇总结构标记1. 用于定义 HTMLt 件的类型。2. 定义 HTM 戊件的开始和结束.3. ,出现在 HTMLt 件的起始部分，用来表明文件的标题等相关信息.4. BODY,BDDY 元素是 HTML 文件的主体，可以理解成除标题以外的所有部分.文件头部标记HTML 文件头部位于HTML 和/HTML之间，内容包括标题名、创作信息等。1 .BA

22、SE这是一个单标记，设定相对引用的基址 URL2 .ISINDEX用于在浏览器上建立一个交互索引框。3 .LINK定义当前文件和另一文件或资源间的链接关系。4 .META用于指明 HTM 戊件自身的一些信息，如：文件制作工具、文件作者等。使用的属性有：Name 指定特性名；Content:指定特性值；Http-equiv:定义标记的特性。5 .用于定义风格.6 .,定义标题，用法如：标题名.格式标记1.,指定文本为粗体.2.使用 SIZE 属性指定文本的基准大小.3.,大字体文本.4.,设定文本闪烁（只适用于 NetscapeNavigator）.如：此处是闪烁的文本5.,设定斜体文字.6.将

23、程序代码显示成等宽字体.如:intx;x+;7.指定一个术语的定义8.强调某段文字，通常用斜体显示9.规定字体属性，使用的属性有：size、color 等10.,斜体格式11.,提示用户应该从键盘输入的文字，浏览器一般用等宽字体显示12.样本字体格式，常用于举例，浏览器一般用等宽字体显示13.指定一段文字为小字体（比当前一般字体小一号）.14.指定一段文字在浏览器中显示带删除线.15.粗体显示的强调文本.16.下标文字.17.上标文字.18.,标准打印机字体.19.,带下划线的文字.20.参数或变量型字体，常显示为斜体超文本链接标记1.,用于创建超文本链接，可以使用的属性有：Href:指定一个

24、 URL 作为有效的链接资源地址Name 指定一个字符串作为链接时可以使用的位置名称Target:用于设置所链接的文件显示在指定的窗口Rel:用来指定源端在当前文件的链接Rev:用来指定目的端在当前文件的链接，与 Rel 一样，对 A 元素它们都不是必须的2.为客户端的图像指定链接，使用的属性为 Name3.用于定义热区或区域，使的属性有：Shape:定义形状,属性值可为：rect,circle,polygon,default.Coords:定义一个以逗号分隔的坐标列表.图像与声音标记1.为 HTML 文件指定背景声音（适用于 MicrosoftInternetExplorer）,使用的属性有

25、Src:指定文件的 URL.Loop:声音播放的次数，若为-1 或 Infinite,则一直播放下去.2.用于将图像嵌入 HTM 戊彳使用的属性有：Src:指定图像的 URL.Alt:指定当浏览器尚未完全读入图像、或浏览器不支持内联图像、或用户为加快浏览速度设置不显示图像时，在图像位置显示的说明性文字。Align:指定图像的对齐方式和布局方式。可取值为：top,texttop,middle,absmiddle,baseline,bottom,absbottom.Hspace:设定图像与文本之间水平方向的空白。Vspace:设定图像与文本之间垂直方向的空白。Border:用于给图像加边。Heig

26、ht 和 Width:用于指定图像的大小。块标记1.地址型格式，用于地址、签名等。2.表示引用的一段材料如：BLOCKQUOT 邮 I 斯坦说过：A=X+Y+ZA 代表成功，3.强制文本换行4.使文本或图像居中。5.,用于将文本划分成不同的部分，使用 Align 属性（值可为 left,right,center个段落指定不同的对齐方式。6.,N 级标题，其中 n 的取值可为 1,2,6。7.在前后两个段落之间画出一条横跨的标尺线，使用的属性有：Width:标尺线的长度，可用 Width=x%表示占屏幕宽度的比例。Size:标尺线的宽度。Noshade:将标尺线设置成黑色。8.预格式化文本，使浏览器能保留显示这些格式。9.用于分段。）为各列表标记1.,建立目录表，作为无序列表，在 HTML 中中推荐书使用标记2.,与DD 不口DT 次素配合使用,定义项目列表3.定义项目内容，特点是换行、不带记号和缩进左对齐4.定义项目，特点是换行和左对齐5.用于定义表项6.定义菜单列表，作为无序列表，在 HTML 中推荐使用UL 密记.7.定义带序号的列表，即有序列表.8.,定义无序列表，用定义表项制表标记1.为表格定义一个标题，使用属性 Ali