一、网页布局
网页布局一般分为：网页头部、网页内容部分、网页尾部
html5新增的语义化标签：语义化标签可以让页面的结构更清晰，主要是给搜索引擎去使用。一般低版本浏览器不支持，目前应用最多的是在移动端。
header、nav、articel、section、sidebar、footer，这些都可以当做div来使用。
（以下代码是一个简单布局，就是配色有点丑）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>..</title>
<link rel="stylesheet" type="text/css" href="./mi.css">
</head>
<body>
<!-- 头部开始 -->
<div class="header">
<div class="header-top">
<div class="center header-top-content"></div>
</div>
<div class="center nav"></div>
</div>
<!-- 头部结束 -->
<!-- 主体部分开始 -->
<div class="min">
<div class="center banner"></div>
<div class="center banner-item"></div>
</div>
<!-- minend -->
<!-- footer start -->
<div class="footer"></div>
<!-- endfooter -->
</body>
</html>
二、css3圆角和阴影
好玩的小东西
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.item{
width:200px;
height: 200px;
border: 1px solid red;
border-radius: 100px;
/*从左上角开始，顺时针*/
/*border-radius: 10px 30px 50px 70px;*/
/*阴影：
水平便宜位置 垂直偏移位置 模糊范围 扩散程度 阴影颜色*/
box-shadow: 3px 3px 50px 10px gold inset;
/*过度属性*/
transition: all 3s;
}
.item:hover{
border-radius: 0px;
/*旋转*/
transform: rotate(150deg);
/*位移*/
transform: translate(100px,100px);
/*缩放*/
transform: scale(.3);
}
</style>
</head>
<body>
<div class="item"></div>
</body>
</html>
（其实也就是一个圆）
三、JavaScript
1、JavaScript简介
JavaScript是一个客户端脚本语言，是运行在客户端，由浏览器内核来去解析。
BOM：浏览器对象模型
DOM：文档对象模型
ECMAScript：JS规范
2、JavaScript特点：
弱类型语言、解释型语言、基于对象、安全性高
3、JavaScript的三种引入方式
行内式（行间事件）：不建议使用，安全性能低
内嵌式：将代码写在script标签之间
外链式：将代码写在.js文件中，通过<script src=’’>调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引入方式</title>
</head>
<body>
<!-- 行间事件 -->
<!-- alert 弹窗 -->
<button onclick="alert('哈哈哈')">点我试一试</button>
<a href="JavaScript:alert('好的')">来吧</a>
<a href="JavaScript:;" onclick="alert('等你')">马上到</a>
<!-- 嵌入式
通过script标签将js代码嵌入到html文档
-->
<script type="text/javascript">
alert('ok');
</script>
<!-- 外链式
通过script标签的src属性引入外部的js文件
如果使用script引入了外部的js文件，那么此标签的js代码将不会再执行。
-->
<script src="./1.js">
// 没用了
alert('执行了');
</script>
<!-- 常用js的输出方式 -->
<script type="text/javascript">
// alert('将信息以弹窗的形式输出，会阻塞程序的执行')
// console.log('将信息输出到浏览器的控制台');
document.write('将信息输出到网页当中');
</script>
</body>
</html>
4、JavaScript的输出方式
（1）alert(‘将信息以弹窗的形式输出，会阻塞程序的执行’);
（2）console.log(‘将信息输出到浏览器的控制台’);
（3）document.write(‘将信息输出到网页当中’);
5、JavaScript的变量
变量命名规范：
（1）由数字、字母、下划线组成
（2）不能以数字开头
（3）尽量要有意义
（4）不能使用关键字
（5）严格区分大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
</head>
<body>
<script type="text/javascript">
var a = 1;
console.log(a);
var b = 1,c = 2;
console.log(b,c);
d = '我在这里等你'
console.log(d);
/*
每一行语句的结束 使用;结尾
*/
// 单行注释
</script>
</body>
</html>
6、JavaScript的基本数据类型
（1）数值类型：数字、小数、NaN
（2）字符串：用引号引起来的都是字符串
（3）布尔类型：true、false
（4）对象类型：var obj={key:val, key:val}
数组：var arr=[1, 2, 3]
（5）函数类型：function 函数名(形参){代码段}
（6）未定义：undefined
检测数据类型的方法typeof()：
检测一个数据是否是由指定的系统实例构造而成instanceof
注意：基本数据类型必须使用new，实例化出来的结果才能检测成功
var num1 = new Number(123);
console.log(num1 instanceof Number);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
<script type="text/javascript">
// 数值类型 number
var num1 = 1;
var num2 = 1.2;
//监测数据类型
var res = typeof(num1);
console.log(res);
//字符串 string
var str1 = '123';
var str2 = '1223';
var str3 = '我是你"小仙女"';
//布尔值 boolean
var bool = true;
console.log(typeof(bool));
//对象类型 object
var obj = {
name:'嘿嘿',
age:18,
say:function(){
alert('哈哈哈哈');
}
}
console.log(obj, typeof(obj));
var arr=['大乔', '小乔', '貂蝉'];
console.log(obj,typeof(obj));
console.log(arr,typeof(arr));
console.log(null,typeof(null));
//函数类型 function
var func = function(){
console.log('我是函数类型');
}
console.log(func,typeof(func));
//未定义类型 undefined
var v = undefined;
var x;
console.log(v, typeof(v));
console.log(x);
// instanceof 检测是否是指定的类，来实例出来的对象
// 基本数据类型必须使用new，实例化出来的结果才能检测成功
console.log(arr instanceof Array);
console.log(num1 instanceof Number);
</script>
</body>
</html>
7、数据类型转换
强制数据类型转换，是人为的
数值类型的强制转换 Number()：
将字符串类型转换成数值类型
Number()只能转纯数字表示的字符串，否则直接返回NaN
parseInt() 整型，从前往后读，一直取到非数值表示的字符为止，如果第一字符就是非数字表示的字符，直接返回NaN
parseFloat() 小数型，和parseInt()类似，只不过会检测第一个小数点。
隐式数据类型转化，是程序自发的，程序人员无法干扰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//将字符串转换成数值
//Number 只要字符串中有一个非数字的字符，就返回NaN，不包含小数点,只能有一个小数点
var str1 = '123'; //123
var str1 = '123abc'; //NaN
var str1 = '123.1'; //123.1
var str1 = '123.1.1'; //NaN
var str1 = 'a123'; //NaN
// var res = Number(str1);
// console.log(res,typeof(res));
// parseInt()
// 从前往后读，从第一个数字取到非数字为止。如果第一个字符是非数字表示的字符，直接返回NaN，
// parseFloat() 和parseInt()类似，只不过会检测第一个小数点
// console.log(parseInt(str1), typeof(parseInt(str1)));
//转换成布尔类型为false,0、0.0、NaN、''
// Boolean()
var num1 = 0;
var num1 = NaN; //false
var num1 = ''; //false
var num1 = '0'; //true
var num1 = ' '; //true
//对象类型
// var num1 = {}; //true
// var num1 = null;//false
//函数类型
// var num1=function(){}//true
//未定义类型
// var num1 = undefined;//false
console.log(Boolean(num1));
</script>
</body>
</html>
8、常用运算符
算数运算 +、-、、/、%、++、–
字符串运算 +
赋值运算 =、+=、-=、=、%=
比较运算 >、<、>=、<=、==、= 、===(全等)、!==(全不等)
逻辑运算 &&、||、!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>算数运算符</title>
</head>
<body>
<script type="text/javascript">
// ++ --
var a = 1;
a += 1; // a = a+1
a++; // 自增1
++a;
a--; // a = a-1
--a;
console.log(a);
//字符串运算：如果+两边有一个是字符串，就做字符串拼接
var res = 1 +'我是啦啦啦';
var res = 'abc' + 123;
var res = 1+1+'a';// 2a
var res = 1+'a'+1;//1a1
var res = 'a'+1+2;//a12
var res = 'a'+(1+2); //a3
console.log(res);
//===全等，不仅比较值，还要比较类型是否相同
console.log('1'==1);//true
// 自动将字符串'1'强制转换成Number类型进行比较
console.log('1'===1);//false
console.log(NaN == NaN);//false
console.log(null == null); //true
console.log(true&&true);
</script>
</body>
</html>
9、流程控制
单分支
双分支
多分支
巢状分支（其实就是嵌套）
10、循环结构
while
for in
for
do while
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//双分支
// var age = 18;
// if(age>=18){
// alert('ok,你成年了');
// }else{
// alert('未成年');
// }
//多分支，== ，会自动进行转换
var age = 5;
if (age<12){
console.log('少年');
}else if(age<18){
console.log('青年');
}else if(age<40){
console.log('壮年');
}else{
console.log('老年');
}
//switch case 当判断成功后，后面的条件不再判断，直接执行
// 条件判断使用的是===，条件类型都要一致
var num = 1;
switch(num){
case 1:
console.log('婴儿');
break;
case 18:
console.log('成年');
break;
case 28:
console.log('结婚');
break;
case 90:
console.log('老年');
break;
default:
console.log('哈哈');
}
//循环
var num = 0;
while(num<=10){
console.log(num);
num++;
}
//for in 一般用来遍历对象
//当遍历对象时，临时变量拿到的是对象的属性
//如果遍历的是数组，临时变量拿到的是索引值
var obj = {name: '澳龙', age:16, gender:'男'}
for(i in obj){
console.log(i);//键
console.log(obj[i]);//值
}
var arr = ['鲁智深','小龙女','郭靖'];
for(i in arr){
console.log(i);//索引值
console.log(arr[i]);//值
}
//单纯的for循环
var arr = ['叶问', '李小龙', '王二狗'];
console.lo(arr.length);//检测长度
for(var i=0; i<arr.length;i++){
if(i == 0){
// continue;
break;
}
console.log(arr[i]);
}
// do while 不论循环条件是否成立，先执行一次，然后判断是否循环
var a = 0;
do{
console.log(a);
a++;
}while(a<10)
</script>
</body>
</html>
九九乘法表
实现九九乘法表 并显示在页面中
思路：
1.先完成九九乘法表的逻辑功能
2.如何将数据写到页面
（1）将数据拼接到表格中，定义一个字符串<table>
（2）在行的循环里顶一个字符串<tr>
（3）在列循环中 一个列就是一个td 拼接字符<td>num1*num2=res</td>到tr中
（4）在列循环执行结束 拼接</tr>
（5）在列循环的最后，将拼接好的tr拼接到<table>中
（6）在列循环结束，给table拼接闭合</table>
（7）拼接好的table写入到页面：document.write(table);
各行换色：
先编写两个css，在列循环添加判断 判断行是否是偶数行，如果是偶数行 给<tr class=“red”>，否则，<tr class=“yellow”>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pink{
background:pink;
}
.gold{
background:gold;
}
</style>
</head>
<body>
<script type="text/javascript">
var table='<table border="1">';
//九九乘法表
for(var r=1;r<=9;r++){
if(r%2==0){
var tr = '<tr class="pink">';
}else{
var tr = '<tr class="gold">';
}
for(var c=1;c<=r;c++){
tr +='<td>'+c+'*'+r+'='+r*c+'</td>';
// console.log(c+'*'+r+'='+r*c);
}
tr+='</tr>';
//拼接到table
table+=tr;
}
//把table的闭合标签拼接
var res = table+'</table>';
document.write(res);
</script>
</body>
</html>
扫一扫
9965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
