极客学院－Html5个人笔记总结

来源：互联网发布：小猪cms三网合一源码编辑：程序博客网时间：2024/05/21 12:12

第一部分，HTML5基础

1,什么是HTML5?
(Hyper Text Markup Language) 超文本标记语言,用于描述网页的一种语言。

2,HTML5相关知识？
HTML
XHTML
Css
Css3
JavaScript
JQuery
HTML5

3,HTML5新特性？
1,绘画：canvas标签
2,媒介：video和audio元素
3,存储：本地离线存储
4,新元素：article,footer,header,nav,section
5,新控件：calendar,date,time,email,url,search
6,浏览器：Safari,Chrome,Firefox,Opera,IE9

HTML基础讲解
4,声明：<!DOCTYPE>

5,HTML基础标签：head,body

6,HTML标题
<h1>...<h6>等标签进行定义

7,HTML段落
<p>标签定义段落

8,HTML连接
<a>标签定义连接

9,HTML图像
<img>标签定义图像

10,HTML元素
是从开始标签到结束标签的所有代码。即元素的内容
空元素在开始标签进行闭合。如：<br/>
大多数的元素有属性，都可以嵌套的。如：<p> <a>hello </a></p>

11,HTML属性
标签可以拥有属性为元素提供更多是信息。
属性是以键值对的形式。如：href="www.baidu.com"
常用标签属性：<h1> align:对齐方式；<body> bgcolor:背景颜色；<a> target:规定在何处打开链接；
通用属性：class:规定元素的类名；id：规定元素的唯一ID; style:规定元素的样式; title:规定元素的额外信息;

12,HTML格式化
<b> 粗体文本
<big> 大号字
<em> 着重文字
<i> 斜体字
<small> 小号字
<strong> 加重语气
<sub> 下标字
<sup> 上标字
<ins> 插入字
<del> 删除字

13,HTML样式
标签：<style> 样式定义 ; <link> 资源引用
属性：rel="stylesheet" 外部样式表; type="text/css" 引入文档类型; margin-left 边距;
插入方法：外部样式表 <link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表 <style type="text/css">
body { background-color :red}
p { margin-left:20px }
</style>
内联样式表 <p style= "color:red">

14,HTML链接
数据：文本链接;图片链接;
属性：href属性指向另一个文档的链接; name属性创建文档内的链接;
img标签属性；alt 替换文本属性; width 宽 ; height 高;

15,HTML表格
<table> 表格
<caption> 表格标题
<th> 表头
<tr> 行
<td> 单元
<thead> 页眉
<tbody> 主体
<tfoot> 页脚
<col> 列属性

16,THML列表
标签：<ol> 有序; <ul> 无序; <li> 列表项; <dl> 列表; <dt> 列表项; <dd> 描述;
无序列表：标签 <ul><li> 属性 disc , circle, square;
有序列表：标签 <ol><li> 属性 A, a, I, i, start;
嵌套列表：标签 <ul><ol><li>
自定义列表：标签 <dl><dt><dd>

17,HTML块
块的元素：块元素显示时，通常以新行开始; 如：<h1><p><ul>
内联元素：内联元素通常不会以新行开始; 如：<b><a><img>
<div>元素：<div>元素也被称为块元素，其主要的组合HTML元素的容器。
<span>元素：<span>元素是内联元素，可作为文本的容器。

18,HTML布局
①div布局
②table元素布局

19，表单用于获取不同类型的用户输入

20，常用表单标签

<from> 表单

<input> 输入域

<textarea> 文本域

<label> 控制标签

<fieldset> 定义域

<legend> 域的标题

<select> 选择列表

<optgroup> 选项组

<option> 下拉列表选项

<button> 按钮

21，PHP环境搭建

网站：www.apachefriends.org 下载安装XAMPP

其中，运行 xx.hph的目录：/xampp/htdocs

打开eclipse--help-->install new software

输入：http://download.eclipse.org/releases

找到：Programming Languages-->PHP Development Tools (PDT)

安装后重起，open perspective-->PHP

新建工程-->（将工作空间变化到 /xampp/htdocs）

或在拷贝xx.php 到/xampp/htdocs中

运行：在浏览器中输入：localhost/xx.php

22，表单提交数据和PHP交互

在PHP服务端：//$_GET:指的是用get方式提交; $_POST:post方式

echo "用户名".$_POST['name']."<br>密码".$_POST['password'];

在IDEA端：

用户名：<input type="text" name="name"><br>

密码：<input type="password" name="password">

<br>

</form>

23，HTML框架

框架标签（frame）

框架集标签（<frameset>）

常用标签：noresize:固定框架大小；cols:列；rows:行；

内联框架：iframe

24，HTML5背景

背景标签：background--图片背景

背景颜色：Bgcolor--颜色背景

颜色：是由一个十六进制符号来定义的。这些符号由红色，绿色和蓝色的值组成（RGB）

颜色值最小值：0（#00）

颜色值最大值：255（#FF）

红色：#FF0000

绿色：#00FF00

蓝色：#0000FF

25，HTML实体

HTML中预留字符串必须被替换成字符实体。

如：< , > , % 例：<html> 写成： <html>

显示结果

描述

实体名称

实体编号

空格

小于号

<< p=""><!--

大于号

和号

引号

撇号

' (IE不支持)

￠

分

￡

镑

￥

人民币

26，XHTML规范化介绍

XHTML简介：

①什么是XHTML? 是指可扩展超文本标记语言。与HTML4.01几乎相同。是更严格更纯净的HTML版本。得到所有主流浏览器的支持。

②为什么使用XHTML? 为了代码的完整性和良好性。

③文档声明：DTD 规定了使用通用标记语言的网页语法。

④三种XHTML文档类型：STRICT （严格性） TRANSITIONAL （过渡类型） FRAMESET （框架类型）

XHTML元素：

①XHTML元素必须正确嵌套。

②XHTML元素必须始终关闭。

③XHTML元素必须小写。

④XHTML文档必须有一个根元素。

XHTML属性：

①XHTML属性必须使用小写。

②XHTML属性值必须用引号包围。

③XHTML属性最小化也是禁止的。

第二部分，CSS3基础

一，入门基础知识。

1，CSS3样式

①CSS背景: css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

background-attachment：背景图像是否固定或者随着页面滚动。

background-color：设置原色的背景颜色。

background-image：把图片设置为背景。

background-position：设置背景图片的起始位置。

background-repeat：设置背景图片是否及如何重复。

background-size: 规定背景图片的尺寸。

background-origin ：规定背景图片的定位区域。

background-clip:规定背景的绘制区域。

②CSS文本：

color：文本颜色。

direction：文本方向。

line-height：行高。

letter-spacing：字符间距。

text-align：对齐元素中的文本。

text-decoration：向文本添加修饰。

text-indent：缩进元素中文本的首行。

text-transform：元素中的字母。

Unicode-bidi：设置文本的方向。

white-space：元素中的空白的处理方式。

word-spacing：字间距。

③CSS字体：

css字体属性定义文本的字体系列，大小，加粗，风格和变形。

font-family：设置字体的系列。

font-size：设置字体的尺寸。

font-style：设置字体的风格。

font-variant：以小型大写字体或正常字体显示文本。

font-weight：设置字体的粗细。

normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。

定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。inherit规定应该从父元素继承字体的粗细。

尺寸

单位描述%百分比in英寸cm厘米mm毫米em

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

ex一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)pt磅 (1 pt 等于 1/72 英寸)pc12 点活字 (1 pc 等于 12 点)px像素 (计算机屏幕上的一个点)

颜色

单位描述(颜色名)颜色名称 (比如 red)rgb(x,x,x)RGB 值 (比如 rgb(255,0,0))rgb(x%, x%, x%)RGB 百分比值 (比如 rgb(100%,0%,0%))#rrggbb十六进制数 (比如 #ff0000)

④CSS链接：

四种状态：link 普通的，未被访问的链接。

visited 用户已访问的链接。

hover 鼠标指针位于链接的上方。

active 链接被点击的时刻。

⑤CSS列表：

CSS列表属性允许你放置，改变列表标志，或者将图像作为列表项标志。

list-style：简单列表项。

list-style-image：列表项图像。

list-style-postion：列表标志位置。

list-style-type：列表类型。

⑥CSS表格：

CSS表格属性可以帮助我们极大改善表格的外观。

表格的边框。

折叠边框。

表格宽高。

表格文本对齐。

表格内边距。

表格颜色。

⑦CSS轮廓：

轮廓主要是用来突出元素的作用。

outline 设置轮廓的属性。

outline-color 设置轮廓的颜色。

outline-style 设置轮廓的样式。

outline-width 设置轮廓的宽度。

⑧css !important作用是提高指定CSS样式规则的应用优先权。

二， CSS基本样式

1，CSS介绍和语法

①概述：CSS指层叠样式表。CSS样式表极大提高了工作效率。

格式：selector {

properly：value

}

例如：h1 { color : red ; font-size: 14px; }

属性大于1个之后，属性之间用分号隔开。

如果值大于1个单词，则需要加上引号。

例如：p { font-family: "sans serif"; }

②CSS高级语法

选择器的分组：h1，h2，h3，h4，h5，h6 { color ：red ; }

继承：body {

color：green；

}

凡是在body体内的内容，如无设置其标签属性都将继承body样式。

2，css派生选择器

派生选择器：通过依靠元素在其位置的上下文关系来定义样式。

派生选择器以空格来定义。

3，css id选择器

id选择器：可以标有id的HTML元素指定特定的样式。

id选择器以“#”来定义。

目前比较常用的方式是id选择器常常用于建立派生选择器。

4，css类选择器

类选择器以一个点显示。

class也可以用作派生选择器。

5，属性选择器

属性选择器：对带有指定属性的HTML元素设置样式。

属性和值选择器。

三，CSS盒子模型。

1，概述

盒子模型的内容范围包括：margin，border，padding，content部分组成。

2，内边距

内边距在content外，边框内

padding 所有边距

padding-bottom 底边距

padding-left 左边距

padding-right 右边距

padding-top 上边距

3，边框

创建出边框，并且可以应用于任何元素。

border-style：定义了10个不同的非继承样式，包括none。

单边样式：border-top-style ； border-left-style ； border-right-style ； border-bottom-style ；

CSS3边框：border-radius ：圆角边框； box-shadow：边框阴影； border-image ：边框图片；

4，外边距

围绕在内容边框的区域就是外边距，外边距默认为透明区域。

外边距接受任何长度单位，百分数值。

margin 所有边距

margin -bottom 底边距

margin -left 左边距

margin -right 右边距

margin -top 上边距

5，外边距合并

外边距合并就是一个叠加的概念。

遵循多的边距

6，盒子模型应用

四，CSS定位。

1，CSS定位

CSS定位：改变元素在页面上的位置。

定位机制：普通流（元素按照其在HTML中的位置顺序决定排布的过程）；浮动；绝对布局。

定位属性：

postion 把元素放在一个静态的，相对的，绝对是，或者固定的位置中。

其属性值：static；relative；absolute；fixed

top 向上的偏移

left 向左的偏移

right 向右的偏移

bottom 向下的偏移

overflow 设置元素溢出其区域发生的事情

clip 设置元素显示的形状

verical-align 设置元素垂直对其方式

z-index 设置元素的堆叠顺序

2，CSS浮动

float属性可用的值：

left 元素向左浮动。

right 元素向右浮动。

none 元素不浮动。

inherit 从父级继承浮动属性。

clear属性：

去掉浮动属性（包括继承来的属性）

clear属性值：left，right 去掉元素向左，向右浮动。both 左右两侧均去掉浮动。inherit 从父级继承来的clear的值。

五，CSS选择器

1，元素选择器

最常见的选择器就是元素选择器，文档的元素就是最基本的选择器。

例如：h1 { }；a{ } ;

2，选择器分组

例如：h1,h2 { }

通配符：* { }

3，类选择器详解

①类选择器允许以一种独立与文档元素的方式来指定样式。

例如：.class { }

② 结合元素选择器。

例如：a.class { }

③多类选择器

例如：.class.class { }

④ID 选择器详解

ID选择器类似于类选择器，不过也有一些重要差别。

例如：#id { }

区别：

ID只能在文档中使用一次，而类可以多次使用。

ID选择器不能结合使用。

当使用js时候，需要用到id。

⑤属性选择器详解

简单属性选择：例如：[ title] { }

根据具体属性值选择：除了选择拥有某些的元素，还可以进一步缩小选择范围，值选择有特定属性值的元素。例如：a [ href="http://www.baidu.com"] { }

属性和属性值必须完全匹配

根据部分属性值选择

⑥后代选择器

后代选择器可以选择作为某元素后代的元素。例如：p strong { };

⑦子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

例如：h1>strong { };

⑧相邻兄弟选择器

可以选择紧接着另一个元素后的元素，且二者有相同父元素。

例如：h1 + p { };

六，CSS常用操作

1，对齐

①使用margin属性进行水平对齐。

②使用position属性进行左右对齐。

③使用Float属性进行左右对齐。

2，尺寸

①属性

height 设置元素的高度；

width 设置元素宽度；

line-height 设置行高；

max-height 设置元素最大高度；

min-height 设置元素最小高度；

max-width 设置元素最大宽度；

min-width 设置元素最小宽度；

3，分类

①属性

clear 设置一个元素的侧面是否允许其他的浮动元素；

cursor 规定当指向某元素之上时显示的指针类型；

display 设置是否及如何显示元素；

Float 定义元素在那个方向浮动；

position 把元素放置到一个静态的，相对的，绝对的，固定的位置；

visiblity 设置元素是否可见或不可见；

4，导航栏

①垂直导航栏

17x29x51

17x31x45

24x32

②水平导航栏

③导航栏效果

5，图片

七，css动画

1，2D,3D转换

①通过css3转换，我们能够对元素进行移动，缩放，转动，拉长或伸拉转换是使元素改变形状，尺寸和位置的一种效果。

②2D转换方法：

translate()

rotate()

scale()

skew()

matrix()

③3D转换方法：

rotateX()

rotateY()

2，过渡

①通过使用css3，可以给元素添加一些效果。

②css3过渡是元素从一种样式转换成另一种样式。

动画效果的css

动画执行的时间

③属性：

transition 设置四个过渡属性

transition-property 过渡是名称

transition-duration 过渡效果花费的时间

transition-timing-function 过渡效果的时间曲线

transition-delay 过渡效果开始时间

3，动画

①通过css3，也可以进行创建动画了。

②css3的动画需要遵循@keyframes规则。

规定动画的时长

规定动画的名称

4，多列

①在css3中，可以创建多列来对文本或者区域进行布局。

②属性：

column-count 行的个数

column-gap 间距

column-rule

5，瀑布流效果

第三部分，Javascript基础

一，JavaScript基础教程

1，Javascript基础-介绍、实现、输出

①介绍

JavaScript 是互联网上最流行的脚本语言，这么语言可用于web和HTML，更可广泛用于服务器，PC端，移动端。

JavaScript是一种轻量级的编程语言。是可插入HTML页面的编程代码。插入HTML页面后，可由所有的浏览器执行。

②实现

用法：

HTML中的脚本必须位于<script></script>标签之间。

脚本可被放置在HTML页面的<body>和<head>部分中。

标签：

在HTML中插入JavaScript，使用<script>标签

在<script></script>之间书写代码。

使用限制：

在HTML中，不限制脚本数量。

通常会把脚本放置于<head>标签中，以不干扰页面内容。

③输出

JavaScript通常用来操作HTML。

文档输出：document.write("<p>this is my first JavaScript </p>");

2，JavaScript基础-语法和注释

①语法

语句：

JavaScript语句向浏览器发出是命令，语句的作用是告诉浏览器该做什么。

分号：

语句之间的分割是分号（；）

注意：分号是可选项，有时候看到不以分号隔开的。

代码：按照编写顺序依次执行。

标示符：必须以字母，下划线或美元符号开始。

JavaScript关键字。

JavaScript对大小写敏感。

空格：忽略多余的空格。

代码换行：禁止。

保留字：

②注释

单行注释：//

多行注释： /* */

3，Javascript基础-变量和数据类型

①变量：是用来存储信息的“容器”。

例如：var x=10;

var y=10.1;

var z="hello";

②数据类型：

字符串（String）数字（Number）布尔（Boolean）数组（Array）对象（Object）空（null）未定义可以通过赋值为null的方式清除变量。

二，JavaScript语法详解

1，运算符

①算数运算符：+，-，*，/,++,--

②赋值运算符：=，+=，-=，*=，/=，%=

③ 字符串操作

④比较运算符：==，===，！=，！==，>，<，>=，<=

⑤逻辑运算符：&&，||，！

⑥条件运算符：例：x<10? "x比10小"："x比10大"；

2，条件语句

①if（条件）{

代码块

}else{

}

②switch(值){

case 0：

break；

default：

break；

}

③循环for

for（var i=0；i<arr.length; i++）{

循环体

}

for （i in j）{ 循环体 }

④循环while

while(条件){
循环体;

迭代条件；

}

⑤跳转语句

break；结束整个循环

continue; 结束当前循环

三，JavaScript函数

1，函数的用途

函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。

例：实现10组数字的和；

2，定义函数：

function 函数名（）{

函数体；

}

注意：JavaScript对大小写敏感，必须注意函数名一致。

3，函数调用

函数在定义好之后。不能自定执行，需要进行调用。

调用方式：

在<script>标签内调用

在HTML文件中调用

4，带参数的函数

在函数的调用中，也可以传递值，这些值被称为参数。例：demo（arg1 ，arg2）;

参数的个数可以为任意多，每个参数通过“，”隔开。

注意：参数在传递时，其顺序必须一致。

意义：通过传递参数的个数以及参数的类型不同完成不同的功能。

5，带返回值的函数

有时，我们需要将函数的值返回调用他的地方；

通过return语句就可以实现。

注意：在使用return语句时，函数会停止执行，同时返回值。

6，局部变量和全局变量

四，JavaScript异常处理和事件处理

1，异常捕获

异常：当JavaScript引擎执行JavaScript代码时，发生了错误。导致程序停止运行。

异常抛出：当异常产生，并且将这个异常生成一个错误信息。

异常捕获：

try { 发生异常的代码块；

}catch(err) {

错误信息处理；

}

Throw语句：

通过throw语句创建一个自定义的错误。

2，事件

事件是可以被JavaScript侦测到的行为。

常见事件：

onClick 单击事件

onMouseOver 鼠标经过事件

onMouseOut 鼠标移除事件

onChange 文本内容改变事件

onSelect 文本框选中事件

onFocus 光标聚集事件

onBlur 移开光标事件

onLoad 网页加载事件

onUnload 关闭网页事件

五，DOM对象

1，简介

①HTML_DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

②DOM操作HTML:

改变页面中所有HTML元素。

改变页面中所有HTML属性。

改变页面中所有CSS样式。

对页面中的所有事件作出反应。

2，操作HTML

①改变HTMLs输出流：绝对不要在文档加载完成之后使用 document.write()。会覆盖该文档。

②寻找元素：通过id找到HTML元素。通过标签找到HTML元素。

③改变HTML内容：使用属性 innerHTML;

④改变HTML属性：使用attribute

3，操作css

①通过DOM对象改变css

语法：document.getElementById( id ).style.property=new style

4，DOM EventListener：

方法：

addEventListener(); 用于向指定元素添加事件句柄。

removeEventListener(); 移除方法添加的事件句柄。

六，javaScript事件详解

1，事件流

①事件流：描述的是在页面中接受事件的顺序。

②事件冒泡：由最具体的元素接收，然后逐渐向上传播至最不具体的元素的节点（文档）。

③事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。

2，事件处理

①HTML事件处理：直接添加到HTMl结构中。

②DOM0级事件处理：把一个函数赋值给一个事件处理程序属性。

③DOM2级事件处理：

addEventListener（“事件名”，“事件处理函数”，“布尔值”）；

true ：事件捕获。

false：事件冒泡。

removeEventListener();

④IE事件处理程序：

attachEvent

detachEvent

3，事件对象

①事件对象：在触发DOM事件的时候都会产生一个对象。

②事件对象event：

type：获取事件类型。

target：获取事件目标。

stopPropagation（）：阻止事件冒泡。

preventDefault（）：阻止事件默认行为。

七，JavaScript内置对象

1，什么是对象

①对象

JavaScript中的所有的事物都是对象：字符串，数值，数组，函数。。。。

每个对象带有属性和方法。

JavaScript允许自定义对象。

②自定义对象

定义并创建对象实例。

使用函数来定义对象，然后创建新的对象实例。

2，String字符串对象

①Strin对象

String对象用于处理已有的字符串。

字符串可以使用双引号或单引号。

②在字符串中查找字符串：indexOf（）

③内容匹配：match（）

④替换内容：replace（）

⑤字符串大小写转换：toUpperCase() /toLowerCase()

⑥字符串转为数组：strong>split

⑦字符串属性和方法：

属性：length，prototype，constructor

方法：charAt（），charCodeAt（），concat（），fromCharCode（），indexOf（），lastIndexOf（），match（），replace（），search（），slice（），substring（），substr（），valueOf（），toLowerCase（），toUpperCase（），split（）

3，Date日期对象

①Date对象：日期对象用于处理日期和时间。

②获得当日的日期。

③常用方法：

getFullYear（）: 获取年份。

getTime() ：获取毫秒。

setFullYear() ：设置具体的日期。

getDay() ：获取星期。

4，Array数组对象。

①Array对象：使用单独的变量名来存储一系列的值。

②数组的创建：例：var myArray=[ "Hello", "iwen", "ime" ] ;

③数组的访问：通过指定数组名以及索引号码，你可以访问某个特定的元素。

注意: [0]是数组的第一个元素，[1] 是数组的第二个元素。

④数组常用方法：

concat(): 合并数组。

sort(): 排序。

push(): 末尾追加元素。

reverse(): 数组元素翻转。

5，Math对象

①Math对象：执行常见的算数任务。

②常用方法：

round（）：四舍五入。

random（）：返回0~1之间的随机数。

max() : 返回最高值。

min(): 返回中的最低值。

abs() : 返回觉得值。

八，JavaScript对象控制HTML元素详解

方法：

getElementByName() : 获取name。

getElementByTagName() : 获取元素。

getAttribute() : 获取元素属性。

setAttribute() : 设置元素属性。

childNodes() ：访问子节点。

parentNode() : 访问父节点。

createElement() : 创建元素节点。

createTextNode() : 创建文本节点。

insertBefore() : 插入节点。

removeChild() :删除节点。

offsetHeight() :网页尺寸。

scrollHeight() : 网页尺寸。

九，Js浏览器对象

1，Window对象

①对象：是BOM的核心，window对象指当前的浏览器窗口，所有JavaScript全局对象，函数以及变量均自动成为window对象的成员。

全局变量是window对象的属性。

全局函数是window对象的方法。

甚至HTML DOM的document也是window对象的属性之一。

②尺寸：

window.innerHeight : 浏览器窗口的内部高度。

window.innerWidth : 浏览器窗口的内部宽度。

2，计时器

①计时事件：通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件。

②计时方法：

setInterval(): 间隔指定的毫秒数不停地执行指定代码。

clearInterval(): 方法用于停止setInterval()方法执行的函数代码。

setTimeout() : 暂停指定的毫秒数后执行指定的代码。

clearTImeout() 方法用于停止执行setTimeout()方法的函数代码。

3，History对象

①History对象：window.history 对象包含浏览器的历史（url）的集合。

②History方法：

history.back() 与在浏览器点击后退键相同。

history.forward() 与在浏览器中点击按钮向前相同。

History.go() 进入历史中的某个页面。

4，Location对象

①window.location 对象用于获得当前页面的地址（UrL）,并把浏览器重定向到新的页面。

②location对象的属性：

location.hostname 返回web主机的域名。

location.pathname 返回当前页面的路径和文件名。

location.port 返回web主机的端口。

location.protocol 返回所使用的web协议（Http：// 或者https://）。

location.href 属性返回当前页面的URL。

location.assign() 方法加载新的文档。

5，Screen对象

①Screen对象包含有关用户屏幕的信息。

②属性：

screen.availWidth 可用的屏幕宽度。

screen.avaiHeight 可用的屏幕高度。

screen.Height 屏幕高度。

screen.Width 屏幕宽度。

十，JS面向对象

1，认识面向对象。

①概念：

一切事物皆对象。

对象具有封装和继承特性。

信息隐藏。

2，JS面向对象1。

/* 相当于类 */

(function(){//封装信息

var n="ime";

function Person(name){

this.name=name;

}

Person.prototype.say=function(){

alert("peo_Hello:"+this.name+n);

}

window.Person=Person;//赋值给顶级window

}());

(function(){

function Student(name){

this.name=name;

}

Student.prototype=new Person();

var supers=Student.prototype.say;

Student.prototype.say=function(){

supers.call(this);//子类调用父类内容。

alert("Stu_hello:"+this.name);

}

window.Student=Student;

}());//此处加个小括号！！！！！！！！！！！！！

var s =new Student("iwen");

s.say();//弹出hello

3，JS面向对象2

/* 相当于类2 */

(function(){

var n ="ime1";

function Peple(name){

var _this={}

_this.name=name;

_this.sayHello=function(){

alert("PHello"+_this.name+n);

}

return _this;

}

window.Peple=Peple;

}());

(function (){

function Teacher(name){

var _this=Peple(name);//带小括号的--对象

_this.name=name;

var superSay=_this.sayHello;//不能带括号--方法

_this.sayHello=function(){

superSay.call(_this);

alert("Thello"+_this.name);

}

return _this;

}

window.Teacher=Teacher;

}());

var t =Teacher("zhangsan");

t.sayHello();//弹出Hello

十一，JavaScript瀑布流

1，布局

第四部分，HTML5新特性基础

1，HTML5音频视频

1，音频播放

①Audio: HTML5提供了播放音频文件的标准。

②control(控制器)：添加播放，暂停和音量控件。

③标签：<audio> 定义声音。

<source> 规定多媒体资源，可以是多个。

2，编解码工具

①FFmpeg

②官方网址：www.ffmpeg.org

3，视频播放

①Video: HTML5提供了播放音频文件的标准。

②control(控制器)：添加播放，暂停和音量控件。

③标签：<video> 定义声音。

<source> 规定多媒体资源，可以是多个。

④属性：width：宽

height：高

2, HTML5拖放

1，拖放

①拖放（Drag和drop）是HTML5标准的组成部分。

②拖动开始：ondragstart: 调用了一个函数，drag(event) 它规定了被拖动的数据。

③设置拖动数据：setData(): 设置被拖动数据的数据类型和值。

④放入位置：ondragover: 事件规定在何处放置被拖动的数据。

⑤放置：ondrog:当放置被拖动数据时，会发生drop事件。

2，拖放本地资源

3，HTML5Canvas标签

1，创建canvas

①Canvas标签：HTML5<canvas> 元素用于图形的绘制。通过脚本（通常是JavaScript）来完成。<canvas>标签只是图形容器，必须使用脚本来绘制图形。

通过多种方法使用Canvas绘制路径，盒，圆，字符以及添加图想。

②标签：<canvas>

2，绘制图形：canvas 元素本身没有绘图能力的，所有的绘图工作必须在JavaScript内部完成。

3，绘制图片：

4，HTML5Canvas应用

1，认识createjs：下载第三方包网址：createjs.com

2，炫酷效果

5，SVG

1，什么是SVG?

①SVG指可伸缩矢量图形（Scalable Vector Graphics）

②SVG用来定义用于网络的基于矢量的图形。

③SVG使用XML格式定义图形。

④SVG图像在放大或改变尺寸的情况下其图形质量不会有损失。

⑤SVG是万维网联盟的标准。

2，SVG优势

①SVG图像可通过文本编辑器来创建和修改。

②SVG图像可被搜索，索引，脚本化或压缩。

③SVG是可伸缩的。

④SVG图像可在任意的分辨率下被高质量地打印。

⑤SVG可在图像质量不下降的情况下被放大。

3，引入SVG外部文件

①创建一个svg.svg是一个xml,加一个头文件<?xml version="1.0"?>

②网站：developer.mozilla.org

https://developer.mozilla.org/zh-CN/docs/Web/SVG

6，Web储存

1，客户端储存数据的新方法

①localStorage：没有时间限制的数据存储。

②sessionStorage: 针对一个session的数据存储。

2，LocalStorage

①特点：没有时间限制。

3，sessionStorage

①特点：对一个session进行数据存储。当用户关闭时数据会被删除。

7，HTML5应用缓存与Web Workers

1，应用缓存

①什么是应用缓存：

HTML5引入应用缓存，这一位子web应用可进行缓存，并可在没有联网时进行访问。

②应用缓存的优势：

离线浏览：用户可在应用离线时使用它们。

速度：已缓存资源加载得更快。

减少服务器负担：浏览器将只从服务器下载更新过或更改过的资源。

③实现缓存：

如需启动应用缓存，请在文档的<html>标签中包含manifest属性

mainfest文件的扩展名是：“.appcache”

③Manifest文件：

CACHE MANIFEST: 在此标题下列出的文件将首次下载或进行缓存。

NETWORK: 此标题下列出的文件需要与服务器的连接，不会被缓存。

FALLBACK: 此标题下列出的文件规定当前页面无法访问时的回退页面。

2，Web Workers

①web worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

②方法: postMessage() : 它用于向HTML页面传回一段消息。

terminate() : 终止web worker, 并释放浏览器/计算机资源。

③事件： onmessage

8，服务器推送事件

1，介绍

①HTML5服务器推送事件

服务器推送事件（Server-sent Events）是HTML5规范中的一个组成部分，可以用来从服务端实时推送数据到浏览器端。

②传统服务器端推送技术

webSocket: WebSocket 规范HTML5中的一个重要组成部分。已经被主流浏览器所支持，也有不少基于WebSocket开发的应用。

webSocket使用的是嵌套字链接，基于TCP协议，使用webSocket 之后，实际上在服务端和浏览器之间建立一个套接链接。可以进行双向的数据传输，

webSocket的功能很强大，使用起来也灵活，可以适应不同的场景。

不过，webSocket技术也比较复杂，包括服务器端和浏览器端的实现都不同于一般的web应用。

③HTTP协议：简单轮询，即浏览器定时向服务端发送请求，来查询是否有数据更新。这种做法比较简单，可以在一定程度上解决问题，不过对于轮询的时间间隔需要进行考虑，间隔过长，会导致用户不能及时接收更新的数据，间隔过短，会导致查询请求过多，增加服务端的负担。

2，实现

①服务器代码头：

header（‘ Content-Type: text/event-stream’）；

②EventSource事件：

onopen : 服务器的链接被打开。

onmessa: 接收消息。

onerror: 错误发生。

第五部分，响应式布局

一，响应式布局基础。

1，介绍。

①响应布局：响应式布局是2010年5月提出的一个概念，就是一个网站能够兼容多个终端，是为了解决移动互联网浏览而诞生的，其目的是为用户提供更加舒适的界面和更好的用户体验。

②优缺点：

优点：面对不同分辨率的设备灵活性强。能够快捷解决多设备显示适应问题。

缺点：兼容各种设备工作量大，效率低下。代码累赘，会出现隐藏无用的元素，加载时间过长。

2，布局效果。

①CSS中的Media Query(媒介查询)

设备宽高：device-width，device-height；

渲染窗口的宽和高：width，height；

设备的手持方向：orientation;

设备的分辨率：resolution;

②使用方法：

外联。

内嵌样式。

3，实例操作。

①在页面放置元素，随页面改变而改变。

二，响应式布局之Bootstrap

1，Bootstap介绍

①了解Bootstap:简洁，直观，强悍的前端开发框架，让web开发更迅速，简单。

②优点：快速，简单，灵活的栅格系统，小而强大，响应式布局，跨平台等。

③下载：http://getbootstrap.com

2，Bootstrap CSS，组件与JavaScript插件

3，应用例子：http://getbootstrap.com/examples/jumbotron/

第六部分，jQuery基础

一，jQuery简介及语法

1，简介。

①jQuery：jQuery 库可以通过一行简单的标记被添加到网页中。

②什么是jQuery：是一个JavaScrip函数库。

③jQuery库的功能：

HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

Javascript 特效和动画

HTML DOM遍历和修改

AJax : 不刷新页面修改内容。

Utilities

2，引入jQuery的方法。

①网页中添加jQuery

从jquery.com下载jQuery库。

从CDN中载入jQuery，如从Google中加载jQuery

百度和新浪的服务器存有jQuery：http：//libs.baidu.com/jquery/1.1.02/jquery.min.js

谷歌和微软的服务器存有jQuery：http：//ajax.googleapis.com/ajax/libs/jquery/jquery.min.js

②版本介绍

v1.11.1 ： 1.x支持IE6+

v2.1.1 ：2.x支持IE0+

3，语法。

①jQuery语法

基础语法：$(selector).action()

网页加载完成：$(document).ready(function(){}）;

美元符号定义jQuery

选择符（selector）“查询”和“查找”HTML元素。

jQuery的action（）执行对元素的操作。

例如：$(this).hide() : 隐藏当前元素

$("p").hide() ：隐藏所有段落

二，jQuery选择器和事件

1，选择器

①修改指定元素内容：

例如：$("button").click(function(){

$(".pcalss").text("p元素被修改了");//元素选择器，指定修改元素

});

2，事件常用方法

①可以根据元素类型，id，class，标签进行修改内容。

3，绑定，解除事件

使用 .bind() 和unbind()方法。

例如：

$("#clickMeBtn").bind("click",clickHandler);

$("#clickMeBtn").bind("click",clickHandler1);

$("#clickMeBtn").unbind("click",clickHandler1);//解除指定的绑定，方法---不带（）

/*jquery 1.7之后 on代替 bind */

$("#clickMeBtn").on("click",clickHandler);

$("#clickMeBtn").on("click",clickHandler1);

$("#clickMeBtn").off("click");//解除所有绑定。方法---不带（）

4，事件目标与冒泡

阻止冒泡方法：

e.stopPropagation();//阻止父级事件冒泡，body不再打印信息

e.stopImmediatePropagation();//阻止所有事件冒泡

5，自定义事件

例如：

clickBtn= $("#clickBtn");

clickBtn.click(function(){

var e =jQuery.Event("MyEvent");//创建自己的事件

clickBtn.trigger(e);//触发

});

clickBtn.bind("MyEvent",function(e){//事件要传递进来

conlog(e);

});

三，jQuery效果之隐藏，显示，淡入淡出，滑动，回调

1，隐藏与显示

例如：

$("#hide").click(function (){

$("#phide").hide(1000);//点击隐藏--动画1s

});

$("#show").click(function (){

$("#phide").show(1000);//点击显示--动画1s

});

$("#toggle").click(function (){

$("#phide").toggle(1000);//点击显示--动画1s

});

2，淡入淡出

例如：

/*淡入淡出*/

$("#in").click(function(){

$("#div1").fadeIn(1000);

$("#div2").fadeIn(1000);

$("#div3").fadeIn(1000);

});

$("#out").click(function(){

$("#div1").fadeOut(1000);

$("#div2").fadeOut(1000);

$("#div3").fadeOut(1000);

});

$("#fadetoggle").click(function(){//开关

$("#div1").fadeToggle(1000);

$("#div2").fadeToggle(1000);

$("#div3").fadeToggle(1000);

});

$("#fadeto").click(function(){//透明度

$("#div1").fadeTo(1000,0.5);

$("#div2").fadeTo(1000,0.7);

$("#div3").fadeTo(1000,0.3);

});

3，滑动

$("#flipshow").click(function(){//显示（之前在样式中displayed：nono）

$("#content").slideDown(500);

});

$("#fliphide").click(function(){//隐藏

$("#content").slideUp(500);

});

$("#fliptoggle").click(function(){//开关

$("#content").slideToggle(500);

});

4，回调

/*回调*/

$("#btn").click(function(){

// $("p").hide(1000,function(){//单独执行

// alert("动画结束，方法回调")

// });

$("p").css("color","red").slideUp(500).slideDown(500);//多个设置和动画

});

四，HTML之捕获，设置，元素添加，元素删除

1，HTML-捕获

例：

/*获取*/

$("#btn1").click(function(){

// alert("text:"+$("#text").text());//text()获取内容

// alert("text:"+$("#text").html());//html()获取全部内容，包含标签

alert("text:"+$("#input").val());//val()获取输入框内容

});

$("#btn2").click(function(){

alert("网址:"+$("#aid").attr("href")+",ID:"+$("#aid").attr("id"));//attr()获取属性

});

2，HTML-设置

例：

/*设置*/
$("#btn3").click(function(){
$("#p1").text("极客学院");//修改P标签内容
});
$("#btn4").click(function(){
$("#p2").t("<a href='http://www.jikexueyuan.com'>极客学院2</a>");//给p标签添加a标签
});

$("#btn5").click(function(){
$("#i3").val("jikexueyuan");//修改input的内容
});
$("#btn6").click(function(){
// $("#a").attr("href","http://www.jikexueyuan.com");//修改input的内容
$("#a").attr({
"href":"http://www.jikexueyuan.com",
"title":"hello"
});
$("#a").text("极客学院");
});
$("#btn7").click(function(){
$("#p5").text(function(i,ot){//显示不断返回的数据，新的和旧的。
return "old:"+ot+", new:"+i;
});
});

3，HTML-添加元素

例如：

/*添加*/

/*说明：

* append:在元素结尾添加;

* before，prepend:在元素之前添加;

* after：在元素之后添加

* */

$("#btn8").click(function(){

// $("#p6").append("this is a web");//结尾

$("#p6").prepend("this is a web");//之前

});

$("#btn9").click(function(){

// $("#p7").before("this is a web");//在上一行

$("#p7").after("this is a web");//在下一行

});

function appendText(){

/*三种方式添加内容：

*html,jQuery,DOM

* */

var text1="<p>iwen</p>";

var text2=$("<p></p>").text("iwe");

var text3=document.createElement("p");

text3.innerHTML="iw";

$("body").append(text1,text2,text3);

}

4，HTMl-删除元素

例：

/*删除*/

/*方法：

* remove，empty

* */

$("#btn10").click(function(){

$("#div").remove();//全删除

// $("#div").empty();//删除元素内容

});

五，CSS操作及jQuery的盒子模型

1，jQuery CSS方法

例：

/*css 方法*/

var div=$("#div1");

// div.css("width","100px");//单个设置属性

// div.css("height","100px");

// div.css("background","#FF0000");

// div.css({//设置多个属性

// width:"100px",height:"100px",backgroundColor:"#00FF00"

// });

div.addClass("style1");//加载一个class样式。

div.click(function(){

// $(this).addClass("style2");

// $(this).removeClass("style1");//点击移除样式

$(this).toggleClass("style2");//更换

});

2，jQuery 盒子模型

/*盒子模型*/

var d= $("#div2");//获得div高度

d.click(function(){

// alert(d.height());//宽 100

// alert(d.innerHeight());//高+边距 200

alert(d.outerHeight());// 高+边距+外边框 204

alert(d.outerHeight(true));// 高+边距+外边框+外边距 304

});

六，元素的遍历与过滤

1，向下遍历

/*向下遍历

* children, find

* */

// $("#div1").children().css({//指向下延伸一级

// border:"3px solid #FF0000"

// });

$("#div1").find("a").css({//必填元素，修改指定元素

border:"3px solid #FF0000"

});

2，向上遍历

/*向上遍历

* parent, parents, parentUntil

* */

// $("p").parent().css({//父边框一级变

// border:"3px solid #FF0000"

// });

// $("p").parents().css({//外面的所有变

// border:"3px solid #FF0000"

// });

$("a").parentsUntil("#div1").css({//指定元素之间区间变

border:"3px solid #FF0000"

});

3，同级遍历

/*同级遍历

* sibings,next,nextALl,nextUntil,preAll,preUntil

* */

// $("h4").siblings().css({//修改其他所有同级元素