0%

目录

  1. 介绍:介绍 Array 数组对象的说明、定义方式以及属性。

  2. 实例方法:介绍 Array 对象的实例方法:concat、every、filter、forEach、indexOf、join、lastIndexOf、map、pop、push、reverse、shift、slice、sort、splice、toString、tounshift等。

  3. 静态方法:介绍 Array 对象的静态方法:Array.isArray()。

  4. 实际操作:对 Array 进行示例操作:索引、for遍历、浅度复制、深度复制等操作。

1. 介绍

1.1 说明

  数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。JavaScript数组是无类型:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型。 --《JavaScript权威指南(第六版)》

1.2 定义方式

var names = new Array(“张三”, “李四”, “王五”);
//或者
var names = [“张三”, “李四”, “王五”];

1.3 属性

length:表示数组内的元素长度。

2. 实例方法

常用方法:

1) unshift() :在数组头部插入元素

2) shift() :移除并返回数组的第一个元素

3) push() :在数组尾部插入元素

4) pop() :移除并返回数组的最后一个元素

2.1 concat() :把元素衔接到数组中。不会修改原先的array,返回新的数组

参数:

①value1,value2.....valueN :任意多个值

返回值:

{Array} 一个新的数组,包含原先的Array和新加入的元素。

示例:

var demoArray = ['a', 'b', 'c'];
var demoArray2 = demoArray.concat('e');
console.log(demoArray); // => demoArray:['a','b','c']  原数组不发生变更
console.log(demoArray2); // => ['a','b','c','e']

2.2 every() :依次遍历元素,判断每个元素是否都为true

参数:

function(value,index,self){} :每个元素都会使用此函数判断是否为true,当判断到一个为false时,立即结束遍历。

value :数组遍历的元素

index :元素序号

self :Array本身

返回值:

{Boolean} :只有每个元素都为true才返回true;只要一个为false,就返回false。

示例:

var demoArray = [1, 2, 3];
var rs = demoArray.every(function (value, index, self) {
return value > 0;
});
console.log(rs); // => true

2.3 filter() :依次遍历元素,返回包含符合条件元素的新的数组

参数:

function(value,index,self){} :每个元素依次调用此函数,返回包含符合条件元素的新的数组。

value :数组遍历的元素

index :元素序号

self :Array本身

返回值:

{Array} 一个包含符合条件元素的新的数组

示例:

var demoArray = [1, 2, 3];
var rs = demoArray.filter(function (value, index, self) {
return value > 0;
});
console.log(rs); // => [1, 2, 3]

2.4 forEach() :依次遍历元素,执行指定的函数;无返回值

参数:

function(value,index,self){} :每个元素依次调用此函数

value :数组遍历的元素

index :元素序号

self :Array本身

返回值:无

示例:

var demoArray = [1, 2, 3];
demoArray.forEach(function (value, index, self) {
console.log(value); // => 依次输出:1  2  3
});

2.5 indexOf() :在数组中查找匹配元素。若不存在匹配的元素时,就返回-1。查找的时候使用”===”运算符,所以要区分1和’1’

参数:

①value :要在数组中查找的值。

②start :开始查找的序号位置,如果省略,则为0.

返回值:

{Int} :返回数组中第一个匹配value的序号,若不存在,返回-1

示例:

['a', 'b', 'c'].indexOf('a'); // =>0
['a', 'b', 'c'].indexOf('a', 1); // =>-1
['a', 'b', 'c'].indexOf('d'); // =>-1
[1, 2, 3].indexOf('1'); // => -1 :采用的'==='匹配方式

2.6 join() :将数组中所有元素通过一个分隔符拼接为一个字符串

参数:

①sparator {String}:各元素之间的分隔符,如果省略,默认以因为英文逗号','分隔。

返回值:

{String} :各元素以sparator为分隔符,拼接而成的一个字符串。

示例:

['a', 'b', 'c'].join(); // => 'a,b,c'
['a', 'b', 'c'].join('-'); // => 'a-b-c'

2.7 lastIndexOf :在数组中反向查找匹配元素。若不存在匹配的元素时,就返回-1。查找的时候使用”===”运算符,所以要区分1和’1’

参数:

①value :要在数组中查找的值。

②start :开始查找的序号位置,如果省略,则从最后一个元素开始查找。

返回值:

{Int} :从右到左开始查找数组中第一个匹配value的序号,若不存在,返回-1

示例:

['a', 'b', 'c'].lastIndexOf('a'); // => 0
['a', 'b', 'c'].lastIndexOf('a', 1); // => 0
['a', 'b', 'c'].lastIndexOf('d'); // => -1
[1, 2, 3].lastIndexOf('1'); // => -1 :采用的'==='匹配方式

2.8 map() :依次遍历并计算每个元素,返回计算好的元素的数组

参数:

①function(value,index,self){} :每个元素依次调用此函数,返回计算好的元素

value :数组遍历的元素

index :元素序号

self :Array本身

返回值:

{Array} 一个包含就算好的元素的新的数组

示例:

[1, 2, 3].map(function (value, index, self) {
return value * 2;
}); // => [2, 4, 6]

2.9 pop() :移除并返回数组的最后一个元素

参数:无

返回值:

{Object} 数组的最后一个元素;若数组为空,返回undefined

示例:

var demoArray = ['a', 'b', 'c'];
demoArray.pop(); // => c
demoArray.pop(); // => b
demoArray.pop(); // => a
demoArray.pop(); // => undefined

2.10 push() :把元素添加到数组尾部

参数:

①value1,value2.....valueN :任意多个值添加到数组尾部

返回值:

{int} 数组新的长度 

示例:

var demoArray = ['a', 'b', 'c'];
demoArray.push('d'); // => 4, demoArray : ['a', 'b', 'c', 'd']
demoArray.push('e', 'f'); // => 6, demoArray :['a', 'b', 'c', 'd', 'e', 'f']
console.log(demoArray); // => ['a', 'b', 'c', 'd', 'e', 'f']

2.11 reverse() :反转数组元素的顺序

参数:无

返回值:无(在原数组内进行元素顺序反转)。

示例:

var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray.reverse();
console.log(demoArray); // => ["e", "d", "c", "b", "a"]

2.12 shift() :移除并返回数组的第一个元素

参数:无

返回值:

{Object} 数组的第一个元素;若数组为空,返回undefined。

示例:

var demoArray = ['a', 'b', 'c'];
demoArray.shift(); // => a
demoArray.shift(); // => b
demoArray.shift(); // => c
demoArray.shift(); // => undefined

2.13 slice(startIndex,endIndex) :返回数组的一部分

参数:

①startIndex :开始处的序号;若为负数,表示从尾部开始计算,-1代表最后一个元素,-2倒数第二个,依此类推。

②endIndex : 结束处的元素后一个序号,没指定就是结尾。截取的元素不包含此处序号的元素,结尾为此处序号的前一个元素。

返回值:

{Array} 一个新的数组,包含从startIndex到endIndex前一个元素的所有元素。

示例:

[1, 2, 3, 4, 5, 6].slice(); // => [1, 2, 3, 4, 5, 6]
[1, 2, 3, 4, 5, 6].slice(1); // => [2, 3, 4, 5, 6] :从序号1开始截取
[1, 2, 3, 4, 5, 6].slice(0, 4); // => [1, 2, 3, 4] :截取序号0到序号3(序号4的前一个)的元素
[1, 2, 3, 4, 5, 6].slice(-2); // => [5, 6] :截取后面的2个元素

2.14 sort(opt_orderFunc) :按一定的规则进行排序

参数:

①opt_orderFunc(v1,v2) {Function}:可选的排序规则函数。若省略,将按照元素的字母进行从小到大排序。

v1 :遍历时前面的元素。

v2 :遍历时后面的元素。

排序规则:

比较v1和v2,返回一个数字来表示v1和v2的排序规则:

小于0 :v1小于v2,v1排在v2的前面。

等于0 :v1等于v2,v1排在v2的前面。

大于0 :v1大于v2,v1排在v2的后面。

返回值:无(在原先数组里进行排序操作)。

示例:

[1, 3, 5, 2, 4, 11, 22].sort(); // => [1, 11, 2, 22, 3, 4, 5] :这里都元素都被转换为字符,11的字符在2前
 
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return v1 - v2;
}); // => [1, 2, 3, 4, 5, 11, 22] :从小到大排序
 
[1, 3, 5, 2, 4, 11, 22].sort(function (v1, v2) {
return -(v1 - v2); //取反,就可以转换为 从大到小
}); // => [22, 11, 5, 4, 3, 2, 1]

2.15 splice() :插入、删除数组元素

参数:

①start {int} :开始插入、删除或替换的起始序号。

②deleteCount {int} :要删除元素的个数,从start处开始计算。

③value1,value2 ... valueN {Object} :可选参数,表示要插入的元素,从start处开始插入。若②参不为0,那么先执行删除操作,再执行插入操作。

返回值:

{Array}  返回一个包含删除元素的新的数组。若②参为0,表示没元素删除,返回一个空数组。

示例:

// 1.删除
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 2); // 删除从序号从0开始的2个元素,返回包含删除元素的数组:['a', 'b']
console.log(demoArray2); // => ['a', 'b']
console.log(demoArray); // => ['c', 'd', 'e']
 
// 2.插入
var demoArray = ['a', 'b', 'c', 'd', 'e'];
var demoArray2 = demoArray.splice(0, 0, '1', '2', '3'); // ②参为0,返回空数组
console.log(demoArray2); // => [ ]
console.log(demoArray); // => ['1', '2', '3', 'a', 'b', 'c', 'd', 'e']
 
// 3.先删除再插入
var demoArray = ['a', 'b', 'c', 'd', 'e'];
// 当②参不为0,那么先执行删除操作(删除序号从0开始的4个元素,返回包含被删除元素的数组),再执行插入操作
var demoArray2 = demoArray.splice(0, 4, '1', '2', '3');
console.log(demoArray2); // => ['a', 'b', 'c', 'd'] 
console.log(demoArray); // => ['1', '2', '3', 'e']

2.16 toString() :将数组中所有元素通过一个英文逗号’,’拼接为一个字符串

参数:无

返回值:

{String}  数组中所有元素通过一个英文逗号','拼接为一个字符串,并返回。与调用无参join()方法一样。

示例:

[1, 2, 3, 4, 5].toString(); // => '1,2,3,4,5'
['a', 'b', 'c', 'd', 'e'].toString(); // => 'a,b,c,d,e'

2.17 unshift() :在数组头部插入元素

参数:

①value1,value2.....valueN :任意多个值添加到数组头部

返回值:

{int} 数组新的长度 

示例:

var demoArray = [];
demoArray.unshift('a'); // => demoArray:['a']
demoArray.unshift('b'); // => demoArray:['b', 'a']
demoArray.unshift('c'); // => demoArray:['c', 'b', 'a']
demoArray.unshift('d'); // => demoArray:['d', 'c', 'b', 'a']
demoArray.unshift('e'); // => demoArray:['e', 'd', 'c', 'b', 'a']

3. 静态方法

3.1 Array.isArray() :判断对象是否为数组

参数:

①value {Object}:任意对象

返回值:

{Boolean}  返回判断结果。当为 true时,表示对象为数组;为false时,表示对象不是数组

示例:

Array.isArray([]); // => true
Array.isArray(['a', 'b', 'c']); // => true
Array.isArray('a'); // => false
Array.isArray('[1, 2, 3]'); // => false

4. 实际操作

4.1 索引

说明:

每个元素在数组中有一个位置,以数字表示,称为索引。索引是从0开始计,即第一个元素的索引为0,第二个元素的索引为1,依此类推;

    当获取一个数组不存在的索引时,返回 undefined。

示例:

var demoArray = ['a', 'b', 'c', 'd', 'e'];
demoArray[0]; // => 获取第一个元素:'a'
demoArray[0] = 1;  // 设置第一个元素为 1
console.log(demoArray); // => demoArray:[1, 'b', 'c', 'd', 'e']
console.log(demoArray[9]); // => undefined :当获取的索引不存在时,返回 undefined

4.2 for 语句

说明:

可以通过for语句逐个遍历数组

示例:

var demoArray = ['a', 'b', 'c', 'd', 'e'];
for (var i = 0, length = demoArray.length; i < length; i++) {
console.log(demoArray[i]); // => 逐个输出数组内的元素
}

4.3 浅度复制

说明:

Array类型是一种引用类型;当数组a复制给数组b时,对数组b进行元素修改,数组a也会发生修改。

示例:

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA; // 把数组A 赋值给数组B
demoArrayB[0] = 1; // 对数组B 的元素进行修改
console.log(demoArrayA); // => [1, 'b', 'c', 'd', 'e']:数组A 的元素也发生了变更

4.4 深度复制

说明:

使用concat()方法,返回新的数组;防止浅度复制的情况发生,对数组b进行元素修改操作,数组a不发生变更。

示例:

var demoArrayA = ['a', 'b', 'c', 'd', 'e'];
var demoArrayB = demoArrayA.concat(); // 使用concat()方法,返回新的数组
demoArrayB[0] = 1; // 对数组B 的元素进行修改
console.log(demoArrayA); // => ['a', 'b', 'c', 'd', 'e']:数组A 的元素没变更
console.log(demoArrayB); // => [  1, 'b', 'c', 'd', 'e']:数组B 的元素发生了变更

4.5 判断2个数组是否相等

说明:

Array数组为引用类型,所以哪怕 []===[] 都会返回false,所以可通过数组toString()方法返回的字符串判断是否相等。

示例:

console.log([]===[]); // => false
console.log(['a', 'b'] === ['a', 'b']); // => false
console.log(['a', 'b'].toString() === ['a', 'b'].toString()); // true

Math的描述

Math,中文"数学",此对象提供数学计算的函数与常量
Math对象没有构造函数,是一个固有的对象,这是它与Date,String对象的区别

JavaScript中的Math函数与属性的使用语法

Math.方法名(参数1,参数2,...);
Math.属性;
可以没有参数,比如Math.random()函数,或有多个参数,比如Math.max()函数
Math的相关函数全部为静态函数,应该直接调用

JavaScript中的Math函数与属性按功能分类

1.Math三角函数与属性

Math.sin() -- 返回数字的正弦值
Math.cos() -- 返回数字的余弦值
Math.tan() -- 返回数字的正切值
Math.asin() -- 返回数字的反正弦值
Math.acos() -- 返回数字的反余弦值
Math.atan() -- 返回数字的反正切值
Math.atan2() -- 返回由x轴到点(x,y)的角度(以弧度为单位)
Math.PI 属性 -- 返回圆的周长与其直径的比值(圆周率π),约等于3.1415926

2.Math自然对数相关函数与属性

Math.exp() -- 返回E(自然对数的底数)的x次幂(指数)
Math.log() -- 返回数字的自然对数
Math.E 属性 -- 返回自然对数的底数,E约等于2.718
Math.LN2 属性 -- 返回2的自然对数loge2,约等于0.693
Math.LN10 属性 -- 返回10的自然对数loge2,约等于2.302
Math.LOG2E 属性 -- 返回以2为底的E的对数log2e,约等于1.442
Math.LOG10E 属性 -- 返回以10为底的E的对数log10e,越等于0.434

3.Math四舍五入类函数

Math.abs() -- 返回数字的绝对值
Math.ceil() -- 返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入
Math.floor() -- 返回小于等于数字参数的最大整数,对数字进行下舍入
Math.round() -- 返回数字最接近的整数,四舍五入

4.Math最大最小类函数

Math.max() -- 返回数个数字中较大的值
Math.min() -- 返回数个数字中较小的值

5.Math幂指类函数

Math.pow() -- 返回底数的指定次幂
Math.sqrt() -- 返回数字的平方根
Math.SQRT1_2 属性 -- 返回0.5的平方根,或2的平方根除1,约等于0.707
Math.SQRT2 属性 -- 返回2的平方根,约等于1.414

6.Math随机数函数

Math.random() -- 返回0和1之间的伪随机数

7.Math函数按字母排序

Math.abs() -- 返回数字的绝对值
Math.acos() -- 返回数字的反余弦值
Math.asin() -- 返回数字的反正弦值
Math.atan() -- 返回数字的反正切值
Math.atan2() -- 返回由x轴到点(x,y)的角度(以弧度为单位)
Math.ceil() -- 返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入
Math.cos() -- 返回数字的余弦值
Math.exp() -- 返回E(自然对数的底数)的x次幂(指数)
Math.floor() -- 返回小于等于数字参数的最大整数,对数字进行下舍入
Math.log() -- 返回数字的自然对数
Math.max() -- 返回数个数字中较大的值
Math.min() -- 返回数个数字中较小的值
Math.pow() -- 返回底数的指定次幂
Math.random() -- 返回0和1之间的伪随机数
Math.round() -- 返回数字最接近的整数,四舍五入
Math.sin() -- 返回数字的正弦值
Math.sqrt() -- 返回数字的平方根
Math.tan() -- 返回数字的正切值

8.JavaScript_Math属性按字母排序

Math.E 属性 -- 返回自然对数的底数,E约等于2.718
Math.LN2 属性 -- 返回2的自然对数loge2,约等于0.693
Math.LN10 属性 -- 返回10的自然对数loge2,约等于2.302
Math.LOG2E 属性 -- 返回以2为底的E的对数log2e,约等于1.442
Math.LOG10E 属性 -- 返回以10为底的E的对数log10e,越等于0.434
Math.PI 属性 -- 返回圆的周长与其直径的比值(圆周率π),约等于3.1415926
Math.SQRT1_2 属性 -- 返回0.5的平方根,或2的平方根除1,约等于0.707
Math.SQRT2 属性 -- 返回2的平方根,约等于1.414

一.方法定义

1、call()方法:

语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

参数:
thisObj可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。

说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

2、apply()方法:

语法:apply([thisObj[,argArray]])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

参数:thisObj
可选项。将被用作当前对象的对象。
argArray
可选项。将被传递给该函数的参数数组。

说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

二.call()和apply()相同点

a) 产生的效果或作用完全相同;

b) 至少有一个参数;

c) 第一个参数必须有且是一个对象(Object)。

三.call()和apply()的区别

传递参数的方式。用法上不同,主要是参数不完全同。

四.call()和apply()常用实例

实例一:

function Animal(){    
this.name = "Animal";    
this.showName = function(){    
    alert(this.name);    
}    
}    
 
function Cat(){    
this.name = "Cat";    
}    
  
var animal = new Animal();    
var cat = new Cat();    

//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。    
//输入结果为"Cat"    
animal.showName.call(cat,",");    
//animal.showName.apply(cat,[]);  

注意:call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat。

实例二:实现继承

function Animal(name){      
this.name = name;      
this.showName = function(){      
    alert(this.name);      
}      
}      

 function Cat(name){    
Animal.call(this, name);    
}      

var cat = new Cat("Black Cat");     
cat.showName();  

注意:Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了。

1. 在JavaScript中,arguments对象是比较特别的一个对象,实际上是当前函数的一个内置属性。arguments非常类似Array,但实际上又不是一个Array实例。可以通过如下代码得以证实(当然,实际上,在函数funcArg中,调用arguments是不必要写成funcArg.arguments,直接写arguments即可)。

Array.prototype.testArg = "test";
function funcArg() {
    alert(funcArg.arguments.testArg);  
    alert(funcArg.arguments[0]);
}
alert(new Array().testArg); // result: "test"
funcArg(10);                // result: "undefined"  "10"

2. arguments对象的长度是由实参个数而不是形参个数决定的。形参是函数内部重新开辟内存空间存储的变量,但是其与arguments对象内存空间并不重叠。对于arguments和值都存在的情况下,两者值是同步的,但是针对其中一个无值的情况下,对于此无值的情形值不会得以同步。如下代码可以得以验证。

function f(a, b, c){
    alert(arguments.length);   // result: "2"
       a = 100;
    alert(arguments[0]);       // result: "100"
    arguments[0] = "qqyumidi";
    alert(a);                  // result: "qqyumidi"
    alert(c);                  // result: "undefined"
    c = 2012;
    alert(arguments[2]);       // result: "undefined"
}
f(1, 2);

但是实参和形参之间是相互影响的,比如如果修改了 arguments[0]=”hello”那么a 的值也会变成hello.

3. 由JavaScript中函数的声明和调用特性,可以看出JavaScript中函数是不能重载的。
根据其他语言中重载的依据:”函数返回值不同或形参个数不同”,我们可以得出上述结论:

第一:Javascript函数的声明是没有返回值类型这一说法的;

第二:JavaScript中形参的个数严格意义上来讲只是为了方便在函数中的变量操作,实际上实参已经存储在arguments对象中了。

另外,从JavaScript函数本身深入理解为什么JavaScript中函数是不能重载的:在JavaScript中,函数其实也是对象,函数名是关于函数的引用,或者说函数名本身就是变量。对于如下所示的函数声明与函数表达式,其实含以上是一样的(在不考虑函数声明与函数表达式区别的前提下),非常有利于我们理解JavaScript中函数是不能重载的这一特性。
function f(a){
return a + 10;
}

function f(a){
    return a - 10;
}

// 在不考虑函数声明与函数表达式区别的前提下,其等价于如下

var f = function(a){
       return a + 10;
}

var f = function(a){
       return a - 10;
}

Javascript并没有重载函数的功能,但是Arguments对象能够模拟重载。

function hi(){
if(arguments[0]=="andy"){
     return;
}
alert(arguments[0]);

4、arguments对象中有一个非常有用的属性:callee。arguments.callee返回此arguments对象所在的当前函数引用。在使用函数递归调用时推荐使用arguments.callee代替函数名本身。表示对函数对象本身的引用,也就是所指定的 Function 对象的正文,这有利于实现无名函数的递归或者保证函数的封装性。

function count(a){
       if(a==1){
        return 1;
} 
return a + arguments.callee(--a);
}
var mm = count(10);
alert(mm);

1、新的网页结构

1.1 DOCTYPE声明

HTML4中的DOCTYPE声明格式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5中的DOCTYPE声明格式

<!DOCTYPE html>

1.2 网页字符编码

在HTML4中的格式

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

在HTML5中的格式

<meta charset=UTF-8" />

1.3 header元素

header元素表示页面中的一个内容区块或者整个页面的标题!

HTML5中使用方法:

<header></header>

1.4 nav元素

nav元素表示页面中的导航链接部分。

HTML5中使用方法:

<nav>...</nav>

1.5 article元素

article元素表示页面中的一块玉上下文不相关的的独立内容,比如一篇文章中的文章。

HTML5的使用方法:

<article></article>

1.6 section元素

scection表示页面中的一块内容区块,比如章节的页眉、页脚等等。也可以和Hn(h1、h2..) 等一起 使用,标示出文档的结构!

<section></section>

1.7 aside元素

aside元素表示article元素的内容之外的,和内容相关的辅助信息!

<aside><aside>

1.8 footer元素

footer表示页面或者是页面中的一块区域的页脚,比如存放文件的创建时间、作者、联系方式 等等。

<footer></footer>

2、新增的主体结构元素

2.1、article元素

2.2、section元素

HTML5轮廓工具https://gsnedders.html5.org/outliner/

3、aside元素

4、nav元素

使用场合:

1、传统的导航栏
2、侧边栏导航
3、内页导航
4、翻页操作
5、time元素

Time元素代表24小时中的某个时间或者是日期,表示时间时允许带时差。

它可以定义的格式如下:

<time datetime="2014-9-28">2014年9月28<time>
<time datetime="2014-9-28">9月28<time>
<time datetime="2014-9-28">今天的时间<time>
<time datetime="2014-9-28T22:30">2014年9月28晚上10点<time>
<time datetime="2014-9-28T22:30Z">UTC标准时间2014年9月2晚上10点<time>
<time datetime="2014-9-28T22:30+8:00">中国时间2014年9月28晚上10点<time>

2.6、pubdate属性

Pubdate表示出版或发表时间。

<time datetime="2014-9-28" pubdate=”pubdate”>2014年9月28<time>

3、新增的非主体结构元素

3.1、header元素

   header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的 一个内      容区块的标题,但也可以包含其他的内容,比如在header里面放置logo图片、搜索表单等等。

注意:一个页面内并没有限制header的出现次数,也就是说我们可以在同一页面内,不同的内容区块上分别加上一个header元素。

在HTML5中,一个header元素至少可以包含一个heading元素(h1-h6),也可以包括我们下节课将要学习的hgroup元素,还可以包括其他的元素,在新的W3C HTML5标准,我们还可以把NAV元素包括进去。

3.2、hgroup元素

 hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组, 比如在一个内容区块的标题和他的子标题算是一组。
 通常情况下,文章只有一个主标题时,是不需要hgroup元素的。

3.3、footer元素

footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况下包括与 它相关的区块的注脚信息,比如作者、版权信息等。

注意:footer元素和我们前面所讲的header元素一样,并没有限制他的个数。并且footer元素可以为article元素或者section元素添加footer元素。

3.4、address元素

address元素用来在页面中呈现联系信息,包括文档的作者、邮箱、地址、电话信息等。
address元素还用来展示和文章中的相关的联系人的所有联系信息

4、其他新增和废除元素的认识

4.1、新增的figure元素与figcaption元素

  figure元素是一种元素的组合,带有可选标题。figure元素用来表示页面上一块独立的内容,如果将他从网页上删除不给我们的网页造成影响。
 figcaption元素表示figure元素的标题,它属于figure元素,figcaption元素必须书写在figure元素内部,可以写在figure元素内的其他从属元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素。

4.2、新增的details元素与summary元素

 details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性,当该值为true时,该元素内部的子元素应该被展开显示,当该属性值为false时,其内部的子元素应该被收缩起来不现实。该属性的默认值为false,当页面打开时其内部的子元素应该处于收缩状态。
summary元素从属于details元素,用鼠标点击summary元素中的内容文字时,details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素,浏览器那你会提供默认的文字以供点击,例如“details”
<details>
<summary
    html教程
</summary>
<p
    html是有麦子学院提供!www.maiziedu.com
</p>
</details>

4.3、新增的mark元素

 mark元素表示页面中需要突出显示或高亮显示的,对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素,目的是引起读者的注意。mark元素是对原文内容有补充作用的一个元素,他应该用在一段原文作者不认为重要的,但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。
mark元素最主要的目的就是吸引当前用户的注意。
mark元素除了高亮显示之外,还有一个作用就是在引用原文时,为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。

4.4、新增的progress元素

progress元素代表一个任务的完成进度,这个进度可以使不确定的,表示进度z正在进行,但不清楚这个还有多少工作量没有完成,也可以用0到某个最大数字(比如100)之间的s数字来表示准确的进度情况(比如百分比)
该元素具有两个表示当前任务完成情路昂的属性,value属性表示已经完成了多少工作量,max属性表示总共有多少工作量。工作量的单位是随意的,不指定的。
在设定属性点时候,value属性和max属性只能指定为有效的浮点数,value属性必须大于0,且小于或等于max的属性,max的属性必须大于0。

4.5、新增的meter元素

meter元素表示规定范围内的数量值。

meter元素有6个属性!

value属性:在元素中特地地表示出来的实际值。该属性值默认为0,可以为该属性制定一个浮点小数值。
min属性:指定规定范围时允许实用的最小值,默认0,在设定该属性时所设定的值不能小于0。
max属性:指定规定的范围时允许使用的最大值,如果设定时该属性值小于min的值,那么把min属性的值视为最大值。max属性的默认值1。
low属性:规定范围的下限值,必须小于或者等于high的值。
high属性:规定范围的上限值。如果该属性值小于low属性的值,那么把low属性的值视为high属性的值,同样如果该属性的值大于max属性的值,那么把max属性的值视为high的值。
optimum属性:最佳值属性值必须在min属性值与max属性值之间,可以大于high属性值。

4.6、废除元素

 能使用CSS代替的元素: basefont、big、center、font、s、strike、tt、u
 不在使用frame框架 。对于frameset元素、frame元素与noframes元素,由于frame框架对页面可用性存在负面影响,在html5里面已经不支持frame框架,只支持iframe框架,同时废除以上这三个元素。
只有部分浏览器支持的元素。对于applet元素、bgsound、blink、marquee元素,由于只有部分浏览器支持这些元素,特别是bgsound元素以及marquee元素,只被IE浏览器支持,所以在HTML5里面被废除!而applet元素可以由embed元素或者object元素代替,bgsound元素由audio元素代替,marquee可以使用javascript来代替!

其他被废除的元素

A、废除rb元素,使用ruby元素代替
B、废除acronym元素,使用abbr元素代替
C、废除dir元素,使用ul元素代替
D、废除inindex元素,使用form元素与input元素相结合的方式代替
E、废除listing元素,使用pre元素代替  
F、废除xmp元素,使用code元素代替
G、废除nextid元素,使用GUIDS代替
H、废除plaintext元素,使用“text/plian” MIME类型代替

总体概念

1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元 素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满。

2.大体来说HTML元素各有其自身的布局级别(block元素还是inline元素):

  • 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
  • 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。

3.block元素可以包含block元素和inline元素;但inline元素只能包含inline元素。

要注意的是这个是个大概的说法,每个特定的元素能包含的元素也是特定的,所以具体到个别元素上,这条规律是不适用的。比如 P 元素,只能包含inline元素,而不能包含block元素。

4.一般来说,可以通过display:inline和display:block的设置,改变元素的布局级别。

##block,inline和inlinke-block细节对比

  • display:block
  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。
  • display:inline
  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。

  2. inline元素设置width,height属性无效。

  3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

  • display:inline-block
  1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

补充说明

  • 一般我们会用display:block,display:inline或者display:inline-block来调整元素的布局级别,其实display的参数远远不止这三种,仅仅是比较常用而已。
  • IE(低版本IE)本来是不支持inline-block的,所以在IE中对内联元素使用display:inline-block,理论上IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表象。

浅说position定位及z-index使用

使用前提

  • z-index只能在position属性值为relative或absolute或fixed的元素上有效。

基本原理

  • z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

使用的相对性

  • z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值(如果有)为子元素定义了堆叠顺序(css版堆叠“拼爹”)。向上追溯找不到含有z-index值的父元素的情况下,则可以视为自由的z-index元素,它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值,决定其堆叠顺序。同级元素的z-index值如果相同,则堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。

  • 如果当你发现一个z-index值较大的元素被值较小的元素遮挡了,请先检查它们之间的dom结点关系,多半是因为其父结点含有激活并设置了z-index值的position定位元素。

  • 因为这个相对性,会引发浏览器表现不一致出现兼容问题。原因是ie6、7下面position值为非static的元素在未设置z-index值的情况下都会被隐含添加z-index:0,而Firefox/Chrome等现代浏览器会遵循标准默认z-index:auto不会产生值。

  • 还有一点需要注意,负值的z-index也依照大小比较的原理,但一般来说负值的z-index会被透明的body覆盖导致点击等事件响应出现问题,请谨慎使用。

    元素位置重叠的背景常识

html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠)。当我们用css为某个元素指定float浮动或者position定位后,元素的定位将会依情况发生如下改变:

  1. 指定float值left/right

    行内元素也会隐形变成块元素,元素会脱离文档的普通流,向左或右浮动,直到其外边缘碰到包含框或另一个浮动框。

  2. 指定position值relative

    可以相对于其在普通流中的位置偏移,原本所占的空间仍保留。

  3. 指定position值absolute

    行内元素也会隐形变成块元素,元素会脱离文档的普通流,相对于最近的已定位祖先元素偏移,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块偏移。

  4. 指定position值fixed

    元素会脱离文档的普通流,相对于浏览器窗口偏移,固定在浏览器的某个位置。

以上四种情况下,文档中的元素都将可能被浮动/定位元素覆盖产生重叠。

元素位置重叠的可能原因

  1. 负边距/float浮动

    margin为负值时元素会依参考线向外偏移。margin-left/margin-top的参考线为左边的元素/上面的元素(如无兄弟元素则为父元素的左内侧/上内侧),margin-right和margin-bottom的参考线为元素本身的border右侧/border下侧。一般可以利用负边距来就行布局,但没有计算好的话就可能造成元素重叠。堆叠顺序由元素在文档中的先后位置决定,后出现的会在上面。浮动元素会脱离文档的普通流,有可能覆盖或遮挡掉文档中的元素。

  2. position的relative/absolute/fixed定位

    当为元素设置position值为relative/absolute/fixed后,元素发生的偏移可能产生重叠,且z-index属性被激活。z-index值可以控制定位元素在垂直于显示屏方向(Z 轴)上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。

  3. window窗口元素引发的重叠

    浏览器解析页面时,先判断元素的类型:窗口元素优于非窗口元素显示(也就是窗口元素会覆盖在其它非窗口元素之上),同为非窗口类型才能在激活z-index属性控制堆叠顺序。

  4. Flash元素属于window窗口元素

    所以如果页面上flash元素和其他元素发生重叠,需要先将flash嵌入的wmode属性的window(窗口,默认的会造成上面所说的问题)改为非窗口模式:opaque(非窗口不透明)或者 transparent(非窗口透明)。

  5. ie6下select属于window类型控件

    同理,它也产生窗口元素的遮挡问题。解决方法使用iframe(原理:ie6下普通元素无法覆盖select,iframe可以覆盖select,普通元素可以覆盖iframe)/用div模拟实现select的效果。我一般会为被select遮挡的div在内部追加(appendChild)一个空的子iframe,设置position:absolute脱离文档流空间、width:100%;height:100%;覆盖整个父div、z-index:-1;确保值要小于父div的z-index值让父div覆盖显示在iframe上面,借助这个iframe来覆盖select。

1、使用选择器插入文字

使用before选择器在元素前面插入内容,使用after在元素后面插入内容,在选择器content属性中定义要插入的内容。

例如对H2使用before选择器在H2的前面插入文字“Title”。

<style type="text/css"> 
h2:before{
content:"Title";
}
</style> 

并且我们还可以给他定义样式,进行美化操作。比如我们给“Title”的文字设置为白色,加上绿色的背景,内边距上下1像素左右5像素,外边距右边5像素,当然还可以设置他的字体等等。

1.2、排除一些不需要插入内容的元素

使用content属性的追加一个none属性值。比如:

<style type="text/css"> 
h2.nocontent:before{
content:none;
}
</style>

2、插入图片

使用before或者after除了可以在元素前后插入文字之外还可以插入图片。

在插入图片是需要使用URL指定图片的路径,比如在标题前插入一张图片!

<style type="text/css"> 
h2:before{
content:url(1.gif);
}
</style>

3、插入项目编号

3.1、在多个标题前加上连续编号

在content属性中使用counter属性来正对对个项目追加连续的编号。

使用方法:

元素:before{
content:counter(计数器名);
}

使用计数器来计算编号,计数器可以任意命名。

除了使用计数器,还需要在元素的样式中追加对元素的(counter-increment)属性的指定为content属性值中所指定的计数器名称。

元素{counter-increment:计数器名}

3.2、在项目编号中追加文字

h1:berore{
content:&#39;第&#39;counter(content属性值中所指定的计数器名称)&#39;章&#39;;}

变成另一种效果!“第一章、第二章…”

3.3、指定编号的样式

比如给他在编号后面带一个“.”文字,并且设置编号的颜色为绿色,字体大小42像素。

h1:before{
content:counter(content属性值中所指定的计数器名称)&#39;.&#39;;
color:green;
font-size:42px;
}

3.4、指定编号的种类

before和after不仅可以追加数字编号,还可以追加字母编号或者罗马数字编号。

content:counter(计数器名,编号种类) 

可以使用list-style-type属性的值来指定编号的种类。比如指定大写字母编号时,使用“upper-alpha”属性,指定大写罗马字母时使用“upper-roman”属性。

h1:before{
content:counter(计数器名,编号种类)&#39;.&#39;;
color:green;
font-size:42px;
}

3.5、编号嵌套、重置编号

我们可以在大编号中华嵌套中编号,在中编号中又嵌入小编号!

1)、大编号中嵌入中编号

2)、counter-reset属性重置编号

3.6、中编号中嵌入大编号

h2:before{
content:counter(大编号的计数器)&#39;-&#39;counter(中编号的计数器)
}

3.7、在字符串两边嵌套文字符号

可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如单引号、双引号之类的文字字符。

open-quote开始符号,close-quote结尾字符。

quote字符类型(使用双引号(””)的时候需要使用转义字符“\”)

示例:

<style>
 h1:before{
 content:open-quote;
}
 h1:after{
 content:close-quote;
}
h1{
quote:"(" ")";
}
</style>

步骤:

第一步:新建一个仓库

第二步:找到Settings

第三步:找到GitHub Pages


第四步:查看分支

注意:我们生成githubPages的目的就是需要生成一个gh-pages分支(正常情况下只有一个master分支)

第五步:将远程仓库克隆到本地

git clone git@github.com:yxyuxuan/test.git

第六步:将分支切换到gh-Pages

cd test (进入到你克隆仓库的本地文件夹) 

git checkout gh-pages(将master分支切换到gh-pages分支上)

第七步:重新上传到github上

注意:将本地克隆的文件删了,只留下.git,然后把你想要展示demo页面相关的文件粘进去
接着,执行以下语句

git add . (将本地所有文件加到仓库里) 
git commit -m “message” (设置提交信息) 
git push -u origin gh-pages (push文件到仓库中)

第八步:预览

https://yxyuxuan.github.io/test/index.html

执行顺序

执行以下hexo 命令需要在yxyuxuan.github.io/source/_posts文件夹下

1.新建md文件(不用加.md后缀)

hexo new 文件名

2.生成html文件

hexo g    

3.在本地看看效果

hexo s(此步操作可以忽略)

4.部署

hexo d

请看解释:

1.在yxyuxuan.github.io/source/_posts文件夹中新建md文件(不用加.md后缀)
hexo new 文件名

打开文件,将要写的内容放在里面。


title: test

date: 2016-09-09 22:15:07

tags:


注:

title:test就是你博客的标题,可以修改的

每个冒号后面都有个空格

2.删除一篇文章

  • 命令:hexo clean test.md

  • 命令:rm test.md

  • 如果不删除md文件,可以将md文件移到其他位置存储

3.在本地查看效果

命令:hexo s

访问 http://localhost:4000 ,此时只有自己能看到效果,因为还得将生成的html文件部署到你的博客上。

4.部署(只有部署后,我访问你的博客地址,才能看到你写的文章)

命令:hexo d