• 1. HTMLWEB第一语言
  • 2. 课程内容及学习周期HTML介绍 HTML细节 文件结构 文字 图片 链接 表格 表单 多窗口 特殊字符 …… 在不是很熟悉HTML的情况下, 学习加练习的时间应该在4—8个小时 对于已经熟悉HTML的读者可以略过本章 本章内容针对程序员进行设置,不是培养设计师
  • 3. HTML简介Hyper Text Markup Language 超文本 (文字+图片+音视+链接…) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 历史 HTML1.0 – HTML2.0 (IETF制定) – HTML4.0(最终版) W3C IETF – Internet Engineering Task Force HTTP协议 RFC等 RFC2616 Http1.1 RFC1521 MIME W3C – World Wide Web Consortium (www.w3.org) HTML XML等 XHTML 符合XML标准的HTML DHTML Dy’namic HTML (X)HTML / CSS / JavaScript的综合运用
  • 4. HTML语法标记标记(标签或元素)的形式 <元素名>内容 Eg. 文字 <元素名/> Eg. <元素名> Eg.
    位于尖括号内,可以具有属性值 属性值必须“” 或 ‘’,不写也可以解析, 但是不推荐(不符合XHTML) 有开始必须有结束(XHTML) 标签不能嵌套 不区分大小写 但应该养成良好的编程习惯,推荐都用小写
  • 5. Html文档结构 典型HTML 我会努力的! 01.html
  • 6. head中的常用标签文字 “文字”将显示在浏览器标题栏上 :用于设置一些头信息 定义CSS格式 用于定义脚本,Eg. Javascript"http-equiv"指明下面要设置的项目 "content"指明该项目设置的内容02.html 标签
  • 7. 色彩值 “#rrggbb” Eg. 红绿蓝数字值 body其他属性 text link alink vlink bgcolor leftmargin topmargin…03.html04.html
  • 8. 锚点标签-- 在该位置定义名字为AnchorName的锚,就是给这个位置起了个名字,别人可以用这个名字直接链接到该文件的这个位置
  • 9. 链接标签--超级链接,跳转到另一文件 文字 当鼠标点击“文字”时,TargetWindow的内容将会跳转到“url”,不指定target时在本窗口跳转。 连接到文件的特定部分 Href=“url#point” 链接到url的point部分 在url文档中用标识 Target 见“框架“部分05.html 06.html
  • 10. 路径问题本地路径 "c:\dir1\dir2\…" 绝对路径 "http://www.foo.com/img_url.jpg 相对路径 "images/01.jpg" "../../images/01.jpg" "/images/01.jpg" = "http://mysite/images/01.jpg Eg. Eg. 07.html相对于URL地址
  • 11. URL URI URNURL Uniform Resource Locator(统一资源定位符) 网络协议 + 主机名 + 端口号 + 资源名(定位标记) http://www.bjsxt.com:80/index.html#top 带有参数的url 及 url编码问题 见Servlet / JSP部分 URN Uniform Resource Name 持久可用的资源标准名称 例如邮箱名mashibing2004@sina.com URI Uniform Resource Identifier 包含URL和URN URI_URL_URN.html
  • 12. 分隔线--
    语法
    Size 高度 Align 对齐方式,可以取left或right Noshade 无阴影效果 颜色 Eg.
    08.html
  • 13. 标题字体大小-- #=1、2、3、4、5、6 按标题级别用黑体字显示标题内容 自动插入空行

    最大

    最小 09.html
  • 14. 字体设置 face定义字体 size 1 2 3 4 5 6 7 实际 8 10 12 14 18 24 36(pixels) Color可以使用预定义的名字,也可以使用数字 red、blue、black… 通常是打字机风格字体 通常是引用方式(斜体) 强调(通常是斜体加粗体)10.html
  • 15. 设置文字显示名称HTML代码黑体斜体下划线中划线闪烁上标下标11.html
  • 16. 特殊字符<<>>®注册商标&& 空格©copyright™商标™"“12.html可以使用&#xx来显示字符,xx为字符的unicode码 dreamweaver & 华
  • 17. 文字的布局

    分段落现实
    分块显示
  • … 符号列表
  • … 数字列表
    换行 不换行
    保留原有格式
    跑马灯效果
    
    13.html
  • 18. 对齐—align


    …… 取值:left right center top middle bottom
    ……
    对齐到中间14.html
  • 19. 图片“” Src 图片路径,一般使用相对路径 Alt 图片无法显示时显示的文字 Border 边框的厚度 Align = left right top middle bottom 图文混排时用于和图片的对齐15.html图片与链接 - 见DreamWeaver演示
  • 20. 表格—重点掌握
  • … ……
    %或像素值表头(可选)单元格top middle bottom跨行跨列16.htmltable的属性: bgcolor border bordercolorlight bordercolordark cellspacing cellpadding width height

  • 21. 表单—重点掌握作用 收集用户信息 数据库查询 收发email …… 用户不仅仅是信息的被动接受者,还可以通过表单成为信息的主动发出者
  • 22. 表单基础--
    ……
    的属性 Method (get post) Get 发送较少数据(256byte),显示在url中,url/userinfo?username=张三&password=hehe Post数据长度无限制,不会显示在url中 Action Form中数据交给服务器端哪个程序进行处理 Eg. ……
  • 23. 位于表单中的输入标签位于
    之中,接收用户输入 格式: type: text radio checkbox password hidden select submit reset button textarea image name: 提交到服务器端的变量的名字
  • 24. 表单中的输入标签文本框 text maxlength – 最大字符长度 size – 文本框宽度(字符) 密码区域—特殊的单行文本输入框 password 单选按钮 典型用法 : 同一名字,不同的值 错误的用法 : 不同的名字 复选框 典型的用法 : 同一name,不同的value 隐藏域 不显示在网页中 通常用作向下一个页面传输已知信息或表单的附加信息
  • 25. select列表框 Multiple 表示多重列表框,可以多选 Selected 被选中 多行多列文本框 Rows: 行数 Cols: 列数 Wrap: Off : 不换行 Soft: 自动换行,并且如果行末有英文单词,会将整个单词移到下一行 Hard: 自动换行,但会截断行末的单词中间的值会被提交 所以不要含有空格
  • 26. button 按下该按钮没有反映 按下该按钮,该form中所有的输入信息将被提交到服务器 按下该按钮,该form中所有的输入部分将被重置 点击图片提交Label标签 与输入元素相关联 见DreamWeaver演示
  • 27. 框架 …… 嵌套 Pixels or %yes no auto18.html19.html
  • 28. 链接、表单与框架 … Target: Frame name _blank 新窗口 _self 本窗口 _parent 父窗口(本窗口的上一级窗口) _top 浏览器窗口
  • 29. HTML网上行比老师更加渊博的老师 – 互联网 打开网页 IE菜单—查看—源文件 IE菜单—文件—另存为 学习其他的优秀的HTML设计 可以查看CSS 可以查看Javascript 读代码应该直奔目的地 没必要背过HTML标签
  • 30. CSSHTML美容师
  • 31. 课程内容CSS介绍 CSS细节 CSS的各种属性 视熟悉程度,应掌握在1-6个小时左右,当然了,我们培养的是程序员,这个时间足够了
  • 32. CSS定义CSS—Cascade Style Sheet层叠样式表 1998/5/12,CSS level2成为W3C标准 用来装饰HTML/XML的标记集合 特点: 样式表由样式规则组成,以告诉浏览器如何显示一个文档 每个规则的组成包括一个选择符---通常是一个HTML的元素---和该选择符所接受的样式 每个元素可以定义多个属性,每个属性带有一个值,共同的描述选择符如何呈现
  • 33. CSS样式样式规则格式: 选择符{属性:值} 单一选择符的复合样式声明应该用分号分割: 选择符{属性1:值1; 属性2:值2} 01.html
  • 34. CSS的调用方式在Head中调用(01.html) 在Body中调用(02.html) 调用css文件(03.html/03.css) CSS的优先级问题 按照最靠近元素的定义来显示(04.html) 如果两个css文件冲突,以后面的为准
  • 35. CLASS & ID类选择符:Class 一个选择符能有不同的Class,因而允许同一个选择符具有不同的样式(05.htm) 不同的选择符也可以同时定义一样的样式(06.htm) ID选择 06_1.htm
  • 36. CSS组合/注释可以一次性定义多个选择符的样式 H1,H2,H3{color:red;font-family:serif} P A{} 06_2.html 注释: /*这是注释*/
  • 37. 字体属性属性含义属性值font-family字体各种字体font-style字体样式italic、obliquefont-variant小体大写small-capsfont-weight字体粗细bold、bolder、lighter…font-size字体大小absolute、relative、%color字体颜色颜色值例:07.html
  • 38. 颜色与背景属性属性含义属性值Color颜色颜色值Background-color背景色颜色值Background-image背景图案图片路径Background-repeat背景图案重复方式Repeat-x | repeat-y | no-repeatBackground-attachment背景的滚动Scroll | fixBackground-position背景图案初始位置% | n em | top | left | right | bottom …例:08.html
  • 39. 文本属性属性含义属性值word-spacing单词间距n emletter-spacing字母间距n emtext-decoration装饰样式underline| overline| line-through| blinkvertical-align垂直方向位置sub| super |top |text-top| middle| bottom| text-bottomtext-transform转为其他形式capitalize| uppercase| lowercasetext-align对齐left| right| center| justifytext-indent缩进n em| %line-height行高pixels、n em、%例:09.htmlEm:12pixels 的 'M'常用于印刷的单位
  • 40. 装饰超链接 伪类选择符对链接的修饰 A:link 未访问时的状态 A:visited 访问过后的状态 A:active 鼠标点中不放时的状态 A:hover 鼠标划过时的状态 10.html
  • 41. 边距属性属性含义属性值margin-top上边距n em | %margin-right右n em | %margin-bottom下n em | %margin-left左n em | %例:11.html
  • 42. 填充属性属性含义属性值padding-top上填充n em | %padding-right右n em | %padding-bottom下n em | %padding-left左n em | %例:12.html
  • 43. 边框属性属性含义属性值Border-top-width上边框宽度n em | thin | medium | thickBorder-right-width右同上Border-bottom-width下同上Border-left-width左同上Border-width四边同上Border-color边框颜色ColorBorder-style边框样式Dotted | dash | solid | double | groove | ridge | inset | outsetBorder-top |right|bottom|left上(右|底|左)所有属性Border-width | border-style | color例:13.html
  • 44. (本页无文本内容)
  • 45. 图文混排属性含义属性值Width宽度n em | %Height高度n emFloat文字环绕Left | rightclear去除文字环绕Left | right | both例:14.html
  • 46. 列表属性属性含义属性值Display是否显示Block | inline | list-item | noneWhite-space空白部分Pre | nowrap | normal(是否合并)List-style-type项目编号Disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image项目前图片Img-urlList-style-position第二行位置Inside | outsideList-style全部属性Keyword | position | url例:15.html
  • 47. 鼠标属性属性值含义属性值含义Auto自动N-resize上箭头Crosshair"+"Se-resize右下Default默认Sw-resize左下Hand手形S-resize下箭头Move移动W-resize左箭头E-resize右箭头Text"I"Ne-resize右上Wait沙漏Nw-resize左上help帮助例:16.html
  • 48. 定位属性属性含义属性值Position位置Absolute|relative|staticLeft | top横向|纵向位置N em | %Width | height宽度|高度同上Clip剪切Shape | autoOverflow内容超出时Visible | hidden | scroll | autoZ-index立体效果Integervisibility可见性Inherit | visible | hidden例:17.html 18.html
  • 49. 滤镜属性属性值含义属性值含义Alpha半透明Invert底片Blur模糊Light灯光投影Chroma指定颜色透明Mask透明膜Dropshadow投射阴影Shadow阴影Fliph水平翻转Wave波纹Flipv垂直翻转XrayX射线Glow光效Grayscale灰度例:19.html
  • 50. CSS布局 CSS框架
  • 51. DreamWeaver认识DreamWeaver 练习使用DreamWeaver 用DreamWeaver画表格和表单 用DreamWeaver来应用CSS
  • 52. JavaScriptWEB魔术师
  • 53. 本章内容的学习周期视熟悉程度,应该在4—16小时左右,可以达到入门并熟悉常用操作的目的,例如:打开新窗口、判断表单输入等。当然了,javascript是一门独立的语言,如果应用的好,可以作出很多丰富多彩的效果,甚至游戏。
  • 54. 课程内容Javascript介绍 Javascript语言 视熟悉程度,应该在4—16小时左右,可以达到入门并熟悉常用操作的目的,例如:打开新窗口、判断表单输入等。当然了,JavaScript是一门独立的语言,如果应用的好,可以作出很多丰富多彩的效果,甚至游戏。
  • 55. 程序开发分为客户端、服务器端客户端开发的好处 减少客户端到服务器端的往返。 表单验证 服务器端开发的好处 web应用的核心逻辑集中管理 胖客户端、瘦客户端
  • 56. 客户端编程的主要技术javascript(最主要的) vbscript jscript applet activex组件 plug-in技术(价值在于:让专家级程序员开发新型语言) flash技术的最新发展 jsdk包含的plug-in yahoo 的工具条 百度搜索伴侣 CNNIC网络实名等 3721
  • 57. 学习资料msdnjscript参考 CoreGuideJS15.zip CoreReferenceJS15.zip JavaScript手册-中文.chm JavaScript 2005- Wrox - Professional Javascript For Web Developers.pdf
  • 58. JavaScript and ECMA versionsJavaScript version Relationship to ECMA version JavaScript 1.1   ECMA-262, Edition 1 is based on JavaScript 1.1.   JavaScript 1.2   ECMA-262 was not complete when JavaScript 1.2 was released.JavaScript 1.3   JavaScript 1.3 is fully compatible with ECMA-262, Edition 1. JavaScript 1.4   JavaScript 1.4 is fully compatible with ECMA-262, Edition 1. JavaScript 1.5   JavaScript 1.5 is fully compatible with ECMA-262, Edition 3.
  • 59. JavaScript和Java的区别基于对象和面向对象 解释和编译 强变量和弱变量 JavaScript中变量声明,采用其弱类型。 即变量在使用前不需作声明,而是解释器在运行时检查其数据类型 x=1234; //数值型变量 y=“4321”; //字符型变量 代码格式不一样 嵌入方式不一样
  • 60. JavaScriptJavaScript是一种描述式语言,它与HTML结合起来,用于增强功能,并提高与最终用于之间的交互性能 由Netscape公司利用Sun的Java开发 它是与Java完全不同的一种语言。虽然在结构和语法上与Java类似,但是,它只是函数式的语言。 客户端的JavaScript 必须要有浏览器的支持 JavaScript (ECMAScript) 基础语法 DOM Document Object Model BOM Brower Object Model JavaScript/jscript / ECMAScript avaScript是由Netscape公司开发 .它的前身是Live Script Microsoft发行jscript用于internet explorer 最初的jscript和javascript差异过大,web程序员不得不痛苦的为两种浏览器编写两种脚本。于是诞生了ECMAScript,是一种国际标准化的javascript版本。现在的主流浏览器都支持这种版本。
  • 61. ECMAScriptECMAScript并不与任何具体浏览器相绑定 一个完整的JavaScript实现是由以下3个不同部分组成的(见图1-1): 核心(ECMAScript) 文档对象模型(DOM); 浏览器对象模型(BOM)。
  • 62. 在网页中加入JavaScript通过在网页中加入标记JavaScript的开始和结束,将JavaScript代码放到之间 (1.htm) 也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名 (2.htm) 原则上,放在之间。但视情况可以放在网页的任何部分 (3.htm) 一个页面可以有几个 num不设定,则按数组默认的最大长度自动设定。例如:
  • 68. JavaScript基本语法—运算符算术运算 +、-、*、/ >、<、=、>=、<=、== (7.htm) 逻辑运算 与:&& 或:|| 非:! (8.htm) 字符串运算符 连接运算:+ (9.htm) 取子集:substring(index1,index2) (10.htm) 条件表达式 条件?A:B (11.htm)
  • 69. substring 方法返回位于String对象中指定位置的子字符串。 strVariable.substring(start,end) "String Literal".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。
  • 70. JavaScript基本语法—控制语句if语句 if(条件) else if(条件1) else…(12.htm) while语句 while(条件)… 13.htm switch 语句 switch(i) case i1:… casei2:… default:… (14.htm) for 15.htm do…while 16.htm while 17.htm
  • 71. JavaScript内置类型typeof 返回值有六种可能: "number," "string," "boolean," "object," "function," 和 "undefined." typeof 操作符typeof.htm
  • 72. 字符串对象属性:length 方法: 字体控制: big() blink() bold() fixed() fontcolor(color) fontsize(size) Italics() small() anchor() 字符串: toLowCase() toUpperCase() indexOf(char,fromIndex) substring(start,end)
  • 73. big()、bold()、link()
    This is a string object
  • 74. substring、indexOfsubstring(start,end) 返回字符串的子字符串 案例:substring.htm indexOf[charactor,fromIndex] 字符搜索 案例:indexOf.htm
  • 75. Math对象常用方法: abs() 绝对值 sin() , cos() 正弦余弦值 asin() , acos() 反正弦反余弦 tan() , atan() 正切反正切 round() 四舍五入 sqrt() 平方根 pow(x,y) x的y次方案例: Math.htm
  • 76. Date对象创建方式: myDate = new Date(); 日期起始值:1970年1月1日00:00:00 主要方法 getYear(): 返回年数 setYear(): 设置年数 getMonth(): 返回月数 setMonth():设置月数 getDate(): 返回日数 setDate():设置日数 getDay(): 返回星期几 setDay():设置星期数 getHours():返回小时数 setHours():设置小时数 getMinutes():返回分钟数 setMintes():设置分钟数 getSeconds():返回秒数 setSeconds():设置秒数 getTime() : 返回毫秒数 setTime() :设置毫秒数 案例: Date.htm
  • 77. JavaScript基本语法—函数函数的使用 利用function来定义一个函数 (18.htm) 传入参数 (19.htm) 传出值 (20.htm)
  • 78. 函数的参数传递preloadTreeImages("1.gif","2.gif","3.gif"); function preloadTreeImages() { for (var i = 0; i < arguments.length; i++) { var img = document.createElement("img"); img.src = arguments[i]; div1.appendChild(img); } }
  • 79. 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)
  • 80. JavaScript的对话框警告框(alert):出现一个提示信息 21.htm 询问框(prompt):返回输入的值 22.htm 确认框(confirm):根据不同的选择,返回true/false 23.htm
  • 81. 使用eval不使用eval alert ("3"+"2"); --〉32 使用eval的上下文环境 alert (eval("3") + eval("2")); --〉5 eval()函数可以把一个字符串当作一个JavaScript表达式一样去执行它 eval_1.htmEval_2.htm
  • 82. javascript hijacking 函数劫持 通过替换js函数的实现来达到劫持这个函数调用的目的 hook.htm
  • 83. this指的是当前的对象 24.htm 函数调用时使用this object.htm 自定义对象,随时可以增加属性,方法 class.htm 定义类
  • 84. 对象for…in In后跟一个对象,对此对象中的所有元素循环一次 (25.htm 25_1.htm) with 为一段代码建立一个缺省的对象,任何无对象的属性引用,都将使用该缺省的对象 (26.htm) new 用于生成一个新的对象 (27.htm)
  • 85. Try…Catch…try{ document.writeln("Beginnng the try block") document.writeln("No exceptions yet") // Create a syntax error eval("6 + * 3") document.writeln("Finished the try block with no exceptions") } catch(err){ document.writeln("Exception caught, ") document.writeln("Error name: " + err.name) document.writeln("Error message: " + err.message) }
  • 86. 窗口中的对象和元素(BOM)window 当前窗口(28.htm) 新开窗口(29.htm) 通过本地窗口控制新开窗口 (30.htm) location 获取或设置现有文档的URL (31.htm) history 先前访问过的URL的历史列表 常用方法:back(),go(number) (32.htm/33.htm) document 当前的文档对象 document.write():向客户端浏览器输出内容 document.formName:可以用这个方法得到表单名称 document.referrer
  • 87. Browser Object Model
  • 88. 技巧:setTimeout、setInterval
  • 89. 趣味JavaScript程序黑客帝国(ex1/matrix.htm) 鼠标跟随(ex2/mouseTrace.htm) 找相同图片游戏(ex1/game/game.htm) 飘浮的云(ex1/floating.htm) 打字效果(ex1/printer.htm) TicTacToe游戏(ex1/tictactoe.htm) 星球大战(ex1/starcraft/)
  • 90. 实用JavaScript程序图片下拉列表(ex2/DropDown/) 相互关联的列表(ex2/relative.htm) 抽屉式菜单(ex2/drawer.htm) 滑入式菜单(ex2/slip.htm) 滚动下拉菜单 (ex2/pulldown.htm) 日历(ex2/calendar) 输入判断js函数(ex2/pd.*) window.open教程(window.open.htm)
  • 91. 确实要删除该条记录吗
  • 92. 程序优化function a_onclick_new() { event.returnValue=window.confirm('确实要删除该条记录吗?') }confirmdel.htm
  • 93. 学习HTML / CSS / JavaScript的方法google Alert() 重点掌握表单输入的判断 prototype.js是由Sam Stephenson写的一个javascript类库 Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. 《不可多得的Javascript(AJAX)开发工具 - Aptana》 掌握基本知识 学会照猫画虎