JavaWeb基础02

1.css的简介
*css：层叠样式表
**层叠：一层一层的
**样式表：很多的属性和属性值
*使页面显示效果更加好
*css将网页内容和显示样式进行分离，提高了显示功能。
2.css和html的结合方式（四种结合方式）
（1)在每个html标签上面都有一个属性style，把css和html结合在一起
-<div style=“background-color:red;color:green;”
(2)使用html的一个标签实现<style 标签，写在head里面
*<style type=“text/css”
css代码;
</style
* <style type=“text/css”
* <div {
background-color:blue;
color:red;
}
</style
(3)在style标签里面使用语句
@import url(css文件的路径);
-第一步，创建一个css文件
<style type=“text/css”
@import url(css文件的路径)
</style
（4)使用头标签link，引入外部css文件
-第一步，创建一个css文件
-<link rel=“stylesheet” type=“text/css” href=“css文件的路径”/
***第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式
***优先级
由上到下，由外到内，优先级由低到高
后加载的优先级高
***格式 选择器名称(属性名：属性值；属性名：属性值；…)
3.css的基本选择器（三种）
**要对哪个标签里面的数据进行操作
（1)标签选择器
*使用标签名作为选择器的名称
(2)class选择器
*每个html标签都有一个属性class
-<div class=“haa” dongxi</div
-.haa {
background-color:orange;
}
(3)id选择器
*每个html标签上面有一个属性id
-<div id=“hee” dongxi</div
-#hee {
background-color:#333000;
}
***优先级
style >id选择器>class选择器>标签选择器
4.css的扩展选择器
（1)关联选择器
*<div <p ssss</p </div
*设置div标签里面p标签的样式，嵌套标签里面的样式
* div p{
background-color:green;
}
(2)组合选择器
*把div和p标签设置成相同的样式，把不同的标签设置成相同的样式
*div,p{
background-color:orange;
}
(3)伪元素选择器(了解)
*css里面提供了一些定义好的样式，可以拿过来使用
**比如超链接的状态
原始状态 鼠标放上去的状态 点击 点击之后
:link :hover :active :visited
**记忆的方法
lv ha
5.css的盒子模型
*在进行布局前需要把数据封装到一块一块的区域内(div)
（1）边框
border:2px solid blue;
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）内边距
padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距
（3）外边距
margin:20px;
可以使用Margin统一设置
亦可以分别设置
上下左右四个外边距
6.css的布局的漂浮
float：
**属性值
left：文本流向对象的右边
right：文本流向对象的左边
7.css的布局的定位
position：
**属性值
-absolute：
***将对象从文档流中拖出
***可以时top，bottom等属性进行定位
-relative：
***不会把对象从文档流中拖出
***可以使用top、bottom等属性进行定位
8.案例 图文混排案例
**图片和文字一起显示
9.案例 图像签名

1.javascript的简介
*是基于对象和事件驱动的语言，应用于客户端
-基于对象
**提供好了很多对象，可以直接拿过来使用
-事件驱动
**html做网站静态效果，javascript动态效果
-客户端：专门指的是浏览器
*js的特点
（1）交互性
-信息的动态交互
（2）安全性
-js不能访问本地磁盘的文件
（3）跨平台性
-java里面跨平台性，虚拟机
-只有能够支持js的浏览器，都可以运行
*javascript和Java的区别
（1)java是sun公司，现在Oracle；js是网景公司
（2)javascript是基于对象的，Java是面向对象
（3）Java是强类型语言，js是弱类型语言
（4）javascript只需解析就可以执行，而Java需要先编译成字节码文件，再执行
*javascript的组成（下面js）
三部分组成
（1）ECMAScript
-ECMA：欧洲计算机协会
-有ECMA组织指定的js的语法，语句。。。
（2）BOM
-broswer object model：浏览器对象模型
（3）DOM
-document object model：文档对象模型
2.js和html的结合方式（两种）
第一种：
-使用一个标签<script type=“text/javascript” js代码</script
第二种：
-使用script标签，引入一个外部的js文件
***创建一个js文件，写js代码
<script type=“text/javascript” src=“1.js” </script
**使用第二种方式时，就不要再script标签里面写js代码了，不会执行
3.js的原始类型和声明变量
**java的基本数据类型byte short int long float double char boolean
**定义变量 都使用关键字var
**js的原始数据类型（五个）
-string：字符串
*** var str = “abc”
-number：数字类型
-boolean：true和false
-null
***var date=new Date()；
**获取对象的引用，null表示对象引用为空，所有对象的引用也是object
-undefined
***定义一个变量，没有赋值
**typeof();查看变量类型
4.js的语句
-java里面的语句：
**if判断
**switch语句
**循环 for while do-while
-js里面的这些语句
**if判断
**switch
-javajdk1.7里面支持数据类型string
-js里面都支持
-switch(a){
case 5:
break;
case 6:
break;
default:
…
}
**循环语句 for while do-while
-while循环
*** var i=5；
while(i>1){
alert(i);
i–;
}
-for循环
*for(int i=0;i<=3;i++){ }
for(var m=0;m<=3;m++){
alert(m);
}
5.js的运算符
** js不区分整数和小数
var j=123
alert(j/10001000);
// j/10001000 在java里面得到的结果时是 0
//在js里面不区分整数和小数，结果是123
**字符串的相加和相减的操作
var str=“123”
**如果相加的时候，做的是字符串连接
**如果相减，做的是相减的运算
* 提示NaN：表示不是一个数字
**boolean类型也可以操作
***如果设置成true，相当于这个值是1
***如果设置成false，相当于这个值是0
** == 和 ===区别
**做判断
** ==比较的只是值
** ===比较的是值和类型
**引入知识
直接向页面输出的语句（可以把内容显示在页面上）
*document.write(“aaa”);
document.write(“hr/”);
6.实现99乘法表（输出到页面上）
-document.write里面是双引号，如果设置标签的属性需要使用单引号
-document.write可以输出变量，还可以输出html代码
7.js的数组
*定义方式（三种）
第一种：var arr=[1,2,3]或[1,“4”,true];
第二种：使用内置对象 Array对象
var arr1=new Array(5);//定义一个数组，数组的长度是5
arr1[0]=“1”;
第三种：使用内置对象 Array
var arr2=new Array（3，4，5）；定义一个数组，数组里面的元素是3，4，5
*数组里面有一个属性lenght；获取到数组的长度
*数组可以存放不同的数据类型的数据
8.js的函数
**在js里面定义函数（方法）有三种方式
第一种方式：
***使用一个关键字function
***function方法名（参数列表）{
方法体;
返回值可有可无（根据实际需要）;
//定义一个有参数的方法，实现两个数的相加
function add1(a,b){
var sum=a+b;
alert(sum);
}
//调用方法
add1(2+3)’
第二种方式：
***匿名函数
var add=function（参数列表）{
方法体和返回值;
}
第三种方式：（用的少，了解）
***动态函数
***使用到js里卖弄的一个内置对象Function
var add=new Function(“参数列表”,“方法体和返回值”);
9.js的全局变量和局部变量
**全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
-在方法外部使用，在方法内部使用，在另外一个script标签使用
**局部变量：在方法内部定义一个变量，只能在方法内部使用
-如果在方法的外部调用这个变量，提示出错
-SCRIPT5009："nn"未定义
12-js的局部变量.html,行18 字符3
**ie自带了一个调试工具，ie8及其以上的版本，键盘F12，在页面下方出现一个条
10.script标签放在的位置
*建议把script标签放到</body 后面
*如果现在有这样一个要求：
在js里面需要获取到input里面的值，如果把script标签放到head里面会出现问题
html解析式从上到下解析的，script标签放到的是head里面，直接在里面去input里面的值，因为页面还没有解析到input那一行，肯取不到。
11.js的重载
*什么是重载？方法名相同，参数列表不同
-java里面有重载，肯定有
*js是否有重载