自整计算机web制作ps复习提纲_第1页
自整计算机web制作ps复习提纲_第2页
自整计算机web制作ps复习提纲_第3页
自整计算机web制作ps复习提纲_第4页
自整计算机web制作ps复习提纲_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、 10英政第 1 章 Web技术基础一、 万维网1、Internet的发展（1）Internet的产生l 阿帕网（ARPANet），萌芽u 一个没有中央控制节点的计算机网络，1969u TCP/IP协议研究成功 ，计算机互联的主要障碍被解决 ，1974l 互联网的诞生u ARPANet被分成两部分，一部分作为军用，称为MILnet，另一部分作为民用，ARPANet开始从一个实验型网络向实用型网络转变，从而成为全球Internet正式诞生的标志。1982（2）发展阶段l Internet的提出、研究和试验阶段 ，19691984 l Internet的实用发展阶段 ， 19841992l 商业化

2、发展阶段 ，19922003 l Web2.0，2003以后u 用户参与，如：论坛，博客。留住客户，信息消费到信息制造2、什么是万维网l WWW是环球信息网（World Wide Web ）的缩写，也可以简称为Web，中文名字为“万维网”。l 在互联网中，存在各种服务器和客户机，WWW =Web服务器+Web客户机，即Web由Internet中称为Web信息服务器的计算机组成，由那些希望通过Internet发布信息的机构提供并管理。二、 Web的工作原理1、Web的构成（1）Web服务器l 网络操作系统l Web服务组件，如Apache/Tomcat，IIS（2）Web客户机l Web浏览器，

3、如IE，Mahton，Firefox2、Web的工作原理（1）在浏览器地址栏中，用户输入要访问的网页网址URL （2）Web服务器根据URL中指定的网址、路径和网页文件，调出相应的HTML、XML文档或Jsp、Asp文件（3）根据文档类型，Web服务器决定是否执行文档中的服务器脚本程序，还是直接将网页文件传送到客户端。（4）浏览器显示下载的文档，即网页 3、浏览器的功能从本质上讲，浏览器是一种特定格式，即HTML或XML的文档阅读器，它能够根据网页内容，对网页中的各种标记进行解释显示。浏览器是一种程序解释机，内置脚本程序引擎，如果网页中包含客户端脚本程序，浏览器将解释执行这些客户端脚本代码，从

4、而增强网页的交互性和动态效果。三、 概念及术语1、网站的概念及构成（1）概念：网站又称Web站点，是Internet中提供信息服务的机构，这些机构的计算机连接到Internet中，向用户提供Web服务。（2）构成：一个Web站点是由一个主目录和主目录下的文件夹和大量的网页文件构成的，这些网页文件通过超链接连接在一起，形成特定的应用逻辑，构成一个特定的Web应用。2、超文本概念、超级链接的概念（1）超文本（Hypertext）超文本是一种文本显示与连接技术，可以对文本中的有关词汇或句子建立链接（即超链接），使其指向其他段落、文本或链接到其他文档。 当超文本显示时，建立了链接的文本、图片通常以下划

5、线、高亮等不同的方式显示，来表明这些文本或图片对应一个超链接。 （2）超级链接（Hyperlink）：Web页中当用户单击它时可以转到其他Web页或当前页面的其他地方的文字、图片等对象3、Web页的概念、主页的概念（1）Web页（Web page）：Web页是指Web服务器上的一个个超文本文件，或者是它们在浏览器上的显示屏幕。 （2）主页（Home page）：用户在Web服务器上看到的第一个Web页 首页中往往列出了网站的信息目录，或指向其他站点的超链接，主页是一个网站的入口。 4、统一资源定位器URL、端口（1）统一资源定位器URL统一资源定位器URL可以唯一标识一个Web页或Intern

6、et上其他资源的一个地址，它将Internet提供的各类服务统一编址，以便用户通过Web客户浏览程序进行信息查询。URL的一般形式为：信息资源类型：/网址：端口号/文件路径/文件名？参数表（2）端口含义：端口是服务器使用的一个通道，在OSI参考模型的数据封装中使用，它可以使具有相同IP地址的服务器同时提供多种服务，运行在服务器上的各个服务程序将根据收到的数据段中的端口号来判断是否为自己的数据。分类：按协议类型划分，端口可以分为TCP、UDP、IP和ICMP（Internet控制消息协议）等。其中TCP端口和UDP端口是最常见端口类型。按照端口号分布划分，端口分为知名端口（Well-Known

7、Ports）和动态端口（Dynamic Ports）两部分。四、 Web相关技术1、C/S结构即客户/服务器计算模式构成：两层结构（Client/Server，C/S） 20世纪80年代流行 客户机安装客户端软件：客户机完成与用户的交互任务，具有强壮的数据操纵和事务处理能力 服务器安装服务器程序：服务器负责数据管理，提供数据库的查询和管理、大规模的计算等服务 它依赖于计算机局域网。优点通过异种平台集成，能够协调现有的各种IT基础结构；分布式管理；能充分发挥客户端PC的处理能力，安全、稳定、速度快，且可脱机操作 不足它必须在客户端安装大量的应用程序（客户端软件），开发成本较高，移植困难，用户界面

8、风格不统一，使用繁杂，不利于推广使用，维护复杂，升级麻烦，信息内容和形式单一，新技术不能轻易应用用户必须在局域网中，对90年代蓬勃发展的互联网新技术不能适应2、B/S结构即浏览器/服务器计算模式构成：是一种三层架构瘦客户机/服务器计算模式第一层是客户端表示层：客户端Web浏览器第二层是应用服务器层：Web服务器第三层是数据中心层：数据库服务器它适用于互联网。优点：具有良好的开放性，利用单一的访问点，用户可以在任何地点使用系统；用户可以跨平台以相同的浏览器界面访问系统；因为在客户端只需要安装浏览器，基本上取消了客户端的维护工作，有效的减少了整个系统的运行和维护成本。跨越了局域网的限制，将应用分布

9、到互联网 第 2 章 标记语言与网页制作一、HTML标记语法和文档结构（一） HTML标记语法1.标记（Tag）标记由封装在小于号（<）和大于号（>）构成的一对尖括号之中 一般形式：<标记>文档内容</标记> <标记> 起始标记 （首标记） </标记>结束标记（尾标记） 例如：<a>link text</a> -一个HTML元素(1)标记类型：单标记<br><hr>双标记<head></head><body></body> (2)标记属性：

10、在起始标记可包含HTML属性(3)标记语法：<标记 属性1="属性值“ 属性2="属性值" 属性3="属性值"> 每个元素可含多个属性，属性间无顺序之分，属性值可用单引号、双引号为界符，也可不加界符。例如：<hr size="3" align="center" width="50%"> 常用的共同标记属性（二）HTML文档结构1.文档结构：<html><head> 头部信息</head><body> 文档主体 （语

11、句部分）</body></html>2. 修改默认显示的方法：当一个用户自定义的样式要应用到文档中的所有元素（标记）时，应该在文档的头部使用<style></style>标记对重新定义这些标记的样式。<style>标记放置在HTML文档的<head></head>内，用于定义样式。使用<style>标记可以为网页设置不同的样式属性，一般形式为：<style type="text/css"> 标记属性名：属性值；属性名：属性值；</style>例如：要设置整

12、个文档的字体颜色和背景色，可以定义下面的样式。 <style type="text/css"> Bodycolor:black;background:white;</style> 二、应用 （一）文件头标记及子标记<head></head>标记对之间的部分称为文件头 （二）文件体标记及其属性 1.<title></title>标记:文档标题标记 作用：用于标识网页主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内。 每个页面只允许有一个<title>标记举例：<title>

13、计算机基础网络教学平台GSL3.0</title>2.<meta>标记 作用：提供文档的元信息，包括网页作者、制作日期、口令、关键字等等 <meta>为单标记，没有尾标记 (1)http-equiv属性：http-equiv相当于HTTP的文件头，向浏览器传回信息，以正确显示网页内容<meta http-equiv="参数" content="参数变量值"> http-equiv属性参数值：content-type（显示字符集的设定），设定页面使用的字符集，描述网页的类型和编码信息。 <meta ht

14、tp-equiv="content-type" content="text/html; charset=gb2312"> expires（期限），用于设定网页的到期时间 <meta http-equiv="expires" content="Thur, 8 May 2008 18:18:18 GMT"> pragma（Cache模式），禁止浏览器从本地计算机的缓存中访问页面内容 <meta http-equiv=“pragma” content=“no-cache”> ，该种设定访问者

15、将无法使用脱机浏览功能 refresh（刷新），自动刷新并指向新页面。 <meta http-equiv="refresh" content="60; url=new.htm"> window-target（显示窗口的设定），强制页面在当前窗口以独立页面显示 <meta http-equiv="window-target" content="_top">，可以用来防止别人在框架里调用自己的页面。 (2)name属性主要提供作者、版权、或其他描述信息，与之对应的属性值为content，cont

16、ent中的内容主要是便于搜索引擎查找信息和分类信息用的。 <meta name="参数" content="具体的参数值"> name属性参数值:keywords（关键字），keywords用来告诉搜索引擎该网页的关键字是什么 。 <meta name="keywords" content="E-learning,ontology"> description（网站内容描述），description用来告诉搜索引擎网站的主要内容 <meta name="description&

17、quot; content="This page is about E-learning etc."> author（作者），标注网页的作者 <meta name="author" content="brion"> robots（机器人向导），robots用来告诉搜索机器人需要索引的页面有哪些。 <meta name="robots" content="none"> （3） <base>标记<base>标记<base>标记定义了文

18、档的基础URL地址，在文档中所有的相对地址形式的URL都是相对于这里定义的URL而言的 。 文档中的<base>标记不能多于一个，必须放于头部，并且应该在任何包含URL地址的语句之前 <base>标记属性:href属性 ，指定了文档的基础URL地址，该属性在<base>标记中是必须存在的 。 <base href = "">target属性 target属性同框架一起使用，它定义了当文档中的链接被点击后，在哪一个框架中展开页面。常用的target的属性值有：_blank ，_self ，_parent ，_top _blank

19、: 表明在新窗口打开页面_self： 表明在当前文档的框架中打开页面_parent：表明在当前文档的父窗口中打开页面_top ：在链接所在的完整窗口打开页面<base target="_blank"> 表明页面上所有的链接都在新窗口打开（4） <link>标记 <link>标记<link>标记定义了文档之间的包含 。 在HTML的头部可以包含任意数量的<link>标记 <link>标记属性:type，用于指定被包含的文件类型。例如，text/css是指包含一个层叠样式表文件。 href，指向被包含资源的

20、url地址 。 title，一个字符串，用于描述该链接关系。 rel，定义HTML文档和所要包含资源之间的链接关系 例如：<link type="text/css" rel="stylesheet" href="mystyle.css">(5) 背景音乐标记<bgsound> 在文档头内，还可以定义背景音乐，标记为<bgsound>，用以插入背景音乐。<bgsound>标记为单标记，一般形式是：<bgsound src="" autostart="&q

21、uot; loop="">标记的属性：Src属性，给出音乐文件的URL。Autostart属性，设置音乐文件播送结束后的处理，如果为true，则自动播放音乐，为false则结束不播放，默认值为false。Loop属性，设置是否自动反复播放，loop=2表示重复两次，infinite表示重复多次。 （三）文档内容常用标记1、 标题、段落标记 （1）标题标记<h1></h1><h6></h6> 从最大的h1到最小的h6，6个级别的标题标记属性：Align<h1 align=left>第一级标题</h1>

22、;<h2 align=left>第二级标题</h2><h3 align=left>第三级标题</h3><h4 align=left>第四级标题</h4><h5 align=left>第五级标题</h5><h6 align=left>第六级标题</h6>（2）段落标记<p></p>，标记一个段落，输出位置转到下一行开始，并增加一个空行。标记属性： Align<p align=left>段落内容</p>（3）换行与空行标记 <

23、br>换行标记，单标记，可以使用它增加一个空行。（4）水平线标记水平线标记<hr> ，插入一条水平线， 单标记。标记属性：width；size；Color（5） 预格式化段落标记<pre>. </pre>是文本以录入的原样显示一、 文本格式标记（1）字体标记<font></font>常用的属性：face：设置字体size：设置文字大小，取值17，可用+n、n表示比当前字体增大、减小color：设置文字颜色（2）粗体、斜体和下划线标记 <b></b> 粗体标记<i> </i> 斜体标

24、记<u></u> 下划线标记（3）字体放大、缩小、上标和下标显示标记 < big></big>放大< small></small>缩小<sub></sub>上标<sup></sup>下标 （4） 逻辑格式化文本标记 <strong></strong>标记和<b></b>标记类似，都是字体加粗标记。 <em></em>标记和<i></i>标记类似，是斜体强调标记。 <tt>

25、;</tt>为打字字体 Courier字体，字母等宽标记。<cite></cite>为传记引述斜体效果标记。 1. 图像标记<img> （1）作用：单标记，用以插入图像 <img scr=“#”> 例：<img src=“asd.jpg" alt="风景" width="400px" height="300px">（2）<img>标记属性src：设置插入图像的url地址，即插入图像的路径和文件名。 title：属性值为一字符串，鼠标指向图片时

26、，鼠标右下角显示标题文本。 alt：设置图像替代文字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，此图像的显示信息。id:制定图片id号，用于对图像的程序访问。class：指定图像所属的类型<img src=“asd.jpg" alt="风景" width="400px" height="300px">（3）<img>标记的外观属性align：设置图像的对齐方式 top：图片顶端与文字顶端对齐middle：图片垂直中线与文字基线对齐bottom：图片底端与文字基线对齐left：图片在当前窗

27、口的左侧，文字在右侧right：图片在当前窗口的右侧，文字在左侧border：设置图片边框宽度。 height：用于设置图像的高度width：用于设置图像的宽度 hspace和vspace：分别用于设置图像周围的空白大小 （4） 事件属性如onLock、onClick、onDbClick、onMouseOver、onKeyDown、onKeyPress等2. 超链接标记<a></a> （1）文本超链接 <a href=“链接地址">字符串</a> （2）图片超链接<a href=“链接地址”> <img src=“图片

28、文件"> </a>可使用图片链接实现缩略图<a href=“路径/大图文件名”> <img src=“路径/小图文件名"> </a>（3）书签定义书签：<a name=“#书签名">书签文本</a>书签链接引用：<a ahref=“#书签名”>链接文本</a>（4）邮箱地址链接<a href=“mailto：邮箱地址">邮箱地址字符串</a>（5）<a>标记其它常用属性target属性，定义超链接打开的目标窗口。 属性

29、值：_self（相同框架）_blank（新建窗口）_top（整页）_parent（父窗口）title属性：链接注释，属性值为一字符串，鼠标指向超链接时，鼠标右下角显示标题文本。 onclick事件属性 3. 影像地图标记<map> </map> 所谓影像地图，就是在一个图片上定义一系列区域，每个区域对应一个超链接。 （1）标记形式<img src=“ ” usemap=“#mapname” width=" " height=" "><map name="mapname"><area

30、 href=“url1“ target=“_blank” title=“提示文字 “ shape=”circle” coords=“圆心x, 圆心y, 半径” ><area href=“url2” target=“_blank” title=“提示文字 “ shape=”rect” coords=“左上角x，左上角y，右下角x，右下角y" ><area href=“url3” target=“_blank” title=“提示文字 ”shape=“poly” coords=“顶点坐标序列" ></map> （2）热点标记（<m

31、ap>）属性href属性：用于设定该热点所链接的url地址。Shape属性：用于设定热点的形状。coods属性：用于设定热点的坐标。shape=“rect” ，shape=“circle” ，shape=“poly”<img src=“aaa.jpg ” usemap=“#mapna” width=“ 300 " height=“500 "><map name="mapna"><area href=“1.htm“ shape=”circle” coords=“379, 1212, 79” target=“_blank”

32、 title=“区域1"><area href="2.htm" shape="rect" coords="224,159,274,180" target="_blank" title="区域2" ><area href=“3.htm” shape=“poly” coords=“" target="_blank" title="区域3" ></map> 4. 走马灯标记<marquee>

33、;</marquee>“走马灯”标记<marquee></marquee>用于标记一行或多行滚动的文本，也可以将文本带有超链接，以增加网页的动态效果。 <marquee>标记常用属性：align属性，设定活动字幕的位置，取值可以是left、center、right、top或bottom。 bgcolor属性，设定活动字幕的背景颜色，一般是十六进制数。 direction属性，设定活动字幕的滚动方向，取值可以是left、right、up或down。 behavior属性，设定滚动的方式，主要有三种方式：behavior=“scroll”表示由一端滚

34、动到另一端； behavior=“slide”表示由一端快速滑动到另一端，且不再重复； behavior=“alternate”表示在两端之间来回滚动。 height和width属性，设定滚动字幕的高度和宽度。 hspace和vspace属性，设定滚动字幕的左右边框和上下边框的宽度。 scrollamount属性，设定活动字幕的滚动距离。 scrolldelay属性，用于设定滚动两次之间的延迟时间。 loop属性，用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新。 5. 注释标记注释标记一般的形式是<!注释文字>，用于在HTML文档中书写说明性文字，注释文字可以多

35、行，内容在浏览器中不显示。8.特殊字符不可分的空格 &nbsp；小于 &lt；大于 &gt；逻辑与& &amp； 双引号 &quot； 版权符号 © &copy； 注册商标 ® &reg；商标 大于 &#8482 （四）表格（table）表格是由行、列构成的。每一行可以分成若干列，每一列成为一个单元格，相邻的单元格可以合并。1.应用：表格的用途很广，可以用来显示表格型数据、图片等，也可以用来布局。表格单元格中可以放置文本、段落、图片、链接、表单、HTML控件、表格等等。2.相关标记：（1）表格标记 &l

36、t;table></table> 表格是HTML常用的标签，代表在网页中插入一张表格。表格是用table标签对表示的。 任何表格都是由<table>开始，由</table> 结束。（2）行标记<tr></tr> <tr></tr>是表格一行的标记，标记<table> 与</table>之间可以包含多个<tr>标记。（3）列标记<td></td><td></td>为表格的单元格标记，标记<tr> 与</tr

37、>之间可以包含多个<td>标记。（4）标记<th></th>用来设置表格的表头。通过增减<td></td>标记，实现表格的行的增加、删除。（5） 标题标记<caption></ caption >为表格设置标题，属性align，指定位置，取值top、bottom。表格相关标记属性（1）一般属性bgcolor：设置背景色，可应用于<table>、 <tr>、<td>标记 ，分别设置表格、行、单元格的背景色。background：应用于<table>，设置表格的

38、背景图片。border：应用于<table>，设置表格的边框，默认为0，无边框。bordercolor ：应用于<table>，设置表格的边框颜色。bordercolorlight：应用于<table>，设置表格的边框明亮部分的颜色。bordercolordark：应用于<table>，设置表格的边框昏暗部分的颜色。width：设置宽度，可应用于<table>、<td>标记 ，分别设置表格、单元格的宽度。应用于<td>标记 时，常用%表示。height：设置高度，可应用于<table>、 <t

39、r>标记 ，分别设置表格、单元格的高度。align：设置水平对齐方式，可应用于<table>、 <tr>、<td>标记。align：设置水平对齐方式，可应用于<table>、 <tr>、<td>标记，取值center、left、right。valign：设置垂直对齐方式，可应用于<table>、 <tr>、<td>标记，取值top、middle、bottom、baseline。cellspacing：应用于<table>，设置表格的相邻单元格间的间距。cellpaddi

40、ng：应用于<table>，设置表格的单元格边框与内容的间距。rowspan：单元格的行合并。colspan：单元格的列合并。（2）事件属性 （五）表单（form） 1.用户交互使用表单，可以动态的收集用户数据，完成用户与网站间的交互。（1）表单标记<form></form> <form></form>可以看做是一个包含许多表单控件的容器。它的功能：排列各种表单控件的布局；把整个最终处理数据结果发送到目标程序上；定义一种数据发送到服务器的方法；用来解码服务器所能接受和处理的数据。一般形式：<form > 表单元素</

41、form> <form>标记属性name：给出表单的名称，用于脚本编程 method：用来定义服务器表单处理程序从表单中获得信息的方式get方法：将数据打包放置在环境变量QUERY_STRING中作为URL整体的一部分传递给服务器。 post方法：分离地传递数据给服务器表单处理程序，不需要设置QUERY_STRING环境变量，因此POST有更好的安全性，表单中数据的多少是任意的，因为这些数据从来也不分配到一个变量里。 action：设置表单处理程序的网络路径和程序名，当用户提交表单时，服务器将执行action属性所设置的程序。 （2）输入类型标记 <input type

42、="" name = "" value="" >< input >标记属性：type：给出输入控件的类型，常用的控件类型有：text，textarea，radio，checkbox，button，image，hidden，password，file，submit/reset name：设置输入控件的名字，程序需要通过控件名称处理用户输入数据，同时，设置控件名称可以增加HTML代码的可读性。 value：保存用户的输入和选择，服务器通过调用输入区域的value属性值来获得输入控件的数据。另外，用户可以通过value属性

43、来指定输入区域的缺省值 。 2.表单控件：单行文本框输入密码文本框输入 多行文本框输入 button按钮输入 radio单选钮输入 复选框输入复选列表框输入hidden隐藏元素 文件上传 表单提交按钮标记submit/reset （1）text：单行文本框输入<input type="text" name = "" value="">主要属性：name：文本框名称，便于程序获取用户输入。 value：存储文本框的取值，可以设一个初始值。 size：设置表示文本框的显示长度。 maxlength：文本框中输入的有效数据长度。

44、 例如：<form name="myForm" method="POST" action="/custom/feedback.jsp">用户账户：<input type="text" name=“myaccount" size="10" value="guest" maxlength="8"> </form> （2）password：密码文本框输入使用输入密码文本框控件，当用户输入密码时，区域内将会显示&quo

45、t;*"号 <input type=" password " >主要属性：name：文本框名称，便于程序获取用户输入。 value：存储文本框的取值，可以设一个初始值。 size：设置表示文本框的显示长度。 maxlength：maxlength是文本框中输入的有效数据长度。 例如：<form name="myForm" method="POST" action="/progs/feedback.jsp">密码：<input type="password"

46、 name="myPassword" size="10" maxlength="8"> </form>（3）textarea：多行文本框输入标记多行文本框，又称滚动文本框。和其它的输入类型不同，它不是通过<input type=" " >来指定的，它是一个双标记 <textarea name=" " rows=" " cols=""> input text</textarea> 主要属性：name：，多

47、行文本框的名称，便于程序获取用户输入。 rows、cols：分别用来设置文本框的列数和行数，列与行以字符数为单位。input text：显示的初始文本内容，一般为提示。 例如：<form name="myForm" method="POST" action="-WEBBOT-SELF-"><textarea name="brief" rows="5" cols="30">请输入简要说明</textarea></form>（4）

48、radio：单选钮输入<input type=“ radio” value =“choice_id” > 单选钮主要用于从多个可选项中，选择其中之一。往往是若干个radio为一组，他们具有相同的name，但不同的value，从而选择其中之一。主要属性：name：单选扭的名称，一般是若干个radio一组，取相同的name。 checked：用来设置该单选框缺省时是否被选中，相同name的多个radio中只能有一个选择，或都不使用该参数。 value：存储单旋钮的取值，多个具有相同name的单旋钮应该具有不同的value。（5）checkbox:复选框输入复选框是对某种输入做出“是”或

49、“否”的选择<input type=" checkbox " >常用属性：name: 设置复选框的名称，便于程序获取用户输入value：每一个checkbox 必须有一个value，当复选框选中时，value值便会传到表单的action属性指定的程序中。 checked：用来设置该复选框缺省时是否被选中。 （6） select：复选列表框创建一个下拉列表框或可以复选的列表框，定义复选列表框不需要在<input type=“ ”>中指定输入类型<select name="" size=""> <

50、option value=""></option> <option value=""></option> </select> <select>标记 属性：name：name为下拉式列表控件名称，便于程序获取用户输入。 size：下拉式列表的高度，缺省时值为1，若没有设置（加入）multiple属性，显示的将是一个弹出式的列表框。若使用此参数则不会有PopUp效果。如果小于可选的项目数量，则出现垂直滚动条。 multiple：指定是否可以多选。multiple属性不用赋值，直接加入<s

51、elect>标记中即可使用，加入了此属性后列表框就成了可多选的了。 （7） hidden隐藏元素在一个表单中，可以定义隐藏表单元素，它在网页上并不显示，不需要用户输入，主要目的是随表单一起传给表单处理程序一个特定的值，用于为网页处理程序传送数据。<input type="hidden" name=" " value=" "> 例如：<input type="hidden" name="myID" value="730118">（8）file:文件

52、上传<input type="file" name=" " size=" “ accept=" " > 一般属性：name: 为控件名称，size: 显示文本框长度。accept: 设置上载文件过滤，即点击“浏览”按钮时，只显示指定文件类型的文件列表。 例如：<form name="myForm" method="POST" action="/custom/feedback.jsp" enctype="multipart/form-dat

53、a">提交论文：<input type="file" name="F1" size="20"></form>（9）表单提交当表单填写完毕后，需要选择的submit/reset按钮，它结束表单输入，将表单数据传送到服务器端，由表单<form>标记中的action属性指定的服务器上的程序处理用户输入数据。<input type=“submit”> 重填按钮 表单清除就是要将表单中已做的输入和选择全部清除，重新填写。<input type="reset"

54、;> 一般属性：Name: 这和其它控件的属性不同，在提交表单中，name可以指定一个函数，需要和form标记中action属性的程序配合。一般情况下，不需要name属性。 value: 提交按钮的显示名字，一般为“确定”、“提交”等易于理解的名字。 Onclick: 事件属性。 （10）表单button按钮 在表单中除了使用有固定功能的提交、重置按钮，还可以设置其他功能的按钮，设置type的值为“button”，通过使用脚本确定按钮的功能，此类按钮无默认功能。<input type=“button” name=“” value=“” onclick=“script”> 常用

55、属性：name: 设置复选框的名称，便于程序获取用户输入value：显示在按钮上的文本。onclick ：用来设置该按钮被单击时激活脚本的名称。 例如：<input type="button" value="阶乘等于" name="equ" onClick="calcFact(n.value)“><input type="button" value="回前一页" onclick="history.go( -1 );return true;">

56、 <input type="button" value="关闭窗口" onclick="window.close();return true在表单中还可以使用 “button”标记，设置按钮。<button type=“button|submit|reset” name=“” value=“” onclick=“script”> 按钮显示内容</button >使用<button >标记提供更为灵活的样式定义。例如：<button name=“submit” value=“testbutton”&

57、gt; <img src=“submit.ico” width=32 height=32 ><br>提交</button >（11）标签<label>在表单中，有许多控件不带显示文本标签，如文本框、选择框，<lable>标记用来给这些控件添加标签。<label for= " control-id " > 标签文本</ label > 属性for: 设置标签与表示的标记关联，其值为关联标记的识别标志。例如：<form><input type=“checkbox" v

58、alue=“blue" name= " blue" checked id=“blue" >< label for= “ blue ” > 蓝色</ label > <br><input type=“checkbox" value= " green" name= " green" id= " green" >< label for= “green ” > 绿色</ label > <br><i

59、nput type=“checkbox" value= " red" name= " red“ id= " red" >< label for= “ red ” > 红色</ label ></form>（12）表单区域标记 在表单中，对多个控件进行分组，使页面更具条理，<fieldset>标记、 <legend>标记用来实现表单的分区功能。<fieldset ><legend> 组标记名称</legend> 控件标记</fie

60、ldset > 3.表单标记的访问控制控制tab键的顺序 在表单中，多个控件的浏览顺序，默认的情况下是表单的书写顺序，若要更改默认顺序，可使用tabindex属性。 tabindex属性加入到控件标记中，通过tabindex的属性值的大小，改变默认顺序。快捷键 accesskey属性可以为控件提供定义快捷键，如accesskey=“n”，则用alt+n即可快捷访问此控件表单控件的禁用和只读 表单中，可以通过disable属性将表单控件设为禁用，控件外观为灰度显示。disable属性可用于<input> 、<select>、 <option>、 <

61、textarea>标记。表单提交时，被禁用的属性对将不提交。 表单中，可以通过readonly属性将表单控件设为只读，控件的内容不能修改。例如：<input type=“text” name=“myaccount” size=“10” value=“guest” maxlength=“8” disable>控件提示 使用title属性，可以给用户提示，当鼠标指针移动到控件上时，显示提示文字。例如：<input type=“text” name=“myaccount” size=“10” value=“guest” maxlength=“8” title=“请输入你的用户

62、账号”>（6） 层次块标记层次块标记<div></div>用于定义网页上的一个矩形块，中间可以包含引起行中断的标记，如<table>标记等。层次块标记的一般形式是：<div id =" " style =" "></div> <div>标记属性Id: 用于标记一个<div>块，以便引用该块。 style:<div>和<span>没有默认的显示样式 ，必须使用style属性和class样式类定义图层块的位置、大小、显示属性等。例如：style=

63、"width:100px;height:100px;overflow-x :hidden;overflow-y:hidden;"> 。 <span><span>在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。和<div>标记相比，<span>在CSS定义中属于一个行内元素，而<div>是块级元素。 三、层叠样式表CSS技术 （一）Css的概念CSS是Cascading Style Sheets(层叠样式表单)的简称。1.样式表 规范浏览器如何显示

64、HTML特定标记的一组规则。规则包括受样式规则控制的标记名称，标记的属性两部分。使用样式表（1）内部样式表：样式定义在HTML文档中。内联样式表：在应用的HTML标记中直接用style属性插入样式规则的方法。语法规则：<标记名称 style=“样式属性：属性值；样式属性：属性值；”>内联样式的优先级最高。嵌入式样式表：在应用的HTML内部，在<head> 和</head>之间用标记<style> 和</style>标记对实现。语法规则： <style> 标记名称，标记名称标记属性：属性值；样式属性：属性值； </st

65、yle>（2）外部样式表：将样式定义存储在独立的样式表文件中（扩展名为.CSS）。输入外部样式表： 在应用的HTML内部，在<head> 和</head>之间用标记<style> 和</style>标记引入外部样式表。语法规则： <style> <!- import url(“ 外部样式表文件地址 ”);-></style>链接外部样式表：在应用的HTML内部，在<head> 和</head>之间用标记<link> 标记链接到外部样式文件。语法规则： <link type=“text/css” rel=“stylesheet” href=“外部

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论