WDF(3)

教学内容

§2.1 HTML文档

PPT2——

最早，标记是文件在排版时，用来指示文字如何编排的指令，包括控制字体的大小、字体的选择（如楷体、宋体等）、字形的处理（如粗体、斜体、加底线等）、页面的大小（如A4、B5等）、边距、标题、段落、脚注、表格等，这些标记并不处理文件的内容，主要用来处理文件实际的呈现外观，这类的标示称为程序性标示(Procedural Markup)。另一类的标示称为描述性标示(Descriptive Markup)，也称为通用标示(Generic/Generalized Markup)，所描述的是文件的内容(content)或结构（structure），而不是文件的呈现外观。描述文件结构的方式是标记指定结构中的元素（elements）：以文章为例，其结构可能有标题、章、节、参考书目等；以书信为例，结构可能有寄件人、收件人、书信内容等。

§2.2 HTML基本语法

PPT5——

HTML是一种语言，语言就需要遵循一定的语法(syntax)。

在Visual Basic 6中，我们学过像文本框(textbox)、下拉列表(combobox)等控件，HTML中也有控件的概念，主要是一些表单控件，这些控件用于和用户进行交互。

PPT6——

先来看一下开始标签的格式，一对尖括号，中间包含元素名和属性对，“*”代表属性对可能是0个、1个或多个，每个属性对由属性名和属性值组成，中间用=号连接。其中，元素名和属性名是一个字母和数字的序列，必须以字母开始，属性值也是一个字母和数字的序列，但不一定以字母开始，也可以以数字开始。

在下列标签中指出元素名、属性对和属性值：

PPT7——

HTML中，标签不区分大小写，当然也有一些特例，如一些属性值需要作为控制行为的Javascript的标识，而Javascript语言是区分大小写的，所以该属性值也是区分大小写的，否则会引起混乱。

所谓布尔属性是指取值只能是“是”或者“否”，回想一下我们在Visual Basic 6中学习过的visible属性就是一个布尔属性。在HTML中，布尔属性有一些不同的地方，可能的情况有三种：①属性名=”属性名”；②属性名；③不出现该属性名，其中①②代表取值为true，③代表取值为false。

结束标签的元素名前要加斜杠(/)，为什么要加斜杠？标志着结束，否则又会被浏览器认为是一个标签的开始。

PPT8——

在第6个PPT中，我们介绍了“元素名”的概念，有的同学可能会比较迷惑：介绍的明明是“标签”的概念，何来“元素名”？介绍完“元素”的概念大家应该就会明白了：开始标签和结束标签以及它们之间包含的内容合在一起被称为“元素”。

PPT9——

这个表列出了HTML中的常用元素，对于每个元素我们在下面都会做详细的介绍。

上面我们介绍了元素、标签、元素名、属性对、属性名、属性值、空元素、开始标签、结束标签的概念，指出下列例子中这些概念分别包含的范畴：

文本

</body>

PPT10——

用记事本分别保存文件test.htm和test.html（记事本是最简易的网页编辑工具），双击这两个文件，我们会发现Windows自动使用Internet Explorer打开这两个文件，这两个文件是不一样的，虽然它们的内容和作用可能是完全一样的，因为这是Windows系统的命名规则所允许的。

既然<html>是根元素，而<html>又不是空元素（这意味着必须包括开始标签和结束标签），那么也就是说HTML要求文档中必须出现成对的<html></html>。

根元素的含义在于它包含文档中的所有其它元素，那么<html>必须出现在文档的开头，而</html>必须出现在文档的末尾。

PPT11——

<head>元素中的内容在页面上是不显示的，它的出现是为浏览器提供相关信息，比如其中必需的元素<title>告诉浏览器使用什么标题显示文档。

rendering有“翻译”、“绘制”、“转换”的意思，这里主要的含义是把晦涩的标记文本以一种形象的图形化的形式显示出来，所以翻译为“渲染”是比较合适的。

PPT12——

“合法”是指合乎语法，因为我们在上面讲了一些元素在一个HTML文档中是必需的，所以下面这个文档是一个最简单的合乎HTML语法的HTML文档，也就是说最简单的HTML文档也应该包含下列这些元素。

但是，事实上，不得不告诉大家的是，在Windows环境下的Internet Explorer中这些元素都不是必需的。当然，我们应该以一种严格的要求来对待HTML文档的编写。

PPT13——

和以前讲过的“DNS域名系统”一样，一个HTML文档中的元素也可以被看成一棵树，这棵树就是上面的最简合法HTML文档的结构树，在PPT12中给出的文档缩进间接地告诉了我们元素之间的层次关系。其中“Content goes here”是注释，浏览器忽略注释，所以用灰色的线条在图中进行标示。

适当的文本缩进是一种好的编程习惯。

注释的作用在于方便以后对HTML源代码进行维护。

§2.3 HTML基本语法

PPT14——

在最简合法HTML文档中，我们看到一个HTML文档主要分为两个部分：HEAD和BODY，即文档头和主体。

Head和Title刚才已经做过简单的介绍，META是文档其它信息的设置，马上我们就会讲到。

Title显示的位置可能是：标题栏、任务栏、收藏夹、桌面快捷方式等，可以作一个小演示。

Body中包含的文档的可视化元素，这些元素分为两大类：块元素(block)和内联元素(inline)，块元素是相当于段落的元素，即每出现一个块元素都要重新创建一个段落（另起一行），而内联元素相当于块中的单词、字符或短语。

inline我们从词面上也很好理解，“在行内”。

连在一起拷贝到记事本中不换行保存为.html或.htm文件，看结果：font1<h1>h1</h1>font2<img src=1.gif>font3

§2.3.1 HTML头信息

PPT15——

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签的用处很多，其属性主要有两种：http-equiv和name。http-eqiuv，由于HTTP头信息设置；name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找和分类。

http-equiv=”refresh”用于将网页在设定的时间n秒内将页面刷新到一个文档上。

有些网站为了提高网站的点击率，使用name=”keywords”作弊，所以现在有些搜索引擎一般不再使用该设置对网页进行检索。

PPT16——

这个例子展示了Head的标准格式，我们看到meta元素一般出现在title元素之前。

§2.3.2简单内联元素

PPT17——

b	bold	黑体
i	italic	斜体
tt	teletype	电传打字体
font	font	字体
em	emphasized	强调、着重
strong	strong	加强
code	code	代码
kbd	keyboard	键盘，固定宽度
sub	subscript	下标
sup	superscript	上标

和相同吗？

它们起的均是加粗字体的作用。在大多数情况下，它们表现出来的效果也大致相同，所不同的是，标签是一个实体标签，它所包围的字符将被设为bold（粗体），而标签是一个逻辑标签，它的作用是加强字符的语气，一般来说，加强字符的语气是通过将字符变为bold（粗体）来实现的。但是在不同的HTML解释器下，情况也可能有所不同。在实际网页设计中，为使页面效果受客户端因素影响变为最小，应该尽量使用实体标签。

和类似。

对应PPT下载

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

刷新页面返回顶部

WDF(3)

公告