HTML网页设计基础知识学习.ppt

11.HTML概述1.1 简介HTML即超文本标记语言。所谓标记语言是指用标记进行编辑作业的语言，通过标记指定文本或其他对象（如图像、声音等）的表示格式，从而制作成超文本文件。标记是描述HTML文件结构的标识符。它规定了HTML文件的逻辑结构，并且控制网页的显示方式。HTML的标记不区分大小写，例如和等价。1）标记的功能）标记的功能 HTML标记的功能是，标记文件结构，设定文字、图像、表格、表单等在浏览器上的显示风格和位置，嵌入脚本，实现动态网页及多媒体等。21.HTML概述2）标记的构成）标记的构成标记是由符号、和括在其中的命令字符串组成。标记有双标记和单标记两种。双标记包括开始标记和结束标记，必须成对出现。例如，、是文件的开始标记和结束标记；、是网页内容的开始和结束标记。单标记只有开始标记而没有结束标记。例如，标尺线标记只有开始标记而没有结束标记。另外，有的标记例如（分段标记）可以写为双标记、，也可以写为单标记。31.HTML概述3）标记的表示方法）标记的表示方法HTML的标记有下列3种表示方法：a）文本 b）文本 c）：仅用于一些特殊的标记。例如，表示强制换行，它没有与之对应的。4）标记的属性）标记的属性属性是用来修饰说明标记的，放在开始标记内。例如颜色、对齐方式、高度和宽度等。各属性间以空格分隔。41.HTML概述标记的常用属性如下：标记的常用属性如下：a）对齐属性:align（left 左对齐（默认）、center 居中对齐、right 右对齐、justify 两端对齐）b)范围属性（width=像素值或百分比 对象宽度;height=像素值或百分比 对象高度）c)色彩属性（color=#RRGGBB前景色 bgcolor=#RRGGBB背景色）其中，颜色值可以是英文颜色名或十六进制的颜色值。561.HTML概述1.2 HTML文件结构71.HTML概述标记中可以有以下常用属性：background 设置网页背景图案。bgcolor 设置网页背景色。默认为白色。text 设置文本颜色。默认为黑色。link 设置尚未被访问过的超文本链接的颜色，默认为蓝色。vlink 设置已被访问过的超文本链接的颜色，默认为紫色。例如例如:将背景图像设为将背景图像设为photo6.gif，背景色设为绿色。，背景色设为绿色。82.网页的基本元素2.1 网页中的文本使用一般而言，Web网页是由图像、表格及环绕它们的文本组成。网页中文本的文字风格和布局设计在网页设计中非常重要。例如，标题字的大小，是否居中及各级标题的设置，文字字体及颜色的设定，文章分段及段落的风格，页面的整体布局等，都是在网页设计中必须考虑的问题。1.标题标题标记中的n值可取16的整数，取1时文字最大，取6时最小，默认为。92.网页的基本元素【例2-1】标记的应用 软件学院教授简介 定义一条标尺线 张光明教授    张光明教授，男，1940 年10月诞生于河北省石家庄市。张光明教授研究方向 张光明教授研究成果 102.网页的基本元素2.文字大小和颜色1）使用标记使用标记的size属性可以设定一段文章、一个语句、一个单词的文字大小。格式为：一段文章、一个语句、一个单词标记的color属性设定一段文章、一个语句、一个单词的文字颜色。格式为：一段文章、一个语句、一个单词例如，例如，文字段颜色为白文字段颜色为白色色 或或 文字段颜色为文字段颜色为红色红色112.网页的基本元素2）使用标记的text属性标记中的text属性可以设定整个网页文字的颜色，格式为：例如，3.换行和分段1）强制改行强制改行使用标记，位于行的末尾，无结束标记。2）段落段落标记用于分段，位于前段的末尾，并使前段与后段之间加一行空白。段落标记可以省略结束标记。122.网页的基本元素3）标尺线标尺线标记在前、后两个段落之间定义一条标尺线。标记中的width属性用来控制标尺线的长度。例如，线长为50像素宽 线长为屏幕宽度的50%标记的size属性控制标尺线的粗细；noshade属性将标尺线设置为黑色；align属性指定标尺线的位置。例如：右对齐 左对齐 居中（默认）的color属性控制标尺线的颜色。如132.网页的基本元素.文本(或图像)布局1）对齐方式文本或图像 或 文本或图像（n=1,2,3,4,5,6）或 文本或图像（center 居中;right 右对齐;left 左对齐）2）标记当要在许多段落中设置对齐方式时，常使用（层）标记。文本或图像 居中（center 居中;right 右对齐;left 左对齐）142.网页的基本元素2.2 网页中的图像使用1.网页中加入图像使用标记格式为：其中，“图像文件名”可以用绝对路径也可以用相对路径，文件可以是gif、jpg或png类型。“图像文本性说明”用在不能显示图像的浏览器，或浏览器显示图像时间太长时先显示此文字内容。“xxx.htm”指明关于图的详细说明以补充alt属性的简单说明。152.网页的基本元素2.图像的尺寸设定使用标记的width和height属性设定图像的宽和高格式为：其中，x和y可以是像素值，也可以取百分数。例如，162.网页的基本元素3.图像和文本布局图像和文本混排时，图像和文本在垂直方向的对齐及相互间的左右位置关系使用align属性。格式为:文本文本其中，位置参数可以是：top(顶对齐)、middle(中央对齐)、bottom(底边对齐)、left(图像在文本左边)和right(图像在文本右边)。172.网页的基本元素2.3 网页中的列表使用在网页中使用列表，可以清楚地看到定义顺序、信息排序及信息的相对重要性。HTML提供了丰富的列表元素，用于在HTML文档中建立列表。列表中并列的信息(数据)称为项。项前可以添加符号或序号，也可以各项并列而不加任何记号。带序号的列表称为有序列表，带符号的列表称为无序列表，各项并列而不加任何记号的列表称为定义列表。182.网页的基本元素1.无序列表建立无序列表可以使用标记和项目标记;格式为：项目 项目 WWW Browser HTML Home Page 注：无序列表可以嵌套注：无序列表可以嵌套192.网页的基本元素2.有序列表1）创建有序列表在实现应用中，人们更多地使用带序号的列表，以便清楚地表达并列信息的顺序。使用标记，可以实现有序列表。格式为：项目 项目 202.网页的基本元素2）有序列表序号的种类有序列表序号可以设定，在或标记内使用type属性可以设定5种序号，即阿拉伯数字(1)、大小写英文字母(A)和(a)、大小写罗马数字(I)和(i)。格式为：或 说明：省略 type 属性时自动设定为阿拉伯数字。的作用范围为整个标记范围。的作用范围是当前项(行)。212.网页的基本元素3）设定起始序号有序列表的序号可以从任意数字开始。方法是，在标记内使用start属性或在标记内加入value属性。格式为：其中，x为任意整数。注意，的作用域为当前标记，的作用域为从当前项开始直到当前的标记为止的各项。222.网页的基本元素【例2-2】设定序号的种类 大字大字 HTML入门入门 WWW Browser HTML 网页网页 HTML案例教程案例教程 斜体斜体 WWW网页网页 网页文本的布局网页文本的布局 在网页中插入图像在网页中插入图像 列表列表 表格表格 232.网页的基本元素2.4 超文本链接浏览Web页时，我们能够快捷地从一个Web网页跳到另一个相关的Web网页，就是在这些文件之间建立了超文本链接。1.创建网页间的链接建立超文本链接语法格式为:文本或图像注意，必须使用结束标记。href意为超文本引用，URL是一个有效的链接资源的地址，“文本或图像”是在浏览器上显示的热点信息。标记的常用属性：Href:定义一个URL，作为有效的链接资源的地址。Name:指定当前文档内的一个字符串作为链接时的位置名称。Type:指定特定内容的类型。242.网页的基本元素注意，依链接资源存放位置不同，链接可分为全局链接和局部链接。如果资源文件存放在服务器自己的目录中，称为局部链接；与本服务器以外文件的链接称全局链接。在全局链接中，http写入的URL称为绝对路径。例如，热点文本文件之间的局部链接有下面种情况：(1)链接同一目录内的文件。(2)链接下一级目录内的文件。(3)链接上一级目录内的文件。(4)链接同级目录内的文件。252.网页的基本元素标记用来控制文字的移动,例如:文字在移动标记的主要属性有:direction:控制移动方向,可取“left”,“right”,“up”,“down”四个值 behavior:移动方式,可取scroll(循环移动),slide(只走一圈),alternate(来回移动)loop:循环次数,不输入表示无限次循环 scrollamount:移动快慢,数值越大越快 scrolldelay:每移动一步之后的延时,单位是毫秒 height,width:移动区域的高和宽,单位像素 bgcolor:移动区域的背景色实例:滚动文字262.网页的基本元素2.图像链接图像链接是将图像设定为热区，单击图像则转移到被链接的文本或其他文件。链接同一目录中的文件的格式为：例如，边框距离20 272.网页的基本元素2.5 表格将文本或图像按一定的行、列规则进行排列称为表格。在网页中使用表格，可以使一些数据信息更容易浏览。HTML有极强的表格能力，可以把文字、图像、声音甚至视频组织在表格中，也可以使用表格实现对文本、图像或其他对象的页面布局。1.创建表格网页中建立一个表格的基本格式为：表项1表项n 282.网页的基本元素1）标记border=”n”定义表格边框的粗细，n取整数，单位为像素。bordercolor=”颜色值”定义表格边框的颜色。summary=”简要说明”对表格的格式和内容简要说明。bgcolor 设定表格的背景色。background 设定表格的背景图像。width=“n|n%”设定表格的宽度。height=”n”设定表格的高度。align=”left|right|center”定义表格的水平对齐方式。292.网页的基本元素cellpadding 调节表单元线和数据之间的距离。cellspacing 调节表单元与边框间的空白。rules=”参数”设定有无表格线。align=”left|right|all”设定表格与文本的相互位置。2）标记表示表格的一行开始，可以是单标记，也可以是双标记。标记的属性主要如下：bgcolor 设定表格一行的背景色。align=”left|right|center”定义表格一行的表数据项的水平对齐方式。302.网页的基本元素3）标记为列定义标记，表格的数据写在列和之间。标记的属性主要如下：bgcolor 设定背景色。align=”left|right|center”定义表数据项水平对齐方式。bodercolordark=”颜色值”定义表格单元边框的颜色。width=“n|n%”设定表格单元的宽度。height=”n”设定表格单元的高度。实例例312.网页的基本元素2.表题表题是表格的内容声明。HTML使用标记给表格添加表题，并使用align属性定义表题的位置。格式为：表题 其属性值如下：top-表题放在表的上部 bottom-表题放在表的下部 left-表题放在表上部的左侧 right-表题放在表上部的右侧322.网页的基本元素3.表头使用标记可以在表的第1行或第1列加表头。表头写在开始标记和结束标记之间，并用醒目的粗体字显示。在表的第在表的第1行加表头的格式为：行加表头的格式为：表头1表头 2表头3 表项1表项2表项3 表项4表项5表项6 332.网页的基本元素在表的第1列加表头的格式为：表头1表项1表项2 表头2表项3表项4 表头3表项5表项6342.网页的基本元素4.表格边框在标记内附加frame、rules和border属性可以生成各种表格边框单元线。内容 1）frame属性值352.网页的基本元素2）rules属性值none 无格线。groups 仅在行组和列组间有格线。rows 仅有行间格线。cols 仅有列间格线。all 有行和列格线。3）border=”像素”设定边框宽度。例如，表格边框仅有行线时为362.网页的基本元素5.表格修饰HTML提供了配置表格元素背景色的功能，并可以设定表项数据的颜色。设定表格背景色的方法是使用bgcolor属性，格式分别为：设定表格背景色 设定表格中一行的背景色 设定表格中一个单元格的背景色 在标记中，可以使用background属性设置表格的背景图像，格式为background=”图像文件名”。372.网页的基本元素表格综合实例38.窗口框架3.1 窗口框架简介3.1.1 什么是窗口框架窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览不同网页的效果。另外各窗口还可以扮演不同的功能。3.1.2 窗口框架的基本结构窗口框架的建立语法 其中：标记用于定义一个窗口框架组件，而标记则用于定义窗口框架中的子窗口组件。39.窗口框架3.2 窗口框架的控制3.2.1 窗口的水平分割（Rows属性）设置给rows属性的字符串，代表各分割子窗口的高度，第一个子窗口高度为高度1，依此类推，而最后一个*，则代表最后一个子窗口的高度，为其他子窗口高度分配后所剩余的高度。例如：40.窗口框架3.2.2 窗口的垂直分割（Cols属性）3.2.3 嵌套窗口框架一个窗口框架还包含了另一个窗口框架.41.窗口框架3.2.4 窗口框架的宽度（Border属性）n为一整数，代表此窗口框架的宽度，单位为像素。3.2.5 框架的隐藏（Frameborder属性）Frameborder属性用于控制窗口框架四周，是否显示框架。此属性可使用在标记与标记中，使用在标记内时，可控制窗口框架的所有子窗口。使用在标记时，则仅能控制该标记所代表的子窗口。0代表不显示框线，1代表显示框线。实例例42.窗口框架3.3 子窗口的设置3.3.1 指定子窗口显示网页（SRC属性）Src属性是用于指定要导入到某子窗口的HTML文件的位置。3.3.2 定义子窗口名称（Name属性）Name属性是用来指定窗口的名称，当完成定义子窗口的名称后，便可在超链接中，指定显示网页的子窗口。3.3.3 控制框架滚动条（Scrolling属性）43.窗口框架3.3.4 子窗口大小的调整（NoResize属性）若不能随意更改子窗口的大小，可在标记中，设置NoResize属性。3.4 超链接Target属性与框架的应用3.4.1 网页显示子窗口（Target属性）如何实现各窗口不同功能？运用标记的target属性，指定显示链接网页的子窗口。实例例44.窗口框架3.4.2 搭配Target属性的特殊设置）设置在空白窗口中显示网页当将Target属性设置为_blank时，若单击超链接后，将以打开另一个窗口的方式显示网页。）设置在上一层框架显示网页当将Target属性值为_parent时，单击超链接后，该链接网页将导入目前子窗口的上一层框架。若没有上层，则导入在同一窗口中。）将网页导入到同一子窗口中若将targer属性设置为_self，则将在同一子窗口中显示链接的网页。454.表单的应用HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的。例如可以利用表单建立一个录入界面，也可以利用表单对数据库进行查询。在这里需要声明的是，表单的操作是与服务器进行交互的操作，而服务器端的操作是通过服务器端的程序来实现的。实现在服务器端的操作有许多种方式，其中ASP（动态服务网页）的方式就是一种，它可以通过ADO方式与多种数据库相连。464.表单的应用4.1 表单的标记表单就是为Internet网络用户在浏览器上建立一个交互接口，使Internet网络用户可以在这个接口上输入自己的信息，然后使用提交按钮，将Internet网络用户的输入信息传送给Web服务器。在HTML中，有一个专门的标记FORM提供表单的功能，由表单开始标记和表单结束标记组成，表单中可以设置文本框、按钮或下拉菜单，它们也是通过标记完成。在表单的开始标记中带有两个属性：ACTION和METHOD。书写表单的HTML格式如下:474.表单的应用FORM标记有以下主要属性：1）ACTION属性是用来指出，当这个FORM提交后需要执行的驻留在Web服务器上的程序名（包括路径）是什么。一旦Internet网络用户提交输入信息后服务器便激活这个程序，完成某种任务。例如：当用户点击“提交”按钮以后，Web服务器上的“login.asp”将接收用户输入的信息，以登记用户信息。484.表单的应用2）METHOD属性是用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式，它有两种方式：POST和GET。默认的方式是GET，这两者的区别是在使用POST时，表单中所有的变量及其值都按一定的规律放入报文中，而不是附加在ACTION所设定的URL之后。在使用GET时将FORM的输入信息作为字符串附加在ACTION所设定的URL的后面，中间用“？”隔开，即在客户端浏览器的地址栏中可以直接看见这些内容。494.表单的应用HTML中的INPUT标记HTML中的INPUT标记是表单中最常用的标记。我们在网页上所见到的文本框、按钮等等都由这个标记引出的。下面是INPUT标记的标准格式：其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么。例如是文本框、单选按钮或多选按钮。它的取值如下：“TEXT”、“PASSWORD”、“RADIO”、“CHECKBOX”、“SUBMIT”、“RESET”50 这是个测试页 请输入您的真实姓名:您的主页的网址:密码:1）文字输入和密码输入51（2）复选框（Checkbox）和 单选框（Radio Button）524.表单的应用HTML中的SELECT标记在制做HTML文件时，使用标记可以在浏览器窗口中设置下拉式菜单或带有滚动条的菜单，Internet网络用户可以在菜单中选中一个或多个选项。535.WEB上的多媒体所谓Web上的多媒体是指在Web页面上具有声音、视频和滚动文本等信息。同图像一样，Web上的多媒体也分为外部和内嵌两类。在HTML中使用外部媒体A HREF=“多媒体文件A media file HTML语言外部媒体文件的扩展名来确定该文件是否能被使用，因此它们的格式不能写错。545.WEB上的多媒体下面列出了常用的声音、视频和其它外部媒体文件的格式：外部声音文件的格式：.au .aiff，.aif、.wav、.mp3等外部视频文件的格式：.mprg，.mpg、.mov、.avi等 其他外部文件的格式：.doc、.zip等555.WEB上的多媒体在HTML中使用内嵌媒体内嵌视频Internet Explorer支持一种能播放AVI文件的性能，即在IMG标签中增加了DYNSRC属性域，DYNSRC的值为AVI文件的路径或URL。如：IMG DYNSRC=wolf.avi SRC=wolf.gif ALT=Wolf内嵌声音 将循环播放不止。565.WEB上的多媒体将影像嵌入网页语法如下：实例5.1：实例5.2：576.Applet的运用6.1 在网页中引用Applet什么是Applet？Applet是用Java语言所编写的网页组件，可使用HTML语法的标记，在网页中引入该组件，可以让网页拥有更多不同的动态变化效果。Applet组件的使用语法格式：.586.Applet的运用Applet运用实例一款很有新意的旋转立体时钟，有多个参数可调实例参考 洪恩在线：http:/