一、前期准备工作
1、安装chrom浏览器
2、安装sublime开发软件
3、介绍html：html是超文本标记语言
二、软件使用方法-sublime
1、新建一个文件夹，直接把文件夹拉入到sublime text3
2、在sublime里面 右键-新建文件，给新文件命名，带html文件后缀，ctrl+s 保存文件
3、在创建的新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、具体分类
文档元素：<html>、<head>、<body>、<title>、<meta>、<link>、 <style>、<script>
文章元素：<h1> - <h6>、<p></p>、<br>、<span> (span 是一个没有任何样式的段落标签) 、<pre>(pre 是一个有带格式的p标签,可以保留缩进、换行（用于展示代码）)
字体样式元素：<i>、<b>、<strong>
布局元素：<div> (div是没有任何样式的块级元素 用来包裹内容和分割内容)
框架元素：<iframe>(iframe是一个框架元素，用来显示其他内容)、<frameset>、<frame> => HTML5 不再支持 <frameset> 和 <frame>
链接元素：<a>
多媒体元素：<img>
表单元素：<from>、<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<label>(label 本身不会有任何的视觉效果，但是优化了鼠标用户的用户体验)、<fieldset>表单元素半包围边框、<legend>标题
列表元素：<ul>、<ol>、<li>、<dl>、<dt>、<dd>
表格元素：<table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>、<caption> 特殊元素：<!DOCTYPE>、<!-- -->、<hr>
3、标签需要符合开闭原则
例如：开标签-<div></div>
闭标签-<br/>
五、css介绍
1、CSS定义：层叠样式表( Cascading Style Sheet )
2、CSS作用：美化页面
3、CSS引入方式：内联样式 ( 样式位于元素内部 )
4、内部样式 ( 样式位于head元素的style元素中 )
5、外部样式 ( 独立的CSS文件 )
说明：一般情况下外部样式优先级比较高
6、外部样式的优点：（1）解决内容和表现分离 （2）样式重用 （3）合并多个样式表 （4）提高工作效率 （5）方便维护
六、css基础样式属性
1、文本样式属性
text-indent ( 缩进文本 ，属性值可以为负数，也可以为百分比)
text-align ( 文本对齐方式 ) 例：字体左右居中text-align: center;
letter-spacing ( 字母或者字符的间距 )
word-spacing ( 单词的间距 )
text-transform ( 文本转换 )
text-decoration ( 文本装饰 )
white-space ( 文本空白 )
color ( 文本颜色 )
background-color ( 背景颜色 )
line-height ( 行高，多数浏览器默认的行高是20px) 例：行高等于高度时，字体上下居中line-height:字体行高
2、字体样式属性
font-family ( 字体系列 )
font-style ( 字体风格 )
font-weight ( 字体加粗 )
font-size ( 字体大小 )
font ( 字体简写方式 )：( font-style font-weight font-size/line-height font-family )
3、背景样式属性
background-color ( 背景颜色 )
backgroud-image ( 背景图片 )
backgroud-position ( 背景偏移位置 )
backgroud-repeat ( 背景平铺 )
backgroud ( backgroud-image backgroud-position backgroud-repeat )
说明：当同时存在背景色和背景图片时，最终显示背景图片
4、链接样式属性
a:link ( 未被访问的链接 )
a:visited ( 已被访问的链接 )
a:hover ( 鼠标悬浮 )
a:active ( 链接被点击时 )
a的书写样式顺序：LVHA
5、列表样式属性
list-style-image ( 图片标志 )
list-style-type ( 标志类型 )
list-style-position ( 标志位置 )
简写：list-style ：( list-style-image list-style-type list-style-position )
6、表格样式属性
border-collapse ( 折叠表格边框为单一边框 )
border-spacing ( 分隔单元格的距离 )
table-layout ( 表格布局 )
automatic ( 默认，列宽由单元格内容设定 )
fixed ( 列宽由表格宽度和列宽度设定 )
说明：固定表格算法快，但是不灵活，而自动表格算法比较慢
7、轮廓样式属性
outline-color ( 轮廓颜色 )
outline-style ( 轮廓样式 )
outline-width ( 轮廓宽度 )
outline ( outline-width outline-style outline-color)
补充说明：px: 像素 em: 相对父元素字体大小 默认：16px = 1em rem: 相对于html元素的字体大小
七、选择器
1、元素选择器 ：通配符选择器 ( * ) 类型选择器 ( E ) id选择器 ( E#id ) 类选择器 ( E.class )
2、关系选择器 ：后代选择器 ( E F ) 子代选择器 ( E>F ) 相邻选择器 ( E+F ) 兄弟选择器 ( E~F )
3、属性选择器
4、伪类选择器
5、伪对象选择器：E:before E:after E:selection ( 设置对象被选择时的样式 )
补充：
1、margin: 外边距
说明：margin:0;
上下左右全部为0;
margin:10px 20px;
上下为10 左右为20
margin：10px 20px 30px
上为10px 左右为20px 下为30px
margin简写属性：margin：10px 20px 30px 40px;
上 右 下 左
2、padding:内边距
3、圆角属性- border-radius
4、浮动属性 ：右浮动-float:right; 左浮动-float:left;/5
5、定位（position）：绝对定位（absolute），相对对定位（relative：相对于自身的静态位置定位）
left（right/top/bottom）相对于原先的静态位置的left走，偏移了多少距离
八、JavaScript介绍
1、我理解JavaScript为一种“动作”和处理事件的语言。
2、JavaScript的基本语法：语句 变量 常量 数据类型 运算符 注释
九、js基本语法的介绍
1、语句
JavaScript程序的执行单位为行，也就是一行一行地执行。一般情况下，每一行就是一个语句。
说明：表达式没有分号，语句有分号
2、变量
（1）定义：存储一个数据的空间的容器，主要作用是保存数据。
（2）声明：var 变量名1，变量名2；
（）赋值：var 变量名=数值；
（4）控制台输出：console.log（变量名）
（5）页面输出：document.write（变量名）
补充：变量名=数值；//显示undefined
3、常量
（1）定义：常量就是一旦声明就无法改变的量
（2）声明：const 变量名=数值
（3）说明：常量不能和变量同时声明相同的标识
4、数值类型
（1）定义： JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。
数值（number）：整数和小数（比如1和3.14）
字符串（string）：字符组成的文本（比如”Hello World”）
布尔值（boolean）：true（真）和false（假）两个特定值
undefined：表示“未定义”或不存在，即此处目前没有任何值
null：表示空缺，即此处应该有一个值，但目前为空
对象（object）：各种值组成的集合 -->分成三个子类型 狭义的对象（object） 数组（array） 函数（function）
（2）判断数据类型
typeof操作符可以返回一个值的数据类型
①原始类型 数值、字符串、布尔值分别返回number、string、boolean。
②函数 函数返回function。
③undefined undefined返回undefined（undefined 一般用来表示一个变量是否已经被定义）
④其他情况都返回object（null的类型也是object，null 一般用来释放内存资源 ）
补充说明：null == undefined ->true null === undefined ->false
5、运算符
加法运算符 ( + ) 算数运算符 ( +、-、*、/、% )
余数运算符 ( x%y )
自增和自减运算符 ( ++x )、(x++)、( --x )、(x--)
数值运算符，负数值运算符 ( +x )、( -x ) 赋值运算符 ( = )、( += )、( -= )、( *= )、( /= )、( %= )
比较运算符 (>、<、>=、<=、!=、!==、==、===、)
比较运算符的算法 ( true > false )
字符串的比较 ( “a” > “A” )
严格相等运算符 ( === )
相等运算符 ( == )
布尔运算符：逻辑非 ( ! ) 逻辑且 ( && ) 逻辑或 ( || ) 三目条件运算符( ? : )
6、注释
js注释方式：双斜杠注释：// hello world
斜杠星星斜杠注释：/*hello world*/
十、事件及DOM
1、事件的分类
window.onload //页面加载完成事件
onclick //点击事件
onmouseover //鼠标悬浮时事件
onmouseout //鼠标离开时事件
onmousemove //鼠标移动时事件
onchange //用户改变域的内容时事件
onfocus //获取焦点时事件
onblur //失去焦点时事件
onkeydown //键盘某个键被按下时事件
onkeypress //键盘某个键被按下或者按住时事件
ondblclick //双击事件
onresize //浏览器窗口大小被调整时事件
onscroll //滚动条滚动时事件
2、获取节点
getElementById() 返回带有指定 ID 的元素
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表
getElementsByName() 返回包含指定name的属性值的元素列表
querySelector(“#id”) “.p” 、”h1,h2” 方法返回匹配指定 CSS 选择器元素的第一个子元素
querySelectorAll() 返回所有匹配元素
3、节点
parentNode->父节点(一切dom属性)
childNodes->子节点
firstChild->第一个节点
lastChild->最后一个节点
nextSibling->下一个兄弟节点
previousSibling->前一个兄弟节点
4、基于元素节点的操作
parentElement->父元素节点
children->元素子节点
firstElementChild->第一个元素节点
lastElementChild->最后一个元素节点
nextElementSibling->上一个兄弟元素节点
5、节点类型
元素节点-1
属性节点-2
文本节点-3
注释节点-8
document节点-9
6、节点的四个属性
nodeName->元素标签名（大写形式表示，只读）
nodeValue->只有文本节点和注释节点有
nodeType->节点类型（数字的形式，只读）
attribute->Element节点属性的集合
Node.hasChildNodes()->true/flase
7、dom继承树 dom基本操作(中)
document.createElement()->创建元素节点
document.createTextNode()->创建文本节点
createComment()->创建注释节点
插
parentNode.appendChild()->添加元素==push
parentNode.insertBefore(a,b)->insert a before b
删
removeChild(i)->剪切
child.remove()->销毁
替换
parentNode..raplaceChild(new,origin);
Element节点的一些属性
div.innerHTML->取，覆盖
div.innerHTML+=""->追加
div.innerText->文本内容
Element节点的一些方法
ele.setAttribute(‘属性名’,‘属性值’)->设置行间属性
ele.getAttribute(‘属性名’)->取属性值
练习：1、假如 变量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 ; //a=6,b=8
b = b - a ; //a=6,b=2
a = a + b ; //a=8,b=2
console.log(a+" "+b);
</script>
</body>
</html>
2、乘法口诀
<!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>
3、点击某个元素，更改该元素的样式
<!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>
4、通过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> 
5765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
