自学静态页面方法.ppt

自学内容 静态网站 呼伦贝尔学院计算机科学与技术学院 静态网站 静态Web页HTML语言HyperTextMarkLanguageCSSCascadingStyleSheetJavaScript脚本语言 用来 使用CSS 控制html对象 静态网站 HTML语言页面组成部分格式与布局链接表格表单框架页面元素 标签TAG 清单 静态Web页 静态网站 HTML语言页面组成部分 静态Web页 讯科培训中心讯科培训中心 头 设置页面参数及放置资源 比如 指定srcipt脚本文件 css定义文件 眼睛 页面标题 身体 页面内容都是布局在这个里面的 静态网站 HTML语言格式与布局字体font 大小 颜色 标题H 1 6 段落p 换行br 标尺线hr分区div列表无序列表ul有序列表ol定义列表dl 静态Web页 大小颜色标题是h1到h6这里面是分区内容这个也是分区内容呀OneToFirSecFirstppSecondSS1SS2 静态网站 HTML语言链接跳转到其它页面 跳转到页面的另外一个地方 也就是锚点 跳转到另一个页面的某个地方 开一个新的 浏览器 窗口 TargetWindow 开一个新窗口 静态Web页 163新闻跳转到下一个 链接点 下一个链接点跳转到另一个页面的某个地方 Target的值 blank self top parent 自定义 静态网站 HTML语言表格 静态Web页 FoodDrinkSweetABCD 定义表格 定义表行 定义表头 定义表元 表格的具体数据 border 边框rowspan 占行colspan 占列 静态网站 HTML语言表单表单的基本语法 GET POST表单中提供给用户的输入形式 text password checkbox radio image hidden submit reset 可控制的脚本名称 静态Web页 转下一页 静态网站 您的姓名 您的主页的网址 密码 BananaAppleBanana 静态网站 HTML语言表单 静态Web页 BananaAppleOrangeBananaAppleOrangePeach 表单的下拉列表框 接上一页 表单的文本框 静态网站 HTML语言框架 静态Web页 你的浏览器不支持框架 窗口大小拖动窗口标识 yes no 1 0窗口边框 各窗口间空白区域的大小页面空白 yes no auto 缺省值是auto滚动条设置 这是一个浮动框架 静态网站HTML语言页面元素 标签TAG 清单 静态Web页 静态网站 CSS方式 如何将样式表加入您的网页定义 选择符 如何定义样式表使用及控制 可控制的属性表 静态Web页 说明使用样式表代码块 加入样式表 选择符 定义样式表 可控制的属性表 使用样式表 静态网站 CSS如何将样式表加入您的网页链入外部样式表文件定义内部样式块对象内联定义 静态Web页 这一行被增加了左右的外补丁 titleofarticle 静态网站 CSS定义 选择符 如何定义样式表类型选择符 TypeSelectors 包含选择符 DescendantSelectors ID选择符 IDSelectors 类选择符 ClassSelectors 选择符分组 Grouping 静态Web页 td font size 14px width 120px a text decoration none 语法 E1说明 以文档语言对象类型作为选择符 tabletd font size 14px div suba font size 14px 语法 E1E2说明 选择所有被E1包含的E2 即E1 contains E2 true note font size 14px width 120px 一个span 语法 sID说明 以文档目录树 DOM 中作为对象的唯一标识符的ID作为选择符 div note font size 14px dream font size 14px 语法 E1 classNamediv note 所有class属性值等于 包含 note 的div对象字体尺寸为14px dream 所有class属性值等于 包含 note 的对象字体尺寸为14px td1 diva body font size 14px 语法 E1 E2 E3说明 将同样的定义应用于多个选择符 可以将选择符以逗号分隔的方式并为组 静态网站 CSS使用及控制 可控制的属性表 静态Web页 字体 背景 布局 定位 文本 静态网站 CSS使用及控制 可控制的属性表 静态Web页 静态网站 JavaScript脚本语言 用来 使用CSS 控制html对象语言参考JavaScript是一种解释型的 基于对象的脚本语言JavaScript不是其他语言的精简版 与Java或其它语言没有任何关系 不过 它有其局限性 例如 您不能使用该语言来编写独立运行的应用程序 并且没有对读写文件的内置支持 此外 JavaScript脚本只能在某个解释器或 宿主 上运行 如JSP 或者Internet浏览器JavaScript是一种宽松类型的语言 宽松类型意味着您不必显式定义变量的数据类型 在大多数情况下 JavaScript将根据需要自动进行转换 例如 如果将一个数值添加到由文本组成的某项 一个字符串 该数值将被转换为文本 DHTMLDOM动态HTML 使用JavaScript来动态处理HTML对象及其属性 静态Web页 div1 align center 静态网站 JavaScript引入JavaScript的两种方式直接在页面中使用标签 在文件中的位置不限functionrollon if window event srcElement className Item window event srcElement className Highlight document onmouseover rollon 在页面头部 head 中加入文件引用 静态Web页 使用的两种方式 静态Web页 静态网站 JavaScript语言参考 语言特性1 静态网站 JavaScript语言参考 语言特性2 静态Web页 静态网站 JavaScript语言参考 语言特性3 静态Web页 正则表达式来源于unix系统 有其丰富的内容 本身就是一个主题 静态网站 JavaScript语言参考示例 对象 静态Web页 functionDateDemo vard s Today sdateis 声明变量 d newDate 创建Date对象 s d getMonth 1 获取月份 s d getDate 获取日 s d getYear 获取年份 return s 返回日期 Date对象的用法 varmy array newArray for i 0 i 10 i my array i i x my array 4 创建数组 使用 符号访问数组单个元素 functionarray max vari max this 0 for i 1 i this length i if max this i max this i returnmax Array prototype max array max varx newArray 1 2 3 4 5 6 vary x max 该代码执行后 y保存数组x中的最大值 或说6 用prototype属性提供对象的类的一组基本功能 对象的新实例 继承 赋予该对象原型的操作 例如 要为Array对象添加返回数组中最大元素值的方法 要完成这一点 声明该函数 将它加入Array prototype 并使用它 functionadd x y return x y 执行加法并返回结果 varadd newFunction x y return x y add 2 3 在调用函数时 请确保包含了括号和必需的参数 调用函数时不用括号导致返回函数的文本而不是函数执行的结果 静态网站 JavaScript语言参考示例 语句使用var语句来声明变量 这些变量可以在声明时或声明后在脚本中被赋值 静态Web页 varindex varname ThomasJefferson varanswer 42 counter numpages 10 var语句的用法 functionskip5 vars i 0 while i 10 i if i 5 continue 跳过5s i return s continue语句 functionCar color make model this color color this make make this model model this指的是新创建的Car对象 并给三个属性赋值 for in语句的用法 它把一个对象用作一个联合数组 functionForInDemo vara key s 创建某些变量 a a Athens b Belgrade c Cairo 初始化对象 for keyina 迭代属性 s a key 静态网站 DHTML对象模型图DOM DHTMLObjectModel 动态HTML对象模型DOM DocumentObjectModel 文档对象模型 静态Web页 Window document UsingtheDHTMLObjectModel varaDivs document body all tags DIV UsingtheDOM varaDivs document body getElementsByTagName DIV screen navigator history location opener parent self top status 其它一些属性 location cookie referrer parentWindow body 静态网站 DHTM DOMWindow 静态Web页 Properties 属性clientInformation closed defaultStatus dialogArguments dialogHeight dialogLeft dialogTop dialogWidth document event history length location name navigator offscreenBuffering opener parent returnValue screen self status top Collections 集合frames Methods 方法alert blur clearInterval clearTimeout close confirm execScript focus moveBy moveTo navigate open prompt resizeBy resizeTo scroll scrollBy scrollTo setInterval setTimeout showHelp showModalDialog Events 事件onbeforeunload onblur onerror onfocus onhelp onload onresize onscroll onunload 有 号的不能用于ModalDialog 模态窗口 静态网站 DHTM DOMDocument 静态Web页 Properties 属性activeElement alinkColor bgColor body charset cookie defaultCharset domain expando fgColor lastModified linkColor location parentWindow readyState referrer selection title URL vlinkColor Collections 集合all anchors applets children embeds forms frames images links plugins scripts styleSheets Methods 方法clear close createElement createStyleSheet elementFromPoint execCommand open queryCommandEnabled queryCommandIndeterm queryCommandState queryCommandSupported queryCommandText queryCommandValue ShowHelp write writeln Events 事件onafterupdate onbeforeupdate onclick ondblclick ondragstart onerrorupdate onhelp onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onreadystatechange onrowenter onrowexit onselectstart 静态网站 DHTM DOMForm 静态Web页 Properties 属性action className document encoding id innerHTML innerText isTextEdit lang language method name offsetHeight offsetLeft offsetParent offsetTop offsetWidth outerHTML outerText parentElement parentTextEdit sourceIndex style tagName target title Methods 方法click contains getAttribute insertAdjacentHTML insertAdjacentText removeAttribute reset scrollIntoView setAttribute submit Collections 集合all children elements filters Events 事件onclick ondblclick ondragstart onfilterchange onhelp onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onreset onselectstart onsubmit 静态网站 DHTM DOMElements根据一个给定的表单 Form 中的所有元素的源内容的顺序来检索一个集合 这个集合只能包含INPUT SELECT和TEXTAREA元素 语法object elements index 静态Web页 对于object来说只能一个FORM表单元素 document forms 0 elements 0 DHTML的事件模型 EventModel Welcome Thisisaveryshortdocument functionwasClicked alert Iwasclicked window event srcElement tagName 静态网站 静态Web页 对于event对象的操作 functionfnGetNames varaInput document getElementsByName firstName functionfnCreate oData innerHTML varoOption oSel options oSel selectedIndex if oOption text length 0 varaElement document createElement oOption text eval aElement oOption value oText value if oOption text A aElement href javascript alert Alink oData appendChild aElement A DHTML 最常用方法getElementByIdoElement document getElementById sIDValue getElementsByNamecollObjects document getElementsByName sNameValue 静态网站 静态Web页 functionfnGetId varoVDiv document getElementById oDiv Div 1Div 2Div 3 DHTM动态更改样式 ClickHereT