一、页面布局
网页头部
网页内容部分
网页尾部
HTML5新增的语义化标签
语义化标签可以让页面的结构更清晰，主要是给搜索引擎去使用的。
一般低版本浏览器不支持，目前应用最多的是在移动端。
header
nav
airtical
section
sidebar
footer
<!DOCTYPE html>
<html>
<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="main">
<div class="center banner"></div>
<div class="center banner-item"></div>
</div>
<!-- 主题部分结束 -->
<!-- footer start -->
<div class="footer"></div>
<!-- footer end -->
</body>
</html>对应的mi.css文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九九乘法表</title>
<style type="text/css">
.o{
background-color: #fc9;
}
.j{
background-color: #cc9;
}
</style>
</head>
<body>
<script type="text/javascript">
var table='<table width="800px" style="line-height:30px;text-align:center;">';
for(var i=1;i<=9;i++){
if(i%2==0){
tr='<tr class="o">';
}else{
tr='<tr class="j">';
}
for(var j=1;j<=i;j++){
tr+='<td>'+j+'*'+i+'='+i*j+'</td>';
}
tr+='</tr>';
table+=tr;
}
table+='</table>';
document.write(table);
</script>
</body>
</html>二、CSS的圆角和阴影
圆角：border-radius
当只有一个值时，四个角的圆角角度相同。
当有四个值时，顺序为左上 右上 右下 左下。
还有两个或三个值的情况，与margin和padding类似。
当值为50%时，为圆。
阴影：box-shadow
四个参数的意义：水平偏移位置 垂直偏移位置 模糊程度 扩散范围。
第五个参数可加颜色。
第六个参数可加insert，代表内阴影。
过渡：transition
第一个参数为想要有渐变效果的元素名，第二个为过渡过程的时间。
转换：transform
rotate(150deg)--旋转，参数为旋转角度。
translate(100px,100px)--位移，参数为x，y位移远度。
scale(0.5)--放大缩小，参数<1时，缩小；>1时，放大。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3圆角和阴影</title>
<style type="text/css">
.item{
width: 200px;
height: 200px;
border: 1px solid red;
/*圆角*/
/*左上 右上 右下 左下*/
/*border-radius: 10px 30px 50px 70px;*/
border-radius: 100px;
/*阴影*/
/*水平偏移位置 垂直偏移位置 模糊程度 扩散范围 颜色 内阴影（可加可不加）*/
box-shadow: 3px 3px 10px 10px gold inset;
/*过渡属性*/
transition: all 2s;
}
.item:hover{
border-radius: 0px;
/*转换*/
/*transform: rotate(150deg);*/
/*位移*/
/*transform: translate(100px,100px);*/
/*缩放*/
transform: scale(0.5);
}
</style>
</head>
<body>
<div class="item"></div>
</body>
</html>三、JavaScript
（一）JavaScript简介
JavaScript是一个客户端脚本语言。
是运行在客户端，由浏览器内核去解析的。
BOM：浏览器对象模型
DOM：文档对象模型
ECMAScript：JS规范
（二）JavaScript特点
弱类型语言
解释性语言
基于对象
安全性高（无法做文件操作）
兼容性问题
四、JS的三种引入方式
1.行间事件
在标签中设置事件，写JS代码。
2.嵌入式
通过script标签将js代码嵌入到html文档。
3.外链式
通过script标签的src属性引入外部的js文件。
!!!注意：如果使用外链式引入了外部的js文件，那么该标签内的js代码将不会被执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js引入方式</title>
</head>
<body>
<!--
JS的三种引入方式
-->
<!-- 行间事件 -->
<button onclick="alert('哈哈哈')">点我</button>
<a href="JavaScript:alert('来啦')">来吧</a>
<a href="JavaScript:;" onclick="alert('跑快点')">马上</a>
<!--
嵌入式
-->
<script type="text/javascript">
alert('ok')
</script>
<!--
外链式
-->
<script src="./3.js">
alert('我是啦啦啦')
</script>
</body>
</htm>五、js的三种常用输出方式
弹窗输出：alert
控制台输出，常用于调试程序：console.log
网页输出：document.write
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js输出方式</title>
</head>
<body>
<!--
常用的js输出方式
-->
<script>
// alert('将信息以弹窗的形式输出，会阻塞程序的执行')
// console.log('将信息输出到浏览器的控制台，常用')
document.write('将信息输出到网页中')
</script>
</body>
</htm>六、js中的变量
使用关键字var声明变量。
变量命名规范：
有数字字母下划线组成；
不能以数字开头；
尽量要有意义；
不能使用关键字；
严格区分大小写。
<!DOCTYPE html>
<html>
<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>七、js的六种数据类型
数值类型：数字
字符串：所用引号引起来的都是字符串
布尔类型：true/false
对象类型：var obj={key:val,key:val}
数组：var arr=[1,2,3] --有的资料中将他归于对象类型，也有的把他单拿出来作为第七种类型
函数类型：function func(参数){函数体}
未定义类型：undefined
检测数据类型的方法 typeof()
检测一个数据是否是由指定的系统实例构造而成的 instanceof()
!!!注意：基本数据类型必须是使用new实例化出来的结果，才能检测成功
//true
var num1=new Number(123);
console.log(num1 instanceof Number);
//false
var num2=123;
console.log(num2 instanceof Number);八、数据类型强制转换
强制类型转换
强制数据类型转换，是人为的。
将字符串类型转换成数字类型
Number()
只要字符串中有一个非数字的字符，就返回NaN。
小数点可以，但只能有一个。
parseInt()
从前往后读，如果第一个字符是非数字，直接返回NaN。
如果第一个字符是数字，一直取到第一个非数字为止。
parseFloat()，与parseInt()类似
只不过会检测第一个小数点。
转换为布尔类型为false的值：0 0.0 NaN '' null undefined
隐式类型转换
隐式数据类型转换，是程序自发的，编程人员无法干预。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数值类型强制装换</title>
</head>
<body>
<script type="text/javascript">
//将字符串 强制转换为 数值
//Number()
var str1='123';
var str1='123abc';
var str1='123.1';
var str1='123.1.1';
var str1='a123';
console.log(Number(str1),typeof(Number(str1)));
console.log(parseInt(str1),typeof(parseInt(str1)));
console.log(parseFloat(str1),typeof(parseFloat(str1)));
//转换为布尔类型为false
//0 0.0 NaN '' null undefined
//Boolean()
var num1=0;
var num1=0.0;
var num1=NaN;
var num1='';
var num1=null; //其余对象类型都是true
//函数类型都是true
var num1=undefined;
console.log(Boolean(num1));
</script>
</body>
</html>九、常用运算符
算（算术运算）：+ - * / % ++ --
字（字符串运算）：+
赋（赋值运算）：= += -= *= %=
比（比较运算）：< > <= >= == != ===:全等 !==:全不等
逻（逻辑运算）：&& || !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>运算符</title>
</head>
<body>
<script type="text/javascript">
//算数运算
// ++ --
var a=1;
a++; //自增1
++a;
console.log(a);
a--; //自减1
--a;
console.log(a);
//字符串运算
//如果加号两边有一个是字符串的话，就做字符串拼接；若两个都是数字，做算数运算
var res=1+'我是啦啦啦';
var res='abc'+123;
var res=1+1+'a';
var res=1+'a'+1;
var res='a'+1+2;
var res='a'+(1+2);
console.log(res);
//===全等
//不光比较值，还会比较类型
console.log(1=='1'); //true
console.log(1==='1'); //false
//但null和undefined与其他任何数据类型相比较都不相等
console.log(null==undefined) //true
//NaN与任何值都不相等，包括它本身
console.log(NaN==NaN); //false
//逻辑运算
console.log(true&true) //1
console.log(true&&true) //true
</script>
</body>
</html>十、分支和循环
分支结构
单分支：if
双分支：if else
多分支：if else if / switch case
巢状分支（嵌套）--了解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支</title>
</head>
<body>
<script type="text/javascript">
//单双分支
var age=16;
if(age>=18){
alert('你成年啦');
}else{
alert('你还小');
}
//多分支
//判断相等时，用的==
var age='40';
if(age<12){
console.log('少年');
}else if(age<18){
console.log('青年');
}else if(age<=40){
console.log('壮年');
}else{
console.log('老年');
}
//switch case
//判断成功后，后面的条件不再判断，直接执行
//条件判断时使用的是全等===
var num=200;
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('你是神仙吗');
}
</script>
</body>
</html>循环结构
while
for in
for
do while
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环</title>
</head>
<body>
<script type="text/javascript">
//循环
//while
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=['叶问','李小龙','王二狗'];
for(var i=0;i<arr.length;i++){
if(i==0){
// 用法与python中相同
continue;
// break;
}
console.log(arr[i]);
}
//do while
//无论循环条件是否成立，先执行一次，然后再判断是否循环
var a=0;
do{
console.log(a);
a++;
}while(a<=10);
</script>
</body>
</html>十一、关于js的练习
九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九九乘法表</title>
<style type="text/css">
.o{
background-color: #fc9;
}
.j{
background-color: #cc9;
}
</style>
</head>
<body>
<script type="text/javascript">
var table='<table width="800px" style="line-height:30px;text-align:center;">';
for(var i=1;i<=9;i++){
if(i%2==0){
tr='<tr class="o">';
}else{
tr='<tr class="j">';
}
for(var j=1;j<=i;j++){
tr+='<td>'+j+'*'+i+'='+i*j+'</td>';
}
tr+='</tr>';
table+=tr;
}
table+='</table>';
document.write(table);
</script>
</body>
</html>数据绑定案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书P39</title>
<style type="text/css">
.top{
background: #966;
color:white;
}
</style>
</head>
<body>
<script type="text/javascript">
var info=[
{name:'张三',age:'18',sex:'男',city:'北京'},
{name:'李四',age:'25',sex:'女',city:'天津'},
{name:'王五',age:'22',sex:'男',city:'廊坊'},
{name:'赵六',age:'30',sex:'女',city:'上海'}
];
var table='<table border="1" cellspacing="0" width="500" style="line-height:25px;"><tr class="top"><th>姓名</th><th>年龄</th><th>性别</th><th>城市</th></tr>';
for(var i=0;i<info.length;i++){
tr='<tr>';
for(var c in info[i]){
tr+='<td>'+info[i][c]+'</td>';
}
tr+='</tr>'
table+=tr;
}
table+='</table>'
document.write(table);
</script>
</body>
</html>
6304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
