Day 2
一、 css简介（是什么、做什么）
1. css：层叠样式表
2. 层叠：一层一层的
3. 样式表：很多的属性和属性值
4. 好处：
使页面显示效果更加好
将页面内容和显示样式进行分离，提高显示功能
二、 css和html的四种结合方式（怎么做）
css不是独立存在的，必须结合html才能使用
1. 在每一个html标签上面都有一个属性 ：style，通过这个属性可以把css和html结合在一起
<divstyle="background-color:red;color:blue;">haha</div>
2. 使用html的一个标签实现：<style></style>（通过写入css语句直接实现）
注意：该标签要在头标签head里面使用
格式：
<styletype="text/css">
css代码
</style>
<styletype="text/css">
div{
background-color:gray;
color:red;
}
</style>
3. 使用html的一个标签实现：<style></style>（通过引入css文件间接实现）
格式：
html文件
<styletype="text/css">
@import url(css文件的路径);
</style>
css文件
div{
background-color:gray;
color:red;
}
好处：将页面内容html文件和显示样式css文件进行分离
缺点：在某些浏览器下不起作用，所以一般情况下不使用
4. 使用头标签link（通过引入css文件间接实现）
<linkrel="stylesheet" type="text/css" href="css文件路径"/>
一般使用这种方法
三、 css优先级（后加载的优先级高）
四、 css的基本选择器（对哪个标签里面的数据进行操作）
a． 标签选择器：使用标签名作为选择器的名称
div{
background-color:gray;
color:red;
}
选择器名称：div（标签名）
b． 类选择器
每一个html标签都有一个属性：class
c． id选择器
每一个html标签都有一个属性：id
五、 css基本选择器的优先级
style>id选择器>class选择器>标签选择器
六、 css的扩展选择器
a． 关联选择器
需求：<div><p>haha</p></div>设置div标签里面的p标签的样式，即嵌套标签里面的样式
b． 组合选择器
需求：<div> haha </div>
<p> hehe <p>
把div和p标签设置成相同的样式，即把不同的标签设置成相同的样式
c． 伪类元素选择器
css里面提供了一些定义好的样式，可以直接使用
比如超链接的状态（利用伪类元素选择器对超链接的不同状态进行不同样式的操作）：
原始状态 悬停状态 点击状态（瞬间） 点击后状态
:link :hover :active :visited
七、 css的盒子模型
在进行布局前，把数据封装到一块一块区域内（通常把数据放到div中），这个区域的专业术语就是盒子
1. 边框 上下左右
属性：统一设置、分别设置
border:border-width(粗细)||border-style(样式：实线solid、虚线dashed)||border-color(颜色)
border-top border-bottom border-left border-right
2. 内边距 上下左右
属性：统一设置、分别设置
padding:length
padding-top padding-bottom padding-left padding-right
3. 外边距 上下左右
属性：统一设置、分别设置
margin:auto|length
margin-top margin-bottom margin-left margin-right
注意：一个竖线|：表示一个值（要么取前者要么取后者），
两个竖线||：表示多个值
八、 css布局的漂浮属性（了解，一般不用）
属性：float（注意：这里的float不是数据类型）
属性值：float:none|left|right
none:默认值，对象不漂浮
left:文本 流向 对象的右边
right:文本 流向 对象的左边
九、 css布局的定位属性（可以把div放到页面中的任何一个位置）
属性：position
属性值：position:static|absolute|relative
static：默认值
absolute：将对象从文档流中拖出，可以使用top、bottom、left、right等属性对该盒子进行绝对定位
relative：对象不可层叠，即不把对象从文档流中拖出，所有的对象都在文档流中，但可以使用top、bottom、left、right等属性对该盒子在正常文档流中进行偏移位置
十、 图文混排案例
十一、 图像签名案例
（需要源码可以联系本人）
js部分
一、 JavaScript的简介
js是 基于对象和事件驱动的脚本语言，主要应用在客户端
1. 基于对象
JAVA面向对象，使用对象首先要创建对象（new一个对象）
Js提供好了很多对象，可以直接拿过来使用，不需要创建对象
2. 事件驱动
html：静态效果
js：动态效果
3. 客户端
专门指浏览器，js是通过浏览器直接运行，观察结果的
4. Js的特点
交互性：信息的动态交互
安全性：js不能访问本地磁盘的文件
跨平台性：java里面的跨平台性是通过虚拟机来实现，只要有支持js的浏览器都可以运行
5. Js和java的区别
注意：这是两种完全不同的语言，开发的公司不一样
a． java是面向对象，js是基于对象
b． js是弱类型语言，java是强类型语言
c． java需要先编译成字节码文件，再执行；js只需解析就可以执行
6. js的组成（三部分）
a． ECMAScript
--ECMA：欧洲计算机协会
--由ECMA组织制定的js的语法、语句
b． BOM（browser object model）浏览器对象模型
--对浏览器的地址栏、关闭、屏幕等对象进行操作
c． DOM（document object model）文档对象模型
二、 Js和html的结合方式（两种）
Js和css一样，不是独立存在的，必须结合html才能使用
1. 使用html的一个标签实现：<script></script>（通过写入js语句直接实现
<script type="text/javascript">js代码; </script>
2. 使用html的一个标签实现：<script></script>（通过引入js文件间接实现）
格式：<scripttype="text/javascript" src=js文件的路径>
</script>
注意：如果使用引入外部js文件的时候，script标签里面就不要写js代码了，不会执行。
三、 js的原始类型和声明变量
1. java的基本数据类型：byte short int long float double char boolean
2. js的原始类型
string：字符串类型
number：数字类型
boolean：布尔类型（true和false）
null：获取对象的引用，null表示对象引用为空，所有对象的引用也是object
undefined：定义一个变量，没有赋值，则该变量的类型为undefined
3. 声明变量：都使用关键字var
string：var str= "abc";
number：var m =123;
boolean：var flag= true;
null：var data = newData();
undefined：var aa;
4. 查看变量类型：使用关键字typeof
typeof(变量名);
四、 js语句
1. java中的语句
--if判断语句
--switch语句
--循环语句 for while do……while
2. js中的语句（和java一样）
a． if判断语句
b． switch语句（和java一样）
c． 循环语句
while
for（和java一样），但是注意定义变量时使用var，不要写成java的int
五、js的运算符
1.js里面不区别整数和小数
2.字符串类型的相加和相减操作
相加：做字符串连接操作
相减：做的是减法运算
3.boolean类型的相加和相减操作
如果设置成true，相当于这个值是1；
如果设置成false，相当于这个值是0.
4.==和===的区别
==比较的只是值；===比较的是值和类型
5. 直接向页面输出的语句（可以把内容显示在页面上）
document.write("需要输出的语句")
可以输出变量、固定值和html代码
六、实现99乘法表（输出到页面上）
注意：
--document.write里面是双引号，如果设置标签的属性需要使用单引号
--document.write可以输出变量，还可以输出html代码
七、js的数组
1.定义数组（三种）
a．var arr = [1,2,"abc",true]; //可以包含不同类型的值
b．使用内置对象Array对象（一个参数）
vararr = new Array(5); //定义一个长度为5的数组
c．使用内置对象Array对象（多个参数）
vararr = new Array(1,2,3);//定义一个数组[1,2,3]
2.数组有属性：length 获取数组长度
arr.length
3. 数组长度是可变的
4. 数组可以存放不同数据类型的数据
八、js的函数
1.定义函数（三种）
注意：函数的参数列表里面，不需要写var，直接写参数名称
a．使用关键字：function
b．匿名函数
c．使用js里面的内置对象Function（了解，不常用）
九、js的全局变量和局部变量
1.全局变量：在script标签里面定义一个变量，这个变量在页面中的js部分都可以使用
--在方法外部使用，在方法内部使用，在另外一个script标签使用
2.局部变量：在方法内部定义一个变量，只能在方法内部使用
十、script放的位置
建议把script标签放到</body>后面
如果有这样一个需求：在js里面需要获取body标签里面的input的值，如果把script标签放到head里面，会出现问题。因为html解析是从上到下解析的，script标签放到的是head里面，直接在里面取input里面的值，页面还有解析到input那一行，肯定取不到。
附上本人的联系方式，欢迎各位前来交流探讨！