WDF(5)
复习——
PPT2——
这些内容上次课，我们复习过，现在再复习一次，就是要告诉大家这些内容很重要，只有熟练掌握了这些内容，才能学习好HTML。
上上次课我们首先讲了几个关于HTML语法的基本概念：开始标签、元素名、属性对、属性名、属性值、布尔属性、结束标签、元素、空元素，请指出PPT上标出的部分对应的概念。
标签个数：11； 元素数：6； 属性对：9； 空元素：1；
布尔属性：1。
PPT3——
1、HTML文档是由一系列（ ）组成的。
A.标签 B.元素 C.内容 D.属性对
这四个选项都是HTML文档的组成部分，但是此处最合理的答案只能是A，其它答案都是元素的一部分。对于标签来说，应该具体到开始标签和结束标签，其中开始标签 = 元素名 + 属性对；而元素 = 开始标签 + 内容 + 结束标签；属性对 = 属性名 + 属性值。
这个选择题告诉我们，我们要学习HTML，就是要学习HTML有哪些元素，具体一点就是学习标签，标签有哪些属性，这些属性分别是干什么用的，用它们怎样控制网页内容的样式和行为。
2、HTML代码中真正显示在网页上的大部分是（ ）。
A.标签 B.元素名 C.内容 D.属性值
很显然，这个问题的答案是C。内容大部分是文本，要更改这些文本的样式，直接把它们包含在相应的开始和结束标签内就可以了，如<b>文本</b>。
3、（ ）用于设置元素的显示样式或行为。
A.属性对 B.属性名 C.属性值 D.布尔属性
属性名和属性值一起构成属性对，中间用=连接，属性值一般使用引号括起来，属性对用来确定元素的显示样式或行为，布尔属性可以看作是属性对的一个特例。
PPT4——
前面的课，我们主要讲了这样一些元素：其中，<html>是一个合法的HTML文档的根元素；一个HTML文档包括两个部分：文档头<head>和文档主体<body>；<head>包含一个HTML文档必须的元素<title>用于定义文档在浏览器标题栏中显示的标题，meta用于设置一些浏览器需要的信息；<body>以及其包含的内容是一个HTML文档的可视部分，这些可视元素主要分为两大类：内联元素和区块元素，内联元素是可以像单词、字符或短语一样显示在段落内的元素，区块元素是相当于段落的元素。在内联元素中，我们前次课主要讲了简单的内联元素：b, i, tt, em, strong, code, kbd, sub, sup, u, s/strike，以及br, font和a。除了br, font和a外的内联元素基本上不需要设置其任何属性，只需要将文本包含在开始标签和结束标签中间就可以了；Br是一个空元素，用于在段落内换行；对于font，我们讲了三个属性：color, size和face；对于a，我们讲过的两个属性是href和target。另外，我们还讲了字符实体相关的内容。
PPT5——
这是我们上节课的最后一张PPT，我们讲到了命名锚链(named anchor)。命名锚链也叫书签。什么是书签（注：这个不是我们在讲Web 2.0时说的书签，不过含义也是有点类似的）呢，我们背的四级英语字典上，有时候在字典的右侧会有一些小字条或是颜色块，这些小字条或颜色块就起到书签的作用，标示出单词的首字母，方便我们查单词。现在，假如我们把这些单词都放在一个网页上，我要查找一个单词怎么办，假设我们也使用和字典一样的查询方法，我们也需要为这个页面添加类似的标签。下面我们就以一个词汇表为例，演示一下命名锚链的用法。
PPT6——
这里要讲一下绝对路径和相对路径的概念——
先来看一下下面四行DOS命令：
①C:"WINDOWS"system32>cd C:"WINDOWS
②C:"WINDOWS>cd system32
③C:"WINDOWS"system32>cd ..
④C:"WINDOWS>
第①行和第③行的命令都是用于从目录C:"WINDOWS"system32进入目录C:"WINDOWS，其中第①行中的C:"WINDOWS就是一个绝对路径，而第③行中的..就是相对于当前目录C:"WINDOWS"system32的父目录，也就是说是一个相对路径。
所谓“绝对路径”就是从根目录开始一直到该目录的全程的路径，这样说可能太抽象，举个例子，上面的C:"WINDOWS"system32"setup.bmp；
所谓“相对路径”就是相对于当前目录的路径，举个例子：例如当前目录目录是C:"WINDOWS，那么指向上面的bmp图片的路径就是system32"setup.bmp。
对于网页中的绝对路径和相对路径来说，和Windows的路径类似，只是盘符换成了协议+域名，而且“"”换成了“/”。
PPT7——
教学示例：7.img.htm
只有文字的网页显然比较单调，而且有些问题需要借助图片才能解释清楚，为了使我们的网页图文并茂，我们要在网页中插入图片，使用<img>标签。
<img>最重要的属性就是src，它是source的缩写，用于指定图片的URL，如果该URL指定的图片不存在或URL录入错误，则在该图片位置显示一个带红叉的方框。
注意：这个地方的URL也是用于刚才讲的绝对路径和相对路径。
width和height属性用于指定要显示的图片的宽度和高度，单位是px，即像素，pixels的缩写，对于计算机屏幕设备而言，像素是一个最基本的单位，就是屏幕上的一个点。当不改变图片大小直接显示在网页中时，不需要指定这两个属性，另外，在指定这两个属性时最好按照原有图片的宽高比进行缩放图片以获得较好的浏览效果。
另外，还要指出的是网页上可以使用的图片类型是有限的：.jpg, .jpeg, .gif和.png。
JPEG格式最适用于色彩丰富的图像；
GIF的一大显著优势就是能制作动画图像，另一优势是可以制作背景透明的图片；
PNG在某些方面和GIF类似，但更胜一筹的是支持24位色（GIF只支持8位色），同时支持alpha透明（GIF只支持单色透明），但是IE对PNG的支持不好，一般情况下我们使用jpg和gif格式的图片。
PPT8——
刚才说了，如果src属性指定的图片无法请求或者说用户取消了图片的显示，显示一个带红叉的方框，这对用户来说可能会比较费解，所以可以通过指定alt属性来告诉用户当前图片的内容。Alt是alternative text的缩写。
和alt属性类似的一个属性是title，这个属性我们将在介绍HTML元素的公共属性的时候介绍，它指定的是元素的提示文本。
PPT9——
教学示例：8.p.htm，9.blockquote.htm，10.address.htm
段落是最正宗的区块元素（我们对区块元素的定义就是“相当于段落的元素”），它被用作一个容器，可以包含其它元素，如我们前面讲的哪些内联元素都可以。
教学示例：8.blockquote.htm, 9.address.htm
引用可以定义一定的样式，这个在CSS中会讲到。
Address基本上可以看作是一个专用的标签，只有在设置电子邮件或地址的时候才用到。
PPT10——
教学示例：11.hn.htm, 12.hr.htm
hn中的h是heading的缩写。
hn元素的使用需要注意：<h1>在HTML文档中只能出现一次，即一级标题只能有一个，<h2>, <h3>, <h4>, <h5>, <h6>必须有相应的上级标题，不能做“无本之末”。当然，这不是浏览器的要求，这是更符合逻辑的一种要求。
hr是horizontal rule的缩写。
align的属性值是一个枚举类型，可以的取值是left, center, right，这个属性需要和width属性一起使用才能体现出效果，因为如果不指定width属性时，hr是充满这个页面的宽度的，这时候指定align属性没有意义。
size属性为hr指定高度，取值范围从1~100，大于100时显示效果为100，noshade属性经常和size属性一直使用，表示没有阴影。
PPT11——
教学示例：13.pre.htm
pre是preformatted的缩写
PPT12、13、14——
HTML列表用以逐行显示信息，是HTML比较重要的组成部分。
对于无序列表和有序列表来说，可以使用type属性来指定列表项目的符号。
|
type属性值 |
示 例 |
|
不指定 |
l 项目１ l 项目２ l 项目３ |
|
disk |
l 项目１ l 项目２ l 项目３ |
|
circle |
¡ 项目１ ¡ 项目２ ¡ 项目３ |
|
square |
n 项目１ n 项目２ n 项目３ |
无序列表的type属性值及示例
|
type属性值 |
示 例 |
|
不指定 |
1. 项目１ 2. 项目２ 3. 项目３ |
|
1 |
1. 项目１ 2. 项目２ 3. 项目３ |
|
A |
A. 项目１ B. 项目２ C. 项目３ |
|
a |
a. 项目１ b. 项目２ c. 项目３ |
|
I |
I. 项目１ II. 项目２ III. 项目３ |
|
i |
i. 项目１ ii. 项目２ iii. 项目３ |
有序列表的type属性值及示例
对于无序列表和有序列表来说，可以使用type属性来指定列表项目的符号。
HTML列表是可以嵌套使用的，注意嵌套应该是合法嵌套。
对应PPT下载
Life is like a boat, and I'm at sea.
浙公网安备 33010602011771号