WDF(4)

 

第二章 HTML

 

教学内容

 

复习——

 

PPT2——

 

上节课我们首先讲了几个关于HTML语法的基本概念:开始标签、元素名、属性对、属性名、属性值、布尔属性、结束标签、元素、空元素,请指出PPT上标出的部分对应的概念。

 

标签个数:11    元素数:6    属性对:9     空元素:1

布尔属性:1

 

PPT3——

 

上次课,我们主要讲了这样一些标签:其中,<html>是一个合法的HTML文档的根元素;一个HTML文档包括两个部分:文档头<head>和文档主体<body><head>包含一个HTML文档必须的元素<title>用于定义文档在浏览器标题栏中显示的标题,meta用于设置一些浏览器需要的信息;<body>以及其包含的内容是一个HTML文档的可视部分,这些可视元素主要分为两大类:内联元素和区块元素,内联元素是可以像单词、字符或短语一样显示在段落内的元素,区块元素是相当于段落的元素。在内联元素中,我们上次课主要讲了简单的内联元素:b, i, tt, em, strong, code, kbd, sub, sup等。

 

 

§2.3.2 简单内联元素

 

PPT4——

 

这就是我们上次课的最后一张PPT,我们讲到了简单内联元素,再来复习一下。

 

怎样显示一个加粗的字体?我们使用<b></b>元素包含要输出到网页上的文字就可以了,同理,其它元素也是这样的用法。

 

 

PPT5——

 

<b>, <i>等标签不需要设置任何属性,而对于<font>来说,标签本身并不能设置字体的样式,我们需要为它设置相应的文字显示方式,主要包括字体(face),颜色(color)以及大小(size)

 

教学示例:2.font.htm

 

 

字体(font-family)

 

字体,我们在使用文字处理软件(比如Word)的时候都知道,像最常用的宋体,还有黑体、隶书、幼圆等等。

 

我们在使用某种特殊字体的时候,需要特别注意,因为很可能浏览网页的人的计算机上有些字体是没有的,这时候我们应该设置替代字体,用于作为替代字体的字体越常见越好。替代字体直接加在face属性的后面,多个字体之间使用“,”隔开(一般情况下,我们在“,”后先加一个空格后再添加其它字体,这样看得更清楚)。

 

如果一定要使用非常特殊的字体以获得较好的浏览效果,请把文字做在图片中再显示到网页上,这样会带来无法搜索的劣势。

 

 

大小(font-size)

 

网页上字体的大小,我们使用<font>标签的size属性进行设置,size属性的属性值取值范围是[±1, ±6] {7},其中+-分别代表相对于初始值的增量或减量,默认的初始值是3,所以大家看的结果可能有的字体大小是一致的,即-1代表的是3+(-1)=2,也就是说默认情况下,size=2size=-1显示的字体是一样大的,这个初始值可以通过<basefont>标签进行设置。

 

如果觉得7号字体依然不够大,我们可以使用CSS进行设置,这个以后会讲到,这里只是告诉大家多大的字体在网页中都是可以进行设置的。

 

 

颜色(color)

 

在网页上进行文字编排时,不可能只使用一种颜色,这个时候我们需要设置<font>标签的color属性,如设置为红色,可以使color=”red”

 

我们在学习VB时应该学过一个函数RGB(r, g, b),就是使用rgb三个参数返回一种颜色,我们有时也把这样的颜色叫做RGB颜色。事实上,RGB(红、绿、蓝)是颜色空间的一种,采用这种编码方法,每种颜色都可用三个变量来表示_

红色、绿色以及蓝色的强度。

 

网页设计中的颜色除了使用对应颜色的英文名来指代颜色外,另外一种方法就是使用和RGB函数类似的十六进制数来指代颜色。

 

RGB函数的三个参数取值范围是0~255,换算成十六进制就是00~FF,“#FF0000在网页设计中和red相同(注意前面加“#”)。

 

教学示例:3.color.htm及其链接页面

 

红橙黄绿青蓝紫对应的英文名称分别是:red, orange, yellow, green, cyan, blue, purple,注意,大家可以在示例中发现greenRGB中的#00FF00不一致,green对应的是#008000

 

RGB的三个分量的十六进制数的两位数都一致时,每个分量可以简写为一位数,即#FFEE00#FE0是一致的,注意:必须三个分量都一致。

 

Web安全色是指以256色模式运行时,无论在Windows还是在Macintosh系统中,在Netscape NavigatorMicrosoft Internet Explorer中的显示相同的颜色。经验告诉我们,任何结合了00336699CCFF对(RGB 值分别为051102153204255)的十六进制值都代表网页安全色。

 

事实上,大家看到的页面中,我并没有一个一个地设置这216中颜色,只是通过简单的代码一次就输出了这216Web安全颜色。

 

颜色和英文字母对照大概有这些,我们不需要记住这些颜色对应的英文名称,现在的一些取色工具可以帮助我们拾取颜色,当然,如果你知道这些代表颜色英文单词更好,直接用该颜色就可以了,比较准确。

 

“中国颜色”是我根据因特网上的资料整理出来的从古至今中国文字中有的颜色名称的一个对应,比如最后几种颜色是国画用色,当然这些也不是我一个一个在网页上设置出来的,我维护了一个关于这些颜色信息的数据库,然后使用语句直接生成了这个网页上需要的代码片段。

 

“主题颜色”来自互联网,因为我本身对颜色没什么感觉,认为好看就行,不冲突(比如背景色和前景色相同)就可以。事实上,每种颜色都代表一定的含义,不同文化种相同的颜色也可能代表完全不同的含义,大家在座相应主题的网页时可以进行参考一下。

 

 

下划线和删除线

 

教学示例:1.simpleinlineelement.htm

 

下划线使用标签<u>来定义,uunderline的缩写,删除线使用标签<s><strike>来定义,sstrikethrough的缩写。其它的一些样式如上划线等以后我们在CSS中也会讲到。

 

 

换行

 

教学示例:4.br.htm

 

这个换行也是发生在段落之内的,所以也是内联元素,相当于Word文档中使用Shift + Enter组合键进行换行。

 

brbreak line的缩写。这是一个空元素,没有属性。

 

 

如何实现既是斜体,又是粗体等等效果?

 

HTML标签是可以嵌套的,只要注意正确地使用嵌套就可以了,否则可能会出现意想不到的结果。<i><b>既是斜体又是粗体</b></i>

 

 

§2.3.3 字符实体

 

 

PPT67——

nbsp

-

non breaking space

lt

-

less than

gt

-

greater than

amp

-

ampersand

quot

-

quotation

copy

-

copyright

reg

-

registered

 

 

PPT8——

 

教学示例:5.htmlentities.htm

 

为什么说几乎所有的浏览器都支持实体编号?因为这些编号其实是Unicode字符对应的编码。我们在学VBAccess时可能接触到的函数ChrWAscW即是在字符和编码之间进行转换的两个函数。

 

 

§2.3.4 链接

 

 

PPT9——

 

我们多次提到超级链接在HTML文档以及整个WWW中的重要地位,下面我们就来学习如何在HTML文档中制作超级链接。其实,我们对超级链接并不陌生,比如:在Word中输入一个网址,按回车键会自动把这个网址加上超级链接。

 

超级链接使用标签<a>来进行创建,aanchor的缩写。

 

 

PPT10——

 

教学示例:6.a.htm

 

hrefHypertext Reference的缩写,该属性用于指定链接指向的地址。

 

target属性用于指定在那个窗口打开页面。除了打开空窗口外,比较常用的还有在框架页面中的使用,这个我们会在以后涉及到。

 

 

PPT11——

 

      事实上,我觉得正是name属性创建的命名锚链才能体现<a>的英文名anchor的含义:哪个锚拴住哪一条船。



      对应PPT下载

     


posted @ 2007-09-14 18:44  蜡人张  阅读(797)  评论(0)    收藏  举报