《JavaWeb系统开发培训HTML.ppt》由会员分享，可在线阅读，更多相关《JavaWeb系统开发培训HTML.ppt（65页珍藏版）》请在三一办公上搜索。
1、1,Java Web系统开发培训HTML,李雄锋北京中科辅龙计算机技术有限公司2005年6月13日,2,目录,HTML结构HTML元素改进HTML页面样式Java script,3,1.HTML结构,新建网页 1,版本信息,头部信息,内容实体,4,1.1.HTML文档头,新建网页 1,元数据,标题,脚本,样式,5,1.2 HTML-meta,说明个性化信息 HTTP头部信息支持搜索引擎缺省信息,语法：,6,1.2 HTML文档体,北京中科辅龙计算机技术有限公司北京中科辅龙计算机技术有限公司成立于1998年7月，时值中国科学院开始实施知识创新工程。中国科学院计算技术研究所 为了成果转化和更好地面
2、向市场开展工作，出资成立了中科辅龙公司，并把所内的CAD开放实验室、网络研究室的研究力量和相关的知识产权注入到公司，使得公司自成立之初就拥有了厚实的技术基础。之后又根据中国科学院的改革进程，把公司委托给了联想集团进行管理，期望公司从联想集团学到有用的经营管理经验。,7,1.3 HTML中的元素定义,北京中科辅龙计算技术有限公司,内容,8,1.4 HTML中的元素块,块(block)和嵌入(inline)块：body,div,p,tableform,嵌入：span,a,块中包含块和嵌入元素嵌入元素中不能有块可以通过设置style中display:inline/block来改变。,9,1.5 HT
3、ML中的元素-属性,标识：id,class语言：lang,dir(阅读方向)标题：title样式：style事件：onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup背景色：bgcolor对齐：align,char,charoff,valign,10,2 HTML中的元素,分组元素 DIV SPAN标题文本列表表格链接对象 样式格式化框架表单,11,2.1 分组元素 DIV SPAN,结构化文档，其本身不产生任何副作用。DIV是块元素，用于
4、文档中分段SPAN是嵌入元素，用于对段中元素分组,北京中科辅龙计算机技术有限公司成立于1998年7月，时值中国科学院开始实施知识创新工程。中国科学院计算技术研究所 为了成果转化和更好地面向市场开展工作，出资成立了中科辅龙公司，并把所内的CAD开放实验室、网络研究室的研究力量和相关的知识产权注入到公司，使得公司自成立之初就拥有了厚实的技术基础。之后又根据中国科学院的改革进程，把公司委托给了联想集团进行管理，期望公司从联想集团学到有用的经营管理经验。联系我们。,12,2.2 标题元素,描述元素所在区块的主题H1,h2,h3,h4,h5,h6 都是块元素,公司产品龙驭网站内容管理系统龙驭视频会议及会
5、议管理系统龙驭自助建站系统龙驭搜索引擎系统龙驭项目申报审批管理系统龙驭网上培训管理系统,13,2.3 文本-强调,强调：em、strong中科辅龙中科辅龙,中科辅龙,中科辅龙,14,2.3 文本-上下标,Sup：上标Sub：下标,中科辅龙Longcon龙驭网站内容管理系统,15,2.3 文本换行,BR,16,2.3 文本段落,pre：保留输入文本的格式，除了pre元素，其他的元素都将忽略输入文本中的换行，将其解释为文字间隔p：块元素，代表一个段落，其中不能再包含其他的块元素（包括P本身）。,17,2.3 文本特殊字符,18,2.4 列表-无序列表UL,龙驭网站内容管理系统龙驭视频会议系统龙驭自
6、助建站系统龙驭搜索引擎系统龙驭项目申报系统龙驭网上培训管理系统龙驭办公自动化系统,列表前缀Disc：实心圆点Circle：空心圆点Square：空心方块可以通过style中设置list-style-type属性来修改前缀字符或者图片,19,2.4 有序列表 OL,列表前缀1：1,2,3,4a:a,b,c,dA:A,B,C,Di：I,ii,iii,ivI：I,II,III,IV可以通过style中设置了list-style-type属性来修改前缀字符或者图片,第一期公告第二期公告第三期公告第四期公告第五期公告第六期公告,20,2.5 表格-Table,21,2.5 表格行,TRBgcolor表头
7、分组：thead表身分组：tbody表尾分组：tfooter,22,2.5 表格单元格,数据单元格 TD表头单元格 THColspanrowspan,23,2.5 链接-A,链接到页面辅龙链接到指定元素 辅龙 目标窗口：_self：自身_blank:新窗口_parent:父窗口_top:最顶层的窗口_search:搜索窗口指定的frame名称,链接说明,24,2.5 链接-Link,在head元素内部说明不渲染任何内容所连接的文件，和html页面是同步下载的，但是浏览器会缓存该文件，在第二次访问页面的时候，这个文件可以不再下载，从而大大提高网页渲染速度。在新的页面设计思想中，充分利用这个特点，
8、将页面上的基本保持不变的内容样式放在css文件中。,定义css文件定义网站图标定义收藏夹图标,25,2.6 格式化（不再使用）,背景色：bgcolor，在body,table,td,th等元素中使用横向对齐align和纵向对齐valign：I,B,BIG,SMALL,STRIKE,S,U,BR font元素 hr元素,26,2.7 对象img,27,2.7 对象object,28,2.7 框架文档结构,A simple frameset document 你的浏览器不支持框架页面显示。,文档头部,定义框架页,没有框架的时候显示,Header.html,10%,150,100,Index.htm
9、l,Footer.html,Content.html,29,2.7 框架frameset,Rows:横向切分Cols:纵向切分,100像素,（总高度-100)*25%,（总高度-100)*75%,75%,25%,30,2.7 框架frame,31,2.7 框架iframe,32,2.8 表单,表单按钮输入域文本域下拉列表表单的组织,33,2.8 表单-form,34,2.8 表单-input,inputType=“类型”TEXT:文本框PASSWORD：密码框 CHECKBOX：复选框 RADIO：单选框SUBMIT：提交按钮 RESET：重置按钮 FILE：文件选择框HIDDEN：隐藏域IM
10、AGE：图形提交按钮，用户点击的x,y坐标值将被提交到服务器。通过name.x,name.y来获取 BUTTON：普通按钮,35,2.8 表单-input（续）,Name=“名称”。在服务器端，通过request.getParameter(name)来获取设置的值，如果有多个控件使用同一个名称，则可以采用request.getParameterValues(name)来获取Value=“值”Checked：设置单选或者复选框是否被选中Disable:禁用，不接受用户输入，不接受tab键漫游，本控件的值不被提交Readonly：只读，不接受用户输入，接受tab键漫游，控件的值被提交Size：控件
11、宽度。对于password和text，是以字符数为单位，其他的采用像素为单位,36,2.8 表单-input（续）,Maxlength：passport和text可以输入的最大字符数Src:image的图片地址Tabindex:tab键漫游的顺序Type：file控件可以接受的文件类型Onfocus:获取键盘输入焦点Onblur:失去键盘输入焦点Onselect:内容被选择Onchange:内容发生改变,37,2.8 表单-button,可以在这里设置按钮的界面,提供比更丰富的表达能力，可以设置多文本的按钮界面。,38,2.8 表单-select、optgroup,option,39,2.8
12、表单-optgroup,对选项作分组，可以用于构造多级菜单,40,2.8 表单-option,显示的内容,41,2.8 表单-textarea,缺省值,42,2.8 表单的组织-fieldset、legend,区块名称,43,3.改进HTML页面,利用表格来排版利用空白的gif来作间隔页面字节数变大，下载速度慢，不容易改版,利用Div和Span来排版，大规模降低排版所需的额外标签利用样式来做定位。由于样式可以利用link标签引入页面，可以独立下载并缓存在本地，从而提高速度,44,4样式,样式介绍样式文件的组成选择器样式表样式分类字体段落边框编号定位,45,4.1样式介绍,CSS-Cascadi
13、ng Style Sheets 层叠样式表CSS背景CSS2.0工作原理,46,4.2 样式文件,.en11font-size:11px;color:#f0f0f0,选择器,样式列表，以“；”分隔多个样式,47,4.3 选择器（一）,类选择器 定义：.类名样式列表说明：应用在属性class等于选择器类名的标签上。示例：.f10p font-size:10px，可以应用在标签选择器 定义：标签样式列表，说明：应用在指定标签上示例：Tdfont-size:10px，应用在所有的td标签上。ID选择器定义：#ID样式列表说明：应用在ID等于选择器ID名的标签上示例：#enfont-size:10px
14、，应用在,48,4.3 选择器（二）,属性选择器定义 E属性=值样式列表说明：对所有属性值为指定的值的标签示例：inputtype=submitcolor:#f0f0f0应用于行为选择器定义：:行为样式列表说明：应用于标签在指定的行为示例：A:visitedcolor:#f0f0f0将被访问过的标签渲染为灰色；,49,4.3 选择器（三）,复合选择器：可以将多个选择器叠加起来以更精确定位所要应用的标签：Td color:black;cursor:hand.br12color:red;font-weight:boldTd.br12border:1px,groove,red：1有效.：1有效.：2
15、有效.：1、2、3有效.：1、2、3有效,50,4.4 字体样式,Font-family：字体类型Font-style：Normal：缺省值，正常显示Italic：斜体oblique：斜体Font-variant：Normal：缺省值，正常显示Small-caps:显示成大写字符Font-weight：粗体Lighter|normal|bold|bolder|Font-size:字体大小Color:前景色，即字体颜色,51,4.5 文本,Text-align：水平对齐方式，左、右、居中、分散Text-decoration：无、下划线、中间线、上划线、闪烁Text-indent：首行缩进Text
16、-overflow：将过长的字符显示为 Text-transform：Capital:将所有单词的第一个字符显示为大写Uppercase:将所有单词显示为大写Lowercase:将所有单词显示为小写None:无white-space：如何处理空白字符。Pre:和源代码一样换行Nowrap：空白字符不作为可换行字符Wrap:可以在空白字符处换行Word-spacing:字符间距Line-height：行间距,52,4.6 背景,background-color：背景色 background-image：背景图片background-repeat：图片叠放background-attachment
17、：background-position：背景图片相对位置Background：背景属性设置，包括以上列出来的值,53,4.7 边框和定位,Margin：空白，可以分别设置上下左右的空白的宽度Border：边框，可以分别设置上下左右的边框的颜色、样式、宽度Padding:填充，可以分别设置上下左右的填充的宽度,Box模型,54,4.8 显示效果,Overflow：当内容超过可显示区域时：Visible：（缺省）超过内容可见。Hidden：不可见Scroll：显示滚动条Auto：自动显示滚动条,visible,hidden,I didnt like the play,but then I saw
18、 it under adverse conditions-the curtain was up.div width:100px;height:100px;border:thin；solid red;blockquote width:125px;height:100px;margin-top:50px;margin-left:50px;border:thin dashed black,55,4.9 显示效果,Clip:定义可视区域大小。Visibility：Visible：整个区域可见Hidden：不显示整个区域，但是仍然占据原有位置，与display不同，display：none完全不显示区域
19、，也不占有位置,56,4.10 列表样式,List-style-type:前导符Disc:实心圆点 Circle：空心圆点 Square：实心小四方体 decimal 1,2,3,4,lower-roman i,ii,iii,ivupper-roman I,II,III,IVlower-alpha a,b,c,dupper-alpha A,B,C,Dnone No marker is shown.List-style-image:利用小图片作前导符List-style-position:前导符的位置：Outside：外置Inside：内置,外置前导符,内置前导符,57,4.11过滤器,CSS静
20、态过滤器：Alpha,Blur,Chroma,DropShadow,FlipH,FlipV,Glow,Gray,Invert,Light,Mask,Shadow,Wave,Xray等。CSS动态过滤器：BlendTrans,RevealTrans。,58,5 Java script,简介语法对象事件/句柄DOM模型ajax,59,5.1 Java script 简介,背景工作原理和jsp代码的比较及结合,60,5.2 Java script 对象,61,5.2 Java script 对象,62,5.3 Java script事件/句柄,onAbortonBluronChangeonClick
21、onDblClickonDragDroponErroronFocusonKeyDownonKeyPressonKeyUponLoad,onMouseDownonMouseMoveonMouseOutonMouseOveronMouseUponMoveonResetonResizeonSelectonSubmitonUnload,63,5.4 DOM模型,DOM是针对XML的基于树的API，它的实现有很多（各语言基本都有自己的实现），我们讨论的是javascript中或者说xhtml(html)对DOM的实现,64,5.5ajax,Asynchronous JavaScript and XML 原理通过js向服务器动态提交请求。服务器根据请求返回xml文档。运用DOM模型解析xml。动态渲染页面。,65,谢谢！,
