第03章超文本标识语言HTML

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

清华大学出版社
10
3.3
主要内容 3.3.1 置标标记与字符实体 3.3.2 标记语法 3.3.3 结构标记 3.3.4 水平尺标记
结构标记
清华大学出版社
11
3.3.1
置标标记与字符实体
1.置标标记 HTML语言的简单性就在于置标标记的广泛使用。浏览器不能接受置标标记内的拼写错误和附加空白。【例3-2】拼错</HTML>标记以观效果。
清华大学出版社
13
3.3.2
标记语法
1.容器与空白标记（1）容器容器是指非空内容的标记：开始标记是以“<”开始，紧接一个标记名字、一个属性，最后使用“>”来封闭该标记。结束标记是以“<”开始，紧接一个“/”符号、一个标记名字，最后使用“>”来终结该标记。【例3-3】下面是一些容器标记的示例。
清华大学出版社
4
3.1.2
HTML语言简介
1.HTML语言简介（1）什么是标准通用型标记语言SGML 在传统出版印刷行业中，作者提供手稿，编辑用特殊的编辑符号加上各种修改标记，从而规定书稿的印刷字体、印刷格式、版面大小、文本与图像的精确位置等。一个SGML文档由如下三部分组成：用于描述文档所使用的字符集，它的字符是用来区分文本内容和标记符号的。用于说明文档类型以及可以使用哪些标记。用于表示一个文档实例，它包括实际的文本内容和标记符号。
（4）文档类型元素<!DOCTYPE>
清华大学出版社
23
3.3.3
结构标记
3.换行标记与部分公共属性（1）换行标记 （2）属性ALIGN ALIGN＝"left"：表示指定内容按左对齐方式显示，这是隐含设置。 ALIGN＝"center"：表示指定内容按居中对齐方式显示。 ALIGN＝"right"：表示指定内容按右对齐方式显示。（3）属性LANG （4）属性ID （5）属性NOWRAP （6）属性CLASS
清华大学出版社
24
3.3.3
结构标记
【例3-8】各种定位方法和 标记的使用情况。
清华大学出版社
25
3.3.3
结构标记
4.块元素标记所谓块元素标记是指普通文本型的段落标记和某些专用型的段落标记，如段落分割、页面注解、页面注脚、外部引文等。（1）段落标记 【例3-9】将如下段落按居中方式显示。
清华大学出版社
3
3.1.1
超文本、超媒体与通讯协议
2.超媒体超媒体是指含有文本对象以外事物的超文本应用媒体。超媒体的应用方式包括：声音、图像、动画、视频等。超文本标记语言HTML含有定义与多媒体对象链接所用的置标标记。置标标记包括：多媒体对象如何在浏览器上显示出现。图像媒体如何扩展成文稿中的一幅插图或图像。声音、动画和视频等媒体如何在具有“播放节目”控件、“停止播放节目” 控件等的窗体中进行表示。
页面结构
清华大学出版社
8
3.2.1
HTML文件的组成
1.HTML文件的组成【例3-1】一个简单HTML文件示例。
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
9
3.2
页面结构
3.2.2 文件头部分文件头部分所指定的信息就是HTML文档的标题。说明性标记，如在<META>标记下的关键字、格式说明、图表说明等。标题将出现在浏览窗口的标题栏位置，即该浏览窗口的顶部。使用<HEAD>标记可以指定页面的背景和文本颜色，取代浏览器的隐含设置。 3.2.3 文件体部分 HTML文档文件的实际内容应该安排在<BODY>标记内。 <BODY></BODY>标记对中可以包含文本的许多段落。文件体部分可包含带编号列表、带箭头列表、行列数可变的表格。 HTML页面的文件体部分也可以包含许多非文本型的标记元素。使用图形、本地机图像、音乐、视频图像、动画、声音、区域、另一个页面、Web站点、文件、数据库、超链接等。
清华大学出版社
2
3.1.1
超文本、超媒体与通讯协议
1.超文本超文本是一个完全不同于线性文本的一种新文本。超文本是按若干链接文本的互联方式来组织文稿信息的。超文本中可以嵌入许多HTML元素，如表单、表格、声音、图像、动画、视频等。超文本的特点：超文本本身可以称为该超链接中的定位符，其中任何图像内容也可以像文本内容一样是进行调用，它也是该超链接中的一种定位符。超文本允许将非线性结构的文稿内容安排到一个超文本作品中。
40
3.5.3
图像文件格式
最主要的三种图形文件：BMP、GIF、JPG。 BMP文件是微软公司为Windows环境设置的标准图像格式。 GIF是一种常用的跨平台的位图文件格式，存储8位图像文件，最多为256 色，常用于网络传输。GIF最初为CompuServe公司所创，采用无损压缩存储。 JPG 图像文件采用的是有损压缩，由于它采用了高效的DCT 变换、哈夫曼编码等技术，实现高压缩比，仍然保留的图像高质量。
清华大学出版社
26
3.3.3
结构标记
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
27
3.3.3
结构标记
（2）引用标记<BLOCKQUOTE> （3）指定地址标记<ADDRESS> 【例3-10】<BLOCKQUOTE>标记和<ADDRESS>标记的使用情况。
清华大学出版社
28
3.3.3
清华大学出版社
14
3.3.2
标记语法
（2）空白标记空白标记是指为空内容的标记。空白标记是孤立出现的，即没有带斜杠符号的结束标记与之配对。空白标记示例： <HR>标记：表示画一条水平直线。 标记：表示换行，使接下去的文本从左边界处开始。 <IMG SRC＝"example.JPG">：用于插入一个本地机图像。
清华大学出版社
6
3.1
HTML的基本知识
3.1.3 HTML的扩展 1.公共网关接口CGI 2.Java Applet程序 3.ActiveX控件和VBScript语言 3.1.4 HTML的编程风格 1.形式服从功能 2.超链接 3.通用性 4.通过Web学习HTML
清华大学出版社
7
ห้องสมุดไป่ตู้ 3.2
主要内容 3.2.1 HTML文件的组成 3.2.2 文件头部分 3.2.3 文件体部分
清华大学出版社
30
3.3.3
结构标记
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
31
3.3.4

水平直线标记
WIDTH属性：定义水平直线的长度（以像素为单位）。 SIZE属性：定义水平直线的厚度（以像素为单位）。 ALIGN属性：定义水平直线的位置。【例3-12】使用两种不同的水平直线来分割文本。
清华大学出版社
36
3.5
主要内容 3.5.1 图像标记与属性 3.5.2 <IMG>标记中的高级属性 3.5.3 图像文件格式 3.5.4 RGB颜色模型与颜色设置
本地机图像
清华大学出版社
37
3.5.1
图像标记与属性
图像标记<IMG>具有三个重要属性：ALIGN、SRC和ALT。（1）属性ALIGN （2）属性SRC （3）属性ALT 【例3-13】一个本地机图像示例。
第3章
超文本标识语言HTML
主要内容 HTML的基本知识页面结构结构标记文本格式编排本地机图像有序表、无序表和定义表定位链接标记编写HTML和JavaScript脚本的工具
清华大学出版社
1
3.1
HTML的基本知识
主要内容 3.1.1 超文本、超媒体与通讯协议 3.1.2 HTML语言简介 3.1.3 HTML的扩展 3.1.4 HTML的编程风格
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
21
3.3.3
2.文档结构标记（1）总体标记<HTML></HTML> （2）标题标记<HEAD></HEAD> 表3-2 标题元素
结构标记
清华大学出版社
22
3.3.3
结构标记
（3）文档体标记<BODY></BODY> <BODY></BODY>标记内应该是全部文档体内容，其中：分段标题部分可表示各种分段标题文本元素部分用于改变其文本格式块元素部分主要用于定义段落类型表3-3 <BODY></BODY>标记中的属性
清华大学出版社
5
3.1.2
HTML语言简介
（2）字符实体和置标标记字符实体就是一种特殊的代码，浏览器处理并显示预定的特殊字符。这些字符实体前面一般冠有前缀“&”，接着是字符名或字符编号，最后使用分号结束。例如“&it”用于表示左角括号和小于符号。置标标记是使用一对尖角括号“<>”进行分隔的。可以单独出现，如标记 用于表示文本内容中的换行。可以使用<开始标记>/<结束标记>对出现，用于表示描述其中所包含的内容，例如置标标记表示使用斜体字显示字符串“置标标记”。 2.拉丁字符集－1 HTML文档文件使用的基本字符集是拉丁字符集－1，它包含有大多数英语、德语、法语、西班牙等欧洲语言字符的八位字符。传统ASCII字符集属于拉丁字符集－1的子集。 3.HTML与浏览器（1）使用主机上网方式进行浏览（2）与大型商业联机服务提供商相连接
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
12
3.3.1
置标标记与字符实体
2.字符实体字符实体也是一种特殊的HTML代码，定义不能通过击键输入的字符。字符实体主要用于表示两类字符：拉丁字符集－1中的非ASCII编码字符。需要用来标记HTML标记开始和结束的字符。表3-1 字符实体
清华大学出版社
32
3.3.4
水平直线标记
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
33
3.4
主要内容 3.4.1 逻辑格式 3.4.2 物理格式
文本格式编排
清华大学出版社
34
3.4.1
表3-4 逻辑格式标记
逻辑格式
清华大学出版社
35
3.4.2
物理格式
1. 物理格式标记对、和 标记对：表示以粗体方式显示指定文本。 标记对：表示以斜体方式显示指定文本。和标记对：表示以下划线方式显示指定文本。 2.字体标记 标记一般是与SIZE和COLOR属性一起使用的。 COLOR属性用于表示显示文本的颜色。 SIZE属性可以是正数（1至7），表示显示指定文本比现行字体尺寸要大。 SIZE属性可以是负数（－1到－7），表示显示指定文本比现行字体尺寸要小。例： abcdefghijkl
清华大学出版社
38
3.5.1
图像标记与属性
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
39
3.5.2
<IMG>标记中的高级属性
<IMG>标记中的高级属性 WIDTH HEIGHT BORDER HSPACE VSPACE USEMAP ISMAP
清华大学出版社
清华大学出版社
17
3.3.2
4.注释形式【例3-5】注释使用示例。
标记语法
清华大学出版社
18
3.3.3
结构标记
1.分段标题标记【例3-6】六种不同分段标题的页面情况。
清华大学出版社
19
3.3.3
结构标记
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
20
3.3.3
结构标记
【例3-7】使用居中方式显示各级分段标题。
结构标记
在浏览器上运行该HTML文件，其结果如图所示。
清华大学出版社
29
3.3.3
结构标记
（4）预定格式的文本使用<PRE></PRE>标记对将指定所包括的全部内容文本按原样保留。 <LISTING>标记：按每行132个字符的等间隔显示文本。 <XMP>标记：按每行80个字符的等间隔显示文本。 <PLAINTEXT>标记：按自由格式显示文本。【例3-11】<PRE>、<LISTING>和<XMP>标记的使用情况。
清华大学出版社
15
3.3.2
标记语法
2.置标标记和字符实体的使用【例3-4】置标标记和字符实体的使用示例。
清华大学出版社
16
3.3.2
标记语法
3.引用属性使用属性可以修改HTML语言中的许多标记功能。属性一般使用ATTRIBUTE＝“值”的形式。例如：<BODY BGCOLOR＝“red”>。还可以使用名字来代表相应的属性。例如：“BORDER＝no”是与“BORDER＝0”完全等价的。