前段技术加html+css+JS
html:负责页面的结构(语义) 网页制作语言(不是编程语言)
css:负责页面的美化(样式) js:增加交互或特效
HTML基本知识点:
HTML含义:html超文本标记语言,通过标签进行语义化描述。“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素 。“标记”的主要含义不是从外观角度考虑,而是从语义的角度。
1.<h1~h6> 主要给文字赋予标题的含义 容器级标签
2.<p> 段落标签 文本级标签
3.超链接a <a href="链接资源的地址" target=_blank"></a> " target=_blank"在新窗口打开
4.<img src="图片路径" title=“” alt=”“>
5.表单:收集用户输入的信息
*文本框:input type="text"
*密码框:input type="password"
laber 标签
<laber for="txt">文字</laber>
<input type="text"/> //让label标签的文字和当前表单产生关联
radio 单选 checkbox多选
图片按钮:<input type="image" src="">
6.<caption>定义网页标题
7.<maequee>跑马灯标签
8.<div>块级标签 容量级标签
9.<span>行内标签
10.有序列表:
<ol>
<li></li>
<li></li>
</ol>
无序列表:
<ul>
<li></li>
<li></li>
</ul>
11.表格 <table> <tr> <td>;
CSS基本知识点:
1.width:宽度; height:高度;
2.padding:外边距; margin:外边距; border:边框;
3.solid 实现 dashed 虚线 dotted 圆点虚线 double 双实线 ridge 具有3D立体效果的边框
4.padding属性的写法:
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
5.做网页时,需清楚默认样式 *{padding:0; margin:0;}
6.border三要素:细线、颜色、线型(形状) 透明度:transparent;
7.!imporant 给最高权重;
8.text-align:center; 文本居中;
9.display:inline; 块元素转为行内元素 display:block; 行内元素转为块元素;
10.css中三种方式可以让元素脱离标准文档流:浮动、绝对定位、固定定位;
11.clear:both; overflow:hidden;清除浮动
12.list-style-type:none; 清除列表的小圆点;
13.background属性:
background-img:url()设置背景图片;
background-color 背景颜色;
background-size: 放大/缩小倍数,用%表示;
background-position:center top; 图片居中
background-repeat:no-repeat; 图片不平铺;repeat-x; 表示水平方向重复; repeat-y;表示垂直方向重复;
background-attachment 背景是否被固定;
14.<link href="这里是css文件引用路径" type="text/css" rel="stylesheet"/>
15.<style>这里是css样式编辑区域</style>
16.css链接:
a:link 普通的、未被访问的链接;
a:visited 用户已访问的链接;
a:hover 鼠标指针位于链接的上方;
a:active 链接被点击的时刻
a的样式涵盖了:a:link,a:visited的样式;
17.line-height 行高;
18.font属性:能够让字号、字体、行高一起设置;
font-size:字体大小设置;
font-family:字体;
font-weight:bold; 字体加粗;
19.文本装饰:
text-decoration:overline;上划线;
text-decoration:underline; 下划线;
text-decoration:line-through; 删除线;
text-decoration:none;去掉下划线;
19.rgba(0,0,0,0.8);a表示透明度;
20.position:relative;相对定位 用于元素微调;
position:absolute;绝对定位; 更灵活
position:fixed;固定定位;
position:static; 静态定位;
21.border-radius:10px; 圆角 opacity:0.5;透明度;
22.margin:auto; 标准流中;
23.z-index; 表示谁压着谁,数值大的压着数值小的;
24.text-indent: 文字缩进;
25.box-shadow:10px 10px 5px black;边框外阴影;
box-shadow:insit 10px 10px 5px black;边框内阴影;
26.text-shadow: 文字阴影;
27.overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 多余文字的省略;
28.浏览器的兼容:
-webkie- 谷歌兼容 -moz- 火狐兼容 -ms- IE兼容 -o- 欧朋兼容;
29.css3 2D转换transform;
transform:scale(1.2)ratote(360deg);scale 放大倍数 ratote 旋转度数;
transition:all 0.2s ease; 达到渐入渐出的效果;
30.resize:none; 文本域固定;
31.outline:none;边框不变;
32.元素的显示或隐藏:
display:none;隐藏 元素所占空间的释放;
display:block;显示;
visibility:hidden;让多余的内容隐藏;
visibility:visible;显示;
33.vertical-align:middle;垂直居中
34.行内式>id选择器>类>*>继承>默认选项;
Javascript基本知识点:
javascript:基于对象和事件驱动并具有相对安全性的客户端脚本语言;
javascript简介:*用途:制作页面交互效果,如轮播图的切换、tab栏切换、地图、表单。
*脚本语言:嵌入在html中,由浏览器解析执行
js核心内容:基础语法(重点) 变量 表达式 循环
dom(重点)js控制一些html元素
bom(了解)控制浏览器的一些东西
1.js代码引入位置:
<script type = "text/javascript">
//js代码写在这对标签里
alert(“......”);完整写法 window.alert(“消息”);
</script>
2.alert("消息"); 在浏览器中,弹出一个窗口;
3.语法规则:
a. js对换行、空格不敏感;
b. 每句末尾,必加;;
c. 都在英文状态下输入;
4.注释:
a.html的注释<!--...-->;
b.css的注释/*...*/;
c.js的注释 单行注释 //;
多行注释 /*...*/;
5.直接量(常量)
6.变量(未知数)js中用来储存不同数据(以字母开头或者以下划线,以$符开始的变量);
7.typeof判断数据类型,结果是number表示是数值(整数或小数);string是字符串;
8.外链式写法:<script type="text/javascript" src="引入文件”></script>
9.confirm("...");弹窗显示 一般与if...else配合显示;
prompt(“请你输入一个数”)用户输入的信息都是字符串;
document.write("...”)往网页中输入信息,而且参数可以放置;
10.变量值的传递:a=b; 含义:将b的值赋予给左边的变量a,但b不变;
11.程序流程结构:
a.顺序结构:程序从上往下,一句句执行;
b.条件结构:if if-else等;
c.循环结构:while、for、do-while;
12.Math.floor(number) 向下取整;
Math.ceil 向上取整;
Math.round 四舍五入;
13.==不全等于; ===全等于; 布尔值 true false; !=不等于;!==不全等于;&& 并且;
|| 或;!取反;
14.a++与++a都是表达式,表达式是有值的,a++表达式的值用a原来的值,++a表达式的值用a加1后的值;
15.数组定义 var arr = new Array();//通过new来创建;
var arr2 = [ ];
16.javascript的特点:
a.一种解释性执行的脚本语言(也是一种解释性语言);
b.一种基于对象的脚本语言;
c.一种简单弱类型脚本语言;
d.一种相对安全脚本语言;
e.一种跨平台性脚本语言;
17.函数含义:对一段js代码进行封装,便于反复使用,提高代码的复用性;
18.变量的作用域:全局变量和局部变量
全局变量:a.在最外层声明的变量;
b.在函数体内部,但是没有声明var的变量也是全局变量;
局部变量:在函数内部 ,通过var声明的变量(局部变量的有效范围在本身所在的{ }内);
隐式全局变量:在函数内部来用var申明的变量,并在函数处也没有申明的系统默认为全局变量;
19.事件三要素:a.事件源:一般是个名词,表示事件的来源;(开关 发起者 被触发者)
b.具体的事件(行为或动作)单击 双击 鼠标悬停;(打开)
c.事件处理程序:当事件发生,做什么?(灯亮)
20.onmouseover 当鼠标移入; onmouseout 当鼠标移出;
onmousedown 当鼠标按下时; onmouseup 当鼠标按下时;
onfocus 获得焦点; onblur 失去焦点;
onclick 点击 onchange 值改变;
21.js入口函数:
window.οnlοad=function( ){ //窗口加载完执行里面的代码 };
22.js数据类型:字符串、数值型、布尔类型、null、object、undefind;
23.获取表单的值:text.value ;
24.函数参数:a.函数名.length得到形参个数;
b.arguments.length得到实参个数;
变量提升:在函数内部通过var声明的变量,无论这个变量在什么位置定义,都先把声明放在前面,赋值放在定义的位置;
25.找元素:a.通过id的值;
b.通过标签名;
26.定义函数:考虑参数设置arr,接受传来的数组;
27.排他思想:先干掉其他所有,最后剩下自己一个在处理;
28.变量和属性:a.变量:独立,自由自在,在有效范围内大家都可以用;
b.属于某个对象的;对象属性或对象方法();一个对象可以设置或添加属性;
29.数组的常用方法:
a.添加元元素:arr.push();push()方法在数组的末尾添加一个或多个元素,返回的是数组的长度; unshift()从数组的前面放入元素;
b.删除元素:pop()移除最后一个元素; shift()移除第一个元素;
数组的连接concat()该方法用于连接两个或多个数组,不会改变原来的数组,返回的是连接的数组的一个副本;
c.把数组转为字符串:join()作用是将数组各个元素是通过指定的分隔符,进行连接成为一个字符串;
d.把字符串转为数组:split()用于把一个字符串分隔成字符串数组;
30.节点(标签 元素 节点):
元素节点:每一个HTML标签;
文字节点:标签中的文字;
属性节点:标签的属性;
访问节点
getElementById()id访问节点;
getElementByTagName()标签访问节点;
getElementsByClassName()类名 兼容问题;主流浏览器识别,ie6,ie7,ie8不识别;要想任何浏览器都识别这个方法,需要自己封装
*****封装自己的类;
parentNode 父节点
兄弟节点:下一个兄弟 nextSlibling ie6,ie7,ie8识别;nextElementSibling 其他浏览器识别;
兼容处理:one.nextElementSibling||one.nextSil 上一个与下一个兄弟同理;previouSibling previousElementSibling;
子节点(不常用,几乎很少用)
firstChild 第一个孩子; ie7,ie8识别 firstElementChild 正常浏览器识别(空格也算孩子) lastChild 最后一个孩子; lastElementChild;
孩子节点(重点)
childNodes选出全部的孩子 利用nodeType==1 获取元素节点;
children选择所有的孩子,仅仅选择的是元素节点(庶出,推荐使用);
demo节点操作:新建节点、删除节点、克隆节点;
新建节点 creatElement 插入节点appendChid insertBefore子节点添加孩子 getAttribute(属性)获取属性;
31.var time = new Date();
getFullYear() 年;getMouth()月;getDay()星期;getDate()日;getHours()时;getMiutes()分;getSeconds()秒;
32.setInterval 定时器;clearInterval清除定时器;setTimeout定时器执行一次关闭;
33.this指的是事件源或者函数调用者;
34. even 对象;
35.screenX screenY 光标相对于屏幕的x/y的值;
pageX pageY 光标相对于当前页面(网页)的x/y值;
clientX clientY 光标相对于可视区的x/y的值;
36.window.scrollTo(x,y)让窗口滚动到某个位置;
37.joson一种轻量级的数据交换格式,js的一种表现法;
38.事件冒泡:当一个元素的事件被触发,同样的事件会在这个元素的所有祖先元素上触发,这种过程叫事件冒泡;
JQuery基本知识点:
1.基本使用:jquery是js的一个库,把我们开发过程中常见的功能进行了封装,放在一个文件里,这个文件就是库文件;
2.jquery的入口函数:
a.$(document).ready(function( ){ //代码 });
b.$(function( ){ });
c.JQuery(function( ){ });
3.eq( );找元素; odd()序号为基数,对列行数为偶数;even()序号为偶数,对列行数为基数;
$(" ").find(" ");找具体的某一个元素;
4.addClass 添加样式; removeClass 移除元素; hasClass 在样式上来回切换;
5.show()显示 作用:让元素展示出来; hide()隐藏 作用:让元素隐藏起来;
6.slideUp()向上滑动;slideDown()向下滑动;slideToggle()向上,向下切换;
7.自定义动画:所有能够执行动画的属性必须只有一个数字类型的值;
停止动画:stop();
8.fadeIn ()淡入;fadeOut()淡出;fadeToggle()淡入淡出切换;
9.append ()添加元素;clone()复制元素;html()创建元素;remove()清除元素;
10.attr()获取属性;removeAttr移除属性;
checked、selected、disabled要使用prop()方法;
11.值和内容:
val()获取内容方法 作用:设置或返回表单字段的值;例如:input,select,textarea的值;
text()方法 设置或获取匹配元素的文本内容;
12.scrollTop()作用:获取或设置元素垂直滚动的位置,有参数是设置,无参数时获取;
13.each方法:一般针对不同的元素设置 不同的操作;
14.简单事件:——bind方法——delegate——on;
15.unbind()对通过bind方式绑定的事件进行解绑,解绑指定元素的某个事件;
16.undelegatete()对通过delegate方式进行解绑——产生事件冒泡(进行解绑是对父级元素进行解绑);
17.trigger 让某个元素的事件触发;triggerHandler 触发事件响应方法;
18.target属性 表示真正触发事件的元素;
19.keydown键盘按下;
20.siblings()获得匹配集合中每个元素的同胞,通过选择器筛选是可选的(其他的兄弟,不包括自己);