《网页设计》PPT教学课件-第2章 HTML语言.ppt

第2章 html语言 学习目的与要求 通过本章学习了解html的发展历史，掌握html的基本 格式、如何处理文本、图像，修饰网页，设计表格和表 单，了解样式表和框架的使用。 考核知识点与考核要求 识记：html含义、制定者等基本知识，表示文档结构 、段落、分行、格式、链接、图像、表格、字体、表单 、样式表和框架等的标记。 应用：综合使用各种html标记设计常见的网页形式。 2.1 什么是html html(hyper text markup language )即超文本标记语 言，是一种用来制作超文本文档的简单标记语言。 所谓超文本， 是因为它可以加入图片、声音、动画、影 视等内容，事实上每一个html文档都是一种静态的网 页文件，这个文件里面包含了html指令代码，这些指 令代码并不是一种程序语言，它只是一种排版网页中资 料显示位置的标记结构语言，易学易懂。 用html编写的超文本文档为html文档，它能独立于各 种操作系统平台，自1990年以来html就一直被用作万 维 2.1 什么是html 网的信息表示语言，使用html语言描述的文件，需要 通过web浏览器显示出效果。 通过html可以表现出丰富多彩的设计风格、实现页面 之间的跳转、展现多媒体的效果。 html只是一个纯文本文件。创建一个html文档，只需 要两个工具：html编辑器和web浏览器。html编辑 器是用于生成和保存html文档的应用程序。 2.2 html的基本格式 2.2.1 第一个html例子 【例2.1】第一个html例子 开始标记 第一个网页 头标部分 欢迎进入html世界！ 正文内容 结束标记 2.2 html的基本格式 2.2.2html的基本格式 l html文件包括两部分：标题和正文。 l 基本格式如下： 标题部分 正文部分 2.3 处理文本 2.3.1段落 由段落标记所标识的文字，代表同一个段落的文字 。不同段落间的间距等于连续加了两个换行符，即要隔 一行空白行，用以区别文字的不同段落。它可以单独使 用，也可以成对使用。 2.3 处理文本 【例2.2】段落标记的使用 段落标记的使用 这是第一段 这是第二段 这是第三段 2.3 处理文本 2.3.2 分行 使用标记后不同段之间留有空白行，要使各行之间 没有空白行，我们可以使用换行标记。 【例2.3】使用分行标记 使用分行标记 2.3 处理文本 无换行标记：白日依山尽，黄河入海流。欲穷千里目，更上一层楼 。 有换行标记：白日依山尽,黄河入海流。欲穷千里 目，更上一层楼。 2.3.3预格式化文本（原样显示文字） 要保留原始文字排版的格式，就可以通过预格式化文本 标记实现，方法是把文字排版内容前后分别加上 起始标记和结尾标记 2.3 处理文本 【例2.4】预格式化文本标记 预格式化文本 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。 2.3 处理文本 2.3.4 水平线 标记用来在网页中生成一个水平线，从而将不 同内容的信息分开，使文本看起来清晰、明确。通 过设置标记的属性，可以控制水平分隔线的样 式。 属性参数功能单位默认值 size设置水平分隔线的粗细 pixel(像素 ） 2 width设置水平分隔线的宽度 pixel(像素 ）、% 100% align left center right 设置水平分隔线的对齐 方式center color设置水平分隔线的颜色black noshade取消水平分隔线的3d阴影 2.3 处理文本 【例2.5】水平线标记 水平分隔线使用 水平线标记是单独使用的标记 2.3 处理文本 2.3.5 文字的对齐 基本格式：,#=left,center,right 居中对齐标记： 【例2.6】文字的对齐 文字的对齐 2.3 处理文本 左对齐 中对其 右对齐 居中对齐 2.3.6 注释文本 在html文档中可以加入相关的注释标记，便于查找和 记忆有关的文件内容和标识，这些注释内容并不会在浏 览器中显示出来。 注释标记的格式为： 2.3 处理文本 2.3.7 列表 在html中可以使用以下几种类型的列表格式： 无序列表：以开始，结束。在每一个标 记处另起一行，并显示加重符号。全部列表会缩排。 有序列表：以开始，结束。在每一个标 记处另起一行，并显示数字序号。 定义型列表：以开始，结束。定义列表中包 含一系列术语定义对，标记后为被定义的术语， 标记后为被定义的术语的内容。列表自动换行和缩 排。 【例2.7】列表标记的使用 列表标记的使用 北京大学 海南大学 北京大学 海南大学 北京大学 北京大学具有悠久的历史 海南大学 海南大学是一所特区大学 2.3 处理文本 2.3 处理文本 2.3.8 链接 html文件中最重要的应用之一就是超链接，web上网页 是互相连接的，单击超链接的文本或图形就可以连接到 其它页面。超链接除了可连接文本外，也可以连接各种 媒体，如声音、图像、动画，通过它们我们可以享受丰 富多彩的多媒体世界。 2.3 处理文本 链接的格式为：创建连接，其中 href定义了这个链接所指的目标地址。 url（uniform resource locator）称为统一资源定位 ，url可以有两种类型：绝对url和相对url。 绝对路径，如： 相对路径，如：news/index.html 2.3 处理文本 1.绝对路径 绝对路径：包含了标识internet上的文件所需要的所有信 息。文件的链接是相对原文档而定的。包括完整的协议 名称、主机名称、文件夹名称和文件名称。 格式为：通讯协议：/服务器地址：通讯端口/文件夹位 置/文件名 2.3 处理文本 2. 相对路径 相对路径是以当前文件所在路径为起点，进行相对文件 的查找。一个相对的url不包括协议和主机地址信息， 表示它的路径与当前文档的访问协议和主机名相同，甚 至有相同的目录路径。通常只包含文件夹名和文件名， 甚至只有文件名。可以用相对url指向与源文档位于同 一服务器或同文件夹中的文件。此时，浏览器链接的目 标文档处在同一服务器或同一文件夹下。 2.3 处理文本 如果连接到同一目录下，则只需输入要连接文件的名称 。 如果要连接到下级目录中的文件，只需先输入目录名， 然后加“/”,再输入文件名。 如果要连接到上一级目录中文件，则先输入”/”，再输入 文件名 2.3 处理文本 相对路径名含义 href=“shouey.html”shouey.html是本地当前路径下的文件 href=“web/shouey.html” shouey.html是本地当前路径下称作“web”子目 录下的文件 href=“/shouey.html” shouey.html是本地当前目录的上一级子目录下 的文件 href=“/shouey.html” shouey.html是本地当前目录的上两级子目录下 的文件 2.3 处理文本 【例2.8】超链接示例（覆盖原来窗口） 超链接 360安全浏 览器 预格式化文本 2.3 处理文本 2.3.9 超链接示例（开一个新的窗口） 开一个新的（浏览器）窗口（target window）的语法为： 热点文字 【例2.9】开一个新窗口 开一个新窗口 第一个网页 2.4 处理图片 网页中插入图片用单标记,当浏览器读取到 标记时，就会显示此标记所设定的图像。如果要对插入 的图片进行修饰，仅仅用这一个属性是不够的，还要配 合其它属性来完成。的格式及一般属性设定如下 ： 2.4 处理图片 usrc: 图像的url的路径 uwidth:宽度，通常只设为图片的真实大小以免失真，改变 图片大小最好用图形工具 uheight:高度 uhspace:水平间距 uvspace:垂直间距 uborder:边框 2.4 处理图片 ualt: 提示文字 ualign:图像和文字之间的排列属性 ulowsrc:设定低分辨率图片，若所加入的是一种很大的图 片，可先显示图片。 2.4.1 插入图片 在网页中插入图片使用标记来实现，其格式为： 2.4 处理图片 【例2.10】插入图片示例 在网页中插入图片 2.4 处理图片 2.4.2 改变图片大小 【例2.11】改变图片大小 改变图片大小 2.4 处理图片 2.4.3 图文混排 ，#=left,middle,right 【例2.12】图文混排 图文混排 2.4 处理图片 html（hypertext mark-up language）即超 文本标记语言或超文本链接标示语言，是目前 网络上应用最为广泛的语言，也是 构成网页文档的主要语言。 html文本是由html命令组成的描述性文本 ，html命令可以说 明文字、图形、动画、声音、表格、链接等。 2.5 修饰网页 设置背景图案 设置背景颜色 设置字体颜色 未点击的链接的颜色 正单击的链接的颜色 已经访问过的链接的颜色 2.5 修饰网页 更改字体的颜色 其中#=#rrggbb，表示颜色。该色彩是16进制的红-绿- 蓝（red-green-blue，rgb)值来表示，16进制的数码有 ：0-9，a-f。如粉色：#ffc0cb ，深蓝色 ：#00008b ，绿黄色 ：#adff2f ，深灰色 ：#a9a9a9 更改字体的大小 其中#表示字号大小，可以取值为17，默认值为3 html提供六级标题字体格式，分别有h1h6表示，格 式为：标题内容 #=16 【例2.13】修饰网页 修饰网页 一号字体 三号字体 五号字体 七号字体 二级标题 四级标题 六级标题 2.6 表格 在html文档中，表格是通过, 标记来完成的，如下表所示： 标记标记描述 用于定义一个表格开始和结束 定义一行标签 ，一组行标签 内可以建立多组由或 标签 所定义的单元格 定义表头单 元格，表格中的文字将以粗体显示，在表格 中也可以不用此标签 ，标记 必须放在标记 内 定义单 元格标记 ，一组标记 将建立一个单元格， 标记 必须放在标记 内 在一个最基本的表格中，必须包含一组标记， 一组标记和一组标记或标记 标记的属性 表格边框显示状态frame的值的设定 表格是按行和列（单元格）组成的，一个表格有几行组 成就要有几个行标记，行标记用它的属性值来修饰 ，属性是可选的。 标记的属性 和的属性 【例2.15】表格 2-15.txt 2.7 表单 表单在网页中的作用不可小视，主要负责数据采集的功 能，比如你可以采集访问者的名字、email地址、调查表 、留言簿等，它是与用户交互信息的重要手段。 一个表单至少应该包括说明性文字、用户填写的资料、 提交和重填按钮。一个表单有三个基本组成部分： 2.7 表单 表单标签：这里面包含了处理表单数据所用cgi程序的 url以及数据提交服务器的方法。 表单域：包含了文本框、多行文本框、单选框、复选框 、下拉选择框等 表单按钮：包括提交按钮、重填按钮和普通按钮，用于 将数据传送到服务器上的cgi脚本或者取消输入。 2-8.txt 2.7 表单 2.7.1 表单按钮 提交按钮：用来将输入的信息提交到服务器。 其中type=“submit”定义提交按钮；name属性定义提交按 钮的名称；value属性定义按钮的显示文字。如： 重填按钮：用来重置表单 ，如： 2.7 表单 普通按钮：用来控制其他定义了处理脚本的处理工作。 其中onclick属性也可以是其他的事件，通过指定脚本函 数来定义按钮的行为。如 : 2.7 表单 2.7.2 表单标记 用于申明表单，定义采集数据的范围， 即和 里面包含的数据将被提交到服务器 或者电子邮件里 语法：其中： action=url用来处理提交表单的格式。它可以是一个 url地址或一个电子邮件地址。 2.7 表单 method=get|post：指定数据传送到服务器的方式。post: 将输入数据按照http传输协议中的post传输方式传送到 服务器，用电子邮件接收用户信息采用这种方式。get:将 输入数据加在action的url后面并且把新的url送至服务 器。这是往前兼容的缺省值，这个值由于国际化的原因不 赞成使用。 name:用于设定表单的名称。onreset和onsubmit是主要针 对”reset“按钮和”submit“按钮来说的，分别设定了在按下 相应的按钮之后要执行的子程序。 2.7 表单 target=“”指定提交的结果文档显示的位置。_blank：在 一个新的、无名浏览器窗口调入指定的文档；_self：在 指向这个目标的元素的相同的框架中调入文档；_parent ：把文档调入当前框的直接的父frameset框中；_top： 把文档调入原来的最顶部的浏览器窗口中(因此取消所有 其它框架)。如： ，表示表单将 向/test.asp以post的方式提交，提 交的结果在新的页面显示。 2.7 表单 2.7.3 文本框 文本框是一种让访问者自己输入内容的表单对象，通常 被用来填写简短的回答，如姓名等。 其中type=“text” 定义单行文本输入框；name 属性定义文本框的名称，要保证数据的准确采集，必须 定义一个独一无二的名称；size属性定义文本框的宽度 ，单位是单个字符宽度。maxlenghth属性定义最多输入 的字符数，value属性定义文本框的初始值。如： 2.7 表单 2.7.4 多行文本框 也是一种让访问者自己输入内容的表单对象，只不过能 让访问者填写较长的内容。 其中name属性定义多行文本框的名称；cols定义多行文 本框的宽度，单位是单个字符宽度；rows属性定义多行 文本框的高度； 2.7 表单 wrap属性定义输入内容大于文本域时显示的方式，可选 值如下：默认值是文本自动换行，off：不自动换行，当 输入的内容超过文本域右边界时，文本将向左滚动，必 须用return才能将插入点移到下一行；hard：自动硬回车 换行，换行标记一同被传送到服务器中去；soft：自动软 回车换行，换行标记不会传送到服务器中去。如： 2.7 表单 2.7.5 单选框 当需要访问者在待选项中选择唯一的答案时，就需要用 到单选框了。 其中name属性定义单选框的名称，要保证数据的准确采 集，单选框都是以组为单位使用的，在同一组中的单选 框都必须用同一个名称；value属性定义单选框的值，在 同一组中，它们的域值必须是不同的。如： 男 女 2.7 表单 2.7.6复选框 复选框运行在待选项中选中一项以上的选项。每个复选 框都是一个独立的元素，都必须有一个唯一的名称。 其中type=checkbox 定义复选框，name属性定义复选框 的名称，要保证数据的准确采集，必须定义一个独一无 二的名称；value属性定义复选框的值。如： 乒乓球 篮球 足球 2.7 表单 2.7.7下拉选择框 下拉选择框允许你在一个有