韩顺平htmlcssjavascript笔记.docx

1、韩顺平htmlcssjavascript笔记HTML一、 HTML有关知识点1. html介绍html是一种标记语言，主要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。2. html可以做什么 html可以编写静态网页 该静态网页可以包括文字、图像、动画、声音、表格、链接。从而构成一个个漂亮的网页3. Html发展历史4. Html的基本结构5. 是标记（也叫元素），标记的一般格式：元素内容如果没有内容可以用：6. Html实体标记7. Html常用标记 html超链接 _blank 新的窗口 _self 本窗口 _parent 父窗口 _

2、top 整个浏览器窗口 html图像元素 html表格 -用于说明行 -用于说一小格 无序列表 有序列表 框架 表单元素 文本框： 密码框： 单选框： 复选框： checked是指默认选中的 隐藏域： 图片按钮： 文本域：wrap=off自动换行 请在这里写 下拉菜单：size 是指显示大小-请选择-上海 selected是指被选中北京 #=rrggbb;这些是16进制的，红绿蓝(red-green-blue,RGB)值来表示 标尺线： 文字布局标记 ：表示一段#= left /center/right 图像： 会移动的文字 多媒体页面 背景音乐：CSS1. div元素是用来HTML文档内大块

3、(block-level)的内容提供结构和背景元素。2. css是Cascading Style Sheets(层叠样式表单)的缩写。它是一种用来表现HTML或XML等文件样式的计算机语言3. div+css是网站标准的(或者称为“web标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格定位方式的区别，因为XHTML网站设计的标准中，不再使用表格定位，而是采用DIV+CSS的方式定位。 我们可以这样简单的这样理解div+css: div是用于存放内容(文字，图片，元素)的容器。 css是用于指定放在div中的内容的样式（大小，颜色，背景，位置）。4. div+css的好处是：

4、 内容和样式分离 代码可以重复利用。5. 从上面使用的span元素，可以看出css的基本格式： 元素可以是任意元素：属性名和属性值可以参考W3Cschool给出的文档6. 使用CSS的基本语法： 使用内部css:引用内部css:注意：没有. 使用外部css:7. 使用滤镜：8. 四种选择器的用法：(1) 类选择器，又叫做class选择器：类选择器的基本格式：.类选择器名 属性名：属性值; (2) id选择器：基本语法格式：#id选择器名称： 属性名：属性值; 例如：#tyle2 font-size:30px; ackground-color:green;在html文件中使用id选择器的格式是：

5、 (3) html选择器：html选择器的语法格式：html元素名称 属性名：属性值;(4) 通配符选择器：* 属性名：属性值； 例如：* margin:0; padding:0;外边距：margin：上右下左；/是按顺时针旋转的 margin：10px 20px 30px 是代表上下外边距是10px,右外边距是20px,左 边距是30px可以让所有的html元素的外边距和内边距都默认为0注意：当一个元素被id选择器，类选择器，html选择器修饰的时候，则优先级是： id选择器class选择器html选择器9. 选择器深入探讨：(四种选择器可以组合使用)(1) 父子选择器例如：#style s

6、pan 属性名：属性值;注意：子选择器标签必须是html可以识别的标记 可以有多层子选择器 例如： #style span span 属性名：属性值; (2) 一个标签既可以用class选择器，也可以用id选择器；但是id的选择器的优先级高于class选择器(3) 一个元素最多有一个id选择器，可以拥有多个class选择器10. 块元素和行内元素的概念：(1) 行内元素，又叫做内联元素：内联元素只能容纳文本或者内联元素，常见的内联元素有(2) 块元素(block element):块元素一般都从新行开始，可以容纳文本，其他内联元素和其他块元素，即使内容不能占满遗憾，块元素也要把整行占满。常见的

7、块元素有注意：块元素转换为行内元素：style=”display:inline” 行内元素转换为块内元素：style=”diplay:block”11. 标准流/非标准流：(1) 流：在网页设计中指的是元素(标签)的排列方式(2) 标准流：元素在网页中就像流水，排在前面的元素，内容前面出现；排在后面的元素，内容就后面出现。(3) 非标准流：当某个元素(标签)脱离了标准流的【比如因为相对定位】排列，我们统称为非标准流排列。12. 盒子模型：13. 浮动：浮动是css中很重要的概念，必须掌握。浮动分为左浮动，右浮动，清除浮动。清除浮动：如果不希望别的元素在某个元素的左边或者是右边，可以使用清除浮动

8、的方法：clear:left; clear:left; clear:both;14. 定位基本概念：css定位(Positioning)属性允许你对元素进行定位。position属性值：(1) static(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分。行内元素则会创建一个或多个行框，置于其父元素中。(2) relative(相对定位)：元素偏离某个距离。元素仍保持其未定位的形状，它原来所占的空间仍然保留，从这一角度，好像该元素仍然在文档流/标准流中一样运行效果图：(3) absolute(绝对定位)：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文

9、档中的另一个元素或者是初始包含块。元素原先在正常文档流所占的空间会关闭，就好像原理不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。运行效果图：(4) fixed：元素框的表现类似于将position设置成为absolute，不过其包含块是视图本身。JavaScript1. javascript基本介绍：(1) javascript是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域：网页游戏地图搜索股市信息查询web聊天(2) 在web开发中，js是必不可少的技术，同时js也是ajax/jquery/extjs等框架的基础。(3) ja

10、vascript是一种广泛用于客户端WEB开发的脚本语言，常用来给HTML网页添加动态的功能，比如响应用户的各种操作。2. 脚本语言：(1) 脚本语言往往不能独立使用(单独使用没有什么意义)，它一般与html/asp/jsp/php(2) 脚本语言有自己的变量，函数，控制语句。(3) 脚本语言是一种解释性语言。3. JS一般在客户端的浏览器执行。但也可以对服务器进行编程(非常少)4. JavaScript简介JavaScript是一种解释型的语言。Javascript并不是java的一种java脚本语言，除了名字都带有java这个此外，两者并没有任何关系。Javascript的第一个版本出现在

11、Netscape Navigator2浏览器中。人们最初给javascript起的名字是LiveScript。然而由于，当时java技术的正是如日中天，netscape公司给livescript改名为javascript，以便是人们更加注意javascript。随着javascript的发展，微软公司决定在IE浏览器中加入微软的品牌的javascript，即Jscript。脚本语言不仅只有javascript的一种，还有其他的脚本语言，如VBscript和perl语言(1) 标记：第一个简单的javascript程序在网页中添加标签中添加javascript代码，在之间的代码块，不是用于显示h

12、tml元素，而是需要浏览器进行处理的脚本代码，在标记和对应的标记之间包围的代码块，称为脚本块。标记可以放在html页面的头部，即之间。标记具有一些属性，其中最重要的属性就是type属性。前面提到了javascript并不是唯一可用的脚本语言，可以的脚本语言需要按不同的方式进行处理。我们需要浏览器，在当前的页面中我们所使用的是何种脚本语言。*是一种防御性编码，如果用户的浏览器不支持javascript或者是设置过高的安全级别，那么就会显示出相应的提示洗洗，避免了在用户不知情下停止运行或者的都错误结果。* (2) 在javascript中用分号表示一个语句的结束(3) Javascript是弱类型

13、语言。什么叫做弱类型语言。在强类型语言中，使用变量之前，必须先声明变量的类型，才能使用。而javascript则不需要这样使用。5. 案例1：你的第一个程序，javascript高手都是从这里开始的，这个程序完成一个非常简单功能，在网页中弹出一个对话框，显示“hello world！”(1) js的位置：js的位置可以随意，但是一般用在标签(2) js必须用 js代码如果没有使用包含起来的话，则浏览器则会视为普通文本6. 案例2：对前面的程序，改成一个简单加法运算程序 js的变量的类型是怎样决定？(1) js的数据类型是弱数据类型语言。即在定义变量的时候，统一使用var表示，甚至可以去掉var

14、关键字(2) js中的数据类型是有js引擎来决定的。数据类型可以变化的。var name=”shopping”; /js引擎知道name是字符串 name=22; /这时name自动变成了数varkk=2; /kk是整数vary y; /y是undefined类型7. javascript中的标识符标识符指的是javascript中定义的符号，例如，变量名，函数名，数组名等。标识符可以有任意顺序的大小小字母、数字，下划线和美元符号（$）组成，但是标识符不能以数字开头，不能是javascript的保留关键字。8. javascript是严格区分大小写的。javascript中每条语句用分号“;”

15、结束。9. 注释：单行注释/ 多行注释 /* */10. javascript的基本语法-数据类型： 基本数据类型： 通过typeof关键字，可以看到数据的类型(1) Number(数值类型) 整型常量（10进制8进制16进制）16进制以0x或者是0X开头，例如：0x83;8进制必须以0开头： 实型常量 12.32 193.98 5E7等 特殊数值：NaN(not is a number)、Infinity、isNaN()、isFinite()(2) Boolean(布尔类型) true和false(3) String 字符串 “this is a book” 复合数据类型： 特殊数据类型：(

16、1) undefine的例子： var a; window.alert(a的数据类型+typeof a);(2) null的例子： var a=null; window.alert(a的数据类型+typeof a);11. javascript的基本语法-定义变量、初始化、赋值：(1) 定义变量：var a;(2) 初始化变量：在定义变量的时候，就赋值：var a=45;(3) 给变量赋值：先定义变量：varnum; 再赋值： num=3312. javascript的基本语法-数据类型转换：(1) 自动转换：javascript的数据类型是动态的请看一个案例： / num先定义成Number

17、数据类型 varnum=22; num=hello word; window.alert(num的数据类型+typeofnum); (2) 强制转换：请看案例：如何将字符串转换成数字 / num先定义成String数据类型 var s=123; varnum=parseInt(s); window.alert(typeofnum); 13. javascript中的运算符和java中的一样的,但是有几个注意点：(1) 案例一：b先转成9，在比较 var a=9; var b=9 if(a=b) window.alert(“ok”); else window.alert(“faile”); (2

18、) 在逻辑运算中，0、“”、false、null、undefined、NaN均表示false var a=0; if(a) window.alert(“ok”); else window.alert(“faile”); 14. 函数：为完成某一个功能的代码的集合。函数定义：函数名位于关键字function之后，为了让代码易于理解，函数名应具有一定的意义。注意点：函数没有返回值类型。形参数不写具体的类型。15. eval()可以将一个字符串当成一个脚本运行例如： varstr=”window.alert(“ok”)”; eval(str);16. escape()可以将中文或日文转为ascii码

19、：unescape()反之。一般这个函数相互配合，防止在浏览器中出现乱码： varstr=”江西”; var str2=escape(str); /转回来 var str3=unescape(str2);17. 数组：(1) 为什么需要数组？将一组数据放在一起，组成集合。它由一对方括号包围，数组的每个元素用逗号分隔，数组元素可以是任意类型的数据(2) 创建数组：var数组名=元素值，元素值，例如：var a=“shopping”,123,1.1,4.5,true(3) 二维数组：var a=1,2,3,“hello”,”world”,”jiangxi”=18. JS面向(基于)对象编程-类（原

20、型对象）与对象（实例）(1) JS面向（基于）对象特征介绍在学习这个知识点之前，我们有必要给大家明确几个概念，这样大家在后续的学习中才不会犯晕： Javascript是一种基于对象（object-based）的语言，你遇到的所有东西机会都是对象特别说明：基于对象也好，面向对象也好，实际上都是以对象的概念来编写程序。从本质上并无区别，所以这两个概念在课程中是一样的。 因为javascript中没有class(类)，所以有人把类也称为原型对象。因为这两个概念在编程中发挥的作用看都市一个意思 总结：JS中基于对象=JS面向对象 JS中没有类的概念，按标准的说法原型对象。其实就是类(2) 为什么需要原

21、型对象（类）？例子：张老太养了两只猫猫：一只猫叫小白，今年3岁，白色；还有一只叫小花，今年5岁，花色。请编写一个程序，当用户输入小猫的名字时，就显示该猫的名字，年龄，颜色。如果用户输入的小猫名字错误，则显示张老太没有这只猫。(3) 类（原型对象）如何自定义类（原型对象）和对象。创建类的方式有5中方法： 工厂方法使用new Object创建对象并添加相关属性 使用构造函数来定义类（原型对象）注意：上面的cat类就是用此种方法基本语法： function 类名/原型对象名() 创建对象： var对象名=new 类名();例子： 使用prototype 构造函数及原型混合方式 动态原型方式 注意：JS中的一切都是对象。 如何判断一个对象实例是不是Person类型？ if(a instanceof Person) window.alert(“a是person的实例”) if(a.constructor= Person) window.alert(“a是person的实例”) 19. 带var和不带var的区别： varabc=89; function test() /在函数里，如果你不带var，则表示使用全局的abc变量。 /如果你带上var,则表示在test()中，定义一个新的abc变量 abc=900; test(); window.alert(abc);20. this问题的提出