《网页设计》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的基本格式 html文件包括两部分：标题和正文。 基本格式如下： 标题部分 正文部分 ,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 水平线 标记用来在网页中生成一个水平线，从而将不同内容的信息分开，使文本看起来清晰、明确。通过设置标记的属性，可以控制水平分隔线的样式。,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 处理文本,2.3 处理文本,【例2.8】超链接示例（覆盖原来窗口）, 超链接 360安全浏览器 预格式化文本 ,2.3 处理文本,2.3.9 超链接示例（开一个新的窗口） 开一个新的（浏览器）窗口（target window）的语法为： 热点文字 【例2.9】开一个新窗口 开一个新窗口 第一个网页 ,2.4 处理图片,网页中插入图片用单标记,当浏览器读取到标记时，就会显示此标记所设定的图像。如果要对插入的图片进行修饰，仅仅用这一个属性是不够的，还要配合其它属性来完成。的格式及一般属性设定如下： ,2.4 处理图片,src: 图像的url的路径 width:宽度，通常只设为图片的真实大小以免失真，改变图片大小最好用图形工具 height:高度 hspace:水平间距 vspace:垂直间距 border:边框,2.4 处理图片,alt: 提示文字 align:图像和文字之间的排列属性 lowsrc:设定低分辨率图片，若所加入的是一种很大的图片，可先显示图片。 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下拉选择框 下拉选择框允许你在一个有限的空间设置多种选项。 其中name属性定义下拉选择框的名称，size属性定义下拉选择框的高度（即行数