网页设计与制作教程 第6章 HTML语言

网页设计与制作教程 第 1章 网页设计与制作基础 第 6章 第 1页 本章概述 本章的学习目标 主要内容 网页设计与制作教程 第 1章 网页设计与制作基础 本章概述 目前大部分的网页都是用 多网页制作工具软件，比如 以自动生成一些固定格式的网页元素，因此学习 是掌握其基本语法格式后应用到动态程序中去。在学习本章的过程中，不要一味去死记一些标识内容，章介绍 签和属性以及常用标签的应用如文本标签、图像标签、超链接标签等。 第 2页 网页设计与制作教程 第 1章 网页设计与制作基础 本章的学习目标 掌握 掌握 掌握 了解 第 3页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 4页 网页设计与制作教程 第 1章 网页设计与制作基础 即超文本链接标记语言。它是在互联网发布超文本文件（通常所说的网页）的通用语言。所谓超文本，就是它可以加入图片、声音、动画、影视等内容，每一个 个文件里面包含了 些标记并不是一种程序语言，它只是一种排版网页中资料显示位置的标记语言。 第 5页 网页设计与制作教程 第 1章 网页设计与制作基础 构建网页的一种基本单位，是由 成的。 第 6页 网页设计与制作教程 第 1章 网页设计与制作基础 也就是网页，是由成的，互联网的所有内容都是由一个个 网页其实就是 个 片这些内容，还包含一些 文称为“标签”，也有的称为“标记”。 第 7页 网页设计与制作教程 第 1章 网页设计与制作基础 件头”和“文件体”两部分，在文件头中，对 文件体中才是要显示的各种文档信息， 第 8页 网页设计与制作教程 第 1章 网页设计与制作基础 签在一对尖括号之间，格式如下所示： 标签分为成对标签和非成对标签，如： 、 、 等属于成对标签， 、 等属于非成对标签。标签忽略大小写，书写格式非常灵活 。 可使用标签的属性来进一步限定标签，一个标签可以有多个属性项，各属性项的次序不限定，各属性项间用空格来进行分隔。如下所示： 第 9页 网页设计与制作教程 第 1章 网页设计与制作基础 性可以扩展 像描述一个人，可以用性别、身高和体重等属性来细化。属性通常由属性名和属性值组成，语法格式如下 属性通常写在开始标签里面，属性值一般用双引号标签起来（注意：是英文半角状态下的双引号），多个属性并列的时候，用空格间隔。 第 10页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 11页 网页设计与制作教程 第 1章 网页设计与制作基础 文本标签 文字属性标记 标题、段落标记 第 12页 网页设计与制作教程 第 1章 网页设计与制作基础 文字属性标记 标题文字标记 标记用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。 标题标记的格式： 例 6各级标题的设定 第 13页 网页设计与制作教程 第 1章 网页设计与制作基础 文字属性标记 文字格式控制标记 标记用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。 标记的格式： 第 14页 网页设计与制作教程 第 1章 网页设计与制作基础 文字属性标记 例 6置文字的字体、大小和颜色。 第 15页 网页设计与制作教程 第 1章 网页设计与制作基础 文字属性标记 特定文字样式标记 例 6设置文字的字形或字体 第 16页 网页设计与制作教程 第 1章 网页设计与制作基础 标题、段落标记 换行标记 换行标记是个单标记，也叫空标记，不包含任和内容，在 记，该标记之后的内容将显示在下一行。 换段落标记 由 标记所标识的文字，表明是同一个段落的文字。两个段落间的间距等于连续加了两个换行符，也就是要隔一行空白行。 原样显示文字标记 要保留原始文字排版的格式，就可以通过 标记来实现，方法是把制作好的文字排版内容前后分别加上始标记 和尾标记 。 第 17页 网页设计与制作教程 第 1章 网页设计与制作基础 标题、段落标记 居中对齐标记 在页面中使用 标记进行居中显示， 是成对标记，在需要居中的内容部分开头处加 ，结尾处加 。 水平分隔线标记 标记是单独使用的标记，是水平线标记。 特殊字符 在 些字符没办法直接显示出来，例如“ ”。使用特殊字符可以将键盘上没有的字符表达出来，而有些 浏览器在解析 如“ 第 19页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 20页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标签 图像会使网页更加生动，可以描述更复杂的问题。 签：代表 定网页图片的方法有以下几种： 设定 景颜色：使用. 设定图片：使用 标记。 设定地图：使用 . 第 21页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记基本知识 图像标签语法 像）的缩写，定义图像的语法如下： 图像标签 和源属性 替换文本属性 提示文字属性 性 第 22页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记基本知识 例 6在网页中显示图像 和动画图像 。 第 23页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记基本知识 例 6将其他文件夹或服务器的图片显示到网页中。 第 24页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记基本知识 例 6向 面添加背景图片。 例 6将图片调整到不同的尺寸。 例 6将图像作为一个链接使用。 第 25页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记基本知识 网页设计中常见的图像格式简介 最多支持 256色，支持透明，支持多帧动画显示效果，可以使用在品质较差或者需要透明或动画显示的情况。 支持多种颜色，可以有很高的压缩比，使用了有损压缩，不支持透明，不支持动画效果，可以使用在品质要求较高的场合：风景、写真等。 是一种新的图片技术，可以表现品质比较高的图片，使用了无损压缩，支持透明，不支持动画。 第 26页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记应用技巧 网页设计给图片加边框 例 6给图片加边框后效果如图所示。 给图片加动态说明和替代文字 例 6给图片加动态说明和替代文字。 第 27页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记应用技巧 图像与文字混排 图文混排主要是设置 动态替换图像 例 6当鼠标放在图片上时，图片会自动更换，鼠标离开之后，图片又会恢复原来的样了。 第 28页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记应用技巧 在网页加入影像片断 例 6在 现要在网页中播放。那么源代码是这样的： 第 29页 网页设计与制作教程 第 1章 网页设计与制作基础 图像标记应用技巧 创建图像地图 例 6创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。 第 30页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 31页 网页设计与制作教程 第 1章 网页设计与制作基础 超链接标签 超链接概念 链接是超级链接的缩写 ,英文是 就是文本的意思。超文本链接语言（网页）的精髓就是链接，通过链接才可以把世界各地的网页链到一起，成为互联网。 链接语法 超级链接 标记代表一个链接点，是英文 点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像，语法结构如下： 显示的文字 第 32页 网页设计与制作教程 第 1章 网页设计与制作基础 应用技巧 提供下载文件 在新窗口中打开链接的网页 鼠标移到链接，显示一行说明文字 鼠标移到一个链接上弹出一个窗口 链接到本页的指定内容 链接到其它页面的指定内容位置 链接到 链接到图像 第 33页 网页设计与制作教程 第 1章 网页设计与制作基础 应用技巧 例 6链接到图像。 第 34页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 35页 网页设计与制作教程 第 1章 网页设计与制作基础 表格标签 表格是 用其多种属性能够设计出多样化的表格。使用表格可以使页面有很多意想不到的效果，使页面更加整齐美观。 表格的基本结构 第 36页 网页设计与制作教程 第 1章 网页设计与制作基础 表格标签及属性 标签 标签表示一个表格的开始。 标签与 标签 标签表示表格的一行， 标签表示表格的一个单元格。 表格标签的实例 第 37页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 38页 网页设计与制作教程 第 1章 网页设计与制作基础 表单标签 表单在 是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料传到 页的设计者随后就能在 而完成了从用户到作者之间的反馈和交流。 第 39页 网页设计与制作教程 第 1章 网页设计与制作基础 表单中的元素 通按钮 选按钮 选框 拉式菜单 行文本框 行文本框 交按钮 填按钮 第 40页 网页设计与制作教程 第 1章 网页设计与制作基础 设计表单标记 表单标记 表单输入标记 下拉菜单标记 选项标记 多行文本输入标记 第 41页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 42页 网页设计与制作教程 第 1章 网页设计与制作基础 列表标签 在 理的使用列表标记可以起到提纲和格式排序文件的作用。列表分为两类，一是无序列表，一是有序列表，无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标记，在各条列前面均有一符号以示区隔。而有序条列就是指各条列之间是有顺序的，比如从 1、 2、 3， 一直延伸下去。 第 43页 网页设计与制作教程 第 1章 网页设计与制作基础 无序列表 无序列表不用数字标签每个列表项，而采用一个符号标志每个列表项，比如黑圆点、小方块等。无序列表使用的一对标记是 ，每一个列表项前使用 。 例 6无序列表的显示方式 第 44页 网页设计与制作教程 第 1章 网页设计与制作基础 有序列表 有序列表和无序列表的使用格式基本相同，它使用标记 ，每一个列表项前使用 。 例 6有序列表的显示方式 第 45页 网页设计与制作教程 第 1章 网页设计与制作基础 定义列表 定义列表通常用于术语的定义和解释。定义列表由 标签开始， 标签的含义是定义题目，即定义了列表中的项目。术语的解释用 定义，即 标签的含义是定义描述。 例 6定义列表的显示方式 第 46页 网页设计与制作教程 第 1章 网页设计与制作基础 主要内容 本标签 像标签 链接标签 格标签 单标签 表标签 它标签 章小结 第 47页 网页设计与制作教程 第 1章 网页设计与制作基础 其它标签 多视窗口框架 第 48页 网页设计与制作教程 第 1章 网页设计与制作基础 身没有具体的显示效果，由其 过两者在使用方法上存在着很大的差别。 例 6 第 49页 网页设计与制作教程 第 1章 网页设计与制作基础 多视窗口框架 框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。 而所有的框架标记要放在一个 档中。框架集标记所取代，然后通过 的子窗口标记 定义每一个子窗口和子窗口的页面属性。 第 50页 网页设计与制作教程 第 1章