HTML彻底剖析1.docx

1、HTML彻底剖析1HTML彻底剖析 HTML彻底剖析(15)调色原理 (10月09日) HTML彻底剖析(14)特殊字符 (10月09日) HTML彻底剖析(13)其他标记 (10月09日) HTML彻底剖析(12)多媒体 (10月09日) HTML彻底剖析(11)影像地图 (10月09日) HTML彻底剖析(10)框架标记 (10月09日) HTML彻底剖析(9)链接标记 (10月09日) HTML彻底剖析(8)图形标记 (10月09日) HTML彻底剖析(7)表格标记 (10月09日) HTML彻底剖析(6)清单标记 (10月09日) HTML彻底剖析(5)字体标记 (10月09日) HT

2、ML彻底剖析(4)排版标记 (10月09日) HTML彻底剖析(3)文件标记 (10月09日) HTML彻底剖析(2)标记一览 (10月09日) HTML彻底剖析(1)一般概念 (10月09日)HTML彻底剖析(1)一般概念 HTML 一般概念：这节将简单介绍 HTML。 全称：HyperText Mark-up Language 译称：超文本标记语言。 简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag）合文件 达到预期的效果。 HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C+ 和 Ja

3、va 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑部方面，任何文字编辑器都市可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。 阅读须知：这一篇【HTML彻底剖析】偏重于标记的介绍，考虑到易懂及每节的篇幅问题，我并不按 W3C 的 HTML 分类，这可令你更易选择有兴趣的标记，其中只有【文件标记】是必须的，其余可任意选择。这一篇不会提及任何网页编辑软件，只要你掌握了 HTML ，任何网页编辑工具都可以变成一把利器。（就好像只要你有深厚内功，树叶同样可以杀人） 标记写法：任何标记皆由所

4、围住，如 标记名与小于号之间不能留有空白字元。 有些标记需要加上参数，有些不要。如 Hello 参数只可加于起始标记中。 在起始标记的标记名前加上符号/便是终结标记，如 标记字母大小写皆可。 围堵标记与空标记：标记按型态分为围堵标记与空标记1、围堵标记 顾名思义，它以起始标记及终结标记将文字围住，令其达到预期要显示的效果。 例如 HTML Source ： Creation of Webpage is my favourite. 显示成： Creation of Webpage is my favourite. 其中 便称为围堵标记。它以起始标记及终结标记标示文字 Creation of we

5、bpage ，令它显示成粗体，两者失其一都会发生错误显示。 2、空标记 是指标记单独出现，只有起始标记没有终结标记。 例如 HTML Source：I love Creation of Webpage.Its a wonderful place. 显示成：I love Creation of Webpage. Its a wonderful place. 其中换行标记便属于空标记。 它的作用是将标记后的所有东西显示于下一行，可同终结标记对它是没有意义的， 但有些人为空标记加上终结标记，这是为方便阅读而已，对 HTML 没有影响。HTML彻底剖析(2)标记一览标记类型名称或意义作用备注文件标记文

6、件宣告让浏览器知道这是 HTML 文件开头提供文件整体信息标题定义文件标题，将显示于浏览器顶端主体设计文件格式及内容所在排版标记说明标记为文件加上说明，但不被显示段落标记为字、图、表格等之间留下一空白行换行标记令字、图、表格显示于下一行水平线插入一水平线居中令字、图、表格等显示于中间反对预设格式令文件按原代码的排列方式显示定位标记设定字、图、表格等的摆放位置不换行令文字不因太长而换行建议换行预设换行部位字体标记加重语气产生字体加粗 Bold 的效果粗体标记产生字体加粗的效果强调标记字体出现斜体效果斜体标记字体出现斜体效果等宽字体Courier字体，字母宽度相同加下划线加下划线反对一级标题标记将

7、字体变大，级数越高越小二级标题标记 将字体变大三级标题标记 将字体变大四级标题标记 将字体变大五级标题标记 将字体变大六级标题标记 将字体变大字体标记设定字体、大小、颜色反对基准字体标记设定所有字体、大小、颜色反对字体加大令字体稍微变大字体缩小令字体稍微缩小加删除线为文字加删除线反对程式码字体稍微加宽如键盘字字体稍微加宽，单一空白范例字體稍為加寬如变量斜体效果斜体标记斜体效果向右缩排文字向右缩排述语定义斜体效果地址标记斜体效果下标字文字下标上标字 文字上标清单标记顺序清单清单项目将以数字、字母顺序排列无序清单清单项目将以实心圆点作为符号排列清单项目清单中的项目，一个标记一行选项清单可用type

8、参数指定项目符号。反對目录清单与相同反對定义清单清单分两层出现定义条目清单项标题定义内容清单项内容表格标记表格标记设定该表格的各项参数表格标题做成一打通列以填入表格标题表格列设定该表格的列表格栏设定该表格的栏表格标头相等于，但其内文字字体会变粗表单标记表单标记决定该表单的运作模式文字框提供文字输入栏输入标记决定输入形式选择标记建立弹出卷动清单选项每一个清单选项图形标记图形标记用来插入图形及设定图形属性链接标记链接标记加入链接基准标记可将相对 URL 转绝对及指定链接框架标记框架设定设定框架窗口设定设定框架中的窗口页内框架于网页中插入框架IE不支持框架设定浏览器不支持框架时的提示影像地图影像地图

9、名称设定影像地图名称链接区域设定各链接区域多媒体背景声音令背景播放音乐或声音IE多媒体加入声音、音乐或影像其他标记走马灯令文字走动IE闪烁文字令文字闪烁NC页内寻找器可输入关键字寻找该页反对开头说明提供关于此页的信息给浏览器关系定义定义该文件与其他 URL 的关系StyleSheet式样表控制网页版面自订标记独立使用或与样式表一起用注： 表示该标记属于围堵标记，即需要结束标记 。 表示该标记属空标记，即不需要结束标记。 IE 表示该标记只适应于 Internet Explorer。 NC 表示该标记只适用于 Netscape Communicator。 反对 表示该标记不为 W3C 所赞同，通

10、常这标记是微软或网景自订，且已被大家支持，只是 HTML 标准中有其它功能相同或更好的选择。 弃用 表示该标记已被 W3C 所抛弃，是过时的标记，但 HTML 有向下兼容性，所以浏览器仍然支持。 新 表示该标记是 HTML 4.0 中新增的。HTML彻底剖析(3)文件标记 文件标记；欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。也请先明白围堵标记与空标记的分别，请看 【HTML概念】。 HTML 基本架构： 以下 HTML Source Code 便是一份 HTML 文件的基本架构： 网页的标题 网页的内容，很多标记都作用于此 特点解说： 整份文件处于标记与之间。 用以宣告这是

11、 HTML 文件，让浏览器认出并正确处理此 HTML 文件。 文件分两部份，由至称为开头，至称本文。 基本上两者各有适用的标记，如只可出现于开部分。 开头部分用以存载重要信息，而只有本文部分会被显示。 所以大部分标记会应用于本文部分。 所标示的是文件的标题。 会出现于浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同面明确的标题是需要的。 上述标记中只有具参数设定。 .用法：包含了文档的内容开始结束标识：可选可选属性：%conreattrs,%i18n,%eventsbackground=.被反对。知名背景图像的URLbgcolor=.被反对。设置背景颜色text=.被反对。设置文

12、本颜色link=.被反对。设置链接的颜色vlink=.被反对。设置链接被访问后的颜色alink=.被反对。设置激活链接的颜色onload=.文档装载时的内部事件触发器 onunload=.文档卸载时的内部事件触发器空：不允许注释：文当中只能有一个BODY，并且它只能跟在HEAD后面。BODY元素可以被FRAMESET元素替换。反对使用那些有关视觉的属性有利于在格式表中设置那些属性的值。 例子： text=#000000 用以设定文字颜色。 #000000 代表黑色，也可以采用颜色名称，即 text=black 。各种颜色的值及名称可参考【调色原理】一节。 link=#0000FF 设定一般文字

13、链接的颜色。 alink=#FF0000 设定刚按下时文字链结颜色。 vlink=#0000FF 设定被按过后的链接的颜色。 background=bg1.gif 设定背景图片。GIF 或 JPEG 皆可，可以是绝对路径或相对路径。 bgcolor=#FFFFFF 设定背景颜色，当已设定背景图片时会失去作用，除非透明部分。 leftmargin=2 设定整份文件显示画面的左方边沿空间，单位为像素。 （只适用于IE） topmargin=2 设定整份文件显示画面的上方边沿空间。 （只适用于IE） bgproperties=fixed 固定背景图片，当卷轴卷动时不会跟着卷动。 （只适用于IE） 标

14、记及参数的字母大小写都可以。其他如 onload 等事件请参看有关 Java Script 的介绍。.用法：本元素包含了整个文档开始结束标识：可选可选属性：%i18nversion=.说明定义文档类型的URL，指明用来创建当前文档的HTML版本空：不允许注释：其中的版本信息是从声明中复制过来的，因此这部分不是必不可少的。 .用法：用来说明这是文档的标题，并包含了向用户和搜索引擎提供信息的其他元素开始结束标识：可选可选属性：%i18nprogile=.其中的URL指明了META文件的地址空：不允许注释：每个文当中只能有一个标题。它必须位于打开的HTML标识后面和BODY前面 .用法：指明自己We

15、b页面的名字。这个元素放在HEAD元素之中，显示在浏览器窗口的标题栏中。开始结束标识：必须必须属性：%i18n空：不允许注释：每个文档只允许有一个标题HTML彻底剖析(4)排版标记 排版标记； 欲明白本篇【HTML彻底剖析】之标记分类，请看 【标记一览】。 也请先明白围堵标记与空标记的分别，请看 【HTML概念】。 ： Top 用法：用来插入一些在浏览器中不显示的注释和解释性语言开始结束标识：必须必须属性：没有空：允许注释：其内容长度不用被限制在一行内，可以为任意长度。结束标识和开始标识可以不在一行上。像很多电脑语言一样，HTML 也提供注解功能。浏览器将忽略此标记中的文字（可以是 很多行）而

16、不作显示，一般使用目的： 为文中不同的部分加上说明，方便日后修改。 这对较复杂或非私人网页尤其重要，它不单提醒自己也提醒其他同事这部分 做什么、那部份做什么。 例子： 用作版权声明。 假如你不希望别人使用或复制你的网页，可加上警告字句。 例子： ：Top 用法：定义一个段落开始结束标识：必须可选属性：%coreattrs,%i18n,%eventsalign=.被反对。用来控制对齐方式(left, right, center, justify)空：不允许 称为段落标记。作用：留一空白行。本来是一个围堵标记，标于一段落的头尾，但从 HTML 2.0 开始已不需要作结尾。 的常用参数： 如： al

17、ign=center 可选值：right, left, center。 默认值： align=left 例子： 原代码Here is the text for my paragraph. It doest matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one. Heres the next paragra

18、ph. 显示结果Here is the text for my paragraph. It doest matter how long it is, how many space are between the words or when I decide to hit the return key. It will create a new paragraph only when I begin the tag with another one. Heres the next paragraph. ： Top 用法：强迫一行文本断开开始结束标识：必须必须属性：%coreattrs,%i18n

19、,%eventsclear=.设置在一个浮动对象之后的下一段起始位置(none, left, right, all)空：不允许称为换行标记。作用：令其后的内容在下一行显示。 由于浏览器会自动忽略原代码中的空白和换行的部分，这使得成为最常用的标记之一 。 因为无论你在原代码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。 错误示范： 原代码566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America 显示结果566 E Boston Post RD Mamaroneck NY 1

20、0543-9982 United States of America 正确例子： 原代码566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America 显示结果566 E Boston Post RD Mamaroneck NY 10543-9982 United States of America ： Top 用法：是一个水平分割线，用来把页面分成几个部分开始结束标识：必须非法属性：%coreattrs，%eventsalign=.被反对。控制对齐方式(left, right, center, justify)no

21、shade=.显示一个实心的分界线size=.被反对。控制分界线的尺寸大小width=.被反对。控制分界线的宽度空：允许称为水平线。作用：插入一条水平线。 的参数修改：以： 为例。 align=LEFT 设定线条摆放位置，可选择：left；right；center 三种设定值。 size=2 设定线条的厚度，以像素作单位，内定为 2。 width=70% 设定线条长度，以像素作单位，可以是绝对或相对值，内定为 100%。 color=#0000FF （只适用于IE） 设定线条颜色，内定为黑色。 #0000FF 代表蓝色，也可以采用颜色的名称，即 text=blue 。各种颜色的值及名称请参考【调色原理】一节。 noshade 设定线条为平面显示，若删去则具阴影，这是内定值。 例子： 原代码 显示结果 ：Top 称为居中标记。作用：令置中对齐。 你会发现很多的标记已有 align=CENTER 的参数，似乎是多余了，事实上它还是常用的标记之一，其简单易用 ，常用