HTML教程.ppt

1、HTML教程,张强 ,HTML简介,全写： HyperText Mark-up Language 译名： 超文件注标式语言（译名之一） 简释：一种为普通文件中某些字句加上标示的语言，其目的在於运用标记（tag）使文件达到预期的显示效果。HTML 是在 SGML 定义下的一个描述性语言，或可说 HTML 是 SGML 的一个应用程式，HTML 不是程式语言，如 C+ 和 Java 之类，它只是标示语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML，HTML 的格式非常简单，只是由文字及标记组合而成，於 编辑方面，任何文字编辑器都可以，只要能将档案另存成 ASCII 纯文字格式即可，当然

2、 以专业的网页编辑软件为佳。,标记写法,任何标记皆由所围住，如 标记名与小於号之间不能留有空白字元。 某些标记需要加上参数，某些则不必。如 Hello 参数只可加於起始标记中。 在起始标记之标记名前加上符号/便是其终结标记，如 标记字母大小写皆可。,围堵标记与空标记,标记按型态分为围堵标记与空标记 1. 围堵标记 顾名思义，它以起始标记及终结标记将文字围住，令其达到预期显示效果。 例如 Creation of Webpage is my favourite. 显示成： Creation of Webpage is my favourite. 其中 便称为围堵标记。 它以起始标记及终结标记标示文

3、字 Creation of webpage ，令它显示成粗体，两者失其一都会发生错误显示。,围堵标记与空标记,标记按型态分为围堵标记与空标记 2. 空标记 是指标记单独出现，只有起始标记没有终结标记。 例如 I love Creation of Webpage.Its a wonderful place. 显示成： I love Creation of Webpage. Its a wonderful place. 其中换行标记便属空标记。它的作用便是将标记後所有东西显示於下一行，可见终结标记於它是没意义的， 但有些人会为空标记加上终结标记，这是为方便记认而己，对HTML 没有影响。,主要标记

4、,主要标记,主要标记,主要标记,主要标记,主要标记,主要标记,主要标记,注： 表示该标记属围堵标记，需要关闭标记 。 表示该标记属空标记，即不需要关闭标记。 IE 表示该标记只适用於 Internet Explorer。 NC 表示该标记只适用於 Netscape Communicator。 反对 表示该标记不为 W3C 所赞同，通常这标记是 IE 或 NC 自订，且己为众所支 援，只是 HTML 标准中有其它同功能或更好的选择。 弃用 表示该标记己为 W3C 所弃用，是过时的标记，但 HTML 具向下兼容的特 性，不用担心新浏览器不支援旧标记。 新 表示该标记是 HTML 4.0 中新增的。

5、, ,整份文件处於标记与之间。 用以宣告这是 HTML 文件，让浏览器认出并正确处理此 HTML 文件。 文件分两部分，由至称为开头，至称正文。 基本上两者各有适用的标记，如只可出现於开头部分。 开头部分用以存载重要资讯，而只有正文部分会被显示。 所标示的是文件的标题。会出现於浏览器顶部及为别人 Bookmark 时的名称，所以每页有不同而明确的标题 是需要的。 上述标记中只有具参数设定。, 之参数设定, text=#000000 用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=black 。各种颜色的值及名称可参考【调色原理】一节。 link=#0000FF

6、 设定一般文字连结颜色。 alink=#FF0000 设定刚按下时文字连结颜色。 vlink=#0000FF 设定连结後的颜色。（被按过）。, 之参数设定,background=bg1.gif 设定背景 纸。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。 bgcolor=#FFFFFF 设定背景颜色。当己设定背景 纸时会失去作用，除非 纸有透明部分。 leftmargin=2 设定整份文件显示画面的左方边沿空间，单位为像素。 只适用於IE topmargin=2 设定整份文件显示画面的上方边沿空间。 只适用於IE bgproperties=fixed 固定背景 纸，当卷动文字时 纸不会

7、跟着卷动。 只适用於IE,像很多电脑语言一样，HTML 文件亦提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示，一般使用目的： 为文中不同部份加上说明，方便日後修改。 这对较复杂或非私人网页尤其重要，它不单是提醒自已，亦提醒你的同事这部分 做甚麽、那部分做甚麽。 用作版权声明。 假如你不希望别人使用或复制你的网页，可加上警告字眼。,称为段落标记。 作用：为字、画、表格等之间留一空白行。本来是一围堵标记，标於一段落的头尾，但从 HTML 2.0 开始己不需要作结尾。 的常用参数： 如： align=center 可选值：right, left, center。 内定值： ali

8、gn=left,称为换行标记。 作用：令字、画、表格等显示於下一行。 由於浏览器会自动忽略原始码中空白和换行的部分，这令到成为最常用的标记之 一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记， 浏览器只会将它显示成一大段。,称为水平线。 作用：插入一条水平线。 参数修改： align=“LEFT” 设定线条置放位置，可选择：left；right；center 叁种设定值。 size=“2” 设定线条厚度，以像素作单位，内定为 2。 width=“70%” 设定线条长度，可以是绝对值（以像素作单位）或相对值，内定为 100%。 color=“#0000FF” 只适用於

9、IE 设定线条颜色，内定为黑色。 #0000FF 代表蓝色，亦可以采用颜色的名称，即 text=blue 。 Noshade 设定线条为平面显示，若删去则具阴影或立体，这是内定值。,称为居中标记。 作用：令字、画、表格等显示於中间。这标记原先是 Netscape 所定义，後来其它浏览器都支援它，对於己加有 align=“CENTER” 参数的 标记亦要不厌其烦 地加上居中标记，因有颇多浏览器不支援 标记中的 align=“CENTER” 参数。 称为预设格式标记。 作用：令文件按照原始码的排列方式显示。这标记允许保留你於原始码中输入的空白及 Return。,称为区隔标记。 作用：设定字、画、表

10、格等的摆放位置。 应用於 Style Sheet（式样表）方面会更显威力，它最终目的是给设计者另一种组织 能力，有 Class ; Style ; title ; ID 等属性。 align=“center” 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 的作用和居中标记 一样，前者是由 HTML3.0 开始 的标准，後者是通用己久的标示法。,称为不折行标记。 作用：令某些文字不因太长而绕行，一齐显示於同一行或下一 行。它对住址、数学算式、一行数字、程式码等尤为有用。 WBR称为建议折行标记。 作用：预设折行部位。 它没有侵犯到 的责任，只是作建议

11、而已，若观者的系统解像度够高的话，那麽它是 不会折行的。,实体标记与逻辑标记 1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。 例如逻辑标记的 由於浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加底线、粗体或反白等。 2.多个实体标记亦可有效标示同一字句，逻辑标记则通常於旧浏览器不能有效显示多 重的标示。 例如两个逻辑标记 及 同时标示一字句於旧浏览器常失去作用。 实体标记有： 逻辑标记有： 若要求真确的效果当然以实体标记为佳。, ：两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 Big5 Encoding 时，两者所 标示的中文字不会於 Netscape Net

12、vigator 显示粗体效果。 ：这些标记於 Internet Explorer 都产生斜体效果，而只有 於 Netscape Netvigator 失去作 用。这些标记中只有 较为特别，因它包括换行效果所以不必在它前面加上 标记。, 可令每字母有相等宽度且每字母之间的距离稍为加宽。但於 NC 不见得如此。 是加底线的标记，一些特别的浏览器并不支持，因顾虑到与连结混淆。 加上删除线的标记。 令字体加大。 令字体变细。 为下标字， 则为上标字，仅剩的数学标记。, ： 这些是标题标记，由 至 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。, ：这两个标记具参数设

13、定，且两者的参数设定是一样的，都是负责设定文字的大 小、字形及颜色，但各有用处，看以下比较： 可以用於文件的开头部分，即 与 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。 是应用於文件的内文部分，即 与 之间的位置，只影响 所标示的字句，是一个围堵标记。 两标记可同时存在，唯没被 所标示的字句才直接受 所影 响，而 本身亦受 的影响。,Webpage face=Arial 设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字 形以外的字形。於没有设定为 Big5 Encoding 的中文网页，Netscape Netvigator 不会显示此标记

14、 所指明的任何中文字形。 size=+2 设定文字的大小。其值可以是绝对或相对， 绝对的意思便是标记自己决定文字的大小，不受 的影响，如size=5 表示其大小便是 5，而html内定值为 3，即 size=3和没有设定是一样的。相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size=+2 便等同绝 对表示法的 size=5，但若已设定 则其实际大小便是 n+2 不再是 3+2 了。只有绝对表示法。 color=“#008000”设定文字的颜色。#008000 表示绿色 。,称为顺序清单标记。所谓顺序清单就是在每一项前面加上 1,2,3. 等数目，又称编号清单。 的参数设定（常用

15、）： type=“i” 设定数目款式，其值有五种:1,a,A,i,I内定为 type=“1”。 start=4 设定开始数目，不论设定了哪一数 目款式，其值只能是 1,2,3. 等整 数，内定为 start=1。,用以标示清单项目 的参数设定（常用）： type=square 只适用於非顺序清单，设定符号款式，其值有叁种: disc“, circle ,square，内定为 type=disc： value=4 只适用於顺序清单，设定该一项的数目，其後各项将以此作为起始数目而递增， 但前面各项则不受影响，其值只能是 1,2,3. 等整数，没有内定值。,称为无序清单标记。 所谓无序清单就是在每一项前面加上符号，故又称符号清单。 的参数设定（常用）： type=square 设定符号款式，其值有叁种: disc“, circle ,square，内