传智 韩顺平 html+css+javascrtpt 课程笔记1吐血整理.docx

等。

特点：

不管什么情况下，即使内容不能占满一行，也要把整行占满（除非使用浮动或盒子模型）

注意：

块元素转换为行内元素：

style=”display:

inline”

行内元素转换为块内元素：

style=”diplay:

block”

在开发的时候首选块元素定位，所以div大行其道!

10.标准流/非标准流

（1）流：

在网页设计中指的是元素（标签）的排列方式

（2）标准流：

元素在网页中就像流水，排在前面的元素，内容前面出现；排在后面的元素，内容就后面出现。

这是默认的布局方式。

（3）非标准流：

当某个元素（标签）脱离了标准流的【比如因为相对定位】排列，我们统称为非标准流排列。

11.盒子模型

①html元素都可以看成是一个盒子

②盒子模型的参照物不一样，则使用的css属性不一样。

例如上上图，从div1看，是margin-right，从div2看则是margin-left

③如果不希望破坏整个外观，则尽量使用margin来布局，因为padding可能会改变盒子的大小（相当于盒子有弹性），而margin过大会使盒子内容挤到盒子外面，但是盒子本身大小不变

12.浮动

浮动是css中很重要的概念，必须掌握。

浮动分为左浮动、右浮动、清除浮动。

案例：

清除浮动：

如果不希望别的元素在某个元素的左边或者是右边，可以使用清除浮动的方法：

clear:

left;clear:

left;clear:

both;

13.定位

css定位（Positioning）属性允许你对元素进行定位。

position属性值：

（1）static（默认值）：

元素框正常生成。

块级元素生成一个矩形框，作为文档流/标准流的一部分。

行内元素则会创建一个或多个行框，置于其父元素中。

这一句写不写无所谓，默认存在。

（2）relative（相对定位）：

元素偏离某个距离。

元素仍保持其未定位的形状，它原来所占的空间仍然保留，从这一角度，好像该元素仍然在文档流/标准流中一样

运行效果图：

（3）absolute（绝对定位）：

元素框从文档流完全删除，并相对于其包含块定位。

包含块可能是文档中的另一个元素或者是初始包含块。

元素原先在正常文档流所占的空间会关闭，就好像原理不存在一样。

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

运行效果图：

（4）fixed：

元素框的表现类似于将position设置成为absolute，不过其包含块是视图本身。

注意：

relative的参照点是元素原来的位置，absolute的参照点是离元素自己最近的那个非标准流盒子。

JavaScript1

1.javascript基本介绍

（1）js是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域：

网页游戏

地图搜索

股市信息查询

web聊天

····

（2）在web开发中，js是必不可少的技术，同时js也是ajax/jquery/extjs等框架的基础。

（3）js是一种广泛用于客户端WEB开发的脚本语言，常用来给HTML网页添加动态的功能，比如响应用户的各种操作。

2.脚本语言

（1）脚本语言往往不能独立使用（单独使用没有什么意义），它一般与html/asp/jsp/php配合使用。

（2）脚本语言有自己的变量、函数、控制语句。

（3）脚本语言是一种解释性语言。

（4）脚本语言一般都有相应的脚本引擎来解释执行。

js的脚本引擎是浏览器。

3.js一般在客户端的浏览器执行，但也可以对服务器进行编程（非常少）

4.JavaScript简介

Javascript并不是java的一种java脚本语言，除了名字都带有java这个此外，两者并没有任何关系。

Javascript的第一个版本出现在NetscapeNavigator2浏览器中。

人们最初给javascript起的名字是LiveScript。

然而由于，当时java技术的正是如日中天，netscape公司给livescript改名为javascript，以便是人们更加注意javascript。

随着javascript的发展，微软公司决定在IE浏览器中加入微软品牌的javascript，即jscript。

脚本语言不仅只有javascript的一种，还有其他的脚本语言，如VBscript、python和perl语言等。

（1）标签中添加javascript代码，在之间的代码块，不是用于显示html元素，而是需要浏览器进行处理的脚本代码，在标记之间包围的代码块，称为脚本块。

☞如果没有使用包含起来的话，则浏览器则会视为普通文本

（3）在javascript中用分号表示一个语句的结束。

（4）Javascript是弱类型语言。

在强类型语言中，使用变量之前，必须先声明变量的类型，才能使用，而javascript这样的弱类型语言则不需要这样使用。

5.javascript中的变量

对前面的程序，改成一个简单加法运算程序

（1）js的数据类型是弱数据类型语言，在定义变量的时候，可以统一使用var表示，甚至可以去掉var关键字。

（2）js中的数据类型是由js引擎来决定的。

数据类型可以变化。

varname=”shopping”;//引擎知道name是字符串

name=22;//这时name自动变成了整数

varyy;//y是undefined类型

6.javascript中的标识符

标识符指的是javascript中定义的符号，例如变量名、函数名、数组名等。

标识符可以由任意顺序的大小字母、数字，下划线和美元符号（$）组成，但是标识符不能以数字开头，不能是javascript的保留关键字，并且严格区分大小写。

7.注释：

单行注释//多行注释/**/

8.javascript的基本语法---数据类型

✧基本数据类型：

通过”typeof变量名”，可以看到变量的具体数据类型

（1）number（数值类型）

●整型常量（10进制\8进制\16进制）

10进制不能以0开头（0除外），例如：

123；

8进制以0开头，例如：

0123；

16进制以0x或者是0X开头，例如：

0x83。

●实型常量

12.32、5E3（即5*10^3=5000）等。

●特殊数值

NaN（notisanumber）、Infinity（无穷大），可以分别用isNaN（）、isFinite（）函数来判断。

（2）boolean（布尔类型）

true和false

（3）string字符串：

用双引号或单引号括起来均可，支持\转义符

“thisisabook”

✧复合数据类型：

✧特殊数据类型：

（1）null的例子：

vara=null;

window.alert（"a的数据类型是"+typeofa）;

（2）undefine的例子：

vara;

window.alert（"a的数据类型是"+typeofa）;

9.javascript的基本语法---定义变量、初始化、赋值：

（1）定义变量：

vara;

（2）初始化变量

在定义变量的时候就赋值：

vara=45;

（3）给变量赋值

先定义变量：

varnum;

再赋值：

num=33;

10.javascript的基本语法---数据类型转换

（1）自动转换：

javascript的数据类型是动态的

案例：

//num先定义成Number数据类型

varnum=22;

num="helloword";

window.alert（"num的数据类型是"+typeofnum）;

（2）强制转换：

案例：

如何将字符串转换成数字

vars1="123";

vars2=”12.3”;

varnum1=parseInt（s1）;

Varnum2=parseFloat（s2）;

window.alert（typeofnum1+typeofnum2）;

11.javascript中的运算符和java中的一样的，但是有几个注意点

（1）案例一：

b先转成9，再比较

vara=97;

varb=’a’

if（a==b）{

window.alert（“ok”）;

}else{

window.alert（“fail”）;

}

返回的是fail，说明，数值和字符比较的时候并没有把字符转成ASCII码再和数比较。

vara=9;

varb=’9’

if（a==b）{

window.alert（“ok”）;

}else{

window.alert（“fail”）;

}

返回的是ok，说明，数值和字符比较的时候是把字符转成数值再和数比较。

（2）在逻辑运算中，0、“”、false、null、undefined、NaN均表示false

vara=0;

if（a）{

window.alert（“ok”）;

}else{

window.alert（“faile”）;

}

（3）||运算符将返回第一个不为false的那个值本身或对象，全部是false的话就返回最后一个值本身或对象。

12.函数：

为完成某一个功能的代码的集合。

注意：

①函数没有返回值类型，形参不写具体的类型。

②js的函数天然支持可变参数，但不支持重载：

13.eval（）可以将一个字符串当成一个脚本运行

例如：