一、前期准备
1、安装chrom浏览器
2、安装sublime开发软件
- 介绍&实施
1.介绍html
2、介绍Sublime Text的具体使用，新建一个文件夹，直接把文件夹拉入到sublime text3；在sublime里面 右键-新建文件，给新文件命名，带html文件后缀，ctrl+s 保存文件；在创建的新html文件中，输入 html 按tab键可以补齐代码
- Html
①结构
<!DOCTYPE html>
<html>
<!-- 头部 -->
<head>
<meta charset="utf-8">
<title></title>
<!-- 样式 -->
<style type="text/css"></style>
</head>
<!-- 身体 -->
<body>
<!-- 行为 -->
<script type="text/javascript"></script>
</body>
</html>
②html标签
1、元素分类
块级元、行内块级元素、行内元素
具体包括：文档元素、字体样式元素、布局元素、框架元素、多媒体元素、 表单元素、列表元素等
2、标签需要符合开闭原则
- CSS基础样式属性
①文本样式属性
1、text-indent ( 缩进文本 ，属性值可以为负数，也可以为百分比)
2、text-align ( 文本对齐方式 )
3、letter-spacing ( 字母或者字符的间距 )
4、word-spacing ( 单词的间距 )
5、text-transform ( 文本转换 )
6、text-decoration ( 文本装饰 )
7、white-space ( 文本空白 )
8、color ( 文本颜色 )
9、background-color ( 背景颜色 )
10、line-height ( 行高，多数浏览器默认的行高是20px)
②字体样式属性
1、font-family ( 字体系列 )
2、font-style ( 字体风格 )
3、font-weight ( 字体加粗 )
4、font-size ( 字体大小 )
5、font ( 字体简写方式 )
( font-style font-weight font-size/line-height font-family )
③背景样式属性
④链接样式属性
⑤列表样式属性
⑥表格样式属性
⑦轮廓样式属性
- JavaScript
①介绍JavaScript概念
②基础语法
1.语句
2、变量
3、常量
4、数值类型
5、运算符
6、注释
作业：
- 通过js获取输入框中的vlaue值
<html>
<head>
<script language="javascript">
function print(){
var a=document.getElementById("a").value;
alert(a);
}
</script>
</head>
<body>
<form>
<input type="text" name="name" id="a" />
<input type="button" name="button" value="获取" onclick="print()" />
</form>
</body>
</html>
2.点击某个元素，更改该元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div=document.getElementsByTagName('div')[0];
div.style.width="100px";
div.style.height="100px";
div.style.backgroundColor="red";
var count=0;
div.onclick=function(){
count++;
if(count%2==1){
this.style.backgroundColor="green";
}
else{
this.style.backgroundColor="red";
}
}
</script>
</body>
</html>
3.假如 变量a = 1，b = 2，请把a, b的值互换，(要求不允许声明第三个变量)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var a = 2,b = 8;
a = b - a ;
b = b - a ;
a = a + b ;
console.log(a+" "+b);
</script>
</body>
</html>
4.乘法口诀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
for(var i = 1 ;i < 10 ; i ++){
for(var j = i ; j < 10 ; j++){
var sum = i * j;
document.write(i+"×"+j+"="+sum+" "+" ");
if(j==9){
document.write("<br/>");
}
}
}
</script>
</body>
</html>