前端 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 网页布局

　　　　(1)超链接

　　　　href 超链接的地址

　　　　target: _self 默认在当前中打开链接地址

　　　　　　　_blank 在空白的页面打开链接地址

　　　　(2)标签内部跳转

　　　　锚点:默认有点击行为.我们可以Javascript:void(0);阻止a标签的默认点击行为.

　　p标签

　　　　只能放文本,图片,表单元素,不能放其他的元素.

　　img

　　　　src;:链接的图片资源

　　　　alt:图片资源加载失败.显示的文本

　　ul: unordered list 无序列表,ul下的子元素只能是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() 滚动

一.html标签特征:

二. p标签的嵌套多注意!

三.html中标签的分类:

相关推荐