[其它课程]HTML教程.ppt

《[其它课程]HTML教程.ppt》由会员分享，可在线阅读，更多相关《[其它课程]HTML教程.ppt（284页珍藏版）》请在三一办公上搜索。

1、Internet,万维网,Internet从20世纪60年代早期就已经出现，但当时只有文字。web由数十亿个单个页面（page）组成，这些页面会链接（linked）到其他页面，相关页面的集合叫网站。每个网站都有主页（home page）,web地址或URL,web上每个页面都有地址（adress），这个地址成为统一资源定位符（uniform resource locator，url）网站完成后要把它发布（post）到服务器（Server）上，这是台特殊的计算机，它每天24小时与Internet链接。万维网上所有的页面都存储至服务器上，总共有数百万台这样的服务器。,web地址或URL,拥有服务器

2、并托管（hosting）网站的人会为你确定你的个人的url。url是唯一的，一旦知道url就可以告诉其他人访问你的网站。,域名,地址中的细节,浏览器访问服务器上的网页,Web 服务器,客户端,HTTP协议,协议用于访问 Web 上资源的一组规则HTTP 是 Web 协议,站点地址或 URL,HTML语言用于制作网页,浏览器访问服务器上的网页,Web 服务器,客户端,向服务器发送页面请求（request）,Web 服务器处理请求并返回请求的页面（响应response）,HTTP 负责请求和响应,HTML,HTML简介,超文本,提供链接到其他页面或同一页面的其他位置的文本,标记,可以用标签标记页面

3、的不同部分以正确显示,语言,HTML 可用于：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象,HTML文档示例,学习 HTML欢迎来到 HTML 世界,HTML 代码,浏览器处理代码并进行显示,编辑器和浏览器,学习 HTML欢迎来到 HTML 世界,HTML 代码,在编辑器中编写 HTML 代码,浏览器显示 HTML 文档/页面,HTML基本标记列表标记多媒体元素标记文字与段落标记表格标记框架标记表单标记,课程内容安排,HTML概念,HTML超文本标记语言（Hyper Text Markup Language）以htm或者html为扩展名包含标记的文本文件通

4、过浏览器解析标记来显示页面HTML的编辑器简单文本编辑器即可，可在纯文本中编写代码常用编辑器-Dream Weaver、FrontPage、EditPlus等,基本结构,学习 HTML 欢迎来到 HTML 世界,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,这部分包括标题和其他说明信息。包括在 标签内,这部分包含文本、图像和链接。它包括在 标签内,第一个网页-解释执行,FirstPage.html第一个网页你好!开始学习做网页了，一定要加油啊！,标记,HTML文档是由HTML标记及内容组成的文本文件HTML标记的组成通常成对出现，在开始标记和结束标记之间的文本是内容

5、大小写无关，和表示的意思是一样的,标记的属性,标记的属性属性为页面上的HTML元素提供附加信息，如：属性通常以 name=“value”对出现，写在起始标记中；一个标记可以有多个属性属性值应该被包含在引号中，常用双引号。可嵌套使用单引号,HTML基本标记-body,：主体标记 网页的主体部分以标记它的开始，以标记它的结束。在网页的主体标记中有很多的属性设置，包括页面的背景设置、文字属性设置、链接设置、边距设置等。下面将逐步介绍这些网页主体标记的基本属性。,bgcolor属性,bgcolor:页面背景色 设置整个页面的背景颜色的时候，需要用到bgcolor属性，它使用“#”加上6位的16进制的值

6、来表现颜色。其中#FFFFFF为白色，#000000为黑色，#FF0000为红色，#00FF00为绿色，#0000FF为蓝色。语法：说明：该语法中的body就是页面的主体标记，也就是说设置页面颜色要和页面的主体标记放置在一起。,bgcolor属性,实例代码：设置页面背景色,Background属性,background：背景图片 使用恰当的图片作为背景能够使页面看上去更加生动美观。而使用图片作为背景则需要使用到background属性，还可以设置背景图片的平铺方式，显示方式等。语法：说明：文件的链接地址可以是相对地址，也就是本机上图片文件的存储位置。在默认情况下，用户可以省略bgpropert

7、ies属性，这时图片会按照水平和垂直的方向不断重复出现，直到铺满整个页面。如果将bgproperties属性设置为“fixed”，那么当滚动页面的时候，背景图像也会跟着移动。,实例代码：背景图片,上面代码设置一个图片文件作为网页的背景，默认情况下不设置bgproperties属性，此时图片将在水平和垂直方向平铺图像。运行这段代码，可以看到如下所示的效果。,Text属性,text：文字颜色 默认文字的颜色设置可以通过text参数来实现。在没有对文字的颜色进行单独定义的时候，这一属性可以对页面中所有的文字起作用。语法：说明：属性设置也和在页面的主体标记放置在一起。,实例代码：设置页面文字颜色设置页

8、面的文字颜色运行这段代码，实现的效果如下所示。,Link属性,link：链接文字属性 在默认情况下，浏览器以蓝色作为超链接文字的颜色；而访问过的文字则变为暗红色。用户在创作网页的时候，可以通过link参数修改链接文字的颜色。语法：说明：这一属性的设置与前面几个设置颜色的参数类似，都是与body标签放置在一起，表明它对网页中所有未单独设置的元素起作用。,实例代码：页面的链接文字设置文字的链接效果链接文字,Margin属性,margin：边距在网页的制作过程中，还可以定义页面的空白，也就是内容与浏览器的边框之间的距离。其中包括上边框和左边框，其设置方法类似，下面进行介绍。语法：说明：在默认情况下，

9、边距的值是以像素为单位的，下面以实例说明设置边距的效果。,实例代码：设置边距设置页面的上边距为60像素设置页面的左边距为40像素,HTML基本标记-head,：头部标记 HTML的头元素是以为开始标记，以为结束标记的。头元素包括标题、基底信息、元信息等。定义在HTML语言头部的内容不会在网页上直接显示。它用于包含当前文档的相关信息，包括、等。,HTML基本标记-meta,：元信息标记 meta元素提供的信息用户不可见，不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。HTML头页面中可以有多个meta元素。meta元素的属性有两种：name和http-equiv，其中name用于描述

10、网页，以便于搜索引擎机器人查找、分类。最重要的是description（站点在搜索引擎上的描述）和keywords（关键词）。在浏览网页的时候经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动转到其他中，这就是网页的跳转。使用HTTP代码就可以很轻松的实现这一功能。语法：说明：在该语法中，refresh表示网页的刷新，而在content中则设定的刷新的时间和刷新后的地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间是以秒为单位的。,实例代码,实例代码：学习元信息标记您好，本页在3秒之后将自动跳转到网易网站运行程序，效果如右所示。,HTML基本标记-title,在HTML文档中

11、，标题信息设置在页面的头部，也就是与之间。标题标记以开始，以结束。标题用来说明页面用途，显示在浏览器的标题栏中。每个HTML页面都应该有标题。语法：,实例代码：文件的标题,HTML基本标记-页面注释标记,在网页中，除了以上这些基本元素外，还包含一种不显示在页面中的元素，那就是代码的注释文字。而适当的注释可以帮助用户更好地了解网页中的各个模块的划分，也有助于以后对代码的检查与维护，是一种很好的编程习惯。语法：说明：注释文字的标记很简单，只需要在语法中“注释的文字”的位置上添加需要的内容即可。,实例代码：设置代码的注释注释语句是用来帮助用户理解代码、维护代码的。文字,文字与段落标记-font,：文

12、字格式标记 在网页的编辑中，可以直接在文字的主体部分输入文字，而这些文字会显示在页面中。只需要在标记和标记之间输入相应的文字即可。而重要的是如何设置不同的文字效果，而这些属性的设置都位于文字格式标记中，下面将逐一进行讲解各种文字格式的设置方式。,Face属性,face：文字字体 在HTML语言中，可以通过face属性设置文字的不同字体效果，而设置的字体效果必须在浏览器安装了相应的字体后才可以正确浏览，否则这些特殊字体会被浏览器中的普通字体所代替。语法：应用字体的文字说明：face属性的值可以是1个或者多个，默认情况下，使用第1种字体进行显示，如果第1种字体不存在，则使用第2种字体进行代替，以此

13、类推。如果设置的几种字体在浏览器中都不存在，则会以默认字体显示。,实例代码,实例代码：不同字体的显示效果经典空叠圆简的字体效果黑体效果 English fonts,Size属性,size：字号 除了字体外，文字的大小也是吸引用户注意的一个元素。除了使用标题文字标记设置固定大小的字号之外，HTML语言提供了font标记的size属性来设置普通文字的字号。语法：说明：在该语法中，文字的字号可以设置为17，也可以是+1+7或者是-1-7。这些字号并没有一个固定的大小值，而是相对于默认文字大小来设定的，默认文字的大小与3号字相同，而数值越大，文字也越大。,实例代码,实例代码：不同字号文字的效果1号字体

14、的效果2号字体的效果3号字体的效果4号字体的效果5号字体的效果6号字体的效果7号字体的效果默认字号+2，也就是5号字体的效果默认字号-1，即2号字体的效果,实例代码,Color属性,color：文字颜色 在HTML页面中，还可以通过不同的颜色表现不同的文字效果，从而增加网页的亮丽色彩，吸引读者的注意。语法：说明：与网页背景色的设置类似，颜色代码也是十六位进制的。,实例代码,实例代码：不同色彩的文字效果淡蓝色的黑体效果暗红色的2号文字效果桔色的5号经典空叠圆简,实例代码,strong、em和u标记,strong、em和u：粗体、斜体和下划线 在浏览网页的时候，还常常可以看到一些特殊效果的文字，例

15、如粗体字、斜体字以及下划线文字。而这些文字效果也可以通过设置HTML语言的标记来实现。语法：粗体的文字 斜体字 带下划线的文字说明：这几种效果的语法类似，只是标记不同。而粗体的效果也可以通过标记来实现；斜体字也可以使用标记或者表示。,实例代码,实例代码：不同的文字样式正常的文字效果使用strong标记加粗文字使用B标记加粗文字使用em标记的斜体效果使用I标记的斜体效果使用cite标记的斜体效果下划线文字效果,实例代码,sup和sub标记,sup和sub：上标与下标 除了设置不同的文字效果之外，有时候在网页中还需要一种特殊的文字效果，即上标和下标，这在显示公式的时候常常会出现。而在HTML语言中

16、，也可以通过标记轻松的进行设置。语法：上标标记 下标标记说明：在该语法中，上标标记和下标标记的使用方法基本上相同，只需要将文字放在标记中间即可。,实例代码,实例代码：上标与下标的效果正常的文字效果在方程式中应用上标的效果X3+5X2-3=0在文字中应用下标的效果X1-Y2=11,实例代码,Strike标记,strike：删除线 在网页中可以通过strike参数对文字添加删除线效果。语法：文字 或文字说明：这两种标记都可以创建删除线效果，使用起来也很简单，只要把需要设置成删除线效果的文字放置在标记中间即可。,实例代码,实例代码：文字的删除线效果正常的文字效果在文字上使用s标记添加删除线文字的删除

17、效果在文字上使用strike标记添加删除线文字的删除效果,实例代码,Code标记,code：等宽文字标记 等宽文字标记常用于英文效果，使用该标记可以实现网页中字体的等宽效果。有些时候，使用了等宽效果能够令页面显得更加整齐。语法：文字 文字说明：在该语法中的这两种标记都可以实现文字的等宽显示，而在应用时只要把需要等宽显示的文字放置在标记中间即可。,实例代码,实例代码：文字的等宽效果在下面将显示两段英文效果，突出等宽文字与普通英文文字的对比效果。普通英文效果 HTML is the lingua franca for publishing hypertext on the World Wide W

18、eb.等宽文字效果 HTML is the lingua franca for publishing hypertext on the World Wide Web.,实例代码,：空格,只代表一个半角空格，多个空格则可以多次使用这一符号。,实例代码,实例代码：输入空格符号在段落开始输入空格符号的效果：更上一层楼。,实例代码,文字与段落标记-标题文字标记,：标题文字标记 标题文字共包含6种标记，分别表示6个级别的标题，每一级别的字体大小都有明显的区别，从1级到6级依次减小。语法：1级标题：2级标题：依次下去，到6级标题。说明：在该语法中，1级标题使用最大的字号表示；6级标题使用的是最小的字号。,

19、实例代码,实例代码：标题文字的效果1级标题的效果2级标题的效果3级标题的效果4级标题的效果5级标题的效果6级标题的效果,文字与段落标记-水平线标记,：水平线标记 在网页中常常看到一些水平线将段落与段落之间隔开，这些水平线可以通过插入图片实现，也可以更简单的通过标记来完成。语法：说明：在网页中输入一个标记，就添加了一条默认样式的水平线。,实例代码,实例代码：添加水平线泰安：华夏文明发祥地之一泰安是华夏文明发祥地之一。早在50万年前就有人类生存，5万年前的新泰人已跨入智人阶段；5000年前这里孕育了灿烂的大文口文化，成为华夏文明史上的一个重要里程碑。,width、height属性,width、si

20、ze：水平线宽度与高度 在默认情况下，在网页中插入的水平线是100%的宽度，1像素的高度。而在实际创建网页的时候，可以对水平线的宽度和高度进行设置。语法：说明：在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口的百分比。而水平线的高度值则只能够是像素数。如果在创建水平线的时候只设置一个参数，那么另外一个参数则会取默认值。,实例代码,实例代码：设置水平线大小醉花阴李清照莫道不消魂，帘卷西风，人比黄花瘦。,实例代码,Color属性,color：水平线的颜色 在网页创作的时候，文字颜色是多姿多彩的，而水平线的色彩也是可以多种多样的。设置了不同色彩的水平线也可以为网页增色不少。语法：说明：颜色

21、代码是十六位进制的数值。,实例代码,实例代码：设置水平线的颜色天下第一山每一个中国人都熟悉这座大厦，但是并不是每一个中国人，都熟悉这座大厦的基石，来自中国的哪一座山，人民大会堂的基石就是泰山石，象征着稳如泰山。,实例代码,Align属性,align：水平线的对齐方式 通过前面几个实例可以看到，水平线在默认情况下是居中对齐的。如果希望水平线左对齐或右对齐，就需要使用align参数。语法：说明：在该语法中对齐方式可以有3种，包括left、center、right。其中，center的效果与默认效果相同。,实例代码,实例代码：设置水平线对齐方式醉花阴李清照薄雾浓云愁永画，瑞脑消金兽。佳节又重阳，玉枕

22、纱厨，半夜凉初透。东离把酒黄昏后，有暗香盈袖。莫道不消魂，帘卷西风，人比黄花瘦。,Noshade属性,noshade：去掉水平线阴影 在默认情况下，水平线是空心带阴影的立体效果，通过设置shade参数可以将水平线的阴影去掉。语法：,实例代码,实例代码：去掉水平线阴影泰山泰山西邻黄河，东依大海，巍峨的雄姿和茂盛的植被，形成了地方性气候，因此生云制雨，是泰山常见的自然现象。,文字与段落标记-段落标记,：段落标记 段落就是在文本编辑窗口中，输入完一段文字后，按下回车键后就生成了一个段落。在HTML中可以通过标记实现段落的效果，下面具体介绍和段落相关的一些标记。在HTML语言中，段落通过标记来表示。语

23、法：段落文字说明：与其他标记不同的是，段落标记可以没有结束标记，而每一个新的段落标记的开始同时也可以意味着上一个段落的结束。,实例代码,实例代码：输入段落文字小镇上七干多人依水而居，镇上的主要街道有9条。临河筑的民房、黑瓦白墙，屋脊起翘，麟次栉比，古色古香，具有“人家尽忱河，水巷小桥多”的特色。又似一幅古雅、秀丽的水乡风情画。,Br标记,br：换行标记 在网页的文字显示过程中，除了可以让文字不自动换行之外，还可以使用标记将文字强制换行。这一换行标记与段落标记不同，段落标记的换行是隔行的，而使用换行标记能使两行的文字更加紧凑。语法：说明：一个标记代表一个换行，连续的多个标记可以多次换行。,实例代

24、码,实例代码：文字的换行效果下面是一段描写白龙池风景的文字：在建岱桥北的溪谷内是著名的白龙池。相传此处是东海龙王的小儿子小白龙在此潜居镇山治水。这里上有百丈崖悬流下掷，似玉龙腾飞，顺着峡谷穿山越涧泻入池内。,Nobr标记,nobr：取消文字换行标记 在网页的显示过程中，如果某一行的文字宽度过长，浏览器会自动对这段文字进行换行处理。如果用户在创作的时候不希望被自动换行，则可以通过nobr属性来实现。语法：不换行显示的文字说明：在标记之间的文字在显示的过程中不会自动换行显示。,实例代码,实例代码：文字不换行显示HTML的英文全称是Hyper Text Markup Language，直译为超文本标

25、记语言，它是全球广域网上描述网页内容和外观的标准。HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言，它是全球广域网上描述网页内容和外观的标准。,文字与段落标记-Pre标记,pre：保留原始排版方式标记 在网页创作中，一般是通过各种标记对文字进行排版的。但是在实际应用中，往往需要一些特殊的排版效果，这样使用标记控制起来会比较麻烦，解决的方法就是保留文本格式的排版效果，例如空格、制表符等。如果要保留原始的文本排版效果，则需要使用pre标记。语法：文字说明：在标记之间的文字会保留文档中的空白，而按照原始的文本格式进行显示。,实例代码,实例代码：保留原始排

26、版方式下面是原始文字的排版效果：O O K K O O K K O O K K O O KK O O K K O O K K O O K K,Center标记,center：居中对齐标记 对于段落来说，和普通文字类似，有时候也需要将段落居中。在HTML语言中提供了专门的标记。语法：文字说明：在标记之间的文字会自动居中显示。,实例代码,实例代码：居中对齐春雪新年都未有芳华，二月初惊见草芽。白雪却嫌春色晚，故穿庭树作飞花。,Blockquote标记,blockquote：向右缩进标记 使用blockquote标记可以实现页面文字的段落缩进。这一标记也是每使用一次，段落就缩进一次，可以嵌套使用达到不

27、同的缩进效果。语法：文字说明：在该标记之间的文字就会自动缩进。,实例代码,实例代码：段落的缩进效果相传，两千五百年前，春秋时期的大音乐家俞伯牙，曾学琴于程廉先生，三年不成。后来他沿着孔子的足迹登游泰山，观东海日出，看云雾变化，闻松风长啸，听水涛咆哮，拜大自然为师，琴艺大有长进，写出了著名的古琴曲高山和流水。,实例代码,列表标记-menu,：菜单列表标记 菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的，因此它的功能也可以通过无序列表来实现。语法：列表项1列表项2列表项3.说明：在该语法中，和标志着菜单列表的开始和结束。,实例代码,实例代码：创建菜单列表本章中介

28、绍的列表主要包括：无序列表有序列表定义列表菜单列表目录列表,列表标记-ol,：有序列表标记 有序列表中，各个列表项使用编号而不是符号来进行排列。列表中的项目通常都有先后顺序性，一般采用数字或者字母作为顺序号。语法：第1项第2项第3项说明：在该语法中，和标记标志着有序列表的开始和结束，而标记表示这是一个列表项的开始，默认情况下，采用数字序号进行排列。,实例代码,实例代码：创建有序列表创建HTML文件的步骤：启动编写HTML文件的软件，如Dreamweaver编写文件代码保存文件运行文件并查看效果,Type属性,type：有序列表的序号类型 默认情况下，有序列表的序号是数字的，通过type属性可以

29、调整序号的类型，例如将其修改成字母等。语法：第1项第2项第3项说明：在该语法中，序号类型可以有5种，如下表所示。,实例代码,实例代码：创建有序列表小小蚂蚁测试你如何面对人际关系你和朋友约好一起逛街，可是你的朋友迟到了。于是你就开始在地上乱画。突然，你发现有很多蚂蚁正在成群结队地往前行进。你认为这些蚂蚁正在做什么？正在搬家 大家正要前往救助掉落洞穴中的伙伴 发现好吃的食物，大家正要去搬运 正要去袭击侵入他们势力范围的敌人走路姿势透露你的另一面走路是我们每天都要做的事情，似乎就像我们呼吸空气一样平常，走路会藏有什么玄机呢？其实，这里面的奥妙可大着呢！每个人有每个人的习惯，由此，我们每个人走路的姿态

30、就会有所不同，就在这不同的姿势中，你的性格特征以及爱情玄机就一点一滴地向泄露出来了哟！走路的时候速度比较快，通常五指伸得笔直走路时的速度一般，手掌常自然地握成拳状常将一只手插进口袋，或两手同时插进口袋走路的时候速度比较慢，五指自然微微弯曲,实例代码,Start属性,start：有序列表的起始数值 默认情况下，有序列表的列表项是从数字1开始的，通过start参数可以调整起始数值。这个数值可以对数字起作用，也可以作用于英文字母或者罗马数字。语法：第1项第2项第3项说明：在该语法中，起始数值只能是数字，但是同样可以对字母和罗马数字起作用。,实例代码,实例代码：有序列表的起始值这些动物都是国家保护动物

31、：大熊猫金丝猴娃娃鱼变色龙读完本期故事会，选择您认为最好的一篇文章：晴天、雨天我长大了风中的百合花,实例代码,列表标记-ul,：无序列表标记 无序列表的特征在于提供一种不编号的列表方式，而在每一个项目文字之前，以符号作为分项标识。语法：第1项第2项第3项说明：在该语法中，使用标记表示这一个无序列表的开始和结束，而则表示这是一个列表项的开始。在一个无序列表中可以包含多个列表项。,实例代码,实例代码：创建无序列表提供下载的软件类别：系统程序媒体工具管理软件游戏娱乐,Type属性,type：设置无序列表的符号类型默认情况下，无序列表的项目符号是，而通过type参数可以调整无序列表的项目符号，避免列表

32、符号的单调。语法：第1项第2项第3项说明：在该语法中，无序列表其他的属性不变，type属性则决定了列表项开始的符号。它可以设置的值有3个，如下表所示。其中disc是默认的属性值。,实例代码,实例代码：创建无序列表出售的图书种类：计算机类书籍休闲杂志类书籍考试教材类书籍社会科学类书籍外语原版书出售的数码产品种类：电脑配件数码相机手机MP3,实例代码,列表标记-dir,目录列表一般用来创建多列的目录列表，它在浏览器中的显示效果与无序列表相同，因此它的功能也可以通过无序列表来实现。语法：列表项1列表项2列表项3.说明：在该语法中，和标志着菜单列表的开始和结束。,实例代码,实例代码：创建目录列表禅诸恶

33、不作,众善奉行人间万事塞翁马一切众生希有佛性面面佛面行行佛行,列表标记-dl,在HTML中还有一种列表标记，称为定义列表（Definition Lists）。不同于前两种列表，它主要用于解释名词，包含两个层次的列表，第一层次是需要解释的名词，第二层次是具体的解释。语法：名词1解释1名词2解释2名词3解释3说明：在该语法中，标记和标记分别定义了定义列表的开始和结束，后面就是要解释的名称，而在后面就添加该名词的具体解释。作为解释的内容在显示的时候会自动缩进，有些像字典中的词语解释。,实例代码,实例代码：创建定义列表网页创作的相关知识：HTMLHtml是英文Hyper Text Markup Lan

34、guage的缩写，即超文本标志语言 CSSCSS是Cascading Style Sheets（层叠样式表单）的简称，是一种设计网页样式的工具 JavaScriptJavaScript是一种新的描述语言，可以被嵌入HTML的文件之中 CGICGI是一段程序，它运行在Server上，提供同客户段 Html页面的接口,图像标记-img,有了图像文件之后，就可以使用img标记将图像插入到网页中，从而达到美化页面的效果。语法：说明：在该语法中，src参数用来设置图像文件所在的路径，这一路径可以是相对路径也可以是绝对路径。,实例代码,实例代码：插入图像文件动漫世界，精彩无限！动漫名称；魔卡少女樱打开封印

35、之书的木之本樱，因身负回收库洛牌的任务而变身成拥有魔法的魔卡少女，就此展开了一系列的冒险。动画的基本架构与漫画大致相同，在细节部分做了一些改动，并出现了原作中没有的卡片和角色，卡片收集的顺序上也有所变化，剧情节奏较漫画延缓不少。,Height属性,height：图像高度 通过height属性可以设置图片显示的高度，默认情况下，改变高度的同时，其宽度也会等比例进行调整。语法：说明：在该语法中，图像的高度单位是像素。,实例代码,实例代码：设置页面图像大小电视剧：仙剑奇侠传根据RPG游戏改编，故事讲述的是平凡少年逍遥与婶婶相依为命，经营着一家小客栈。有一天，婶婶突然生了重病，焦急的逍遥前往仙灵岛寻找

36、解药。仗着从剑仙学得的几招剑法，逍遥踏上了一段危险重重的旅程，开始了一段波澜壮阔的冒险与奇遇,Width属性,width：图像宽度 图像宽度的属性与图像高度类似，同样是用来调整图像的大小的。语法：说明：在该语法中，图像的宽度单位是像素。如果在使用属性的过程中，只设置了高度或宽度，则另外一个参数会等比例变化。如果同时设置两个属性，且缩放比例不同的情况下，图像很可能会变形，下面通过实例说明。,实例代码,实例代码：设置页面图像大小轩辕剑三外传：天之痕天之痕的故事从十六年后开始，发生在轩辕剑叁的一百三十三年前,实例代码,Border属性,border：图像边框 在默认情况下，页面中插入的图像是没有边框

37、的，可以通过border属性为图像添加边框。语法：说明：在该语法中，src是图像文件的地址，是不可缺少的。Border的单位是像素。,实例代码,实例代码：设置图像边框美女與野獸（Beauty and the Beast）在一个被施了魔咒的古堡里，一位王子因不懂得慈悲与宽容而被仙女变为野兽，唯有他学会如何爱人才能变回原貌，后来美女贝儿为救父亲而答应被野兽囚禁，在一群魔堡仆役的穿针引线之下，贝儿与野兽从针锋相对到相知相守，经历了一番波折之后，最后才终于得以解开魔法的桎梏。,实例代码,Hspace属性,hspace：图像水平间距 如果不使用标记或者标记进行换行显示，那么添加的图像会紧跟在文字之后。而

38、图像与文字之间的水平距离是可以通过hspace参数进行调整的。通过调整间距，可以使文字和图像的排版不那么拥挤，看上去更加协调。语法：说明：在该语法中，src是图像文件的地址，是不可缺少的。水平间距hspace属性的单位是像素。,实例代码,实例代码：设置图像的水平间距请选择您喜欢的头像人物头像动物头像,实例代码,Vspace属性,vspace：图像垂直间距 垂直间距参数vspace用来调整图像与文字的垂直距离。语法：说明：在该语法中，vspace属性的单位是像素。,实例代码,实例代码：设置图像的垂直间距英国著名的音乐剧超级天后莎拉布莱曼的新专辑伊甸园隆重推出。伊甸园共收录了十五首歌曲，曲风涵盖了

39、古典、跨界与流行，专辑中莎拉依旧保持她美如天籁的歌声。英国著名的音乐剧超级天后莎拉布莱曼的新专辑伊甸园隆重推出。伊甸园共收录了十五首歌曲，曲风涵盖了古典、跨界与流行，专辑中莎拉依旧保持她美如天籁的歌声。以她最美丽的声音来诠释这些极富古典气息的歌曲，相信喜欢莎拉布莱曼（Sarah Brightman）的歌迷应该不会错过这张充满古典之美的专辑。音乐是她所热爱的东西，她自己的音乐也是这样，“我演唱我热爱的音乐。如果我变得不诚实，就不再成为音乐。你必须表达你内心的情感，听众知道他们是否被欺骗。”同名主打歌伊甸园由她亲自填词，是她个人最喜欢的作品之一。,实例代码,Align属性,align：图像相对于文

40、字基准线的对齐方式 图像和文字之间的排列方式可以通过align参数来调整。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字对齐方式则是指图像与一行文字的相对位置。法：说明：在该语法中，align的取值如下表所示。图像相对文字的对齐方式在表中，Netscape支持texttop、baseline、absmiddle、absbottom的取值。,实例代码,实例代码：设置图像与文字的相对位置作为基准的文字下面显示图像位于文字左侧的效果：本实例讲解的是关于图像与文字的相对位置的设置，文字作为图像对齐效果的参照物。如果将图像的对齐方式设置成left或者

41、right，图像则会与文字进行环绕显示。这是图像设置为left的效果。下面显示图像位于文字右侧的效果：本实例讲解的是关于图像与文字的相对位置的设置，文字作为图像对齐效果的参照物。如果将图像的对齐方式设置成left或者right，图像则会与文字进行环绕显示。这是图像设置为right的效果。,实例代码,Alt属性,alt：图像的提示文字 当图像没有装载到浏览器上时，就会显示添加的提示文字，而下载图像之后，当鼠标停留在图像上方的时候也会显示出提示文字，这一功能通过alt属性来实现。语法：说明：在该语法中，提示文字的内容可以是中文，也可以是英文。,实例代码,实例代码：为图像添加提示文字史密斯夫妇Mr.

42、and Mrs.Smith影片介绍：布拉德皮特和安吉丽娜朱莉所扮演的史密斯夫妇在外人眼里是一对令人羡慕的夫妻，他们家境优越，夫妻恩爱。但多年的夫妻生活却多少磨平当初的激情，而多些许平淡与乏味，而这一切都仅仅是假象而已，这夫妇二人都是受过专业训练，身经百战，杀人无数的职业杀手。他们各自效力于对立的两个秘密组织，可能由于双方都是伪装技法高超的超级杀手，虽然同室而居七年有余，但各自却对对方的秘密身份知之甚少。而在一次执行刺杀任务中，夫妇二人恰好被同时指派去刺杀同一个目标，这使得二人为完成任务不得不同室操戈，而结果却是两败俱伤。为了找到导致自己任务失败的对方，夫妇俩开始调动一切资源调查对方的身份，而随

43、着调查的深入，越来越多的证据指向同自己生活多年的爱人，因此，夫妻二人的猜疑和试探也越加深入，直到妻子在晚餐中无意将自己敏捷的身手暴露给同是内行的杀手丈夫，之后,实例代码,多媒体元素标记-bgsound,：背景音乐标记 在网页中，除了可以嵌入普通的声音文件之外，还可以为某个网页设置背景音乐。作为背景音乐的可以是音乐文件，也可以是声音文件。其中最常用的是midi文件。语法：说明：作为背景音乐的文件还可以是avi文件、mp3文件等声音文件。,实例代码,实例代码：设置背景音乐醉花阴李清照莫道不消魂，帘卷西风，人比黄花瘦。,实例代码,Loop属性,loop：背景音乐的循环播放次数 通常情况下，背景音乐需

44、要不断的播放，但有时也需要指定播放的次数，这一功能实现起来并不难，只要设置相应的loop参数即可。语法：说明：如果希望无限次循环播放背景音乐，可用将循环次数设置为True。,实例代码,实例代码：设置背景音乐醉花阴李清照莫道不消魂，帘卷西风，人比黄花瘦。运行这段代码，背景音乐在循环播放3次以后停止。,多媒体元素标记-embed,：多媒体文件标记 在网页中常见的多媒体文件包括声音文件和视频文件。语法：说明：在该语法中，width和height一定要设置，单位是像素，否则无法正确显示播放多媒体文件的软件。,实例代码,实例代码：嵌入多媒体文件下面是嵌入的多媒体文件：,Autostart属性,autos

45、tart：设置自动运行登录网页的时候常常会看看一些视频文件直接开时运行，不需要手动开始，特别是一些广告内容，这是通过autostart参数来实现的。语法：说明：autostart的取值有两个：一个是True，表示自动播放；另一个是False，表示不自动播放。,实例代码,实例代码：设置自动运行下面的视频文件中左边的视频文件将会自动播放，而右边的视频文件则需要手动播放：,Loop属性,loop：媒体文件的循环播放 这里的循环播放一般是在设置了自动播放的时候采用，与背景音乐的设置基本相同。语法：说明：在该语法中，loop的取值不是具体的数字，而是True或者False，如果取值为True，表示媒体文

46、件将无限次的循环播放；如果取值为False，则只播放一次。这里的loop也可以设置为播放次数，但是用途并不广泛。,实例代码,实例代码：设置循环播放下面的视频文件将循环播放：,Hidden属性,hidden：隐藏面板 其实也可以将媒体文件的声音保留而隐藏图像，这样就相当于设置了背景声音。通过hidden参数可以隐藏播放面板。语法：说明：在该语法中hidden可以设置两个值：一是True，表示隐藏面板；另一个是False，表示显示面板，这是添加媒体文件的默认选项。如果要保留声音就要设置文件的自动播放。,实例代码,实例代码：设置隐藏面板下面的视频文件播放面板被隐藏：,多媒体元素标记-marquee,

47、：滚动文字标记 使用marquee标记可以将文字设置位动态滚动的效果。语法：滚动文字说明：只要在标记之间添加要进行滚动的文字即可。而且可以在标记之间设置这些文字的字体、颜色等。,实例代码,实例代码：设置滚动文字你好，欢迎光临梦幻小屋!这里有欢乐的歌声，这里有美好的景色,Direction属性,direction：文字滚动方向 默认情况下文字只能是从右向左滚动，而在实际应用中常常需要不同滚动方向的文字，可以通过direction这一参数来设置。语法：滚动文字说明：该语法中的滚动方向可以包含4个取值，分别为up、down、left和right，他们分别表示文字向上、向下、向左和向右滚动，其中向左滚

48、动left的效果与默认效果相同，而向上滚动的文字则常常出现在网站的公告栏中。,实例代码,实例代码：设置滚动文字你好，欢迎您的光临这里是梦想小屋让我们与您分享您的点点快乐让我们与您分担您的片片忧伤你好，欢迎您的光临这里是梦想小屋让我们与您分享您的点点快乐让我们与您分担您的片片忧伤,实例代码,Behavior属性,behavior：设置文字的滚动方式 除了将文字设置为单方向的滚动外，还可以为文字设置滚动方式，如往复运动等。这一功能可以通过添加behavior属性来实现。语法：滚动文字说明：在这里，滚动方式behavior的取值可以设置为如下表所示的某个值，不同取值的滚动效果也不相同,实例代码,实例

49、代码：设置滚动文字你好，欢迎您的光临让我们与您分享您的点点快乐让我们与您分担您的片片忧伤,Loop属性,loop：循环设置 设置滚动文字后，在默认情况下会不断的循环下去，如果希望当文字滚动几次停止，那么可以使用loop参数来进行设置。语法：滚动文字,实例代码,实例代码：设置滚动文字你好，欢迎您的光临这里是梦想小屋让我们与您分享您的点点快乐让我们与您分担您的片片忧伤,实例代码,Scrollamount属性,scrollamount：滚动速度 在设置滚动文字的时候，有时候可能希望他快一些，也有时候希望他慢一点。这一功能可以使用scrollamount参数来实现。语法：说明：在该语法中，滚动文字的速

50、度实际上是设置滚动文字每次移动的长度，以像素为单位。,实例代码,实例代码：设置滚动文字看看我走得速度怎么样？看看我走得速度怎么样？看看我走得速度怎么样？,Scrolldelay属性,scrolldelay：滚动延迟 scrolldelay参数可以设置滚动文字滚动的时间间隔。语法：说明：scrolldelay的时间间隔单位是毫秒，也就是千分之一秒。这一时间间隔设置的为滚动两步之间的时间间隔，如果设置的时间比较长会产生走走停停的效果。如果与滚动速度scrollamount参数结合使用，效果更明显，下面以实例说明。,实例代码,实例代码：设置滚动文字看看我走得速度怎么样？看看我走得速度怎么样？看看我走