html
一.html标签特征:
1.空白折叠现象
2.对空格和换行不敏感
3.标签要严格封闭
二. p标签的嵌套多注意!
p中只能存放字体,图片,表单控件,不能放盒子标签
三.html中标签的分类:
1.行内标签
(1)在一行内显示:span,strong,em,i,del,a
(2)不能设置宽高,默认的宽和高,是内容填充
1.1 行内块标签
(1) 在一行内显示
(2) 可以设置宽高
2.块级标签 div,p,h1-h6(页面中只有一个h1)
(1) 独占一行
(2) 可以设置宽高,如果不设置宽和高,默认的宽是父亲的100%,高是内容的高度.
3.div + span 网页布局
a:
(1)超链接
href 超链接的地址
target: _self 默认 在当前中打开链接地址
_blank 在空白的页面打开链接地址
(2)标签内部跳转
锚点:默认有点击行为.我们可以Javascript:void(0);阻止a标签的默认点击行为.
p标签
只能放文本,图片,表单元素,不能放其他的元素.
img
src;:链接的图片资源
alt:图片资源加载失败.显示的文本
ul: unordered list 无序列表,ul下的子元素只能是li.
li
type= 'circle' 圆形
type= 'square'方块
ol:ordered list
只能是li
dl:定义列表
dt:定义标题
dd:定义描述
sublime软件的使用:
ctrl + shift + p 搜package control
table border= '1' style= 'border-collapse:coll:'
tr 表格行
td 表格列
form
HTTP协议
action:提交的服务器网址
method:get(默认)|post(应用:登录注册,上传文件),enctype='',想要提交文件到服务器,一定是post请求.
页面中的a,img,link,默认是get请求
input
type:
text:文本输入框,普通的文本
password:密码输入框,密码本
file:文件按钮,提交文件的时候一定要用post,一定要给form标签添加 Enctype='multipart/form-data'
submit:提交按钮
button:普通按钮
radio:单选框
checkbox:多选框
name:提交到服务器端的key **当发送post请求时,那么会与input输入内容组成键值对,发送到请求体中
value:显示的文本内容,与服务器端的value
placeholder: 文本代替
lable
for:是下面的某个表单控件的id属性进行关联
BS 交互
1.form表单默认与服务器进行交互
2.ajax 技术
css
(1) css 层叠样式表
作用:修饰网页结构
(2)css的三种引入方式
--行内样式
注意:行内样式的是优先级是最高的
--内接样式
--外接样式 @import url()/link1,link2
(3)基本选择器
id选择器:选择的是特性 唯一的,不能重复
标签选择器:选中的是页面中共性的标签,不管标签嵌套多少层
类选择器:选中的也是页面中共性的标签,类名也有多个
通配符选择器:通常是对页面进行重置样式表
(4)高级选择器
--后代选择器
子孙
div ul li p{
color:red}
--子代选择器
只能是亲儿子
div>p{ }
--组合选择器
多个选择器组合到一起共同设置样式
div,p,a,li,span{
font-size: 14px;
}
--交集选择器
div.active{ }
--属性选择器
input[type='text']
--伪类选择器:LoVe HAte
a:link{} 没有被访问的
a:visited{} 访问过的
a:hover{} 鼠标悬停的时候
a:active{} 摁住的时候
--伪元素选择器
p:before 在...前面添加内容,一定要结合content
p:after 在...的后面添加内容,与后面的布局有很大关系
(5)css的继承性和层叠性
继承性:color,text-xxx,font-xxx,line-xxx的属性是可以继承下来,盒模型的属性是不可以继承下来的.
a标签有特殊情况,设置a标签的字体颜色,一定要选中a,不要使用继承性.
层叠性:覆盖
(1)行内>id>class>标签***
(2)数数 数id class 标签
(3)先选中标签,权重一样,以后面的设置为主
(4)继承来的属性,它的权重为0,与选中的标签没有可比性
(5)如果都是继承来的属性,保证就近原则
(6)都是继承来的属性,选择的标签一样近,再去数权重.
(6)盒模型
属性:
内容的高度
height:内容的高度
padding:内边距,内容到边框的距离
padding: 10px; 上下左右
padding: 20px 30px; 上下,左右
padding: 20px 30px 40px; 上 左右 下
padding: 20px 30px 40px 50px ;顺时针 上右下左
border:边框
三要素:线的宽度,线性的样式,颜色
border:1px solid red;
border-left:1px soild red;
margin:外边距,另一边到另一边的距离
前提必须是标准文档流下
margin的水平不会出现任何问题
垂直方向上 margin会出现'塌陷问题'
盒模型的计算:
总结:如果保证盒模型的大小不变,加padding,就一定要减width或height;
前提是:在标准文档流.
padding:父子之间调整位置.
margin:兄弟之间调整位置.
(7)布局的方式,浮动
float:none
left:左浮动
right:右浮动
浮动能实现元素并排
盒子一浮动,就脱离了标准文档流,不占位置.
作用好处:使元素实现并排(布局)
就在页面上占位置
浮动的特性
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素由'字围'效果
4.收缩的效果
前提是标准文档流,margin的垂直方向会出现塌陷问题.
如果盒子居中:margin:0 auto;如果盒子浮动了,margin:0 auto;就不起任何作用
需求:让浮动的盒子居中
给浮动盒子,加一个父盒子,设置宽度跟浮动盒子一样大小,并且overflow:hidden;设置该盒子magin: 0 auto;
.box{ width: 400px; height: 300px; background-color: red; } .main{ width: 100px; overflow: hidden; margin: 0 auto; } .child{ width: 100px; height: 100px; background-color: green; margin: 0 auto; float: left; }
文本水平居中:text-align:center;
文本垂直居中:行高=盒子的高度
盒子如果浮动了,那么垂直方向上不会出现塌陷问题.
css中三种方式让盒子'脱标':
1.浮动fioat
2.绝对定位
3.固定定位
浮动带来的问题:
子盒子浮动,不在页面占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面出现紊乱.
清除浮动:
1.给父盒子设置固定高度(后期不好维护)
2.clear:both;
给浮动元素的最后面,加一个空的块级标签(标准文档流的块级标签)
给当前这个标签设置一个clearfix类名,设置该标签属性clear:both
存在问题:代码冗余
3.伪元素清除法
.clearfix:after{
content:' ';
display:block;
height: 0;
visibility: hidden;
clear: both;
}
4.overflow:hidden
要浮动一起浮动,有浮动清楚浮动
(8)display 显示
前提必须是标准文档流下
属性:
block 块级标签
--独占一行
--可以设置宽高,如果不设置宽,默认是父盒子宽度的100%
inline 行内标签
--在一行内显示
--不可以设置宽高,根据内容来显示宽高
inline-block 行内快
--在一行内显示
--可以设置宽高
none 不显示 隐藏 不在文档上占位置
visibility: hidden; 隐藏 在文档上占位置
(9)常用css的属性
中心对齐--text-align:center
两端对齐--text-align:justify
首行缩进--text-indent:2em
字体大小--font-size:14px
修饰文本--text-decoration:none;没有线 underline;有下划线
line-height:
单行文本垂直居中:line-height = height
多行文本居中:
行高的高度不能小于字体的大小,不然上下字之间会紧挨在一起.
第一步,一个宽300*300的盒子,看盒子中一共显示了几行文字,假如是5行,再看一下行高,如果行高是line-height:30px;那么就知道行高*5=150px
第二布,让(盒子的高度-150px)/2 = 75;那么设置盒子的padding-top:75px.
(10)backgrou-image 精灵图技术
(11)定位:
默认:position:static;静态定位
position:relative;相对定位
absolute;绝对定位
fixed;固定定位
--relative
如果仅仅设置标准文档流的盒子为相对定位,那么跟普通盒子没有什么区别,不脱标.
参考点:相对原来的位置.形影分离
作用:1.层级提高,做压盖(不建议)
2.布局方案'子绝父相'
--absolute
1.脱标:不占位置
2.层级提高
参考点:单个盒子
如果以top描述,是以页面的左上角为参考点(跟浏览器的左上角区分)
如果以bottom描述,是以浏览器的左下角为参考点
父子盒子之间:如果父辈盒子设置相对定位,子盒子设置绝对定位,以父辈盒子的0,0为参考点
如何让一个绝对定位的盒子居中
left:50%
margin-left: -宽度的一半
--posotion: fixed;固定定位
(1) 脱标
参考点:浏览器的左上角
作用:固定导航栏,返回顶部,小广告
(12)z-index的使用
1.z-index值表示谁压着谁,数值大的压盖住数值小的
2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0,如果大家都没有z-index值,或者z-index值都一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素.
4.从父现象:父亲怂了,儿子再牛逼也没用
Javascript
(1)ECAScript5基础语法
--声明变量 var
--流程控制
if elee if else, while, for, do-while, switch
--运算符
+=, -=, ++, --, =
==: 比较的是值
===: 比较的是值和数据类型
!=, !==, >, <
--数据类型
基本数据类型
string, number, boolean, null, undefined
复杂的数据类型
(1)字面量方式创建
var arr = [ ];
(2)new Array()
Array
(3)Object
json
字面量方式创建
var person = { name:'liu', age:18, fav:function(){ alert(this.name) } }; person.name; person.fav();
(4) Function
普通函数
function add(x,y){ return x+y; } add(1,2)
函数对象
var add = function(x,y){ return x+y; } add(3,4)
arguments
实参 它是一个伪数组,它里面有索引:length,目的
(2)DOM Document(文档) Object(对象) Model(模型)
对象:
属性和方法
属性:获取值和赋值
方法:赋值方法和调用方法
--DOM树
document
html
head body
title meta link... div.header div.content div.footer
--DOM的获取
1.获取document对象
console.log(document);
2.获取html对象
document.documentElement
3.获取body对象
document.body
提供三种方法来获取body中的DOM
div#box.box
通过id获取
document.getElementById('box');
通过类获取
var olis = document.getElementsByClassName('box'); for(var i= 0;i<olis.length;i++){ olis[i].onclick = function(){ alert(this.innerText); } }
通过标签获取
var oDivs = document.getElementsByTagName('div')
--DOM三步走
1.获取事件源
2.事件绑定 onclick onmouseover | onmouseout:穿过父元素或子元素,就会调用
onmouseenter | onmouseleave :只穿过父元素
3.事件驱动(业务逻辑)
--对标签样式属性的操作
oDiv.onclick = function(){ //点语法 set方法 get方法 readonly只读 console.log(this.style); this.style = null; this.style.width = '200px'; this.style.marginLeft = '40px'; }
--对标签属性的操作
getAttribute, setAttribute, id, class, src, alt, href, title, type, name
--对值的操作
<div></div>单闭合标签
innerText 只设置文本
innerHTML 设置文本和渲染标签
input
value 事件
--对DOM对象的操作(增删改查)
--控制元素显示隐藏
应用:网页中频繁性的切换建议使用这个
1.控制style.display属性显示隐藏
2.控制className对元素显示隐藏
问题:初始化的时候有渲染
应用:网页中少量的切换建议使用
3.对元素的创建和销毁(生命周期:出生,入死)动态创建
(1)创建document.creatElement
(2)父.appendChild(子) 父.insertBefore(''要插入的节点'',''参考的子节点'')
(3)销毁 父.removeChild(子)
--选项卡
(1)
var olis = document.getElementsByTagName('li'); var oPs = document.getElementsByTagName('p'); var i; for(i = 0; i< olis.length; i++){ olis[i].index = i; olis[i].onclick = function(){ for(var j = 0; j< olis.length; j++){ olis[j].className = ''; oPs[j].className = '' } this.className = 'active'; oPs[this.index].className = 'active'; } }
(2)
let olis = document.getElementsByTagName('li');
let oPs = document.getElementsByTagName('p');
for(let i = 0; i<olis.length; i++){
olis[i].onclick = function () {
for(let j=0; j<olis.length; j++){
olis[j].className = '';
oPs[j].className = '';
}
this.className = 'active';
oPs[i].className = 'active'
}
}
--定时器
(1)一次性定时器 可以做异步 var timer= setTimeout(fn,1000); clearTimeout()
(2)循环周期定时器 setInterval(fn,1000); clearInterval()
可以做动画,js跟python一样,都有垃圾回收机制,但是定时器对象,垃圾回收收不回.
--js面向对象
var person = new Object(); person.name = 'liu'; person.age = 18; person.fav = function(){ alert(this.name); } person.fav();
(1)字面量方式创建对象
(2)工厂模式创建
(3)自定义构造函数
(4)原型对象创建对象
(3) BOM对象
本地信息对象
window.location href,hash,reload(),search...
jquery
jquery的概念:js query:封装了大量的js,封装js的入口函数,兼容性问题,DOM操作,事件,ajax
一.jQuery和js的转换
js→jQuery:$(js对象)
jQuery→js:jQuery对象[0]
二.选择器
作用:获取事件源
筛选的方法:siblings() 除它之外,其他的兄弟元素
parent() 亲爹元素
children() 子代元素
find() 后代元素
eq() 放索引,选择 $('li:eq(0)')
三.动画
1.普通的动画
show(200,fn)
hide(200,fn)
toggle()
2.淡入淡出
fadeIn()/fadeOut()/fadeToggle()
3.滑入滑出
slideDown()/slideUp()/slideToggle()
4.自定义动画
animate(队列的json,1000,fn)
5.延迟动画
delay(时间)
使用动画的规则:先stop() 再开动画
$('a').mouseenter(function(){
$(div).delay(1000).show(2000);
})
四.事件对象
每一个事件的 回调函数,都会默认有一个事件对象.
event.target 触发目标的对象
event.type 事件类型
event.keyCode 键码
五.事件冒泡 event.stopPropagation()
阻止默认的事件 event.preventDefault();
return false;
六.事件代理 自己完成不了的事情,交给别人去做
原理:运行冒泡的机制
现有的p以及未来添加的p都能做事件操作
$('div').on('click','p',fn)
七.事件
click 单机事件 / dblclick 双击事件 / mouseenter / mouseleave / mouseout / mouseover / mousedown / mouseup /
change()失焦 / select()选中
form表单的 submit
addEventListener('click',fn)
八.合成事件
mouseenter / mouseleave → hover(fn1,fn2)
九.位置信息
width() / height() innerWidth() 不包含border / outerWidth() 包含border
offset().top 对象 {top:xxx,left:ooo}
top: 获取的是盒子到页面顶部的距离
scrollTop() / scrollLeft() 滚动