1、HTML 语言,HTML入门 HTML基本构架 页面布局与文字设计 标题 换行 段落标签 水平线段 文字的大小设置 文字的字体与样式 文字的颜色 位置控制 综合示例,HTML入门,HTML，即超文本标记语言, 用于描述网页的格式设计和它与WWW上其它网页的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。,所谓超文本，它可以加入图片、声音、动画、影视等内容，它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。,HTML的基本结构,超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。提示 html文档可用记事
2、本打开，编辑，但效果预览须用浏览器, 头 部 信 息 文档主体，正文部分标记有时可以省略，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。标记一般不省略， 表示正文内容的开始。,超文本文档的源代码, 一个简单的HTML示例 欢迎光临我的主页 这是我第一次做网页，无论怎么样，我都会努力做好！ ,超文本中的标签,用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。 单标签：只需单独使用，这类标记的语法是： , 它表示换行 ， 表示插入图像,双标签 由“始标签”和“尾标签”两部分构成，必须成
3、对使用。其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。 这类标记的语法是： 内容 其中“内容” 部分就是要被这对标记施加作用的部分。,标签属性各属性之间无先后次序，属性也可省略（即取默认值） 例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： ,注释 SIZE定义线的粗细，属性值取整数，缺为1； ALIGN属性表示对齐方式，可取LEFT（左对齐， 缺省值），CENTER（居中），RIGHT（右对齐）； WIDTH 属性定
4、义线的长度，可取相对值，（由一对 “ “ 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的 个数，如WIDTH=300），缺省值是“100%“。,页面布局及文字设计：标题,一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等级。HTML总共提供六个等级的标题，n越小，标题字号就越大。 注释：标题样式是系统给定的，但可以通过CSS样式表修改！,格式 第一级标题 第二级标题 第三级标题 第四级标题 第五级标题 第六级标题,例子标题示例 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,换行,在编写HTML文
5、件时，1、不必考虑太细的设置，2、不必理会段落过长的部分会被浏览器切掉。在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。,无换行示例, 无换行示例 登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 ,换行示例,换行示例登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。,段落标签,为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。 标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有
6、CENTER、LEFT、RIGHT三种。,例1, 段落标签 浣溪沙 一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。 ,例2, 段落标签 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 ,水平线段,这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。有三个属性： size 水平线的宽度 width 水平线的长，用占屏幕宽度的百分比或象素值来表示 align 水平线的对齐方式，有LEFT RIGHT CENTER三种 noshade 线段无阴影属性，为实心线段,线段粗细的设定, 线段粗细的设定 这是第一条线段，无size设定，取
7、内定值SIZE=1来显示 这是第二条线段，SIZE=5 这是第三条线段，SIZE=10 ,线段长度的设定, 线段长度的设定 这是第一条线段，无WIDTH设定，取WIDTH内定值100%来显示 这是第二条线段，WIDTH=50(点数方式) 这是第三条线段，WIDTH=50%(百分比方式) ,线段排列的设定, 线段排列的设定 这是第一条线段，无ALIGN设定，(取内定值CENTER显示) 这是第二条线段，向左对齐BR 这是第三条线段，向右对齐 ,无阴影的设定, 无阴影的设定 这是第一条线段，无NOSHADE设定，取内定值阴影效果来显示 这是第二条线段，有NOSHADE设定 ,文字的大小设置,提供设
8、置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为17，其中缺省值为3。我们可以SIZE属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。, 字号大小size=7的字体 size=6的字体 size=5的字体 size=4的字体 size=3的字体 size=2的字体 size=1的字体 size=-1的字体 ,文字的字体与样式,HTML4.0提供了定义字体的功能，用FACE属性来完成这个工作。FACE的属性值可以是本机上的任一字体类型，但有一点麻烦的是，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你
9、预先设计的风格。 ,字体 欢迎 欢迎 欢迎 欢迎光临 Welcome Welcome ,丰富多彩的文字样式,为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下:,字体样式黑体字 斜体字加下划线大型字体 小型字体 表示强调，一般为斜体 特别强调，一般为粗体 用于引证、举例，一般为斜体 正常上标 正常下标 删除线 ,文字的颜色,文字颜色设置格式如下： 这里的颜色值可以是一个十六进制数(用“#”作为前缀)，也可以是以下16种颜色名称。,实例,文字的颜色 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界 色彩斑斓的世界
10、 色彩斑斓的世界 ,位置控制,通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。 基本语法如下：#leftrightcenter,例, 位置控制 你好! 你好! 你好! ,另外，ALIGN属性也常常用在其它标签中，引起其内容位置的变动。 如： H1 ALIGN=# #leftrightcenter,无序号列表,无序号列表使用的一对标签是 每一个列表项前使用。其结构如下所示：第一项 第二项 第三项,例,无序列表 这是一个无序列表： 国际互联网提供的服务有： WWW服务 文件传输服务 电子邮件服务 远程登录服务 其它服务 ,序号列表
11、,序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示：第一项 第二项 第三项 ,例子,有序列表 这是一个有序列表： 国际互联网提供的服务有： WWW服务 文件传输服务 电子邮件服务 远程登录服务 其它服务 ,定义性列表,定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。在应用中，列表项使用标签标明，说明性文字使用表示。在定义性列表中，还有一个属性是COMPACT,使用这个属性后，说明文字和列表项将显示在同一行。其结构如下所示：第一项 叙述第一项的定义 第二项 叙述第二项的定义 第三项
12、 叙述第三项的定义 ,定义性列表 这是一个定义性列表： WWWWWW是全球信息网(World wide web)的缩写，也有人称之为3W、W3、Web。 Hyper TextHyper Text是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散在各地的数据。 ,表格的基本结构,. 定义表格 . 定义标题 定义表行 定义表头（一般用于首行或首列） 定义表元（表格的具体数据）, 姓名 性别 年龄 王林 男 25,表格的标题,表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。 设置标题位于表格上方：. 设置标题位于表格下方：. ,表格
13、尺寸设置,表格的大小 一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。,边框尺寸设置,边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。 如： 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,例2, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,例3, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,格间线宽度,格与格之间的线为格
14、间线，它的宽度可以使用中的CELLSPACING属性加以调节。格式是：#表示要取用的像素值,例, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,内容与格线之间的宽度,我们还可以在中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为：#表示要取用的像素值,例, 定货单 苹果香蕉葡萄 200公斤200公斤100公斤 ,表格内文字的对齐/布局,表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上
15、比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。, #=left, center, right #=top，middle，bottom，baseline,左右排列, 居左居中居右 A B C ,上下排列, 上齐居中 下齐基线 A B CD ,表格的颜色,在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。 表格的背景色彩 行的背景色彩 表元的背景色彩 或 #=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gr
16、ay, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua,例子, 彩电 冰箱 家电 AB ,文件之间的链接,超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其它的页面、图象或者服务器。一个链接的基本格式如下： 链接文字 标签表示一个链接的开始，表示链接的结束； 属性“HREF”定义了这个链接所指的地方； 通过点击“链接文字”可以到达指定的文件。 中央电视台,链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。,本地链接,对同一台机器上
17、的不同文件进行的连接称为本地链接，采用绝对路径或相对路径来指示一个文件。 绝对路径表示方法 file:/D|/123.jpg http:/ 相对路径表示方法 /123.jpg abc/we/wew/123.jpg,一般情况下，我们是不用本机绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，资源地址用户将可能无法访问到。所以我们最好写成相对路径，避免了重新修改文件资源路径的麻烦。,URL链接,如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外
18、界沟通来存取信息。,URL链接的形式是： 协议名：/主机.域名路径文件名 其中协议包括：file 本地系统文件 http WWW服务器 ftp ftp服务器 telnet 基于TELNET的协议 mailto 电子邮件 news Usenet新闻组 gopher GOPHER服务器 wais WAIS服务器,目录链接,前面所谈的资源地址，只是单纯的指向一份文件，但是，对于直接指到某文件上部、下部或是中央部分，以上方法却是无法做到的。然而，我们要这样做，也并不是毫无办法。我们可以是使用目录链接。,制作目录链接方法是 首先把把某段落设置为链接位置，格式是：A NAME=“链接位置名称“ 在调用此链
19、接部分的文件，定义连接：链接文字 如果是在一个文件内跳转，文件名可以省略不写。,插入图形,超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。,超文本支持的图象格式一般有X Bitmap(XBM)、GIF、JPEG 三种，所以我们对图片处理后要保存为这三种格式中的任何一种，这样才可以在浏览器中看到。 插入图象的标签是，其格式为：,SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中UR
20、L地址表示方法。 例： IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大小显示。,图形与文字的对齐排列,ALIGN=top ALIGN=middle ALIGN=buttom ALIGN=texttop ALIGN=baseline ALIGN=left ALIGN=right 效果,图文之间的距离设置,在HTML文件里图形水平位置的配置，可由HSPACE属性来完成，其垂直位置的配置，由VSPACE来完成。 效果,播放音乐,HTML除了可以插入图形之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式有：MIDI
21、音乐、WAV音乐、AU格式。另外在利用网络下载的各种音乐格式中，MP3是压缩率最高，音质最好的文件格式。,将音乐做成一个链接，只需用鼠标在上面单击，就可以听到动人的音乐了，这样做的方法很简单： 乐曲名 music 例子,自动载入音乐,我们是借助链接来实现网上播放音乐这一功能的，我们还可以让音乐自动载入，你可以让它出现控制面板或当背景音乐来使用。基本语法：属性 SRC=“FILENAME”设定音乐文件的路径 AUTOSTART=TRUE/FALSE是否要音乐文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE,LOOP=TRUE/FALSE设定播放重复次数，LOOP=6表示重复
22、6次，TRUE表示无限次播放，FALSE播放一次即停止。 STARTIME=“分:秒“设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20 VOLUME=0-100设定音量的大小。如果没设定的话，就用系统的音量。 WIDTH HEIGHT设定控制面板的大小 HIDDEN=TRUE隐藏控制面板 CONTROLS=CONSOLE/SMALLCONSOLE设定控制面板的样子,实例1, 播放音乐 作为背景音乐来播放。 ,实例2, 播放音乐 出现控制面板了，你可以控制它的开与关，还可以调节音量的大小。 ,IE中的背景音乐,另外，还有一种插入背景音乐格式，不过只有在IE浏览器中才可以听到
23、。#=循环数,实例,播放音乐 ,播放视频,用浏览器可以播放的格式有：MOV格式、AVI格式、WmV格式、rm格式等。,链接一个视频文件,将视频文件做成一个链接的方法： 视频名称,实例, 链接一个视频文件唐山 ,自动载入视频,与音乐的播放一样，我们可以使用EMBED标签播放视频，属性 SRC=“FILENAME“ 设定文件的路径 AUTOSTART=TRUE/FALSE是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE,LOOP=TRUE/FALSE设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。 STARTIME=“分:秒
24、“设定开始播放时间，如20秒后播放写为STARTIME=00:20 VOLUME=0-100设定音量的大小。如果没设定的话，就用系统的音量。 WIDTH HEIGHT设定控制面板的大小,实例 效果,播放视频,学习HTML的方法,根据本人学习体验，总结了几点方法供参考： 对于难记的属性不必强行记忆，在用到的时候翻一下语法手册，多用几次就会熟练掌握了。 开始可以先选择几个不错的网页形式加以模仿。 看到好的网页，可以在浏览器的“编辑”菜单中选择“源文件”，这时我们就可以看到源程序， 学习别人制作网页的一些方法和技巧了，有时候通过这种办法可以学到书本上没有的东西，一些新出现的功能也可以率先出现在你的课件中了。,
