HTML代码《完全使用的代码小知识》.docxVIP

知识准备1、分层：表现层：UI界面（DOS界面、桌面类型、web类型）业务层：数据层：文件、Oracle数据库2、Web类型的应用程序-B/S 类型打开 Browser，输入 URL，浏览器将请求发送到服务器服务器得到请求，分析，返回响应浏览器得到响应，解析（翻译），显示为页面3、web 学习阶段客户端技术：HTML+CSS+Javascript-Web 基础服务器端技术：JSP、PHP、ASP.NET4、web基础的课程HTML：页面的创建CSS：页面的外观JavaScript：页面的动态效果和交互行为-3一：HTML 概述1、超文本标记语言：一种编写页面的纯文本的标记语言，文件以.html或者.htm 为后缀， 依靠浏览器运行显示-解释性的语言2、标记：一些用 括起来的内容，特殊的显示3、主流浏览器：IE/Firefox/Chrome/4、浏览器兼容性：符合标准规范，具体问题二：HTML 基础语法1、成对出现： 文本2、单标记： 3、标记可以设置属性：设置在开始标记里，为标记添加行为4、HTML 文档的标准结构文档类型声明5、文档类型声明：指定版本等信息严格型：最新版本过渡型（传统型）：兼容旧版本框架型：可以使用框架-使用的很少旧版本： 新版本： 6、head里可以包含titlemeta练习一：编写一个标准格式的 HTML 文件，为其定义标题刷新频率以及编码格式7、为代码添加注释三：文本-空格折叠 *1、-标题标记：字体加粗、较大2、段落标记 3、换行 -取决于行间距4、特殊字符： >空格  5、分组标记包含其他内容包含其他内容可以对分组元素定义样式6、块级元素、行内元素块级元素：标记会独占一行，比如 p、h1、div行内元素：可以和其他元素位于同一行，比如 span、a（超级链接）四：图像和链接 *1、图像:web应用中，路径多用相对路径-绝对路径/全路径-相对路径2、超级链接href属性：定义URLtarget属性：在哪里打开页面 _self _blankClick Me3、实现在同一个页面上不同位置之间的跳转实现回到页面顶端：XXX实现自定义的位置导航，类似目录一样第一步：定义锚点第二步：定义链接导航去1位置五：列表 *1、基础语法ul：无序列表ol：有序列表li：列表项2、复杂的菜单或者目录-嵌套的列表六：表格 *1、作用：显示网格结构的数据、页面的布局2、表格的基本结构abcd3、表格的常用属性table：border/width/height（自适应）/align/cellpadding(单元格内边距)/cellspacing(单元格之间的空白)td：width/height/align/valign4、表格的复杂结构表格定义标题：表格的行分组：thead/tbody/tfoot只能用在表格里，中间只能包含tr5、不规则表格6、表格的嵌套可以在一个 td 里再定义一个表格-实现复杂的布局要求七：表单 *1、form 元素-即为表单元素，承载各种控件（文本框、按钮等）-重点在于 form 上可以包含的元素-form上的元素必须拥有 name 属性，默认，提交值2、input 元素文本框：密码框：单选按钮：实现互斥的选择提交按钮：# HTML_CSS#知识准备部分：1、学习 html 的过程中，有些可以设置样式的属性border/width/height/cols/rows-error-error2、存在的问题：不统一3、需要解决：有一种统一的有效的方式为定义样式-CSS比如：各浏览器对于页面的默认设置和显示不一样；用代码改写CSS代码： tdborder:;文本变为红色一：CSS 概述1、CSS：级联样式表（层叠样式表）2、特征：为页面定义外观的语言，实现内容和表现的分离，多个样式可以合为一个，如果冲突，以优先级为准二：基础语法1、语法： 属性名称:值;属性名称:值;比如-color:red;2、如何应用 *方式一（内联方式）：-将样式直接定义在元素的 style 属性里方式二（内部样式表）：在页面的 head 里的 style 里定义样式方式三（外部样式表）：定义一个单独的.css的文件（定义样式）；然后，在页面的 head 里用 link 引入-推荐方式3、外部样式表的优点：实现内容和表现的分离，提高代码的可重用性和可维护性-可以准备多套样式-换皮肤/主题4、样式表，如果重复定义a、样式不同，取并集b、相同，按照优先级内联 内部或者外部c、相同优先级下，以最后定义的为准三：样式选择器 *1、什么是选择器h1 color:red;2、元素选择器，比如： div .-以 html 中标签的名称作为选择器3、类选择器CSS中： .MyName .HTML页面：4、分类选择器-同一种元素下的细分CSS 中： 元素名称.MyName .，比如 h4.first .HTML页面：5、ID选择器：以元素id的值作为选择器，常用于设置页面上比较特殊的元素，比如布局CSS 中： #name1 .HTML页面： 6、选择器分组：适用于为各种不同的元素定义它们相同的样式CSS 中： h1,.s1,#aaa,input.text.7、派生选择器：根据元素的先后位置CSS 中： td a .HTML页面：ddd8、伪类选择器：某个元素在不同状态下的样式a:link color:blue;-未访问过的a:visited color:red;-访问过的x:hover -鼠标悬停x:active -激活x:focus -获得焦点四：各种样式属性的应用的准备1、尺寸的单位px/pt2、颜色的单位red/#ccc3、尺寸的属性width:100px;height:200px;overflow:;-当内容超出包含框时visible/hidden/scroll/auto;五：边框1、定义四个边： border:1px solid red;width style colorborder-width:1px;border-style:solid;border-color:red;2、单边定义border-top:1px solid black;border-right/left/bottom六：框模型（盒子模型）-box modal1、margin:10px;-外边距2、padding:10px;-内边距3、设置方式上：margin:一个值；-四个方向，以左上角优先margin-left/right/top/bottom:10px;margin:10px 20px 30px 40px;top right bottom left-顺时针margin:10px 20px; top和bottom left和right有一种固定用法：margin:5px auto;-由浏览器计算左右的外边距4、什么是框模型定义元素的边框、内边距以及外边距如果为元素定义了内边距，可能会导致框变大七：背景1、背景色 background-color:red/#ccc;2、背景图像background-image:url(a.jpg);3、背景图像的平铺方式background-repeat:repeat/no-repeat/repeat-x/repeat-y;4、背景图像的位置background-position:10px 20px; x y5、背景图像的附着方式background-attachment:scroll(默认值)/fixed（背景固定，实现背景就像水印的效果）;6、简写方式：background:red image no-repeat.;八、文本格式化：定义页面上文字的样式1、color：red;-颜色2、font-size:9pt;-字体大小3、text-align:left/right/center；-x对齐4、font-weight:normal/bold;-加粗显示5、font-family:字型1,字型2,.;6、text-decoration:none/underline;-下划线7、text-indent:10px;-首行首字符的缩进8、line-height:20px;-行高九：表格-表格所特有的样式属性1、vertical-align:top/middle/bottom;2、border-collapse:separate/collapse;-边框合并3、表格的边框不合并，需要设置边框之间的间距border-spacing:5px;十：浮动：默认情况下，页面元素按照流模式进行布局，从上向下，从左到右1、使用 浮动来改变布局方式2、float:left/right;-3、设置某个元素浮动之后，可能会影响周围元素的位置4、clear:left/right/both;5、应用一：在一个包含框中，分两侧定位 应用二：横向菜单十一：显示方式1、块级元素、行内元素2、对于行内元素而言：width、height无效3、display:block/inline/none;-通过此属性修改元素的显示方式十二：列表特有的样式1、列表前面的标识符号list-style-type:none/number/disc/circle.;2、list-style-image:url();十三：定位相关的属性1、默认情况下，页面按照流布局2、改变布局方式：float-浮动，位置上有限制，只能停靠在左侧或者右侧可以通过定位属性3、position:;static-静态，默认值，流布局relative-相对定位absolute-绝对定位fixed-固定定位 偏移属性：top/bottom/left/right:; 堆叠顺序： z-index:整数;4、相对定位：设置 position属性的值为relative，通过偏移属性设置它的位置，将相对于原有的位置进行移动-原有的位置保留5、绝对定位：设置 position属性的值为absolute，通过偏移属性设置它的位置，将相对于页面的左上角（body）进行偏移(没有已定位的祖先元素)；否则，将相对于已定位的祖先元素进行偏移-原有的位置不再保留6、如何选择将元素框设置为绝对定位，相对于某个元素（相对定位）进行定位十四：设置光标cursor:default/pointer/help/wait/.;# HTML_JS#一：javascript 概述1、什么是 javascript：一种基于对象和事件驱动的解释性脚本语言，嵌入到网页上2、历史：js代码-W3C定义了标准规范的 js 代码3、浏览器兼容问题：标准代码，个别情况个别对待4、怎么写方式一：直接写在事件里，仅限于代码很少方式二：写在 head 的 script 里，仅限于当前页面重用方式三：写在 js 文件里，html 页面的 head 里用 script 引入5、js的特征一种解释性的脚本语言，适用于为网页添加动态效果和交互行为6、错误：a、不同的浏览器提供了不同的查看方式-firefox：错误控制台b、alert();二：基础语法1、写法：以 ；结束，大小写敏感2、标识符：以字母、数字和下划线还有 $组成，不以数字开头-不能和系统关键字重名3、变量 *-声明变量，以 var 开始var i = 1;var s = mary;var b = true;js是一种弱类型的语言-变量声明时不需要确定类型，数据类型以赋值为准4、数据类型简单类型：string、number、bool特殊类型：null、undefinedvar i;alert(i);-undefined复杂类型：对象5、（string）字符串类型var s = mary;var s = mary; 特殊字符：使用转义-转换为普通字符，解决汉字的问题hellowornldalert(一);alert(u4e00);u4e00-u9fa56、number：并不区分整数和小数var n = 12;var n1 = 12.34;7、bool：true（1） 和 false（0）8、数据类型之间的转换 *var n = 18;var name = mary;隐式转换（直接）string + number-stringnumber + bool-numberbool + bool- numberstring + bool-string显式转换（调用方法）*xxx.toString()parseInt(xxx);parseFloat(xxx);-确实能转，如果不能转，将返回 NaNNaN-not a number判断isNaN(aaa)-is not a number-返回 bool9、运算符算术运算符、比较、逻辑、位。特殊：*= 严格相等：值和类型if( a = b)if( a = b)注意：三目（元）运算符value1?value2:value3;10、流程控制：程序默认情况下，顺序执行；需要改变执行顺序根据条件有选择性的执行if/elseswitch/case重复执行forwhile三：常用内置对象1、学习并使用对象创建一个对象var n = obj.xx;-读取属性的值obj.xx()-调用方法2、哪些对象简单对象：String、Number、Boolean复杂对象：Array、Math、Date等3、String 对象-需要操作字符串a、创建var s = mary;var s = new String(mary);b、属性s.lengthc、方法substring、indexOf、charAt、toLowerCase、toUpperCase、splitreplace/search/match-结合正则表达式对象d、灵活的处理，结合正则表达式d3-匹配3个数字s.replace(/正则表达式/,*)匹配模式g global-全局i 忽略大小写m 多行模式4、Array 对象a、创建数组：长度不固定var r = new Array();r0 = mary;r1 = 18;r2 = true;var r = new Array(mary,18,true);r3 = 34;var r = mary,19,false;-一维数组二维数组：数组的数组var r = new Array();r0 = mary,john;b、属性r.length -的个数c、方法r.toString()-10,20,30r.join(|)-10|20|30r.concat()r.reverse()-倒转r.sort()-排序-按照字符串的大小做比较-按照其他规则（大小）r.sort(比较规则)function 比较规则()5、Math 对象a、不需要创建，直接使用b、属性alert(Math.pi);c、方法Math.round()/max(a,b)/random()/floor()/ceil()/.sin()/cos()random()-0= 0.913-10之间data * 7 + 30-73-106、Number 对象a、创建 var n = 23.458;b、方法n.toFixed(2);-保留小数点后两位字符串格式，界面输出23.467、正则表达式对象a、创建正则表达式对象var r = /表达式/标识;b、第一种用法：结合string对象的方法用，用于对于字符串的处理str.replace(r,*);c、第二种用法：使用正则表达式对象的方法var r = /d3,5$/;r.test(string)-bool适用于实现页面录入的验证-屏蔽不利的数据8、Date 对象a、创建var d = new Date(2013-01-01 10:10:58);var d = new Date();-当前系统日期和时间b、方法getXXXX()-获取，比如 getMonth()、getDate()、getDay().setXXXX()-修改， setDate()toXXXX()-获取某种格式的字符串显示方式toString()/toDateString()/toTimeString().9、方法a、定义function Name(x,y,z,.)/代码return xxx;b、调用Name(1,3);var r = Name(1,3);c、重载js中，没有传统意义上的重载-如果方法名称重复，则以后定义的为准d、arguments-模拟重载方法里，代表传入方法中的那些参数e、定义方法的其他方式-用于方法内部方式一：创建 Function 对象var f = new Function(x,y,alert(x+y););f(11,44);方式二：使用匿名函数var f = function()for()alert();10、全局函数parseInt();parseFloat();isNaN();encodeURI();-URI地址进行编码decodeURI();-进行解码eval();-传入一个表达式或者一个语句（string）；执行var str = 1+2-6;alert(str);var r = eval(1+2-6);alert(r);四：DHTML 应用1、DHTML 应用：页面的动态效果-提供了一系列的对象2、window*document-文档 *location-地址栏 *history-历史screen-屏幕navigator-浏览器event-事件 *3、window 对象a、对话框方法window.alert();-警告框window.confirm();-确认框-返回值，返回 bool （true、false）mpt();-输入框b、打开新页面：window.open(url,name,width=300,height=200);C、周期性定时器var timer = window.setInterval(func,间隔);window.clearInterval(timer);d、一次性定时器window.setTimeout(func,100);window.clearTimeout();4、document 对象：window.document=documenta、DOM （document object modal）-将页面上的每个元素看成一个节点， 整个文档看成是一颗 节点树b、查询：查询文档中的某个节点对象方式一：通过id精确的查询某个节点对象document.getElementById()方式二：通过元素的层次位置来查询obj.parentNode/childNodes/firstChild/lastChild/.方式三：通过节点的名称来查询xxx.getElementsByTagName(img)-在xxx所代表的范围里，查询所有名称为 img 的那些节点对象，0个-n个-返回节点对象的数组c、读取或者修改节点对象的信息规律一：将 HTML 标签对象化如果 obj 是一个 var r = obj.value如果 obj 是一个图像 obj.src = b.jpg;如果 obj 是一个链接 ?obj.href = ;规律二：如果需要开始标记和结束标记中间的文本-使用 xxx.innerHTML如果 obj 是一个段落 text规律三：如果需要修改样式-简单样式，单行代码逐一设置obj.style.color = ;obj.style.fontSize = 20pt;obj.style.backgroundColor = ;规律四：样式比较复杂前提：现在 CSS 中定义一个样式类js代码中：obj.className = 样式类的名称;规律五：如果并不知道节点对象的类型obj.nodeName-返回节点对象的节点的名称（全大写方式）-IMG/A/INPUT/OPTIONd、增加新节点第一步：创建一个新的标记var obj = document.createElement(a);-第二步：设置信息obj.innerHTML = click me;obj.href = url;第三步：加入页面的某个位置xxx.appendChild(obj);-追加子节点，放在原有子节点的后面xxx.insertBefore(obj,相对位置);-放在相对位置之前xxx.insertBefore(obj,xxx.firstChild);xxx.insertBefore(obj,xxx.childNodes2);xxx.insertBefore(obj,xx.getElementById();e、删除节点xxx.removeChild(obj);xxx.removeChild(xxx.firstChild);obj.parentNode.removeChild(obj);5、HTML DOM-了解操作a、DOM：W3C 提供了一系列的标准的操作页面元素的方法-标准可以适应性b、进一步的封装 JQuery-将每一个元素都封装为 对象，比较典型的是 select和option；table和tr和tdc、以表格操作为例table表示一个表格table.insertRow(index);row.insertCell(index);6、screen 对象-与屏幕相关的信息screen.width/heightscreen.availWidth/avail