html入门学习.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,L o g o,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,课程名称,web,高级课程,(,html,),讲师：董爽爽,中软培训中心,邮件：,dongshsh,开篇,欢迎大家和我一起学习,Web,高级,学习内容：,HTML,、,JavaScript,、,CSS,要点安排：,第,1 HTML,第,2,JavaScript,第,3 HTML,与,JavaScript,的交互,第,4 css,样式表,三多,1,、多记,2,、多动,3,、多练,HTML,简介,什么是,HTML,？,1,、作用,2,、名称,HTML,英文名称是什么,?,Hyper Text Markup Language,（超文本标记语言）,HTML,简介,Blog,HTML,简介,HTML,（,Hyper Text Mark-up Language,）即超文本标记语言，是,WWW,的描述语言，由,Tim Berners-lee,提出。,HTML,语言使用标记将文本文档区分成不同的逻辑部分，向浏览器提供文档的格式信息。,HTML,语言是目前制作网页最流行的 语言,可以通过浏览器或文本编辑器查看,HTML,文档,HTML,简介,HTML,是一种标记语言。,以,“,”,表示标签的开始，以,“,”表示标签的结束,成对标签又称之为容器，一对标签中还可以嵌套其它的标签,单独标签不需要与这配对的结束标签，又称这为空标签，例如,一个,HTML,标签及标签中嵌套的内容就是网页中的一个,“,HTML,元素,”,属性设置的一般格式为：属性名属性值，属性值部分可以用英文的双引号（,”,）可单引号（,）引起来，也可以不使用任何引号。大小写也可不区分，但尽量统一！,HTML,结构,HTML,文件的所有内容都应该包含在,标记中,HTML,语言在结构上分为两部分，即头部和主体。,头部描述浏览器所需要的一些信息，如文件编码、标题等。,主体则包含了文件的主体内容,HTML,简介,标签：,HTML,头部,HTML头均需要包含在,中，可以在头中使用的标记包括,、,、,、,等等。,定义文档的标题，最终将显示在浏览器标题栏上,定义页面元信息，主要包含了搜索信息,用于引入文件,.css,指定页面脚本文件,.js,HTML,主体,HTML,主体是,HTML,页面中最终要显示出来的内容部分，主体应该包含在,中,可以在主体中输出文本、插入图片、表格、表单等等。,HTML,标签,HTML,标记的形式如下：,1,、,2,、,3,、,其中，,1,称为开始标记，,2,称为结束标记，,3,是不包含有标记体的标记,在,HTML,文档中，它们的使用方法如下：,content,从语法的角度来说，标记必须闭合,其他元素,段落,:,内容,标题元素,:,内容,内容,注意：,标题的居中属性,Align=,“,center,”,换行,:,注意：,是一个空标签,水平线,:,注意：,是一个空标签,注释,:,块：,内容,箭头：,空格：,体属性,背景颜色,bgcolor=red,”,可以直接写颜色英文名，也可以采用,#rrggbb,的形式，基本,#,号后面的,RGB,各色彩的深度,背景图片,background,back-ground.gif,”,给出图片文件位置，如图片小于页面时，将循环填充,背景音乐,注意：这是一个单独标记，要放到,中使用,Example:secondhttp.html,字体,标题字,文字,#=1,，,2,，,3,4,，,5,，,6,字体大小,文字,#=1,2,3,4,5,6,7 or+#,-#,字体颜色,文字,#=,“,#rrggbb,”,16,进制数码，或者是下列预定义色彩,Black,Olive,Teal,Red,Blue,字体,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua,.#=,客户端可获得的字体,字体,下划线：,文字,删除线：,文字,增强：,文字,粗体：,文字,斜体：,文字,删除线,:,文字,下划线,:,文字,地址,:,文字,图片,标记用来在页面中插入图片，其语法形式：,src,指明图片,URL,地址,alt,在图象位置显示的文字,图片位置：,align,定值为,left,center,right,top,middle,bottom,图片边框：,border,设定图像边的宽度,HTML,链接,图片标签：,图片作为链接：,HTML,链接,链接：,HTML,使用超级链接来连接到网络上的其他页面,链接标签：,页面显示文本,Href,属性（链接页面地址）,href=,“,所要链接到的页面地址,”,target,属性：,网易,属性值：,_self,HTML,链接,链接,中软,查看？,前者为绝对路径，后者为相对路径。,锚,mailmaolink.html,HTML,链接路径,相对路径：资源路径与你打开页面有关联的路径叫相对路径,绝对路径：资源路径与你打开页面无关的路径叫绝对路径,如果当前页面与引用资源在同一文件夹内则直接写资源名称,如果引用资源在当前文件夹下一级的文件夹内则需：,./,文件夹名称,/,资源名称,如果引用资源在当前文件夹上一级的文件夹内则需：,./,资源名称,如果引用资源在当前文件夹上两级的文件夹内则需：,././,资源名称,表格语法,表格基本语法：,-,定义表格,-,定义表行,-,定义表头,-,定义表元,其中，,是,的子元素，,、,是,的子元素，但不能直接做为,的子元素,和,一样都是定义列，不同的是,定义的是列标题，显示的字体更明显,HTML,表格,画一个表格,(,一行两列,),：,注意：一个完整的表格必须由三个标签构成，且应该先画行后画列,HTML,表格,表格头标签,（,表格头位于表格的内部,）：,头内容,标签相当于一个,标签，用法也相同。只不过格式化字体,表格标题标签,（,表格标题位于表格的上部,）：,My Caption,注意：,标签放在,的下边，第一个,的上边,表格尺寸,表格边框,默认情况下，表格是无边框的，加边框是通过,标记的,border,属性,表格尺寸,表格的尺寸是由,标记的,width,属性和,height,属性设置，可以设置成绝对值，也可以设置成相对值,表元间隙,行与列的每个交叉点都是一个表元，表元与表元间的间隙大小是由,标记的,cellspacing,设置的,表元中空白尺寸,每个表,cellpadding,决定元内，除了文字外的空白空间大小由,表格位置,表格的位置：,表格的位置由,元素的,align,属性决定，可选值包括,left,、,center,、,right,。,表格内文字的位置,表格内文字的位置是由,、,的,align,和,valign,决定的，,valign,可选值包括,top,、,middle,、,bottom,表格背景,可以为表格设置背景图片和背景颜色,背景色：,bgcolor,背景图片：,background,行背景色：,bgcolor,列背景色：,bgcolor,表格作用,表格在页面上最主要的作用其实不是绘制实际中使用的表格，更多情况下是为了使用页面看起来更规整，而将页面各部分放置到表格中,test0.html,表单,HTML,表单,（表单是一个能够包含表单元素的区域）,表单标签：,表单元素,表单,什么是表单？,表单的作用：动态网页技术中，表单的作用是十分重要的，用户与服务器的交互就是通过表单来完成的。,表单的结构：,（,1,）,（,2,）,（,3,）,表单输入类型,按钮,button,提交与重置（重要）,Reset,Submit,表单输入类型,文本域,textarea,密码,Password,文本框,text,隐藏字段,hidden,单选框,radio,复选框,Checkbox,下拉菜单,Select option,表单,HTML,表单元素,（表单元素是能够让用户在表单中输入信息的元素）,文本框标签：,注意：大部分浏览器中，文本框的宽度默认是,20,个字符,当你需要改变显示长度和最大输入字符数的时候可分别通过以下两个属性实现：,Size=“number”maxlenght=“number”,注意更多的属性情参考电子资料,表单,单选按钮标签：,Male,Female,Checked,属性的特殊性,注意：单选按钮的名称必须相同，否则不能控制单选特性,表单,复选框：,I have a bike,I have a car,注意：复选框与单选框很大的不同就是,name,属性不同，且复选框不要求有value,属性,下拉列表：,Volvo,Saab,Fiat,Audi,表单,文本域：,The cat was playing in the garden.,按钮：,两个特殊的按钮,提交按钮,重置按钮,注意：提交按钮必须配合,form,的,action,属性使用,框架,框架（,frame,）用于分割窗口，也就是浏览器在显示页面时分成几部分，每部分由独立的页面显示，如图,框架,加入框架的页面不需要,元素，使用,frameset,左右分：,上下分：,框架,frameset,属性,1.COLS=,“,20,*,”,左右分，可一次分多个,2.ROWS=,“,20,*,”,上下分，同上,3.frameborder=,“,yes,”,border=,“,1,”,设定框架的边框，,0,和,1,，,0,不要边框，,1,显示边框。,4.framespacing=5,框架与框架间空白的距离。,框架,frame,属性,1.SRC=,“,a.htm,”,当前框架显示的网页,URL,2.NAME,框架名称,3.frameborder=0,框架的边框，,0,和,1,，,0,不要边框，,1,显示边框。,4.scrolling=no,是否显示滚动条，,YES,显示，,NO,不显示，,AUTO,视情况显示。,5.noresize,不让使用者改变大小。,6.marginhight=2,框架高度部份边缘所保留的空间。7.marginwidth=2,框架宽度部份边缘所保留的空间。,框架,noframe,用法,当浏览器不支持框架时，显示提示信息,请换有支持,Frame,功能的浏览器,在框架中打开另一窗口：,Target,_top,_self,_blank,_parent,frame.html,框架,不需要一个单独的页面存放框架,.,灵活性好,.,练习,练习：,1,表格的绘制,table.html,2,表单的制作,form.html,3,框架,frame.html,JavaScript,语言概况,什么是,JavaScript,？,JavaScript,是一种基于对象,(Object),和事件驱动,(Event Driven),并具有安全性能的脚本语言。,简单的说它是一种运行在客户端的脚本语言，结构简单，使用方便，其代码可以直接放入,HTML,文档中，可以直接在支持,JavaScript,的浏览器中运行。,JavaScript,使得网页制作的交互性更强，更生动和灵活。当在浏览网页时做了某种操作就产生一个事件，,JavaScript,所编写的程序对相应的事件做出反应。,JavaScript,语言概况,基本特点：,脚本编写语言,基于对象的语言,简单性,简化的,java,语言；变量类型采用弱类型,动态性,JavaScript,是动态的，采用以事件驱动的方式进行的,跨平台性,JavaScript,是依赖于浏览器本身，与操作环境无关,JavaScript,语言概况,JavaScript,和,Java,的区别：,1,、基于对象和面向对象,面向对象的三大特点（封装，继承，多态）缺一不可。通常,“,基于对象,”,是使用对象，但是无法利用现有的对象模板产生新的对象类型,.,2,、执行过程不同,js,是浏览器读取它们的时候才进行编译、执行,3,、强变量和弱变量,JavaScript Java,var n=1 int n=1,；,n=1.5 float n=1.5,；,n=“,董爽爽,”,String n=“,董爽爽,”,；,4,、嵌入方式不一样,JavaScript,使用,.,来标识,Java,使用,.,来标识,JavaScript,引入方式,HTML,的任意位置都可以引入,JavaScript,。,有两种方式引入,JavaScript,一种是直接在,HTML,文档中直接写：,JavaScript,引入方式,另一种是写单独的,JS,文件，然后在,HTML,中引入该文件：,引入,JS,文件后，在,HTML,文件中就可以调用,JS,文件定义的函数了,还包含了一个,language,属性，用于指定使用的脚本语言,JavaScript,运行方式,可以直接在,HTML,页面中调用,JavaScript,函数，也可以通过链接方式运行指定的函数,alert(,“,Hello,World!,”,);,click here!,其中，,alert,是,JavaScript,内置的一个函数，用于弹出对话框。,做一个,alert,Alert.html,例子演示,alert.html,confirm.html,prompt.html,windowopen.html,JavaScript,基本语法,JavaScript,语法上与,Java,十分相似，不同的是,JavaScript,不是强类型，变量没有任何类型,变量：,JavaScript,不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型,var=;,=;,JavaScript,基本语法,JavaScript,语法上与,Java,十分相似，不同的是,JavaScript,不是强类型，变量没有任何类型,变量：,JavaScript,不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型,var=;,=;,JavaScript,基本语法,可在运行中改变变量类型，如：,a=,“,Hi,World!;,alert(a);,a=3+3;,alert(a);,a,原本是字符串类型的，运行中其值被赋予整型，其类型也变为了整型。,JavaScript,基本语法,语句：以分号结束，可以使用,将多个语句括在一起,JavaScript,语句在语法上与,Java,基本相同，也包括了顺序、分支、循环三种程序结构,顺序结构按语句顺序执行，分支结构根据条件执行不同的语句块，循环则反复执行同一语句块,函数,JavaScript,中函数有多种，如对象的方法、全局函数等等。这里所说的函数是指自定义函数。,定义函数用以下语句：,function,函数名,(,参数集,),.,return;,.,其中，用在,function,之后和函数结尾的大括号是不能省去的，就算整个函数只有一句。,正则表达式,正则表达式是一个描述字符模式的对象。,JavaScript,的,RegExp,对象和,String,对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法,可以使用一个,RegExp(),构造函数来创建,RegExp,对象，也可以将正则表达式直接包含在一对斜杠,(/),之间,var pattern=new RegExp(s$);,var pattern=/s$/;,字符类,将单独的直接符放进中括号内就可以组合成字符类,一个字符类和它所包含的任何一个字符都匹配,所，以正则表达式,/abc/,和字母“,a”,“b”,“c”,中的任何一个都匹配,定义否定字符尖时,要将一个,符号作为从左中括号算起的第一个字符,正则表达式,.,位于括号之内的任意字符,.,不在括号之中的任意字符,.,除了换行符之外的任意字符,等价于,n w,任何单字字符,等价于,a-zA-Z0-9 W,任何非单字字符,等价于,a-zA-Z0-9 s,任何空白符,等价于,t n r f v S,任何非空白符,等价于,t n r f v d,任何数字,等价于,0-9 D,除了数字之外的任何字符,等价于,0-9 b,与单词的边界匹配，即单词与空格之间的位置。例如，,“,erb”,与,“,never”,中的,“,er”,匹配，但是不匹配,“,verb”,中的,“,er”,。,$,第一个表示一个字符串的开始,后一个表示字符串的结束,选择,分组和引用,|,选择,.,匹配的要么是该符号左边的子表达式,要么它右边的子表达式,(.),分组,.,将几个项目分为一个单元,.,这个单元可由*、,+,、？和,|,等符号使用,整个组可以多次使用,后面可以用,3,来规定使用的次数,Zhengzehtml,DOM,简介,DOM,是,Document Object Model,的缩写，即文档对象模型,DOM,将,HTML,页面中的内容抽象成对象，每个对象拥有各自的属性,(Properties),、方法,(Method),和事件,(Events),。,通过,DOM,可以在,JavaScript,中操纵,HTML,页面的内容,DOM,简介,有些,DOM,对象在浏览器中只有一个，因此他们的名字是惟一确定的，比如,navigator,大部分,DOM,对象是不确定不惟一的，因此需要在,HTML,标记中给他们起名，如,、,等等,DOM,对象同基本对象一样，也有属性、方法和事件，尤其是,DOM,对象对事件的响应是,JavaScript,中尤为重要的部分,DOM,简介,文档对象,document,对象包含若干数组对象，它们代表了页面上的标记元素，即：,links(),链接对象集合，即,applets,Applet,对象集合,forms,表单对象集合，即,images,图片对象集合，即,embeds,插件对象集合,这些集合包含了页面上全部的同类对象，如果访问其中一个只需要加上索引即可，如,docment.forms0,表单对象,document.forms,是一个数组，包含了文档中所有的表单。要引用单个表单，可以用,document.formsx,。如果,标记中加上,“,name=,”,.,属性，那么直接用,“,document.,”,就可以引用了。,所拥有的子元素，如,等等也对应到,JavaScript,中的一类对象，通常使用,中,name,来访问这些对象，如果有：,则访问,text,类型的输入框即为,document.myForm.user,表单对象,forms,的属性：,name,表单名称，即,属性。,action,返回,/,设定表单提交地址，即,action,属性。,method,返回,/,设定表单提交方法，即,method,属性,target,返回,/,设定表单提交后返回的窗口，也就是,属性。,encoding,返回,/,设定表单提交内容的编码方式，也就是,属性。length,返回该表单所含元素的数目。,表单对象,方法,reset(),重置表单。这与按下“重置”按钮是一样的。,submit(),提交表单。这与按下“提交”按钮是一样的,表单对象,以下对象都可以做为表单属性使用，但需要指定名字,1,、文本框对象,2,、多行文本输入区对象,3,、隐藏对象,4,、密码输入区对象,5,、单选域对象,6,、复选框对象,7,、下拉菜单对象,8,、选择项对象,9,、重置按钮对象,10,、按钮对象,11,、提交对象,文本类对象,包括,text,、,textarea,、,hidden,、,password,属性,name,返回,/,设定用,指定的元素名称。,value,返回,/,设定密码输入区当前的值。,defaultValue,返回用,指定的默认值。,form,返回包含本元素的表单对象。,方法,blur(),从对象中移走焦点。,focus(),让对象获得焦点。,select(),选中输入区里全部文本。,需要注意的是，由于,hidden,不可见，因此,hidden,对象没有方法,。,按钮类对象,包括,button,、,reset,、,submit,属性,name,返回,/,设定用,指定的元素名称。,value,返回,/,设定用,指定的元素的值。,form,返回包含本元素的表单对象。,方法,blur(),从对象中移走焦点。,focus(),让对象获得焦点。,click(),模拟鼠标点击该对象,单,/,多选对象,Radio/checkbox,对象,属性,name,返回,/,设定用,指定的元素名称。,value,返回,/,设定用,指定的元素的值。,form,返回包含本元素的表单对象。,checked,返回,/,设定该单选域对象是否被选中。这是一个布尔值。,defaultChecked,返回,/,设定该对象默认是否被选中,方法,blur(),从对象中移走焦点。,focus(),让对象获得焦点。,click(),模拟鼠标点击该对象,注意：调用,document.form.radioName,返回的是数组,下拉菜单对象,select,属性,name,返回,/设定用,指定的元素名称。,length,返回,Select,对象下选项的数目。,selectedIndex,返回被选中的选项的下标。这个下标就是在,options,数组中该选项的位置。,form,返回包含本元素的表单对象。,方法,blur(),从对象中移走焦点。,focus(),让对象获得焦点,下拉菜单对象,options,数组的属性,length;selectedIndex,与所属,Select,对象的同名属性相同。,单个,Option,对象的属性,text,返回,/,指定,Option,对象所显示的文本,value,返回,/,指定,Option,对象的值，与,一致。,index,返回该,Option,对象的下标。对此并没有什么好说，因为要指定特定的一个,Option,对象，都要先知道该对象的下标。这个属性好像没有什么用。,selected,返回,/,指定该对象是否被选中。通过指定,true,或者,false,，可以动态的改变选中项。,defaultSelected,返回该对象默认是否被选中。,true/false,。,HTML,样式单,CSS,是,Cascading Style Sheets,（层叠样式表单）的简称,CSS,的基本语法：,HTML,标志,标志属性：属性值；标志属性：属性值；标志属性：属性值；,B color:red,I color:red,H1 color:red,HTML,样式单,式样表的三个位置：,1,、内部样式表,h1 color:red,h3 color:blue,2,、行内样式,LINK!,3,、连接外部样式表,样式使用方式一,.,样式表信息必须包含在这对标签之间,.,这对标签必须放在,中,eg:,分组使用样式表,多个标志相同属性的定义方式：,B,I,H1color:red,B,粗体,I,斜体,H1 1,号标题,Css,样式,定义在标签上的,css,格式,H1,H2,H3,H4,H5,H6,Color:red;,text-decoration:underline;,Font-family:”,黑体”,;,Css,样式,设定在,ID,上的,css,格式为,#id,名,标志属性：属性值；,标志属性：属性值；,标志属性：属性值,引用的方法：,。,Css,样式,直接定义,class,：,.,类名,标志属性：属性值；标志属性：属性值；,标志属性：属性值,引用：,css,样式,直接定义,class,：,.,类名,标志属性：属性值；标志属性：属性值；,标志属性：属性值,引用：,定义,Id,：,#id,名,标志属性：属性值；标志属性：属性值；,标志属性：属性值,引用的方法也相同：,。,css,链接样式,a:link,设置链接本来的颜色,a:active,设置链接被激活的颜色,a:visited,设置链接访问过后的颜色,a:hover,设置链接在鼠标悬停时的颜色,总结,1html,2javascript,3css,