1、.HTML 概要知识点梳理 .21、了解 HTML 的概念 22、熟练掌握 HTML 的文档结构。 23、标签的分类 2块记标签： 2行级标签： 3掌握灵活运用实际开发中常用的 4 中布局结构： 3注意编写习惯： 3超链接的应用： 3表单的应用： 4下拉列表框： 5多行文本框 5只读和禁用属性 6隐藏域： 6Css 样式表 .6常用样式设置总结 7超链接伪类样式 7各类样式的优先级 7Javascript 知识点汇总 .7一、 JavaScript 理论知识点的理解： 81、 JavaScript 定义 82、 JavaScript 组成。 93、 JavaScript 的基本结构 94、 J
2、avaScript 的引用方式 9二、 JavaScript 核心语法 101、 语法约定： 102、 变量： 103、 数据类型： 104、 运算符： 10三、 JavaScript 基本应用 111、 消息框： 112、 数组： 11JavaScript 中的 for in 迭代语句： .123、 函数： 134、 事件： 145、 其他注意事项： 14四、 JavaScript 中的对象 15一、 BOM 和 DOM 对象有哪些区别：（了解） 15二、 BOM 对象 16Window 对象属性 16window 对象常用的方法： 17三、 DOM 对象 .17Document 对象常用的
3、属性 18Document 对象的常用方法 18.getElementByxx 获得元素节点 18HTML 概要知识点梳理1、了解 HTML 的概念HTML 是超文本标记语言，他是随着浏览器（ IE 谷歌）的发展而诞生出来的一种标记语言，是一种用来制作超文本文档的语言。 （注意：他并不是一种编程语言列如：c c+ vb.）.理解：所谓标记语言我们可以把它理解为一中符号标记，不同的符号有着不同效果。超文本：包括声音，图片，影视等等。2、熟练掌握 HTML 的文档结构。这里需要注意的地方 若标题标签书写错误会导致文档无 法显示。 （虽然浏览器现在能够自动补全代码）3、标签的分类块记标签：（常用与带
4、有列表的数据或菜单） （常用数据描述） （常与大数据|表单布局场合）（标题） （内容） (跨行列合.并)(常用与页面布局)(绘制一条水平线 一般用于网页脚部)(用于表单数据 )(超链接 | 锚链接)行级标签：(用于改变某个单一字体的样式)（换行）掌握灵活运用实际开发中常用的 4 中布局结构：1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单注意编写习惯：1、标签名和属性名称尽量小写 （属性值具有语义化）2、HTML 标签必须成
5、对出现。 （单标签除外） 3、属性值必须用引号括起来 （注意单引号 和 双引号 应用场合）4、标签必须正确嵌套 5、内容 样式 功能 分离出来。超链接的应用：.被链接的文本 | 图片 超链接当前位置 同页面的锚链接目标位置当前位置 不同页面的锚链接另一个网页的目标位置 （注意：与同一页面写格式不一样）站长信箱 邮箱链接（需要有邮箱工具）表单的应用：type 功能 例子text 单行文本输入(默认类型) password 密码 radio 单选（name 属性值一样） 男女checkbox 多选 书画reset 重置表单数据 .下拉列表框：格式： 例子：选择月份一月二月三月四月多行文本框格式：文
6、本内容 file 文件上传 submit 提交表单数据(提交到action 位置 ) image 图形提交按钮（只有提交功能） button 普通按钮（添加加事件） .例子：欢迎阅读服务条款协议.只读和禁用属性readonly：希望某个框内的内容只允许用户看，不能修改disabled：因没达到使用的条件，限制用户使用 隐藏域：（用于不让用户看到的信息）格式：Css 样式表格式：标签选择器属性：属性值 0；.class 属性：属性值 1;#id 属性：属性值 2;对象选择的组合使用格式：（减少代码量）1 标签+类.2 标签+id3 id+空格+类4 id+空格+类+逗号常用样式设置总结超链接伪类
7、样式1) a:link a:linkcolor:#999;未访问状态2) a:visited a:visitedcolor:#333; 已访问状态3) a:hover a:hover color:#ff7300; size = “15” 鼠标移上状态4) a:active a:active color:#999; 激活选定状态（鼠标点击未释放时）各类样式的优先级(由低到高顺序排列)1 浏览器默认设置2 外部样式表文件（经常使用） 3 内部样式表 4 行内样式表（不建议使用） 5 标签选择器6 类选择器7 ID 选择器（ID 的属性唯一）Javascript 知识点汇总.一、 JavaScrip
8、t 理论知识点的理解：1、 JavaScript 定义JavaScript 是一种基于对象和事件驱动的、并具有安全性能的脚本语言。注意：严格来说 JavaScript 也是面向对象的编程语言 (OOP)。OOP 语言使我们有能力定义自己的对象和变量类型。对象只是一种特殊的数据。对象拥有属性和方法。（javascript 高级应用）概念分析：（理解）这里 Javascript 与 Java 对比分析比较容易理解。 首先 Java 是面向对象的编程语言，并且是由 sun 公司推出的一款强大的编程软件。 然而 javascript 是一种基于对象的脚本语言，并且是由网景公司(Netscape)推出的
9、一款依附于浏览器运行的编程语言。 Javascript 与 Java 语言没有关系，Netscape 公司当初只是为了提高 Javascript 的知名度，才以 Javascript 命名，所谓大树下面好乘凉。(javascript 是由 LIiveScript 发展而来的)。 很多时候我们对脚本的概念不是很清楚，其实是由 script 翻译成中文就是脚本的意思。专业性理解 javaScript 与 Java 的区别：（了解） 我们可以看到 Java 和 JavaScript 都有“Java”四个字，就以为它们是同一样东西，连我自己当初也是这样认为的。其实它们是完完全全不同的两种东西。Java
10、，全称是 Java Applet，是嵌在网页中，而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的，一个 Applet 文件（.class）用Notepad 打开阅读，根本不能理解。Java Applet 的功能很强大，可以访问http、ftp 等协议，相比之下，JavaScript 的能力就比较小了。JavaScript 是一种“脚本”（“Script”），它直接把代码写到 HTML 文档中，浏览器读取它们的时候才进行编译、执行，所以能查看 HTML 源文件就能查看 JavaScript 源代码。JavaScript 没有独立的运行窗口，浏览器当前窗口就是它的运行窗口。
11、.2、 JavaScript 组成。Javascript 是由三部分组成，分别是 ECMAScript DOM BOM 。ECMAScript：ECMA 其实是一个标准化组织，类似于 W3C 这样的组织，而Javascript 遵循了它提供的重要标准。作用：（描述了 Javascript 的核心语法和基本对象）DOM:（Document Object Model）中文文档对象模型，作用：DOM 描述了处理网页内容的方法和接口；BOM(Browser Object Model)中文浏览器对象模型，作用：BOM 描述了与浏览器进行交互的方法和接口。后面会对 DOM BOM 对象进行详细的了解。3、
12、 JavaScript 的基本结构基本结构：script 默认类型是 Javascript 类型，当然也可以选中指定脚本类型type=”text/javascript”|language=“javascript“两个选任意一个都可以。注意：javascript 可以出现在 html 代码段的任何位置，一般我们把他放在 head 标签内。另外在一个 html 文件中可以出现多个 javascript 脚本段按从上到下的顺序开始执行。4、 JavaScript 的引用方式行内样式：外部样式：内部样式： 脚本代码 一般我们把写好的脚本代码单独放在一个文件内，通过外部样式引用进来。注意：外部文件引用在
13、 标签之间不能包含脚本代码段。.二、 JavaScript 核心语法1、 语法约定：Javascript 脚本语言严格区分大小写。 （Java 不区分大小写）变量名必须以字母或下划线开始两个语句之间用”；”结束。2、 变量：JavaScript 是一个弱数据类型的脚本语言。所有类型的变量都用 var 来定义。我们可以这样来定义数据类型。var age = 24; number 型var sex = “男”; string 数据类型var birthday = new Array “1990/08/07”; Object 对象（数组，null, 对象都为 object 类型）也可以这样定义： a
14、ge = 24 ; var a,b,c=2;（2 的值只会赋给 c 变量，很少使用）1、 可以先声明再赋值，同时声明和赋值，不声明直接赋值（不建议使用）2、 可以重新声明 javascript 变量且原始的值保持不变例如： var a = 3; var a; 输出 a 的值仍然是 3.如果 var a = 3; var a = 4 ; 则输出的 a 的值将会为 4.3、 数据类型：undefined：变量被声明后，但未被赋值string：用单引号或双引号来声明的字符串boolean：true 或 falsenumber：整数或浮点数object：javascript 中的对象、数组和 null
15、如果想测试一个变量的数据类型可以使用运算符 typeof 来测试。例如： alert(typeof a ); 警告框内会显示 a 的数据类型。.4、 运算符：javascript 中的运算符和 Java 中的运算符基本上是一样的。这里就不再多说了。控制语句：if else switch() for while 等跟 Java 内基本一样不再多说了。三、 JavaScript 基本应用1、 消息框：警告框：alert(“弹出一个警告框”);警告框内换行 alert（”弹出一个警告框”+“/n”+”这个会换行” ）;确认框：confirm(“提示信息，确定退出吗？ ”);confirm 返回一个
16、boolean 类型的结果。选中确定则返回一个 true 选中否返回一个 false。例如：var isopen =confirm(“如果你想打开你就点确定吧？”);if(isopen=true)alert(“欢迎进入深蓝 home!”);elsealert(“你确定你不进来看看？ ”);提示框(输出框)：prompt(“请输入你的姓名”， “张三”);prompt 返回值是一个 srting 字符串。例如：var name = prompt(“请你输入你的姓名”);Javascript 注释：单行注释： /多行注释： /* */.2、 数组：javascript 中的数组与 Java 中的数
17、组区别很大。Javascript 中的数组特性：1. Javascript 中的数组定义长度不固定。可以二次追加数据。2. Javascript 同一个数组可以保存不同数据类型的数据。定义格式：var name = new Array(4);var name = new Array(“张三” ， “李四” ， “王五”);var name = new Array(“刘一锅”，25);/ 可以是不同的数据类型一般不这么做！获取数组中的数据：可以使用下标的形式去访问数组内的原素。如： name0也可以直接获取数组内的数据 alert(name);（Java 中这样取的是地址额）数组常用属性和方法：
18、调用方法： 数组名。属性名； 或 数组名。方法名；属性： length 属性name.length 则会返回数组 name 中数组元素的个数。常用方法：join() 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔可以理解为将数组转换成 string 类型的字符串。如：var name = new Array(“小龙女”,”杨过”,”杨康”); Object 数据类型name.join(“-”); string 数据类型其中 为可选项 默认一 ，为分割符且分割符也会成为字符串的一部分。push()向数组尾部添加新元素，并返回新的数组的长度值。例：name.push(“欧阳锋”); 返回
19、值为 4；sort()对数组进行排序，但是排序功能不够太完善，所以很少使用(首位不能为最大数)toString()将数组转换成字符串并返回结果。JavaScript 中的 for in 迭代语句：作用：遍历数组或者对象的属性（对数组或者对象的属性进行循环操作） 。.例：var name = new Array(“张三” ， “李四” ， “王五”);for(x in name)alert(“学生的姓名分别是”+namex);其中 x 返回的是数组中的下标，类似于 Java 中的增强 for 循环3、 函数：Javascript 中常用的系统函数：isNaN() 判断一个常量或变量不是一个数值
20、var age = 23; isNaN(age) 结果为： falseNumber()把一个对象(object 类型的数据 )转换成数字，如果转换的的是非数值型数据则会返回一个 NaN(Not a Number 非数字) Number(name0);parseInt(string)把一个字符串转换成一个整数并返回解析的整数。注意：如果被解析的字符串开头不是以数字开头则会返回值为 NaN(空格除外)且解析出来的数组只是开头的连续的数字。String() 函数把对象的值转换为字符串。JavaScript 中的自定义函数：在 js 中自定义函数中包含一些脚本代码，这些代码只有当该函数被调用的时，该脚
21、本代码才会被执行。 （一般为事件调用）自定义函数的定义：无参函数:functions 函数名()js 脚本代码；调用方法： onclick=函数名(); 事件名 = 函数名（） ；有参函数:function 函数名（参数 1，参数 2） 脚本代码return调用方法： onclick=函数名（实参 1，实参 2)；匿名函数：（有函数没有函数名就叫匿名函数）var sum = function（） 脚本代码段 ；调用方法： onclick=sum();.4、 事件：属性 当以下情况发生时，出现此事件onabort 图像加载被中断onblur 元素失去焦点onchange 用户改变域的内容oncl
22、ick 鼠标点击某个对象ondblclick 鼠标双击某个对象onerror 当加载文档或图像时发生某个错误onfocus 元素获得焦点onkeydown 某个键盘的键被按下onkeypress 某个键盘的键被按下或按住onkeyup 某个键盘的键被松开onload 某个页面或图像被完成加载onmousedown 某个鼠标按键被按下onmousemove 鼠标被移动onmouseout 鼠标从某元素移开onmouseover 鼠标被移到某元素之上onmouseup 某个鼠标按键被松开onreset 重置按钮被点击onresize 窗口或框架被调整尺寸onselect 文本被选定onsubmit
23、 提交按钮被点击onunload 用户退出页面注意：其中 onload 事件在一个 html 页面中只能存在一个起作用。 （最后一个）且只能在脚本段内和 body 标签内使用。5、 其他注意事项：在 Javascript 中可以忽略多个空格，为了代码的可阅读性可以添加适当的空格。在 javascript 中对大小写很敏感。在 javascript 中如果想换行则可以使用 进行换行（一般很少使用）如： alert(“欢迎你哈雷”)；但是不能 alert(“欢迎你哈雷”)；/这里的换行只能在字符串中使用。有时候需要使用一些特殊符号，这时就要使用反斜杠转义特殊符号。. 单引号“ 双引号表现为不同浏览
24、器定义有差别,实现方式不同3. window 是 BOM 对象，而非 js 对象；DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API） 。BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：1. 弹出新的浏览器窗口 2. 移动、关闭浏览器窗口以及调整窗口大小 3. 提供 Web 浏览器详细信息的定位对象 4. 提供用户屏幕分辨率详细信息的屏幕对象 5. 对 cookie 的支持 6. IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对
25、象javacsript 是通过访问 BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于 BOM 的 window 包含了 document，window 对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用 window 对象的 document 属性，通过 document 属性就可以访问、检索、修改 XHTML 文档内容与结构。因为 document 对象又是 DOM（Document Object Model）模型的根节点。可以说，BOM 包含了 DOM(对象) ，浏览器提供出来给予访问的是 BOM 对象，从 BOM 对象再访问到 DO
26、M 对象，从而 js 可以操作浏览器以及浏览.器读取到的文档。从 window.document 已然可以看出，DOM 的最根本的对象是 BOM 的window 对象的子对象。区别：DOM 描述了处理网页内容的方法和接口，BOM 描述了与浏览器进行交互的方法和接口。二、 BOM 对象BOM 模型：BOM 描述了与浏览器进行交互的方法和接口。BOM 对象常用的对象与方法：1、 Window 对象：表示在浏览器中打开的窗口。Window 对象常用的方法与属性：Window 对象属性Window 常用的属性：(这三个属性有分别是三个对象)History 该对象包含用户（在浏览器窗口中）访问过的 UR
27、L。Location 该对象包含有关当前 URL 的信息。Document 每个载入浏览器的 HTML 文档都会成为 Document 对象。.history 对象方法方法 描述back() 加载 history 列表中的前一个 URL。forward() 加载 history 列表中的下一个 URL。go() 加载 history 列表中的某个具体页面。使用方法：window.history.back();跟后退功能一样，如果 history 列表内没有访问记录。则此功能无效。也可以省略掉 window 直接写成 history.back();其中 go()跟前个方法功能类似，如果 go(-
28、1) 同 back(),为正数时，则同 forward（）作用。Location 对象的方法：属性 描述assign() 加载新的文档。reload() 重新加载当前文档。(刷新)replace() 用新的文档替换当前文档。用法：location.assign(URL);这里的 URL 指的是统一资源定位器，就是我们通常说的网址，当然在这里还可以是一个网页文件的路径地址。例如：location.assign(“c:/index.html | http:/”);location.reload(); 相当于刷新location.replace(New url); 跳转到指定的页面document
29、对象会在 DOM 对象中细说。window 对象常用的方法：方法 描述alert() 显示带有一段消息和一个确认按钮的警告框。clearInterval() 取消由 setInterval() 设置的 timeout。clearTimeout() 取消由 setTimeout() 方法设置的 timeout。close() 关闭浏览器窗口。confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。open() 打开一个新的浏览器窗口或查找一个已命名的窗口。prompt() 显示可提示用户输入的对话框。setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。set
30、Timeout() 在指定的毫秒数后调用函数或计算表达式。.三、 DOM 对象DOM 模型：DOM 描述了处理网页内容的方法和接口；Document 对象常用的属性使用方法： 对象.属性名属性名称 说 明referrer 返回载入当前文档的文档的 URLURL 返回当前文档的 URLDocument 对象的常用方法方法名称 说 明getElementById() 返回对拥有指定 id 的第一个对象的引用getElementsByName() 返回带有指定名称的对象的集合getElementsByTagName() 返回带有指定标签名的对象的集合write() 向文档写文本、HTML 表达式或
31、JavaScript 代码.getElementByxx 获得 元素节点getElementById() 寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.var oElement = document.getElementById ( sID )该方法只能用于 document 对象getElementsByName()寻找有着给定 name 属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定 name 属性的所有元素的总个数。getElem
32、entsByTagName()寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。var elements = document.getElementsByTagName(tagName);var elements = element.getElementsByTagName(tagName);该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。var container = document.getElementById(“sid”);var elements = container.getElementsByTagName(“p”);
