文档版本 | 开发工具 | 测试平台 | 工程名字 | 日期 | 作者 | 备注 |
---|---|---|---|---|---|---|
V1.0 | 2016.04.08 | lutianfei | none |
第二章CCS
CSS的简介
- CSS:cascading style sheet :层叠样式表。
做什么用:
- 设置网页的显示效果(设置样式)。
- 可以解决html代码对样式定义的重复,
- 提高了后期样式代码的可维护性,
- 增强了网页的显示效果功能。
- CSS将网页显示的效果和内容分离。(耦合性)
HTML只需要把文本内容封装起来,不用属性,用CSS的代码来控制显示效果。
- 如果开发了多套CSS的代码,都不用修改HTML的代码。
CSS和HTML的结合(重点)
第一种结合方式——在html标签上提供style属性
- 在html的标签上,提供了一个(属性),style=”CSS的代码”
第二种结合方式——在html文件中提供style标签
- 在HTML的文件,提供了一个
标签
<style type="text/css">CSS的代码</style>
- 这个标签放在
<head></head>
的中间 - 注:如果某个div标签已经用第一种方式定义过了,则会按照第一种方式显示,按层叠来理解。
- 这个标签放在
第三种结合方式——引入外部css文件
- 引入CSS的文件,定义一个css文件
- 后缀名
.css
- 格式:
@import url("CSS文件的地址");
- 属性必须要写
<style></style>
内部。大写和小写都没有问题。 - css格式的注释符号:
/* */
- 后缀名
第四种结合方式——引入外部文件,通过link标签
- 写在
<head></head>
中间, 不要放在<style>
中间(经常使用)
rel
:代表当前和引入文件之间的关系:一般为stylesheet
type
:切换到css引擎href
:引入CSS文件的地址
CSS的优先级和规范(重点)
- 一般情况:从上到下,由外到内,优先级是从低到高的。
- 特殊情况下:
标签名选择器
<类选择器
<ID选择器
<style属性
- 规范
- 选择器名称 { 属性名:属性值;属性名:属性值;……}
- 属性 与 属性 之间用 分号 隔开
- 属性 与 属性值 之间用 冒号 连接
- 如果一个属性有多个值的话,那么多个值用 空格 隔开。
CSS的选择器(重点)
- 作用:告诉CSS的代码作用在哪个标签上。
基本选择器
标签名选择器
div{}
span{}
类选择器
:一般给css使用- 在HTML的标签上,提供了属性
class
,定位到div的标签(美工经常使用的方式) - 写法:
.class的名称
(eg: .hehe{CSS的代码}) 设置不同的标签,具有相同的样式
带html div标签情况
不带html标签的情况
- 在HTML的标签上,提供了属性
ID选择器
:一般给js使用
- 在HTML的标签上,提供的属性 设置样式
- 写法:
#id的名称
(eg: #haha{CSS的代码})
- 写法:
- 一般情况下:不同的模块设置不同的ID,若id相同,默认取第一个。
- 在HTML的标签上,提供的属性 设置样式
扩展选择器
关联选择器
:标签可以嵌套,标签与标签之间的关系。
- 写法: 中间用空格隔开 ;例子(
div font{CSS的代码}
)
- 写法: 中间用空格隔开 ;例子(
- 组合选择器:对多个不同的选择器进行相同的样式
- 写法:在多个不同的选择器之间用
,
隔开
- 写法:在多个不同的选择器之间用
- 伪元素选择器: 定义好的一些选择器,用就ok。
- 格式:
标签名:伪元素
。类名 标签名
。类名:伪元素
。都可以。 - 如果使用超链接伪元素选择器:使用顺序: L V H A
L
:link 超链接未点击状态。text-decoration: none;
V
:visited 被访问后的状态。H
:hover 光标移到超链接上的状态(未点击)。A
:active 点击超链接时的状态。
- first-line 段落的第一行文本。
- first-letter 段落中的第一个字母。
- focus 具有焦点的元素。
- 格式:
input:FOCUS {
background-color: gray;
}
/* 未访问 */
a:LINK {
text-decoration: none;
color: blue;
}
/* 访问完成 */
a:VISITED {
color: yellow;
font-size: 20px;
}
/* 悬停 */
a:HOVER {
color: red;
font-size: 25px;
}
/* 点击状态 */
a:ACTIVE {
color: green;
font-size: 35px;
}
CSS的布局(了解)
- float : none | left | right
- none : 默认值。对象不飘浮
- left : 文本流向对象的右边
- right : 文本流向对象的左边
第三章:JAVASCRIPT(重点)
javascript的简介
js是基于对象和事件驱动的脚本语言,作用在客户端(浏览器)上。
js的特点:
- 交互性(信息的动态交互)
- 安全性(不可以访问本地的硬盘)
- 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)
javascript和java完全不同
- js的基于对象(所有的东西在内存中以对象的形式存在),java是面向对象(解决问题的思路)。
- js解析就可以执行,java先编译再执行。
- js是弱类型的语言,java是强类型语言。
JavaScript历史
- Netscape(网景),静态的效果。livescript(javascript的前身)
- java诞生了,升级了,改名(javascript),火了。
- 巨头:自己开发一套(jscript)
- Netscape找了一些公司推出的标准:
SUN
微软
ECMA(欧洲计算机制造协会)
,联合推出现在的标准。 ECMAScript
:标准。基础上扩展。
javascript语言的组成
ECMAScript
标准(js的语法,变量,函数)BOM
(Browser Object Model) 浏览器对象模型DOM
(Document Object Model) 文档对象模型
js和HTML的结合
第一种方法使用script标签
- 语法:
<script type="text/javascript">js的代码</script>
- 标签可以放在HTML文件的任意位置上。
- 语法:
第二种方法引入外部的文件
- 语法:
<script src="引入js文件(相对路径)" >
- 如果script通过src的属性引入了外部的文件,里面的js代码就不会执行了。
<script>
,标签可以放在HTML文件的任意位置上。一般都放在body标签的后面。
- 语法:
javascript的语法
js的基本数据类型和变量定义
- 关键字:被赋予了特殊含义的单词。
- 标示符:用于标识数据和表达式的符号。(和java一样)
- 注释:和java一样。
- 变量:标识内存中一片空间,用于存储数据,数据是可以变化的。
var
声明变量,不管是int还是String等都用此声明。- 5种基本数据类型: Undefined、Null、Boolean、Number 和 String
- 运算符:可以让数据进行运算的符号。
- 语句:对程序的运行流程进行控制的表达式。
- 函数:用于对功能代码进行封装,便于提高复用性。
- 数组:对数据进行存储,便于操作。
- 对象:封装体,既可以封装数据,又可以封装函数。
5种基本数据类型
- String : 字符串类型
- js中双引号和单引号都代表的是字符串
- Number: 数字类型
- 不区分整数和小数
- Boolean: 布尔类型
- Null:空,给引用赋值的
Undefined:未定义(声明变量,没有赋值)
typeof() 判断当前变量是什么类型的数据
js的运算符
- 算术运算符
- 0或者null是false,非0或者非null是true,默认用1表示。
- 不区分整数和小数
var num = 3710;
alert(num/1000*1000); // 3710,不区分整数和小数
var str = "12";
//alert(str + 1 ); // 121,加法作为**连接符**
alert(str - 1); // 11,减法作为运算符
alert("abc" - 1); // NaN
alert(true + 1); // 2
alert(0 + 1); // 1
if(num == 15){
alert("abc");
}else{
alert("ab2c");
}
赋值运算符
- 和java是一样的
比较运算符
==
比较值是否相同===
比较值和类型是否相同
var num3 = 15; // 数字
var str3 = "15"; // 字符串
// alert(num3 == str3); // true
// alert(num3 === str3); // false
逻辑运算符
- 和java中一样
三元运算符
条件?值1:值2
js语句
- 和java基本相同
向页面输出文本的内容: 文本的内容可以是HTML的代码
document.write("文本内容");
编写99乘法表
<script type="text/javascript">
document.write("<table border='1' width='50%' cellpadding='10'>");
// 99乘法表
for(var i=1;i<=9;i++){
document.write("<tr>");
// 循环列
for(var j=1;j<=i;j++){
document.write("<td>"+j+"*"+i+"="+i*j+"</td>");
}
// 换行的操作
// document.write("<br/>");
document.write("</tr>");
}
document.write("</table>");
</script>
js的数组
- java :
String [] str = {};
- js:
- var arr = [12,34,55];
- var arr = new Array(5); 声明数组,长度是5
- var arr = new Array(2,3,4); 声明数组,元素是2 3 4
- 数组的属性
- 长度:length
- 数组的长度是可变的。
var arr = [12,34,44];
// alert(arr.length);
document.write(arr+"<br/>");
arr[3] = "abc";
arr[4] = 99;
document.write(arr); //直接打印数组内容
js的方法
- java:
public String 方法名称(参数列表(int num,String str)){
方法体;
return null;
}
- js中,通过关键字
function
声明方法。
- Javascript中不存在重载形式。
- 在函数的内部,有一个数组,用来装传过来的参数的arguments
- 如果调用方法时,忘记了写(),则会把函数对象的引用传给接收的变量,而打印出函数体的内容。
function 方法名称(参数列表 (num,str)){
方法体;
return;
}
* 参数列表:不能使用var关键字
* 返回值:可写可不写的,如果有写返回值,如果没有,返回值可以省略不写。
// var result = add2(10,5);
// alert(result); //打印15
// var result2 = add2(10,10,7,8);
// alert(result2);//打印20
function getSum(){
return 100;
}
var sum = getSum;
//alert(sum);//打印getSum方法的全部代码
var sum2 = sum();
alert(sum2);//打印100