补充知识：HTML.ppt

单击此处编辑母版标题样式,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,补充知识：,HTML,与,JavaScript,本章学习要点,:,网页的基本组成；,网页中的文字与段落；,在网页中建立超链接；,在网页中使用表格；,在网页中使用框架；,在网页中使用图片；,在网页中使用表单；,使用,JavaScript,实现与网页的交互。,1,静态网页与,HTML,2 JavaScript,3,本章小结,目录,11.1,静态网页与,HTML,HTML,（,Hypertext Marked Language,），即超文本标记语言，是一种用来制作超文本文档的简单标记语言。它能独立于各种操作系统平台，,所谓超文本，是指可以加入图片、声音、动画、影视等内容，,HTML,只是一个纯文本文件。创建和调试,HTML,文档，需要两个工具，一个是,HTML,编辑器，一个,WEB,浏览器。,HTML,编辑器是用于生成和保存,HTML,文档的应用程序。,WEB,浏览器是用来打开,WEB,网页文件，提供给我们查看,WEB,资源的客户端程序。,网页的组成,1.HTML,的标签与属性,标签是在,HTML,文档中用“,”,括起来的语句，是用来分割和标签文本的元素，,属性是标签到的参数的选项，大多数标签都有自己的一些属性，属性要写在始标签内，属性用于进一步改变显示的效果，各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值。,标签与属性的使用格式如下：,内容,网页的组成,2.,页面的头部标签,一个,HTML,文档是由一系列的元素和标签组成，元素名不区分大小写，,HTML,用标签来规定元素的属性和它在文件中的位置，,HTML,超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。,第一个,HTML,文件,first.html,。通过该文件展现了,HTML,文件的一般结构。,/,页面开始标签,Easy_buy,电子商城,/,头部标签,/,文件主体,欢迎光临,easy_buy,电子商城,请大家多提宝贵意见制作人：,liuzc,演示结果,图11-1,first.html,运行结果,网页的组成,3.html,的主体标签,在,和,中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。,标签有自己的属性，设置,标签内的属性，可控制整个页面的显示方式。,主体标签的演示结果,网页的组成,4.,颜色的设定,在,HTML,页面中，颜色通常有以下两种表示法：,（,1,）直接表示法,使用颜色值关键字表示一种颜色，如使用“,red”,表示红色。,（,2,）,RGB,表示法,使用,RGB,格式的数字来表示一种颜色。在,HTML,中对颜色的定义是用十六进位的，对于三原色,HTML,分别给予两个十六进位去定义，也就是每个原色可有,256,种彩度，故此三原色可混合成,16777216,种颜色。,文字与段落,1.,换行标签,换行标签是个单标签，也叫空标签，不包含任和内容，在,html,文件中的任何位置只要使用了,标签，,2.,换段落标签,及属性：,由,标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个,的开始就意味着上一个,的结束。,使用格式如下：,文字与段落,3.,居中对齐标签,文本在页面中使用,标签进行居中显示，,是成对标签，在需要居中的内容部分开头处加,，结尾处加,。,4.,水平分隔线标签,标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置,标签的属性值，可以控制水平分隔线的样式。,文字与段落,5.,特殊字符,在,HTML,文档中，有些字符没办法直接显示出来，使用特殊字符可以将键盘上没有的字符表达出来，而有些,HTML,文档的特殊字符在键盘上虽然可以得到，,6.,注释标签,在,HTML,文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不会在浏览器中显示出来。,注释标签使用格式如下：,文字与段落,7.,字体属性,（,1,）标题文字标签,标签用于设置网页中的标题文字，,标题标签的使用格式如下：,hn,align=,参数,标题内容,（,2,）文字格式控制标签,标签用于控制文字的字体，大小和颜色。,使用格式如下：,font face=,值,1 size=,值,2 color=,值,3,文字,文字与段落,（,3,）特定文字样式标签,在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在,html,中用于这种功能的标签可以分为两类，物理类型和逻辑类型。,1,、物理类型,（,1,）粗体标签,放在,与,标签之间的文字将以粗体方式显示。,（,2,）斜体标签,放在,与,标签之间的文字将以斜体方式显示。,（,3,）下划线标签,放在,与,标签之间的文字将以下划线方式显示。,文字与段落,2,、逻辑类型,逻辑类型是使用一些标签来改变字体的形态和样式，以便产生一些浏览者习惯的或约定的显示效果,.,演示结果,:,建立超链接,HTML,文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，,web,上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其它页面。超文本具有的链接能力，可层层链接相关文件，这种具有超级链能力的操作，即称为超级链接。,建立超链接的标签为,和,，使用格式如下：,超链接名称,建立超链接,1.,链接路径,每一个文件都有自己的存放位置和路径，,URL(Uniform,Resource Locator),中文名字为“统一资源定位器”。指的就是每一个网站都具有的地址。,（,1,）绝对路径,绝对路径：包含了标识,INTERNET,上的文件所需要的所有信息。文件的链接是相对原文档而定的。包括完整的协议名称，主机名称，文件夹名称和文件名称,其格式为：,通讯协议：,/,服务器地址：通讯端口,/,文件位置,./,文件名。,建立超链接,（,2,）相对路径,相对路经是以当前文件所在路径为起点，进行相对文件的查找。,（,3,）根路径,根路径目录地址同样可用于创建内部链接，但大多数情况下，不建议使用此种链接形式。根路径目录地址的书写也很简单，首先以一个斜杠开头，代表根目录，然后书写文件夹名，最后书写文件名。,如果根目录要写盘符，就在盘符后使用,，而不用,这点与,DOS,的写法不同。如：,/,myweb/index.html,或,d/myweb/index.html,建立超链接,2.,超链接的应用,（,1,）书签链接,（,2,）在站点内部建立链接,（,3,）外部链接,链接其它站点：,发送,E-mail,链接,FTP,课堂演示,文件,link.html,演示了各种超链接的使用。,联系我们,绝对路径链接,我们的网站是：,http,：,/,联系我们：,liuzc518,下载支持软件请到：,北京大学,ftp,站点,演示结果,使用表格,表格在网站应用中非常广泛，可以方便灵活的排版，很多动态大型网站也都是借助表格排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然。因此，掌握表格的应用技术是制作好漂亮美观的网页的关键。,使用表格,1.,定义表格的基本语法,在,html,文档中，表格通过,、,、,和,标签来实现的,.,2.,表格,标签的属性,表格标签,有很多属性,.,3.,表格的边框显示状态,frame,表格的边框分别有上边框、下边框、左边框、右边框。这四个边框都可以设置为显示或隐藏状态,.,使用表格,4.,设置分隔线的显示状态,rules,5.,表格行的设定,表格是按行和列（单元格）组成的，一个表格有几行组成就要有几个行标签,，行标签用它的属性值来修饰，属性都是可选的。,6.,单元格的设定,和,都是插入单元格的标签，这两个标签必须嵌套在,标签内。并且必须成对出现。,使用表格,7.,设定跨多行多列单元格,要创建跨多行、多列的单元格，只需在,或,中加入,ROWSPAN,或,COLSPAN,属性的属性值（默认值为,1,），表明了表格中要跨越的行或列的个数。,跨多列的语法格式如下：,colspan,表示跨越的列数，例如,colspan,=2,表示这一格的宽度为两个列的宽度。,跨多行的语法格式如下：,rowspan,所要表示的意义是指跨越的行数，例如,rowspan,=2,就表示这一格跨越表格两个行的高度,。,使用框架,框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的,URL,网页。使用框架可以非常方便的在浏览器中同时浏览不同的页面效果，也可以非常方便的完成导航工作。,使用框架,1,框架集,控制,（,1,）左右分割窗口属性：,cols,（,2,）上下分割窗口属性：,rows,2,子窗口,标签的设定,是个单标签，,标签要放在框架集,frameset,中，,设置了几个子窗口就必须对应几个,标签，而且每一个,标签内还必须设定一个网页文件（,src,=*.html,）,.,窗口的上下设定,Easy_Buy,电子商城,框架实例,演示结果,窗口的混合设定,Easy_Buy,电子商城,框架实例,演示结果,使用图片,图像可以使,html,页面美观生动且富有生机。浏览器可以显示的图像格式有,jpeg,、,bmp,和,gif,。,使用图片,1.,背景图像的设定,在网页中除了可以用单一的颜色做背景外，还可用图像设置背景。,设置背景图像的基本语法格式如下：,其中,image-,url,指图像的位置。,使用图片,2.,网页中插入图片标签,网页中插入图片用单标签,，当浏览器读取到,标签时，就会显示此标签所设定的图像。如果要对插入的图片进行修饰时，仅仅用这一个属性是不够的，还要配合其它属性来完成。,的基本语法格式如下：,使用图片,3,图像的超链接,（,1,）图像的超链接,图像的链接和文字的链接方法是一样的，都是用,标签来完成，只要将,标签放在,和,之间就可以了。用图像链接的图片的上有蓝色的边框，这个边框颜色也可以在,标签中设定。,（,2,）图像的影像地图超链接,使用表单,表单在,Web,网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个,Html,文档中，当用户填写完信息后做提交,(submit),操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的,ASP,或,CGI,等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。,表单标签的格式：,.,使用表单,1,写入标记,在,html,语言中，标记,具有重要的地位，它能够将浏览器中的控件加载到,html,文档中，该标记是单个标记，没有结束标记。,标签用来定义一个用户输入区，用户可在其中输入信息。此标签必须放在,标签对之间。,标签中共提供了九种类型的输入区域，具体是哪一种类型由,type,属性来决定。,使用表单,2,菜单下拉列表框,标签对用来创建一个菜单下拉列表框。,标签用来指定列表框中的一个选项，它放在,标签对之间,3,多行文本框,用来创建一个可以输入多行的文本框，此标签对用于,标签对之间。,11.2 JavaScript,JavaScript,概述,JavaScript,是一种基于对象和事件驱动并具有安全性能的脚本语言，通过,JavaScript,，可使网页变得生动，实现客户端的交互。,JavaScript,是通过嵌入或调入在标准的,HTML,语言中实现的。,JavaScript,具有很多优点：,1.,简单性,2.,动态性,3.,跨平台性,表单验证,JavaScript,的一个是重要的应用是在客户端的浏览器对用户输入的信息进入合法性的验证，如用户名或密码是否为空，电子邮件是否包含“,”,符号和“,”,号，身份证号码是否全部为数字等。客户端的这种信息验证可以减轻服务器的压力和减少网络传输的信息量。,其他常用功能,1,分时问候,2,导航条式菜单,3,加入收藏夹,/,设为主页,本章小结,本章学习了如下内容：,静态网页与,HTML,，包括网页的组成、文字与段落、建立超链接、使用表格、使用框架、使用图片和使用表单等内容。,JavaScript,，包括,JavaScript,概述、利用,JavaScript,进行表单验证、分时问候、导航菜单、加入收藏夹,/,设为主页等内容。,