1、第五章,HTML语言（一）,HTML语言概述 HTML文件结构格式 HTML常用标记简介,文件格式标记 排版标记 文字格式标记 列表标记 图像标记 链接标记 影像地图 多媒体页面,HTML语言概述,HTML的特点 HTML: Hypertext Markup Language HTML文档独立于计算机操作平台； 通常以“.html”或“htm”为文件后缀；为纯文本文件；,HTML语言概述,标记 标记通常具有如下结构： 标记分为 成对标记：成对出现，一头一尾（结束标记前要加“/”） 单一标记 标记的书写格式如下： 文件内容 属性的取值应该用双引号引起来 不加引号也不会有问题，但若属性值中有空格，
2、则必须把属性值用双引号引起来,HTML语言概述,保留字符,HTML不支持两个及两个以上的空格,可以利用 “ ” 来建立两个或两个以上的空格效果。,HTML语言概述,颜色 定义字体、页面背景、表格背景及超链接的颜色。通过利用颜色数据来定义这些对象的颜色属性。,HTML语言概述,基本颜色名,HTML语言概述,扩展颜色名：,HTML语言概述,HTML语言概述,长度单位 在编辑HTML文件时，可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性，同时也能用来定义这些对象在网页上的位置等属性,HTML语言概述,长度的表示有两种方式 绝对长度： 单位：像素（pixel） 相对长度： 单
3、位：百分比（） 相对长度描述了对象在浏览器窗口的所占的比例,HTML语言概述,绝对路径和相对路径 绝对路径 文件在硬盘上的真正路径。 例如： D:/myweb/web1.htm D:/images/tx.gif,HTML语言概述,相对路径 目标文件相对当前网页的位置。 / 根目录 ； / 上一级； / 上两级,HTML语言概述,例如： 当前网页文件为web1.htm 同一文件夹中的文件，直接写文件名即可如： web2.htm 下级文件夹中的文件，要加上文件夹名 如：subweb/sub.htm 上级或兄弟文件夹中的文件，使用“/”，表示移到上一级目录， 如：兄弟目录：/images/tx.gi
4、f 上级目录：/a.htm,HTML语言概述,当前网页文件为sub.htm 上两级文件夹中的文件，使用“/”，表示移到上两级目录， 如：/images/tx.gif,HTML文档结构格式,完整的HTML文档结构模板, Header elementbody of Document,1.缩进式写法 2.成对标记一次要把一对标记写好,HTML文档结构格式,简单的HTML例子哲 理 莲 魂搜索引擎：Google,HTML常用标记简介 (一)文件格式标记,文件主体标记标记 的属性可以分为三类： 背景属性： BGCOLOR 背景色 BACKGROUND 背景图案 BGPROPERTIES 背景不随前景滚
5、动（ fixed） 文字属性： TEXT 正文文字颜色 LINK 链接文字颜色 ALINK 活动链接文字颜色 VLINK 已访问链接文字颜色,HTML常用标记简介(一)文件格式标记 文件主体标记,留白属性 LEFTMARGIN 页面左侧的留白距离 TOPMARGIN 页面顶部的留白距离,HTML常用标记简介(一)文件格式标记 文件主体标记, 简单的HTML例子-哲 理 莲 魂 -搜索引擎：Google,HTML常用标记简介 （二）排版标记,标题格式标记 n：1-6 align属性：left、center、right,此为一级标题此为二级标题此为三级标题此为四级标题此为五级标题此为六级标题此为正
6、常文本 ,HTML常用标记简介（二）排版标记,强制换行标记 HTML无法用多个回车、空格、Tab键来调整文档段落的格式，可用HTML的标记来强制换行、分段。,这里的两行显示的是两行吗？换行要用空行。 ,HTML常用标记简介（二）排版标记,段落格式标记 设置段落标记 属性：align, 这个段落左对齐这个段落在中间这个段落在右边 ,HTML常用标记简介（二）排版标记 设置段落格式标记,预排格式标记, 文房四宝中国书法的工具和材料基本上是由笔、墨、纸、砚 来构成的，人们通常把它们称为“文房四宝“。这大致是说它们是文人书房中必备的四件宝贝。因 为中国古代文人基本上都是或能书，或能画，或既能 书又能画
7、的，是离不开笔墨纸砚这四件宝贝的。,HTML常用标记简介（二）排版标记 段落格式标记,分区显示标记 它的最终目的是给设计者另一种组织能力，有class、style、title、ID等属性。应用于样式表会更显威力 DIV 标记符可用于为文档分节，以便为文档的不同部分应用不同的段落格式,HTML常用标记简介（二）排版标记,水平线标记 属性：align、size(2pix)、width、noshade,HTML常用标记简介（二）排版标记 水平线标记, 欢迎光临花卉主页-诗意荷花-记得绿罗裙、珍珠缀相思 雨下着，荷叶上的雨流动着、滚落着。光 的折射使叶边的水珠晶莹剔透，娇翠欲滴 ,HTML常用标记简介
8、 （三）文字格式标记,文字格式标记 属性 size:取值1-7，取1时最小，缺省为3 face、color, 这是一号宋体红色字这是三号黑体蓝色字这是五号隶书黑色字 ,HTML常用标记简介（三）文字格式标记,字型标记, 小字体 ,HTML常用标记简介 （四）列表标记,三种列表： 无序列表： 有序列表：. 定义列表：无序列表和有序列表的列表项都用 标记,HTML常用标记简介（四）列表标记,无序列表标记 属性：type。其属性值见下表。, 第一列表项 第二列表项第三列表项,HTML常用标记简介（四）列表标记,有序列表标记 属性：type(数字序列样式)、start(数字序列起始值) 属性：type
9、(数字样式)、value(一个新的数字序列起始值，以获得非连续性的数字序列) 有序列表的 type 属性值,HTML常用标记简介（四）列表标记 有序列表标记,HTML常用标记简介（四）列表标记 有序列表标记, 第一列表项第二列表项第三列表项第一列表项第二列表项第三列表项第一列表项第二列表项第三列表项,HTML常用标记简介（四）列表标记,定义列表标记 用于是定义术语，它是一种在列表的各项前没有任何数字和符号的缩排列表。 :定义列表标记符, 必须有结束标记 :定义术语标记符, 结束标记可以省略 :定义描述标记符, 结束标记可以省略,HTML常用标记简介（四）列表标记 定义列表标记, 第一项列表其定
10、义是第二项列表其定义是第三项列表其定义是,HTML常用标记简介 (五)图像标记,图象标记 浏览器通常支持GIF和JPEG格式的文件 属性： alt、src、height、width、border、align、hspace、vspace,HTML常用标记简介（五）图像标记 图像标记, 图象顶部和文本对齐图象中部和文本对齐 图象底部和文本对齐图象在屏幕左边图象在屏幕右边图象的修饰,HTML常用标记简介 (六)链接标记,建立超链接 超链接的实现方法： 某个文本串和其他网页的地址（URL）联系在一起 某幅图像和其他网页的地址（URL）联系在一起,HTML常用标记简介（六）链接标记 建立超链接,超链接包
11、括： 同一文件中的链接 同一文件不同部分的链接 不同文件间的链接本地机器中文件链接 链接到其他文件 链接到其他文件的某处 其他Web服务器上文件链接,HTML常用标记简介（六）链接标记,链接标记 属性： href=“ 指定超级链接指向的目标文件的相对或绝对位置（ URL） name=“ 给当前文档中的一个位置取名（书签），便于长文档的快速定位 target=“ 指定链接的文档在哪个框架或窗口中显示 title=“ 在浏览器中鼠标指向链接时显示的提示文本,HTML常用标记简介（六）链接标记 超链接标记,href属性 绝对URL包含标识Internet上的文件所要的全部信息相对URL： 当前网页为
12、web1.htm ,HTML常用标记简介（六）链接标记 超链接标记,name属性 使用name属性可以在一个较长的文档中建立命名的位置点，相当于书签。位置点的名称称为书签名或锚名。 例如：定义书签：使用网络打印机 如果是在同一文档中跳转，则直接用如下链接： 其他网页中链接： ,HTML常用标记简介（六）链接标记 超链接标记,target属性 target属性设定链接要显示的窗口。可选值为： target=“_blank” 或 target=“new” 打开新的浏览窗口。 target=“_parent” 在父窗口或框架集中打开。 target=“_self” 在当前窗口中打开。 target=
13、“_top” 将框架中的超链接，显示在没有框架的窗口中。,HTML常用标记简介（六）链接标记 超链接标记,超链接的实现方法 文本超链接 Google 电子邮件超链接 有和我们联系 图象超链接 ,HTML常用标记简介（六）链接标记 超链接标记,超链接分为： 同一文件中的链接(同一文件不同部分的链接) 热点 不同文件间的链接本地机器中文件链接 链接到其他文件 热点 链接到其他文件的某处 热点,HTML常用标记简介（六）链接标记 超链接标记,其他Web服务器上文件链接 演示实例：html-6.htm、html-6-1.htm、html-6-2.htm,HTML常用标记简介 (七)影像地图,定义映射区
14、域 ：标记的属性取值,HTML常用标记简介（七）影像地图,对映射区域进行引用： ,HTML常用标记简介（七）影像地图 对映射区域进行引用,例如： 演示实例：html-7-1.htm,HTML常用标记简介 (八)多媒体页面,背底音乐 能加入到网页中的音乐文件格式有：MIDI、MP3、WMA、RAM、WAV、AIFF、AU等。 标签： 属性 src=“”：指定音乐文件的位置及文件名 loop=“n”：指定音乐重复播放次数；n= -1/infinite 表示一直循环 将插入到 或标签之间 注意，只适用于IE 演示实例：html-8-1.htm,HTML常用标记简介（八）多媒体页面 背底音乐,标签：插入到标签之间 适用于IE、Netscape,HTML常用标记简介（八）多媒体页面 视频,视频 标签 打开浏览器本地播放器播放媒体 格式： 点击播放视频媒体 点击播放音频媒体 标签 在网页中播放视频，不带控制面板 ,HTML常用标记简介（八）多媒体页面 视频,标签 可使媒体在网页中播放，可带控制面板 格式： 演示实例：html-8-2.htm,HTML常用标记简介（八）多媒体页面,动画 标签,
