html+css+javascript教程课件ppt.ppt

HTML WEB第一语言 2020 3 24 1 课程内容及学习周期 HTML介绍HTML细节文件结构文字图片链接表格表单多窗口特殊字符 在不是很熟悉HTML的情况下 学习加练习的时间应该在4 8天对于已经熟悉HTML的读者可以略过本章本章内容针对程序员进行设置 不是培养设计师 2020 3 24 2 HTML简介 HyperTextMarkupLanguage超文本 文字 图片 音视 链接 标记语言 浏览器根据标记显示内容 来自于SGML 标准通用标记语言 专注于在Web上传递信息是写给浏览器的语言历史HTML1 0 HTML2 0 IETF制定 HTML4 0 最终版 W3C HTML5 未来代替HTML IETF InternetEngineeringTaskForceHTTP协议RFC等RFC2616Http1 1RFC1521MIMEW3C WorldWideWebConsortium www w3 org HTMLXML等XHTML符合XML标准的HTMLDHTML Dy namicHTML X HTML CSS JavaScript的综合运用 2020 3 24 3 HTML语法标记 标记 标签或元素 的形式内容Eg 文字Eg Eg 位于尖括号内 可以具有属性值属性值必须 或 不写也可以解析 但是不推荐 不符合XHTML 有开始必须有结束 XHTML 标签不能嵌套不区分大小写但应该养成良好的编程习惯 推荐都用小写 2020 3 24 4 Html文档结构 典型HTML我会努力的 01 html 2020 3 24 5 head中的常用标签 文字 文字 将显示在浏览器标题栏上 用于设置一些头信息 定义CSS格式 用于定义脚本 Eg Javascript http equiv 指明下面要设置的项目 content 指明该项目设置的内容 02 html 标签 2020 3 24 6 色彩值 rrggbb Eg 红绿蓝数字值body其他属性textlinkalinkvlinkbgcolorleftmargintopmargin 03 html 04 html 2020 3 24 7 锚点标签 在该位置定义名字为AnchorName的锚 就是给这个位置起了个名字 别人可以用这个名字直接链接到该文件的这个位置 2020 3 24 8 链接标签 超级链接 跳转到另一文件文字当鼠标点击 文字 时 TargetWindow的内容将会跳转到 url 不指定target时在本窗口跳转 连接到文件的特定部分Href url point 链接到url的point部分在url文档中用标识Target见 框架 部分 05 html06 html 2020 3 24 9 路径问题 本地路径 c dir1 dir2 绝对路径 07 html 相对于URL地址 2020 3 24 10 URLURIURN URLUniformResourceLocator 统一资源定位符 网络协议 主机名 端口号 资源名 定位标记 80 index html top带有参数的url及url编码问题见Servlet JSP部分URNUniformResourceName持久可用的资源标准名称例如邮箱名mashibing2004 URIUniformResourceIdentifier包含URL和URN URI URL URN html 2020 3 24 11 分隔线 语法Size高度Align对齐方式 可以取left或rightNoshade无阴影效果颜色Eg 08 html 2020 3 24 12 标题字体大小 1 2 3 4 5 6按标题级别用黑体字显示标题内容自动插入空行最大最小 09 html 2020 3 24 13 字体设置 face定义字体size1234567实际8101214182436 pixels Color可以使用预定义的名字 也可以使用数字red blue black 通常是打字机风格字体通常是引用方式 斜体 强调 通常是斜体加粗体 10 html 2020 3 24 14 设置文字显示 11 html 2020 3 24 15 特殊字符 12 html 可以使用 2020 3 24 16 文字的布局 分段落现实 分块显示 符号列表 数字列表 13 html 2020 3 24 17 换行 不换行保留原有格式跑马灯效果 2020 3 24 18 对齐 align 取值 leftrightcentertopmiddlebottom 对齐到中间 14 html 2020 3 24 19 图片 Src图片路径 一般使用相对路径Alt图片无法显示时显示的文字Border边框的厚度Align leftrighttopmiddlebottom图文混排时用于和图片的对齐 15 html 图片与链接 见DreamWeaver演示 2020 3 24 20 表格 重点掌握 或像素值 表头 可选 单元格 topmiddlebottom 跨行 跨列 16 html table的属性 bgcolorborderbordercolorlightbordercolordarkcellspacingcellpaddingwidthheight 2020 3 24 21 表单 重点掌握 作用收集用户信息数据库查询收发email 用户不仅仅是信息的被动接受者 还可以通过表单成为信息的主动发出者 2020 3 24 22 表单基础 的属性Method getpost Get发送较少数据 256byte 显示在url中 url userinfo username 张三 password hehePost数据长度无限制 不会显示在url中ActionForm中数据交给服务器端哪个程序进行处理Eg 2020 3 24 23 位于表单中的输入标签 位于之中 接收用户输入格式 type textradiocheckboxpasswordhiddenselectsubmitresetbuttontextareaimagename 提交到服务器端的变量的名字 2020 3 24 24 表单中的输入标签 文本框textmaxlength 最大字符长度size 文本框宽度 字符 密码区域 特殊的单行文本输入框password单选按钮典型用法 同一名字 不同的值错误的用法 不同的名字 2020 3 24 25 复选框典型的用法 同一name 不同的value隐藏域不显示在网页中通常用作向下一个页面传输已知信息或表单的附加信息 2020 3 24 26 select 列表框 Multiple表示多重列表框 可以多选Selected被选中多行多列文本框 Rows 行数Cols 列数Wrap Off 不换行Soft 自动换行 并且如果行末有英文单词 会将整个单词移到下一行Hard 自动换行 但会截断行末的单词 中间的值会被提交所以不要含有空格 2020 3 24 27 button 按下该按钮没有反映按下该按钮 该form中所有的输入信息将被提交到服务器按下该按钮 该form中所有的输入部分将被重置点击图片提交 Label标签与输入元素相关联见DreamWeaver演示 2020 3 24 28 框架 嵌套 Pixelsor yesnoauto 18 html 19 html 2020 3 24 29 链接 表单与框架 Target Framename blank新窗口 self本窗口 parent父窗口 本窗口的上一级窗口 top浏览器窗口 2020 3 24 30 HTML网上行 比老师更加渊博的老师 互联网打开网页IE菜单 查看 源文件IE菜单 文件 另存为学习其他的优秀的HTML设计可以查看CSS可以查看Javascript读代码应该直奔目的地没必要背过HTML标签 2020 3 24 31 CSS HTML美容师 2020 3 24 32 课程内容 CSS介绍CSS细节CSS的各种属性 视熟悉程度 应掌握在1 6个小时左右 当然了 我们培养的是程序员 这个时间足够了 2020 3 24 33 CSS定义 CSS CascadeStyleSheet层叠样式表1998 5 12 CSSlevel2成为W3C标准用来装饰HTML XML的标记集合特点 样式表由样式规则组成 以告诉浏览器如何显示一个文档每个规则的组成包括一个选择符 通常是一个HTML的元素 和该选择符所接受的样式每个元素可以定义多个属性 每个属性带有一个值 共同的描述选择符如何呈现 2020 3 24 34 CSS样式 样式规则格式 选择符 属性 值 单一选择符的复合样式声明应该用分号分割 选择符 属性1 值1 属性2 值2 01 html 2020 3 24 35 CSS的调用方式 在Head中调用 01 html 在Body中调用 02 html 调用css文件 03 html 03 css CSS的优先级问题按照最靠近元素的定义来显示 04 html 如果两个css文件冲突 以后面的为准 2020 3 24 36 CLASS ID 类选择符 Class一个选择符能有不同的Class 因而允许同一个选择符具有不同的样式 05 htm 不同的选择符也可以同时定义一样的样式 06 htm ID选择06 1 htm 2020 3 24 37 CSS组合 注释 可以一次性定义多个选择符的样式H1 H2 H3 color red font family serif PA 06 2 html注释 这是注释 2020 3 24 38 字体属性 例 07 html 2020 3 24 39 颜色与背景属性 例 08 html 2020 3 24 40 文本属性 例 09 html Em 12pixels的 M 常用于印刷的单位 2020 3 24 41 装饰超链接伪类选择符 对链接的修饰A link未访问时的状态A visited访问过后的状态A active鼠标点中不放时的状态A hover鼠标划过时的状态10 html 2020 3 24 42 边距属性 例 11 html 2020 3 24 43 填充属性 例 12 html 2020 3 24 44 边框属性 例 13 html 2020 3 24 45 2020 3 24 46 图文混排 例 14 html 2020 3 24 47 列表属性 例 15 html 2020 3 24 48 鼠标属性 例 16 html 2020 3 24 49 定位属性 例 17 html18 html 2020 3 24 50 滤镜属性 例 19 html 2020 3 24 51 CSS布局CSS框架 2020 3 24 52 DreamWeaver 认识DreamWeaver练习使用DreamWeaver用DreamWeaver画表格和表单用DreamWeaver来应用CSS 2020 3 24 53 JavaScript WEB魔术师 2020 3 24 54 本章内容的学习周期 视熟悉程度 应该在4 16小时左右 可以达到入门并熟悉常用操作的目的 例如 打开新窗口 判断表单输入等 当然了 javascript是一门独立的语言 如果应用的好 可以作出很多丰富多彩的效果 甚至游戏 2020 3 24 55 课程内容 Javascript介绍Javascript语言 视熟悉程度 应该在4 16小时左右 可以达到入门并熟悉常用操作的目的 例如 打开新窗口 判断表单输入等 当然了 JavaScript是一门独立的语言 如果应用的好 可以作出很多丰富多彩的效果 甚至游戏 2020 3 24 56 程序开发分为客户端 服务器端 客户端开发的好处减少客户端到服务器端的往返 表单验证服务器端开发的好处web应用的核心逻辑集中管理胖客户端 瘦客户端 2020 3 24 57 客户端编程的主要技术 javascript 最主要的 vbscriptjscriptappletactivex组件plug in技术 价值在于 让专家级程序员开发新型语言 flash技术的最新发展jsdk包含的plug inyahoo的工具条百度搜索伴侣CNNIC网络实名等3721 2020 3 24 58 学习资料 msdn jscript参考CoreGuideJS15 zipCoreReferenceJS15 zipJavaScript手册 中文 chmJavaScript2005 Wrox ProfessionalJavascriptForWebDevelopers pdf 2020 3 24 59 JavaScriptandECMAversions 2020 3 24 60 JavaScript和Java的区别 基于对象和面向对象解释和编译强变量和弱变量JavaScript中变量声明 采用其弱类型 即变量在使用前不需作声明 而是解释器在运行时检查其数据类型x 1234 数值型变量y 4321 字符型变量代码格式不一样嵌入方式不一样 2020 3 24 61 JavaScript JavaScript是一种描述式语言 它与HTML结合起来 用于增强功能 并提高与最终用于之间的交互性能由Netscape公司利用Sun的Java开发它是与Java完全不同的一种语言 虽然在结构和语法上与Java类似 但是 它只是函数式的语言 客户端的JavaScript必须要有浏览器的支持JavaScript ECMAScript 基础语法DOMDocumentObjectModelBOMBrowerObjectModelJavaScript jscript ECMAScriptavaScript是由Netscape公司开发 它的前身是LiveScriptMicrosoft发行jscript用于internetexplorer最初的jscript和javascript差异过大 web程序员不得不痛苦的为两种浏览器编写两种脚本 于是诞生了ECMAScript 是一种国际标准化的javascript版本 现在的主流浏览器都支持这种版本 2020 3 24 62 ECMAScript ECMAScript并不与任何具体浏览器相绑定一个完整的JavaScript实现是由以下3个不同部分组成的 见图1 1 核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM 2020 3 24 63 在网页中加入JavaScript 通过在网页中加入 标记JavaScript的开始和结束 将JavaScript代码放到 之间 1 htm 也可以引入一个外部的JavaScript文件 这个JavaScript文件一般以 js作为扩展名 2 htm 原则上 放在之间 但视情况可以放在网页的任何部分 3 htm 一个页面可以有几个 Script 不同部分的方法和变量 可以共享 4 htm 2020 3 24 64 JavaScript的数据类型 Theprimary primitive datatypesare StringNumberBooleanThecomposite reference datatypesare ObjectArrayThespecialdatatypesare NullUndefined vara 2020 3 24 65 控制字符 JavaScript中有些以反斜杠 开头的不可显示的特殊字符 通常称为控制字符 b 表示退格符 f 表示换页 n 表示换行符 r 表示回车符 t 表示Tab符号 表示单引号本身 表示双引号本身 2020 3 24 66 类型转换 vara 3 varb 10 varc true alert a b alert b c alert a c 2020 3 24 67 JavaScript基本语法 变量JavaScript是一门弱类型的语言 所有的变量定义均以var来实现JavaScript的变量建议先定义 再使用JavaScript区分大小写虽然JavaScript可以不需定义即可直接使用变量 但不建议这么做 5 htm 数组定义vararr newArray 3 通过arr length取得数组的长度 6 htm 注释的写法 和java的一样 2020 3 24 68 数组 使用方式 myarray newArray num myarray newArray value1 value2 aa newArray 3 aa 20 444 document write aa 20 num不设定 则按数组默认的最大长度自动设定 例如 aa newArray aa 20 444 document write aa length 2020 3 24 69 JavaScript基本语法 运算符 算术运算 7 htm 逻辑运算与 或 非 8 htm 字符串运算符连接运算 9 htm 取子集 substring index1 index2 10 htm 条件表达式条件 A B 11 htm 2020 3 24 70 substring方法 返回位于String对象中指定位置的子字符串 strVariable substring start end StringLiteral substring start end 参数start指明子字符串的起始位置 该索引从0开始起算 end指明子字符串的结束位置 该索引从0开始起算 说明substring方法将返回一个包含从start到最后 不包含end 的子字符串的字符串 substring方法使用start和end两者中的较小值作为子字符串的起始点 例如 strvar substring 0 3 和strvar substring 3 0 将返回相同的子字符串 如果start或end为NaN或者负数 那么将其替换为0 子字符串的长度等于start和end之差的绝对值 例如 在strvar substring 0 3 和strvar substring 3 0 返回的子字符串的的长度是3 2020 3 24 71 JavaScript基本语法 控制语句 if语句if 条件 elseif 条件1 else 12 htm while语句while 条件 13 htmswitch语句switch i casei1 casei2 default 14 htm for15 htmdo while16 htmwhile17 htm 2020 3 24 72 JavaScript内置类型 typeof返回值有六种可能 number string boolean object function 和 undefined typeof操作符 typeof htm 2020 3 24 73 字符串对象 属性 length方法 字体控制 big blink bold fixed fontcolor color fontsize size Italics small anchor 字符串 toLowCase toUpperCase indexOf char fromIndex substring start end 2020 3 24 74 big bold link varstrVariable Thisisastringobject strVariable strVariable big big big big big big big big big strVariable strVariable bold strVariable strVariable link document write strVariable Thisisastringobject 2020 3 24 75 substring indexOf substring start end 返回字符串的子字符串案例 substring htmindexOf charactor fromIndex 字符搜索案例 indexOf htm 2020 3 24 76 Math对象 常用方法 abs 绝对值sin cos 正弦余弦值asin acos 反正弦反余弦tan atan 正切反正切round 四舍五入sqrt 平方根pow x y x的y次方 案例 Math htm 2020 3 24 77 Date对象 创建方式 myDate newDate 日期起始值 9 年 月 日 主要方法getYear 返回年数setYear 设置年数getMonth 返回月数setMonth 设置月数getDate 返回日数setDate 设置日数getDay 返回星期几setDay 设置星期数getHours 返回小时数setHours 设置小时数getMinutes 返回分钟数setMintes 设置分钟数getSeconds 返回秒数setSeconds 设置秒数getTime 返回毫秒数setTime 设置毫秒数 案例 Date htm 2020 3 24 78 JavaScript基本语法 函数 函数的使用利用function来定义一个函数 18 htm 传入参数 19 htm 传出值 20 htm 2020 3 24 79 函数的参数传递 preloadTreeImages 1 gif 2 gif 3 gif functionpreloadTreeImages for vari 0 i arguments length i varimg document createElement img img src arguments i div1 appendChild img 2020 3 24 80 JavaScript事件处理 onFocus 在用户为了输入而选择select text textarea等时 onFocus htm onBlur 在select text password textarea失去焦点时 onBlur htm onChange 在select text textarea的值被改变且失去焦点时 onChange htm SelectionChange htm onClick 在一个对象被鼠标点中时 button checkbox radio link reset submit text textarea等 onClick htm onLoad 出现在一个文档完成对一个窗口的载入时 onLoad htm onUnload 当用户退出一个文档时 onload htm onMouseOver 鼠标被移动到一个对象上时 onMouse htm onMouseOut 鼠标从一个对象上移开时 onMouse htm onSelect 当form对象中的内容被选中时 onSelect htm onSubmit 出现在用户通过提交按钮提交一个表单时 onSubmit htm 2020 3 24 81 JavaScript的对话框 警告框 alert 出现一个提示信息21 htm询问框 prompt 返回输入的值22 htm确认框 confirm 根据不同的选择 返回true false23 htm 2020 3 24 82 使用eval 不使用evalalert 3 2 32使用eval的上下文环境alert eval 3 eval 2 5eval 函数可以把一个字符串当作一个JavaScript表达式一样去执行它 eval 1 htm Eval 2 htm 2020 3 24 83 javascripthijacking 函数劫持通过替换js函数的实现来达到劫持这个函数调用的目的 hook htm 2020 3 24 84 this指的是当前的对象 24 htm函数调用时使用thisobject htm自定义对象 随时可以增加属性 方法class htm定义类 2020 3 24 85 对象 for inIn后跟一个对象 对此对象中的所有元素循环一次 25 htm25 1 htm with为一段代码建立一个缺省的对象 任何无对象的属性引用 都将使用该缺省的对象 26 htm new用于生成一个新的对象 27 htm 2020 3 24 86 Try Catch try document writeln Beginnngthetryblock document writeln Noexceptionsyet Createasyntaxerroreval 6 3 document writeln Finishedthetryblockwithnoexceptions catch err document writeln Exceptioncaught document writeln Errorname err name document writeln Errormessage err message 2020 3 24 87 窗口中的对象和元素 BOM window当前窗口 28 htm 新开窗口 29 htm 通过本地窗口控制新开窗口 30 htm location获取或设置现有文档的URL 31 htm his