1、超文本标记语言 HTMLHTML（ Hyper Text Markup Language，超文本标记语言）是表示网页的一种规范（或者是一种标准），它通过标记符定义了网页内容的显示格式。在文本文件的基础上，增加了一系列描述文本格式、颜色等的标记，再加上声音、动画甚至视频等等，形成精彩的画面。 超文本标记语言 HTML 主要内容一 . HTML基本语法与基本结构 二 . 文本格式的应用 三 . 在网页中使用图片 四 . 在网页中使用超链接 五 . 表格与框架的应用 六 . 表单的应用超文本标记语言 HTML 1. HTML基本语法基本语法 开始标记 结束标记网页内容属性及属性值记事本2. HTML
2、文档的编辑环境网页编辑软件记事本一 . HTML基本语法与基本结构超文本标记语言 HTML3. HTML文档的基本结构网页标题，显示在浏览器的标题栏中 这里是页面上显示的内容。是网页的主要部分。举例超文本标记语言 HTML习题 1写出 HTML文件的总体结构。在 HTML中，标题标记和 标记有何作用。一 . HTML基本语法与基本结构超文本标记语言 HTML 通常文本是网页的主体，所以文本格式的应用就是网页设计过程中最基本、最关键的问题之一，下面将就文本的段落格式、文字的显示效果等问题进行详细的讨论。 记事本二 . HTML文本格式的应用 超文本标记语言 HTML 文本段落格式二 . HTML
3、文本格式的应用 （ 1）标题标记符 （ 2） 分段标记符 （ 3） 换行标记符 （ 4） 水平线标记符 （ 5） 分节标记符 （ 6） 段落居中标记符 超文本标记语言 HTML 文本段落格式二 . HTML文本格式的应用 （ 1） 标题标记符 功能： 设置文档标题， n取 1至 6的整数，结束标记不可省。 1级标题最大。属性： align:设置对齐方式，取值 left | right | center , 缺省值为 left。格式： 标题文字 举例： 超文本标记语言 HTML 文本段落格式二 . HTML文本格式的应用 （ 2）分段标记符 功能： 将文档划分成段落，结束标记 可省略。 属性：
4、align:设置对齐方式，取值 left | right | center, 缺省值为 left。 格式： 文字 举例 1 举例 2 （ 3）换行标记符 功能： 在文档中强制断行，但不分段，无结束标记。格式： 文字 举例超文本标记语言 HTML 文本段落格式二 . HTML文本格式的应用 （ 4）水平线标记符 功能： 在网页中添加粗为 2像素的水平线，无结束标记。 属性： size:水平线的粗细程度，取值为整数，缺省值为 2px。width: 水平线的长度，取值既可以是像素，也可以是百分比。noshade:缺省的水平线为带阴影的 3D线 ,该属性设置不带阴影。color:设置水平线的颜色。al
5、ign:设置对齐方式，取值 left | right | center缺省值 center。格式： 举例 超文本标记语言 HTML 文本段落格式二 . HTML文本格式的应用 （ 5）分节标记符 功能： 文档分节标记符，可将位于 之间的段落设置为一节。设置多个段落对齐，方法为使用 标记符将要设置的段落包起来，然后在DIV标记符中使用 align属性。结束标记不能省。 属性： align:设置对齐方式，取值 left | right | center , 缺省值为 left。 举例： （ 6）段落居中标记符 超文本标记语言 HTML 格式的嵌套原则如果所设置的格式是相容的，则取格式的叠加效果。如
6、果所设置的格式是冲突的，则取最近格式的效果。不同标记符的开始标记和结束标记不能交错举例二 . HTML文本格式的应用 超文本标记语言 HTML 2. 文本的显示效果二 . HTML文本格式的应用 （ 1）字体控制标记符 （ 2） 字体样式标记符超文本标记语言 HTML 2. 文本的显示效果二 . HTML文本格式的应用 （ 1）字体控制标记符 功能： 控制字符的显示样式，结束标记不可省。格式： 文字 size设 置字体大小，取 绝对值时 ，可取 1到 7（ 3为 缺省 值），且其 值 越大，文字 显 示越大；取相 对值时 ， +1表示比默 认 字体大 1号，反之亦然。color 设 置文字的
7、颜 色，默 认值为 黑色，其 值 可取 颜 色名称或十六 进 制 值 。face设 置字体 样 式。可指定一个或几个字体名称 (用逗号隔开 )，中文默 认值为 “宋体 ”，英文默 认 字体 为 “Times New Roman”。 举 例超文本标记语言 HTML 2. 文本的显示效果二 . HTML文本格式的应用 （ 2）字体样式标记符标记 符 功能 标记 符 功能粗体 删 除 线斜体 删 除 线下划 线 下 标大字体 上 标小字体 固定 宽 度常用物理字符样式 超文本标记语言 HTML 2. 文本的显示效果二 . HTML文本格式的应用 常用逻辑字符样式 标记 符 功能网 页设计 者或 维护
8、 者的信息，通常 显 示 为 斜体表示文本属于引用，通常 显 示 为 斜体表示程序代 码 ，通常 显 示 为 固定 宽 度字体表示定 义 了的 术语 ，通常 显 示 为 黑体或斜体强 调 某些字 词 ，通常 显 示 为 斜体表用 户 的 键盘输 入，通常 显 示 为 固定 宽 度字体表示文本 样 本，通常 显 示 为 固定 宽 度字体特 别 强 调 某些字 词 ，通常 显 示 为 粗体表示 变 量，通常 显 示 为 斜体举例超文本标记语言 HTML3. 列表格式 (1) 有序列表(2) 无序列表(3) 定义列表二 . HTML文本格式的应用 超文本标记语言 HTML(1) 有序列表列表项 1列
9、表项 2列表项 3OL type 取 值为 1|A|a|i|I， 缺省 值为 1。（常用）start 列表的数字序列的起始 值 ，取 值为 任意整数。LI type 列表 项 数字序列 样 式，取 值为 1|A|a|i|Ivalue 列表 项 的起始 值 ，以 获 得非 连续 的数字序列，取 值为 任意整数。二 . HTML文本格式的应用 超文本标记语言 HTML(2) 无序列表列表项 1列表项 2列表项 3UL type 设 置无序列表的 项 目符号 样 式，取 值为 disc（实 心 圆 、缺省 值 ） |circle（ 空心 圆 ） |square（方 块 ）。（常用）LI type 设
10、 置列表 项 的 项 目符号 样 式，取 值为 disc（ 实心 圆 、缺省 值 ） |circle（ 空心 圆 ） |square（ 方块 ）。（不常用）二 . HTML文本格式的应用 超文本标记语言 HTML(3) 定义列表定义列表的制作需要以下几个标记符：列表标记符 ， 用来指定定义列表的开始与结尾；术语标记符 ， 用来指定第一层数据；描述标记符 ， 用来指定第二层数据。举例二 . HTML文本格式的应用 超文本标记语言 HTML用 HTML标记设计如图所示的列表。 二 . HTML文本格式的应用 超文本标记语言 HTML 1. Web页 图像基础（ 1）网页中常用的图形文件格式1） G
11、IF格式： (Griphic Interchange Format 图形交换格式 )采用无损压缩算法；可高度压缩图像，但只能包含 256色，因此只适合于线条图以及使用大块纯色的图片；具有透明色的特点；可支持动画效果，即所谓的动画 GIF（ Animated GIF）。2） JPEG格式： (Joint PhotoGraphics Expert， 联合图形专家组图片格式 ) 采用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了，这也是该格式的典型特点，即可以控制图片的压缩比率；能支持几乎所有颜色，因此适合于使用真彩色或平滑过渡的照片和图片；不具有透明色的特点；不支持
12、动画效果。三 . 在 网页中使用图形超文本标记语言 HTML 1. Web页 图像基础（ 1）网页中常用的图形文件格式3） PNG格式： (Portable Networks Graphics， 可移植的网络图片格式 )它适用于任何类型、任何颜色深度的图片；采用无损压缩算法减小文件大小，同时保留图片中的透明区域。4）矢量格式： 前几种格式均为位图格式。所谓位图格式就是指用图片上每一点的信息描述图像，而矢量格式则是用线条和填充色等数学信息来描述图像；矢量图要比位图文件小的多，但表现力丝毫不逊色。支持矢量动画。三 . 在 网页中使用图形超文本标记语言 HTML 1. Web页 图像基础（ 2）常见
13、图形图像处理软件1) Photoshop2) Firework3) Flash（ 3） 网页中使用图像的原则1) 尽可能使图形图像文件小l 使图像的尺寸适当，不可太大l 采用正确的图像格式2) 控制图像的数量和质量3) 合理使用动画三 . 在 网页中使用图形超文本标记语言 HTML2. 标记符三 . 在 网页中使用图形功能： 在网页中插入图片或视频。属性：（ 1）插入图片lsrc:设置图像文件的位置，取值为要插入图像的文件名 （相对路径和绝对路径） 。lalt:表示图像的简单文本，用于不能显示图像或图像显示时间过长时显示文字。 举例超文本标记语言 HTML2. 标记符三 . 在 网页中使用图形
14、（ 2）设置图像的高和宽lwidth:设置图像的宽度，取值为像素数或百分数。lheight: 设置图像的高度，取值为像素数或百分数。（ 3）设置图像边框l border:设置图像边框效果，取值是像素数。（ 4）设置图片周围空白l hspace:设置图像周围水平方向空白。取值为像素数。l vspace: 设置图像周围垂直方向空白。取值为像素数。举例超文本标记语言 HTML2. 标记符三 . 在 网页中使用图形（ 5）设置图像的对齐格式l 图像在页面中的对齐方法： 或举例超文本标记语言 HTML2. 标记符三 . 在 网页中使用图形（ 5）设置图像的对齐格式l 图像与文本的对齐方式align: 控
15、制图像与周围内容的对齐方式。取值如下：top-图像与文本顶端对齐垂 middle-图像与文本底部中间对齐直 absmiddle-图像与文本完全中间对齐bottom(缺省值 )- 图像与文本底部对齐水 left- 图左字右平 right-图右字左 举例 1 举例 2超文本标记语言 HTML2. 标记符三 . 在 网页中使用图形（ 6）图像 映射 的的引用usmap:引用 MAP标记符中定义的映射区。例： 超文本标记语言 HTML2. 标记符三 . 在 网页中使用图形(6) 设置视频播放l src:指定传输视频过程预显示的图片文件名。l dynsrc:指定视频文件名。l start:设置视频开始播放的方式。取值为 fileopen(缺省值 ,达开始播放 )|mouseover(鼠标悬停播放 )。二者可同时使用，用逗号分隔。l loopdelay:播放延时，单位为毫秒。l loop:设置播放循环次数。 “infinite“表示无限次播放。l controls:设置是否有视频播放按钮。例： 举例
