佛山科学技术学院 第7章 HTML Internet及多媒体应用
主要内容 1 HTML初步 2 HTML详解 6 Internet及多媒体应用
7.1 HTML初步 Internet及多媒体应用
学习HTML语言的目的 有助于理解网页的构成（图片、动画、声音是分离的） 某些特殊的功能，需要直接修改HTML文本 Internet及多媒体应用
HTML编辑工具 最简单的工具：记事本 Notepad 早期在可视化工具未开发出来时，曾有专门的工具，如HTMLPad 也可在“所见即所得”的网页编辑工具提供的HTML视图进行，如如Microsoft FrontPage，Adobe Dreamweaver等。 Internet及多媒体应用
7.1.1 一个简单的HTML文档 <HTML> <HEAD> <TITLE> Welcome </TITLE> </HEAD> <BODY> <H1 ALIGN="center">Hello,World!</H1> </BODY> </HTML> 在记事本中输入，保存文件时扩展名为.htm或.html Internet及多媒体应用
7.1.2 在HTML文档中加入标志 所有标志都是由尖括号（< >）包围的元素构成的，尖括号告诉浏览器其中的文本是HTML命令，如<TITLE>是说明文档的标题。 大多数标志都是成对出现的，称为起始标志（如<TITLE>）和结束标志（如</TITLE>），两者样子相似，只是结束标志多一个斜杠“/”。在起始标志和结束标志之间，放置受作用的信息，例如，<TITLE> Welcome </TITLE>。当然，也有一些标志是不需要配对的 为了对一块信息采用多个标志，可以采用嵌套。 如： <B> <I> Computer Open Lab </I> </B> 输入标志时，必须在英文状态下输入半角字符，而且不能加入多余的空格（特别是标志和尖括号之间），否则浏览器可能无法识别这个标志 Internet及多媒体应用
7.1.3 在HTML文档中加入属性 属性是对标志进行补充说明的。例如： <H1 ALIGN="center"> Hello,World! </H1> 所有属性都放在起始标志的尖括号内并用空格分开。有些属性要求用引号，有些则不用。 大多数属性（只包含数字、字母、连字符和点号的）都不需要引号。 包含空格、%、#等其他字符的属性值则需要引号。例如，WIDTH属性表示文档窗口大小的百分数，则一定要用WIDTH="75%"。 在标志中可以放上多个属性，相互间用空格分开，属性间也没有顺序关系。例如： <H1 ALIGN=center STYLE="COLOR:blue"> Hello,World! </H1> 注意，输入属性时，也必须在英文状态下输入 Internet及多媒体应用
7.1.4 适当加入注释标志 注释以<!--和-->作为起始和结束标志，所有在这两个符号之间的文档，浏览器不显示。适当地使用注释标志，可以提高HTML文档的可读性。如： <!-- Here is the picture of Panda --> <IMG SRC = "panda.jpg"> Internet及多媒体应用
7.2 HTML详解 Internet及多媒体应用
在HTML语言的发展过程中产生过三个标准，即HTML 2.0，3.2及4.0。每一个标准中的标志有所不同，HTML 4.0有约90个标志。 Internet及多媒体应用
7.2.1 基本标志 一个包含常用基本标志的HTML文档： <HTML> <HEAD> <TITLE> 7.2.1 基本标志 一个包含常用基本标志的HTML文档： <HTML> <HEAD> <TITLE> Welcome to My Webpage </TITLE> </HEAD> <BODY> Hello,I am a student. <H1>今天天气真好！</H1> <H3>今天天气真好！</H3> <H6>今天天气真好！</H6> </BODY> </HTML> Internet及多媒体应用
浏览器标题标志<TITLE> <HTML>标志 <HTML>标志表示该文档为HTML文档。<HTML>及</HTML>通常作为HTML文档的开始和结束标记。 <HEAD>标志 <HEAD>标志中包含文档的标题、文档使用的脚本、样式定义和文档名信息，还可以包含搜索工具和索引程序所需要的关键字信息等，这些信息不会显示在Web页中。<HEAD>标志位于<HTML>标志之间。 浏览器标题标志<TITLE> <TITLE>标志包含文档的标题。当用浏览器浏览HTML文档时，它显示在浏览器的标题栏中。<TITLE>标志位于<HEAD>标志之间。 <BODY>标志 <BODY>标志中放置要在浏览器中显示的信息的所有标志和属性。该标志位于</HEAD>和</HTML>之间。 文字标题标志<Hn> 标题能分隔大段文字，使网页显示的内容结构清晰。HTML提供了六级标题，<H1>最大，<H6>最小。在使用时，将标题标志放在文本的前后两端。 Internet及多媒体应用
7.2.2 文字段落标志<P>及换行标志<BR> <P>这是一个小小的段落</P> 在段落中可以设置文字的对齐属性。默认情况下，浏览器显示时采用左对齐格式。对齐属性有三个： 左对齐ALIGN=LEFT 居中对齐ALIGN=CENTER 右对齐ALIGN=RIGHT 如：<P ALIGN=LEFT>这个段落左对齐</P> 人工分行标志<BR> 在正常情况下，HTML文档在浏览器中是自动分行的。有时需要在特定位置分行而不想另起一段，就可以利用<BR>标志。如： <HTML> <P>你好吗？我很好！</P> 你好吗？<BR>我很好！ </HTML> 水平线标志<HR> 标志<HR>来分开大段文本，它所显示的水平线可以表示信息主题的转换或改进文档的总体设计。<HR>是一个独立标志，不需要配对 Internet及多媒体应用
7.2.3 指定颜色、字号和字体 关于颜色 Web页面中的颜色由三个各代表红（R）、绿（G）、蓝（B）三个基色的十六进制数（简称RGB数）指定。RGB数用六位数字表示，每个基本色用两位。如：RGB数0000FF，表示蓝色饱和而没有红色与绿色，从而显示为纯粹的蓝色。 也可用英文单词Black，Olive，Teal，Red，Blue，Maroon，Navy，Gray，Lime，Fuchsia，White，Green，Purple，Silver，Yellow，Aqua等颜色名来表示色彩。使用颜色名时，直接写即可，不需要加#。 设置Web页面背景颜色 在<BODY>标志中放上属性BGCOLOR=“#…”可以指定文档的背景颜色。如：<BODY BGCOLOR=“#CCCCCC”> 或 <BODY BGCOLOR=GRAY>是把背景设置成灰色。 Internet及多媒体应用
用<FONT>标志指定颜色、字体和字号 设置文本颜色 在<BODY>标志中放上属性TEXT=“#…”可以指定整个文档中文本的颜色。如：<BODY TEXT=“#00FF00”>是把文本颜色设置成绿色。 用<FONT>标志指定颜色、字体和字号 在<FONT>标志中，有三个属性分别用于指定颜色、字体和字号。该标志是一个配对标志，三个属性作用于标志之间的文字。 用FACE=属性指定某种字体：如：<FONT FACE="楷体"> 操作系统 </FONT> 用SIZE=属性改变字体大小，可以用1～7表示，1最小，7最大，默认为3。如：<FONT SIZE=5>操作系统 </FONT> 用COLOR=属性设置颜色，可用颜色名或#RRGGBB值。如：<FONT COLOR="#FF0000">操作系统 </FONT> 在具体应用时，常把几个属性一起进行设置，如：<FONT FACE="楷体" SIZE=5 COLOR="#FF0000">操作系统 </FONT> Internet及多媒体应用
7.2.4 建立超级链接标志<A> 链接（Anchor）使访问者从一个文档跳到另一个文档。作为HTML标记，将文本或图形标志为指向其他HTML文档、图形、小程序、多媒体效果或HTML文档中的特定位置。超级链接使用标志<A>来实现 <A>标志的常用属性 HREF=“…”指定超级链接指向的目标文件的相对或绝对位置（URL） NAME=“…”给当前文档中的一个位置取名（书签），便于长文档的快速定位 TARGET=“…”指定链接的文档在哪个框架或窗口中显示 TITLE="…"在浏览器中鼠标指向链接时所显示的提示文本 Internet及多媒体应用
HREF属性 HREF属性 绝对URL 相对URL <A HREF= "http://www.edu.cn/20011015/3005051.shtml" > 相对URL 同一文件夹中的文件，直接写文件名即可，如：<A HREF="tips.htm"> 下级文件夹中的文件，要加上文件夹名，如：<A HREF="learning/faq.htm"> 上级或兄弟文件夹中的文件，使用“..”，表示移到上一级目录，如： 兄弟目录：<A HREF= "../contacts/names.htm"> 上级目录：<A HREF= "../test.htm"> 直接从服务器根目录开始指定文件夹和文件名，这种形式以斜杠“/”开头，如：<A HREF="/asp/learning/faq.htm"> Internet及多媒体应用
NAME属性 NAME属性 用法：<A NAME="middle">网页设计技巧</A> 这样就在“网页设计技巧”这几个字所在的位置插入了一个书签，叫做“middle” 假设该HTML文档的文件名为faq.htm，则使用如下链接可以在浏览器中从其他文档直接跳转到“网页设计技巧”处（注意#号的使用）： <A HREF="faq.htm#middle"> 如果是在同一文档中跳转，则直接用如下链接： <A HREF="#middle"> Internet及多媒体应用
TARGET、 TITLE属性 TARGET属性 在超级链接中不加TARGET属性时，在浏览器中打开链接内容，始终是显示在同一窗口中的。如果需要在新的窗口中显示链接的内容，则可以设置如下： <A HREF="faq.htm" target="_blank"> 在有框架（Frame）的页面中，通常都要用TARGET属性来控制链接文件出现的位置。 TITLE属性 可以使用TITLE属性在超级链接中加上链接的说明，当访问者将鼠标移到链接上时，说明自动弹出到光标的尾巴上。这个属性可以使得在有限的页面上提供更多的信息。如： <A HREF="http://www.sina.com.cn" TITLE="欢迎访问新浪网"> 插入E-mail链接 E-mail链接使用mailto: 协议，便于访问者交流信息。为了生成E-mail链接，只要放上具有mailto:协议和E-mail地址的位置点链接即可。如： <A HREF="mailto:webmaster@edu.cn">有任何意见建议请告诉我们</A> Internet及多媒体应用
7.2.5 加进图形图像<IMG> <IMG>标志 用<IMG>标志可以在HTML文档中加入图片。其最主要的一个属性是SRC，称为引用图形的“源（source）”。在指定“源”时，如果图片文件和HTML文档在同一文件夹中，则可以直接用文件名，如： <IMG SRC = “logo.gif ”> 如果不是，则需要指定路径。指定路径时，一般都用相对路径。如： <IMG SRC = “../images/logo.gif ”> 或 <IMG SRC = “ /learning/images/logo.gif ”> 如果引用的图片在其他的Web站点，则需要用完整的URL。如 <IMG SRC = "http://www.edu.cn/images/engver/logo-cernet.gif "> 常用属性 ALT=“…”在不能显示图片时的替换文本或在浏览器中鼠标停留在图片上时显示的文本 SRC=“…”指向图形文件（URL） HEIGHT=n指定图片显示时的高度（像素数） WIDTH=n指定图片显示时的宽度（像素数） BORDER=n指定图片边框宽度（像素数） ALIGN="…"指定图片对齐方式：TOP，MIDDLE，BOTTOM，LEFT，RIGHT Internet及多媒体应用
7.2.6 开发表格<TABLE> 表格的作用主要有以下两个： <TABLE>在HTML文档中标志表格 用简单易读的形式显示复杂的数据。 用表格把各种复杂的元素放进Web页面中。例如，HTML并不直接支持分栏、图文环绕等复杂的排版格式，这些效果需要用表格来实现，所以表格常用来进行版面设计。 <TABLE>在HTML文档中标志表格 <TR>标志表格中的一行，结束标志是可选的 <TD>标志一行中的单元，结束标志是可选的 <TH>标志一行标题单元，结束标志是可选的 Internet及多媒体应用
TABLE标志的主要属性 ALIGN=“…”将表格放在窗口的左边（left）、右边（right）或中间（center） BACKGROUND=“URL”指定作为整个表格的背景图形文件的地址 BGCOLOR=“…”指定表格中所有单元的背景颜色，可用颜色名或RGB值 BORDER=“n”指定每个单元的边框厚度（像素数），0表示不显示边框 WIDTH="n"指定表格宽度，可以用像素数，如600；也可用浏览器窗口总宽度的百分比，如90% Internet及多媒体应用
7.2.7 生成框架集<FRAMESET> 框架（Frame），也叫帧，它把浏览器窗口分成几个独立的部分，各自可包含不同的HTML文档，分隔浏览器窗口可以大大地改进Web站点的外观和可用性。 <FRAMESET>标志表示要在HTML文档中建立框架集，其属性主要有ROWS和COLS两个。 ROWS=“n1,n2,… ”：指定框架集采用水平框架的形式，并设置每一个框架的行长，行长可以用像素数、百分比或用“*”表示余下的部分。 如： <FRAMESET ROWS = "15%,85% "> </FRAMESET> COLS=“n1,n2,… ”：指定框架集采用垂直框架的形式，并设置每一个框架的列宽，列宽可以用像素数、百分比或用“*”表示余下的部分。如： <FRAMESET COLS = "200,* " > </FRAMESET> Internet及多媒体应用
<FRAME>标志 定义了框架集后，就可以用<FRAME>标志加入框架了。在框架集中定义了多少个框架，就需要用多少个<FRAME>标志来指定每个框架的内容，并给每个框架命名。 常用属性 SRC=“URL”以标准URL指定框架的内容源 NAME=“…”给框架命名，以便从其他框架或窗口引用或链接 FRAMEBORDER=n设置或删除框架周围的边框；n=0时没有边框，可以达到流畅的外观 NORESIZE禁止访问者调整框架尺寸。不设置该属性时，访问者可以拖动边框调整框架的大小 SCROLLING="…"取值yes、no和auto表示要求滚动条、禁止滚动条及让浏览器根据需要自动提供滚动条。默认值为auto Internet及多媒体应用
7.2.8 加入表单<FORM> 表单是Web页面（用户）与Web站点（服务器）之间双向通信的唯一途径，Web站点通过表单来收集用户递交的信息，然后再加以处理。表单有以下两个基本的组成部分： 在浏览器中可以看到的部分（供访问者填写）。 不能看到的部分（指定服务器如何处理信息）。 表单包含下面几种小部件（也称为控件），用于收集数据： “提交”按钮，用于将表单信息发送给服务器处理。 “复位”按钮，返回表单的初始设置。 文本字段，是输入少量文本的区域，用于对姓名、搜索项目和地址等单词不多的响应。 选择清单（下拉列表），是让访问者选择一个或几个项目的清单，用于列出有限的选项清单。 复选框，让访问者从列出的项目中进行多项选择。 单选钮，让访问者有机会选择单个项目，例如性别等只有一项正确的选项。 文本区，是输入大段文本的区域，如发表自己的意见等。 Internet及多媒体应用
表单处理常用标志 <FORM>标志 <INPUT>标志 文字输入框（text）和密码输入框（password） 有关表单的内容都必须包含在<FORM> ……</FORM>内 <INPUT>标志 文字输入框（text）和密码输入框（password） 复选框（Checkbox）和单选按钮（RadioButton） 用<TEXTAREA>标志定义文本区 用<SELECT>标志定义列表选择框 Internet及多媒体应用
7.2.9 放进多媒体元素 加入声音 Web页面的声音主要有两种产生方式：访问者打开页面时自动播放的声音，称为背景声音；访问者单击某个内容或链接时播放的声音。 背景声音的加入 背景声音的加入可以使用<BGSOUND>标志。用法如下： <BGSOUND SRC="…" LOOP=n> 其中SRC=属性指定要播放的声音文件，LOOP=属性指定声音播放的次数。 单击播放声音 为了最方便地放上声音，可以用链接。只要像普通的超级链接一样，将声音文件作为链接的目标即可。如： <A HREF="yesterdayoncemore.mp3">欣赏Carpenter的Yesterday Once More</A> 另外，还可以用<EMBED>标志来加入声音，它提供一个属性AUTOSTART来设置是否自动播放声音。如： <EMBED SRC="bird.wav" AUTOSTART="true"> Internet及多媒体应用
加入影像 直接用链接加入 影像文件一般都较大，所以为了避免网络的拥挤，最好用链接的方式加入影像，当用户单击时才下载播放。如： <A HREF="flying.mpg">欣赏电影"飞翔"</A> 嵌入影像 如果使用嵌入方式加入影像，则访问者必须下载（由浏览器自动下载）。嵌入方式使用<EMBED>标志。方法如下： <EMBED SRC="firework.avi" WIDTH=400 HEIGHT=300 AUTOSTART="false"> 加入影像还可以用<IMG>标志，使用其DYNSRC=属性。方法如下： <IMG DYNSRC="foo.avi"> 另外可以用<OBJECT>标志加入，参数较复杂。 Internet及多媒体应用
7.2.10 关于动态HTML 动态HTML，即DHTML，是Dynamic HTML的缩写，它并不是一个新的HTML语言标准。DHTML通过传统的HTML语言，利用CSS（Cascading Style Sheets，层叠式样式表），并依靠脚本语言（JavaScript或VBScript）使一向静止不变的页面得以“动”起来。DHTML是一种完全“客户端”技术，直接通过Web页面实现页面与用户之间的交互性，而不需要通过服务器。 DHTML的优秀之处在于增强了Web页面的功能，在Web页面直接建立动画、游戏和应用软件等，提供了浏览站点的全新方式。与Java、Flash等技术不同的是，用DHTML编制的页面不需要插件的支持就能完整地实现。 简单来说，样式单（CSS）是HTML的扩展，可以重新定义Web页面的显示风格，控制HTML元素在网页上或窗口中的位置。样式单的定义通常用标志<STYLE>进行，出现在文档的<HEAD>区。 脚本语言（JavaScript或VBScript）是一种用于在页面中控制HTML元素的语言，在HTML文档中，用标志<SCRIPT>来加入脚本。 有关样式单CSS及脚本语言的介绍，参考第9章。 Internet及多媒体应用
佛山科学技术学院 本章小结 实验要求