html入门学习.ppt

1、课程名称 web 高级课程(html),讲师：董爽爽 中软培训中心 邮件：,开篇,欢迎大家和我一起学习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 ）即超文本标记语言，

2、是 WWW的描述语言，由 Tim Berners-lee提出。 HTML语言使用标记将文本文档区分成不同的逻辑部分，向浏览器提供文档的格式信息。 HTML语言是目前制作网页最流行的 语言 可以通过浏览器或文本编辑器查看HTML文档,HTML简介,HTML是一种标记语言。 以“”表示标签的开始，以“”表示标签的结束 成对标签又称之为容器，一对标签中还可以嵌套其它的标签 单独标签不需要与这配对的结束标签，又称这为空标签，例如 一个HTML标签及标签中嵌套的内容就是网页中的一个“HTML元素” 属性设置的一般格式为：属性名属性值，属性值部分可以用英文的双引号（”）可单引号（）引起来，也可以不使用任何

3、引号。大小写也可不区分，但尽量统一！,HTML结构,HTML文件的所有内容都应该包含在标记中 HTML语言在结构上分为两部分，即头部和主体。 头部描述浏览器所需要的一些信息，如文件编码、标题等。 主体则包含了文件的主体内容,HTML简介,标签：,HTML头部,HTML头均需要包含在中，可以在头中使用的标记包括、等等。 定义文档的标题，最终将显示在浏览器标题栏上 定义页面元信息，主要包含了搜索信息 用于引入文件.css 指定页面脚本文件.js,HTML主体,HTML主体是HTML页面中最终要显示出来的内容部分，主体应该包含在中 可以在主体中输出文本、插入图片、表格、表单等等。,HTML标签,HT

4、ML标记的形式如下： 1、 2、 3、 其中，1称为开始标记，2称为结束标记，3是不包含有标记体的标记 在HTML文档中，它们的使用方法如下： content 从语法的角度来说，标记必须闭合,其他元素,段落 : 内容 标题元素: 内容 内容 注意：标题的居中属性 Align = “center” 换行: 注意：是一个空标签 水平线: 注意：是一个空标签 注释 : 块： 内容 箭头： ,体属性,背景颜色 bgcolor=red” 可以直接写颜色英文名，也可以采用#rrggbb的形式，基本#号后面的RGB各色彩的深度 背景图片 backgroundback-ground.gif” 给出图片文件位置

5、，如图片小于页面时，将循环填充 背景音乐 注意：这是一个单独标记，要放到中使用 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 . #=客户端可获得的字体,字体,下划线：文

6、字 删除线：文字 增强：文字 粗体：文字 斜体：文字 删除线:文字 下划线:文字 地址:文字,图片,标记用来在页面中插入图片，其语法形式： src 指明图片URL地址 alt 在图象位置显示的文字 图片位置： align 定值为left,center,right,top, middle,bottom 图片边框： border 设定图像边的宽度,HTML链接,图片标签： 图片作为链接： ,HTML链接,链接： HTML使用超级链接来连接到网络上的其他页面 链接标签： 页面显示文本 Href属性（链接页面地址） href = “所要链接到的页面地址”,target属性： 网易 属性值：_self,

7、HTML链接,链接 中软 查看？ 前者为绝对路径，后者为相对路径。 锚 mailmaolink.html,HTML链接路径,相对路径：资源路径与你打开页面有关联的路径叫相对路径 绝对路径：资源路径与你打开页面无关的路径叫绝对路径 如果当前页面与引用资源在同一文件夹内则直接写资源名称 如果引用资源在当前文件夹下一级的文件夹内则需：./文件夹名称/资源名称 如果引用资源在当前文件夹上一级的文件夹内则需：./资源名称 如果引用资源在当前文件夹上两级的文件夹内则需：././资源名称,表格语法,表格基本语法： - 定义表格 - 定义表行 - 定义表头 - 定义表元 其中，是的子元素，、是的子元素，但不能

8、直接做为的子元素 和一样都是定义列，不同的是定义的是列标题，显示的字体更明显,HTML表格,画一个表格(一行两列)： 注意：一个完整的表格必须由三个标签构成，且应该先画行后画列,HTML表格,表格头标签（表格头位于表格的内部）： 头内容 标签相当于一个标签，用法也相同。只不过格式化字体 表格标题标签（表格标题位于表格的上部）： My Caption 注意： 标签放在的下边，第一个的上边,表格尺寸,表格边框 默认情况下，表格是无边框的，加边框是通过标记的border属性 表格尺寸 表格的尺寸是由标记的width属性和height属性设置，可以设置成绝对值，也可以设置成相对值 表元间隙 行与列的每

9、个交叉点都是一个表元，表元与表元间的间隙大小是由标记的cellspacing设置的 表元中空白尺寸 每个表cellpadding决定元内，除了文字外的空白空间大小由,表格位置,表格的位置： 表格的位置由元素的align属性决定，可选值包括left、center、right。 表格内文字的位置 表格内文字的位置是由、的align和valign决定的，valign可选值包括top、middle、bottom,表格背景,可以为表格设置背景图片和背景颜色 背景色： bgcolor 背景图片： background 行背景色： bgcolor 列背景色： bgcolor,表格作用,表格在页面上最主要的作

10、用其实不是绘制实际中使用的表格，更多情况下是为了使用页面看起来更规整，而将页面各部分放置到表格中 test0.html,表单,HTML表单 （表单是一个能够包含表单元素的区域 ） 表单标签：表单元素,表单,什么是表单？ 表单的作用：动态网页技术中，表单的作用是十分重要的，用户与服务器的交互就是通过表单来完成的。 表单的结构： （1） （2） （3） ,表单输入类型,按钮 button 提交与重置（重要） Reset Submit,表单输入类型,文本域 textarea 密码 Password 文本框 text 隐藏字段 hidden 单选框 radio 复选框 Checkbox 下拉菜单 Se

11、lect option,表单,HTML表单元素（表单元素是能够让用户在表单中输入信息的元素 ） 文本框标签： 注意：大部分浏览器中，文本框的宽度默认是20个字符 当你需要改变显示长度和最大输入字符数的时候可分别通过以下两个属性实现： Size = “number” maxlenght = “number” 注意更多的属性情参考电子资料,表单,单选按钮标签： Male Female Checked属性的特殊性 注意：单选按钮的名称必须相同，否则不能控制单选特性,表单,复选框： I have a bike I have a car 注意：复选框与单选框很大的不同就是name属性不同，且复选框不要求

12、有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” bo

13、rder=“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框架宽度部份边缘所保留的空间。,框架

14、,noframe用法 当浏览器不支持框架时，显示提示信息 请换有支持Frame功能的浏览器 在框架中打开另一窗口：Target _top _self _blank _parent frame.html,框架, 不需要一个单独的页面存放框架.灵活性好.,练习,练习：1表格的绘制 table.html 2表单的制作 form.html 3框架 frame.html,JavaScript语言概况,什么是JavaScript ？ JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 简单的说它是一种运行在客户端的脚本语言，结构简单，使用方便

15、，其代码可以直接放入HTML文档中，可以直接在支持JavaScript的浏览器中运行。 JavaScript使得网页制作的交互性更强，更生动和灵活。当在浏览网页时做了某种操作就产生一个事件， JavaScript所编写的程序对相应的事件做出反应。,JavaScript语言概况,基本特点： 脚本编写语言 基于对象的语言 简单性 简化的java语言；变量类型采用弱类型 动态性 JavaScript是动态的，采用以事件驱动的方式进行的 跨平台性 JavaScript是依赖于浏览器本身，与操作环境无关,JavaScript语言概况,JavaScript和Java的区别 ： 1、基于对象和面向对象 面向

16、对象的三大特点（封装，继承，多态）缺一不可。通常 “基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型. 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文档中直接写

17、： ,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 w

18、indowopen.html,JavaScript基本语法,JavaScript语法上与Java十分相似，不同的是JavaScript不是强类型，变量没有任何类型 变量：JavaScript不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型 var =; =;,JavaScript基本语法,JavaScript语法上与Java十分相似，不同的是JavaScript不是强类型，变量没有任何类型 变量：JavaScript不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型 var =; =;,JavaScript基本语法,可在运行中改变变量类型，如： a=“Hi, Wo

19、rld!; alert(a); a=3+3; alert(a); a原本是字符串类型的，运行中其值被赋予整型，其类型也变为了整型。,JavaScript基本语法,语句：以分号结束，可以使用将多个语句括在一起 JavaScript语句在语法上与Java基本相同，也包括了顺序、分支、循环三种程序结构 顺序结构按语句顺序执行，分支结构根据条件执行不同的语句块，循环则反复执行同一语句块,函数,JavaScript中函数有多种，如对象的方法、全局函数等等。这里所说的函数是指自定义函数。 定义函数用以下语句： function 函数名(参数集) . return ; . 其中，用在 function 之后

20、和函数结尾的大括号是不能省去的，就算整个函数只有一句。,正则表达式,正则表达式是一个描述字符模式的对象。 JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法 可以使用一个RegExp()构造函数来创建RegExp对象，也可以将正则表达式直接包含在一对斜杠(/)之间 var pattern = new RegExp(s$); var pattern = /s$/;,字符类,将单独的直接符放进中括号内就可以组合成字符类 一个字符类和它所包含的任何一个字符都匹配,所，以正则表达式 / abc / 和字母 “a” , “b” ,

21、“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”。 $ 第一个表示

22、一个字符串的开始,后一个表示字符串的结束,选择,分组和引用,| 选择.匹配的要么是该符号左边的子表达式,要么它右边的子表达式 (.) 分组.将几个项目分为一个单元.这个单元可由 *、+、？和|等符号使用,整个组可以多次使用,后面可以用3来规定使用的次数 Zhengze.html,DOM简介,DOM是Document Object Model的缩写，即文档对象模型 DOM将HTML页面中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events) 。 通过DOM 可以在JavaScript中操纵HTML页面的内容,DOM简介,有些DOM对象在浏览器

23、中只有一个，因此他们的名字是惟一确定的，比如navigator 大部分DOM对象是不确定不惟一的，因此需要在HTML标记中给他们起名，如、等等 DOM对象同基本对象一样，也有属性、方法和事件，尤其是DOM对象对事件的响应是JavaScript中尤为重要的部分,DOM简介,文档对象,document对象包含若干数组对象，它们代表了页面上的标记元素，即： links()链接对象集合，即 appletsApplet对象集合 forms表单对象集合，即 images图片对象集合，即 embeds插件对象集合 这些集合包含了页面上全部的同类对象，如果访问其中一个只需要加上索引即可，如docment.fo

24、rms0,表单对象,document.forms是一个数组，包含了文档中所有的表单。要引用单个表单，可以用 document.formsx。如果标记中加上“name=”.“”属性，那么直接用“document.”就可以引用了。 所拥有的子元素，如等等也对应到JavaScript中的一类对象，通常使用中name来访问这些对象，如果有： 则访问text类型的输入框即为document.myForm.user,表单对象,forms的属性： name 表单名称，即属性。action 返回/设定表单提交地址，即action属性。method 返回/设定表单提交方法，即method属性 target 返回

25、/设定表单提交后返回的窗口，也就是属性。encoding 返回/设定表单提交内容的编码方式，也就是属性。length 返回该表单所含元素的数目。,表单对象,方法 reset() 重置表单。这与按下“重置”按钮是一样的。submit() 提交表单。这与按下“提交”按钮是一样的,表单对象,以下对象都可以做为表单属性使用，但需要指定名字 1、文本框对象 2、多行文本输入区对象 3、隐藏对象 4、密码输入区对象 5、单选域对象 6、复选框对象 7、下拉菜单对象 8、选择项对象 9、重置按钮对象 10、按钮对象 11、提交对象,文本类对象,包括text、textarea、hidden、password

26、属性 name 返回/设定用指定的元素名称。value 返回/设定密码输入区当前的值。defaultValue 返回用指定的默认值。form 返回包含本元素的表单对象。 方法 blur() 从对象中移走焦点。focus() 让对象获得焦点。select() 选中输入区里全部文本。 需要注意的是，由于hidden不可见，因此hidden对象没有方法。,按钮类对象,包括button、reset、submit 属性 name 返回/设定用指定的元素名称。value 返回/设定用指定的元素的值。form 返回包含本元素的表单对象。 方法 blur() 从对象中移走焦点。focus() 让对象获得焦点。

27、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 返回/指定 Optio