XML 实用教程

XML实用教程 北京大学出版社丁跃潮　张涛　叶文来刘韵华程旭曼丁潇张天桥

第2章 HTML基础

概述 • 教学提示：Web页面可采用超文本标识语言（HTML）创作，它允许将常规的文本与一些用来描述文本的标记混合使用。这些标记的主要功能是Web中文本的显示外观、版面布局和主体的描述。在做网页的时候，有经验的程序员经常是分两步走：首先使用一些常用的网页制作工具做成网页的原型，然后再修改其HTML代码。HTML代码不区分大小写，只要能够编辑文本的任何编辑器都可以用于编写HTML代码。 • 教学目标：了解网页设计的基本概念及HTML的基本知识，掌握HTML文档的基本结构，熟悉常用HTML元素标记功能及使用方法。掌握格式化网页文本的常用方法，熟悉在网页中链接语句使用方法。

2.1 HTML概述2.2 HTML的标记2.3 文字修饰2.4 列表2.5 表格2.6 色彩2.7 超文本链接

2.1.1 HTML概述 • HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”，它实际上是专门用来编写网页的一种编程语言。大多数网页的构成基础就是HTML的语句。

HTML文档的基本结构

2.1.2 如何编写一个HTML文件 • HTML文件是一个ASCII格式的文件。它可以在任何一种可以编辑ASCII文件的编辑器中编辑（如果HTML文件中包含汉字，则要在支持汉字的编辑器中编辑）。我们通常可以用Windows中的“记事本”和“写字板”、字处理软件“Word”等来编辑HTML文件。

2.1.3 HTML文件的调试 <html> <head> <title>第二章 HTML基础</title> </head> <body> HTML是Hyper Text Markup Language的缩写，意思是“超文本标识语言”。它实际上是专门用来编写网页的一种编成语言。大多数网页的构成基础就是HTML的语句。 </body> </html>

2.2.1 标记的一般特性 • 一个HTML文件中由两大类元素组成：一是标记二是标记的作用对象（如文字、图形等）

2.2.2 几个最常用的标记 • 1. <html>和</html> • 2. <head>和</head> • 3. <title>和</title> • 4. <body>和</body> • 5. <hn>和</hn> • 6. <br> • 7. <hr>

2.3 文字修饰 • 一个网页大多由以下要素构成：文字、图片、表格、动画及声音。在这些元素中，文字是十分重要的。下面我们就逐一讲述涉及文字的标记。

2.3.1 字号 • 可以采用多种方式设置文字的大小。不过设置文字的大小后，其效果会受到IE中选项的影响。

2.3.1 字号

2.3.1 字号 • 1. <small>和</small> • 2. <big>和</big> • 3. <font size=n> • 4. <basefont size=n> • 5. <sub>和</sub> • 6. <sup>和</sup>

2.3.2字体式样 • 1. <b>和</b> • 2. <I>和</I> • 3. <u>和</u> • 4. <strike>和</strike>

2.3.3 特殊标记 • < 用 &It • > 用 &gt • & 用 &amp • “ 用 &quot

2.4 列表 • 列表是一种条理化地排列信息的方法。它把内容一条条地水平排列显示，直观、清晰。而它也不同于表格，一般列表没有表格复杂。

<标记> <条目标记1>条目内容1 <条目标记2>条目内容2 <条目标记3>条目内容3 …… </标记> 列表标记使用的通用格式

列表标记使用的通用格式 • 1. <dir>和</dir> • 2. <menu>和</menu> • 3. <UL>和</UL>

2.5 表格 • 使用表格基本能实现对页面元素在浏览器中随心所欲的排版定位。表格通常用来显示大量的、分类化的信息，具有表示清晰、明了的特点，使用十分广泛。 • 表格一般由以下几部分组成：表格名称、表格栏及表中数据。这与其他软件（如WORD）中所说的表格十分相同。

2.5.1 <table></table> • 这是一对用来指明表格范围的标记。通常使用的格式如下： <table> 表格全部内容 </table>

border属性 使用表格的这一属性可以给表格加上框线。如<table border>表示表格是有表格线的，border的线宽默认为1。没有写border则表示表格是没有表格线的。一般用<table border=n>来设置“有线表格”和边框宽度。n是一个具体的数字，用来指定宽度的大小，单位是“像素”，默认为没有边框。当n为0时，也没有边框，具体参见例2.8。

width属性 • 这一属性可以用来设置“有线表格”占整个页面的相对宽度，写法为<table width=n>。n是一个具体的数字，可以是一个百分数（如100%），也可以是一个具体的数值，单位是像素（如80，表示表格占80个像素单位的宽度）。

height属性 • 这一属性可以用来设置“有线表格”占整个页面的相对高度。其用法与<table width=n>相似。 • 使用相对方式来设置表格大小时，浏览器窗口大小的变化会影响到表格大小的变化。表格宽度、高度设置要合理，在视觉上要有美感。

cellspacing属性 • 这一属性可以用来设置有线表格的单元格线的宽度，用法为<table cellspacing=n>。n是一个具体的数值，单位是像素。

cellpddeing • 这一属性可以用来设置单元格线与数据之间的距离，用法为<table cellpddeing=n>。n是一个具体的数值，单位是像素。默认值为1。

2.5.2 <caption>和</caption> • 这是一对用来指明表格标题的标记。通常使用的格式如下： <caption> 表格标题内容 </caption>

2.5.3 <tr>和</tr> • 这对标记用来指明表格一行的内容。这一行可以是表格的栏目，也可以是数据。

2.5.4 <th>和</th> • 这对标记用来指明表格栏目行中的一项。一行可以由多项组成，必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字会突出显示。

2.5.5 <td>和</td> • 这对标记用来指明表格数据行中的一项。一行可以由多项组成，它也必须嵌套在<tr>与</tr>之中使用。由此标记指定的栏目，文字不会突出显示。

2.6.1 色彩的表示 • 在计算机显示器中，使用红(red)、绿(green)、蓝(blue)3种颜色来构成各种各样的颜色。颜色的种类有16，256及65，536等多种。我们把这三种颜色人0到255分别编号，再表示为16进制的数，则红色（rr）就从00到ff，绿色(gg)和蓝色(bb)两种颜色也如此。三种颜色的表示合起来就是rrggbb。这样一来，可以用一种颜色中所含红、绿、蓝成分的程度，数值化地表示颜色。如：黑色为000000、白色为ffffff、墨绿色为008040、深灰色为808080等。在HTML中，可用这种方式指定颜色。

2.6.1 色彩的表示

2.7 超文本链接 • 超文本链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站，这符合人类的跳跃思维方式。链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮，使它和整个网页融为一体。

2.7.1 超文本链接 • 所谓的超文本链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超文本链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行

2.7.2页面链接 • 用HTML创建超文本链接需要使用<A>标记符（结束标记符</A>不能省略），它的最基本属性是href，用于指定超文本链接的目标。通过为href指定不同的值，可以创建出不同类型的超链接。 • 在HTML文件中用链接指针指向一个目标。其基本格式为： • <a href = "…">标记超文本链接信息</a>

超文本链接可以指向自己的计算机中的某一个文件，这种链接方式叫做本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用<A>标记符的name属性。其格式如下：超文本链接可以指向自己的计算机中的某一个文件，这种链接方式叫做本地链接。在文件中需要创建一个标签(即做一个记号)，为页面中需要跳转到的位置命名。命名时应使用<A>标记符的name属性。其格式如下： <a name="标签名">此处创建了一个标签</a> 2.7.3 本地链接

2.7.4 电子邮件链接 • 如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件，则可以在网页内包含发送电子邮件的功能。实现此功能所需的全部工作就是在链接标记中插入mailto值。如 • <A HREF="mailto:webmaster@hnu.cn">管理员信箱</A>

XML 实用教程

XML 实用教程

Presentation Transcript