一、前期准备工作
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>