导图社区第二周 web前端设计

第二周 web前端设计

第二周 web前端设计：1.Canvas绘图，I.<canvas>标签，II.context2D对象，III.绘制图形，VIII.绘制渐变图形，2.多媒体播放，I.HTML 5的多媒体支持，II.HTML 5多媒体API等等

编辑于2022-05-25 15:19:02

web前端设计

courage

他的近期作品查看更多>>

第二周 web前端设计

社区模板帮助中心，点此进入>>

courage

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 39.7k
- 977
- 2.5k
- 401
- 0
MindMaster
产品立项报告
- 11.4k
- 956
- 348
- 6
- 0
江边朝阳
产品经理如何做好项目管理
- 11.1k
- 48
- 210
- 8
- 0
issen
经验分享：产品经理必懂的产品思维
- 8.8k
- 427
- 234
- 11
- 0
(*^▽^*)
产品诞生过程
- 5.4k
- 218
- 275
- 15
- 0
(*^▽^*)
产品周期图
- 6.8k
- 506
- 238
- 6
- 0
(*^▽^*)
开门红的思考
- 4.5k
- 2
- 86
- 1
- 0
wuyan
招创智搜
- 3.2k
- 0
- 10
- 0
- 0
零点
网易星球
- 2.0k
- 1
- 10
- 3
- 0
Risky
教学教务系统
- 3.2k
- 8
- 65
- 6
- 0
18993898710

第二周 web前端设计

五、css页面布局

1. 盒子模型和内容区

I. 盒子模型

A. width

B. height

C. overflow

页面中所有元素都可以看成一个盒子模型

II. 内容区

2. 边框Border

I. 边框宽度

II. 边框样式

III. 圆角边框

IV. 边框阴影

V. 圆像边框

3. 内边距和外边距

I. 内边距

II. 外边距

A. 外边距的用法

B. 外边距合并

4. DIV+CSS页面布局

六、Javascript语言基础

1. JavaScript简介

1. javascript发展史

2. javascript特点及规范

2. JavaScript

1. 行内Javascriot脚本

2. 内部javascript脚本

3. 内部javascript脚本

3. 基本语法

I. 标识符

II. 关键字

III. 数据类型

IV. 变量

V. 注释

4. 运算符

I. 赋值运算符

II. 算术运算符

III. 比较运算符

IV. 逻辑运算符

V. 三元运算符

5. 流程控制

I. 分支结构

II. 循环结构

III. 转移语句

IV. with语句

6. 函数

I. 预定义函数

II. 自动义函数

七、Javascript对象

1. Javascript对象

2. Array数组对象

I. 数组对象的创造

II. 数组对象的属性

III. 数组对象的常用方法

IV. 二维数组

3. String字符串对象

I. 字符串对象的创建

II. 字符串对象的常用方法

4. Date对象和math对象

I. date对象

A. date对象的创建

B. date对象的常用方法

II. math对象

A. math对象的属性

B. math对象的方法

5. regxp正则表达式

I. regexp对象的创建

II. regexp对象的方法

III. string和regexp

6. 自定义对象

I. 原始方式

II. 构造函数方式

III. 原型方式

IV. 混合方式

V. json方式

八、BOM与DOM编程

1. Bom和Dom模型

I. bom

II. dom

III. 事件机制

A. html元素的属性绑定事件

B. javascriipt脚本动态绑定事件

2. window对象

I. windom对象的属性

II. windom对象的方法

A. open（）方法

B. close()方法

C. setimeout()方法

D. cleartimeout()方法

E. setlnterval()方法

F. clearlnterval()方法

3. location和history对象

I. location对象的属性

II. location对象的方法

III. history对象

4. Document对象

I. 属性

A. referrer属性

B. cookie属性

II. 方法

A. write()和writeln()方法

B. getelementbyld()方法

C. getelementsbyname()方法

D. getelementbyld()方法

E. getelementsbyclassname()方法

F. queryselector()方法

G. queryselectorall()方法

5. form和table对象

I. Form对象

A. Submit() 表单数据提交到web服务器

B. reset() 对表单中的元素进行重置

II. table对象

III. 子主题

IV. 子主题

V. 子主题

VI. 子主题

6. 事件处理

I. 事件流和事件对象

II. Event对象的常见属性

III. 事件流和事件对象

IV. 鼠标事件

V. 键盘事件

VI. 文档事件

VII. 表单及表单元素事件

VIII. 贯穿任务实现

九、HTML5概述

1. HTML5概述

I. HTML5发展史

II. HTML5优势

A. 语义特性

B. 本地存储特性

C. 设备访问特性

D. 通信特性

E. 多媒体特性

F. 三维及图形特性

G. 性能与集成特性

H. CSS 3特性

I. 移动端特性

2. HTML5语法结构

I. HTML5标记方式

A. 标签不区分大小写

B. 结束标签可以省略

a. 空元素

b. 结束标签省略

c. 开始标签和结束标签同时省略

C. boolean属性的设置

D. 属性引号允许省略

II. HTML 5语法差异

3. HTML5文档结构

1. HTML5文档结构元素

A. <article>标签

B. <header>标签

C. <hgroup>标签

D. <nav>标签

E. <section>标签

F. <aside>标签

G. <footer>标签

2. HTML5其他标签

3. HTML5拖放API

dataTranSfer对象

4. HTML5表单元素

I. HTML5表单属性

A. form属性

B. formaction属性

C. formmethod表单属性

D. formtarget属性

E. placeholder属性

F. autofocus属性

G. required属性

H. list属性

I. pattern属性

J. novalidate属性

K. formnovalidate属性

L. autocomplete属性

II. 新增的input

A. email类型

B. url类型

C. number类型

D. range类型

E. datepickers类型

F. color类型

III. 自定义表单验证

十二、jQuery进阶

1. Jquery文档处理

I. 创建节点

$(htmlcode)

II. 插入节点

a. appendto()方法

b. prepend()方法

c. prepend()方法

d. after()方法

e. insert after（）方法

f. before()方法

g. insert before（）方法

III. 复制节点

IV. 删除节点

a. remove()方法

b. detach()方法

c. empty()方法

V. 包裹节点

a. wrap()方法

b. wraplnner()方法

c. unwrap()方法

2. 遍历节点

I. 祖先遍历

a. parent()方法

b. parents()方法

c. parentsuntil()方法

II. 后代便利

a. children()方法

b. find（）方法

c. contents（）方法

d. 子主题

III. 同胞便利

a. sibling()方法

b. next()方法

c. nextall()方法

d. next until（）方法

IV. 节点便利

a. filter（）方法

b. not()方法

3. Jquery动画效果

I. 显示和隐藏

II. 滑上和滑下

III. 淡入和淡出

IV. 自定义动画

V. 动画停止和延时

4. 数组和对象操作

I. each()方法

II. extend()方法

III. merge()方法

IV. unique()方法

V. parsejson()方法

5. jquery插件

I. 插件的基本原理

a. 封装全局函数的插件

b. 封装对象方法的插件

c. 自定义选择器插件

II. 表格插件的实现

III. 图标插件的实现

十一、jQuery基础

1. Jqyery概述

I. jquery优势

a. 访问和操作DOM元素

b. 强大的选择器

c. 可靠的事件处理机制

d. 完善的Ajax操作

e. 链式操作方式

f. 完善的文档

II. 搭建jquery开发环境

a. 引入JQuery库

b. jquery简单测试

III. dom对象和jquery对象

a. dom对象转成jquery对象

b. jquery对象转成dom对象

2. jquery选择器

I. 基本选择器

a. #id

b. .class

c. element

d. *

II. 层次选择器

III. 过滤选择器

a. 简单过滤选择器

b. 内容过滤选择器

c. 可见性过滤选择器

d. 属性过滤选择器

e. 子元素过滤选择器

f. 表单对象属性过滤选择器

IV. 表单选择器

3. jquery基本操作

I. 属性操作

a. attr()方法

b. removeAttr()方法

c. prop()方法

d. removeprop（）方法

II. 样式操作

a. addclass()方法

b. removeclass()方法

c. toggleclass()方法

d. css()方法

III. 内容操作

a. html()方法

b. text()方法

c. val()方法

4. jquery事件处理

I. 页面加载事件

II. 事件绑定

a. bind()

b. one()

c. toggle()

d. live()

e. delegate()

f. on()

g. hover()

III. 接触事件绑定

IV. 事件对象

十、HTML5进阶

1. Canvas绘图

I. <canvas>标签

II. context2D对象

III. 绘制图形

a. 绘制矩形

b. 绘制矩形边框

IV. 绘制图像

V. 绘制文字

VI. 绘制路径

VII. 绘制圆弧

VIII. 绘制渐变图形

a. 线性渐变

b. 径向渐变

IX. 图形坐标变换

a. 平移

b. 缩放

c. 旋转

2. 多媒体播放

I. HTML 5的多媒体支持

II. HTML 5多媒体API

3. Web存储

I. storage接口

II. session storage

III. local storage

4. 本地数据库

I. sqlite 数据库

var db=openDatebase(datebaseName,version,description,size;)

II. indexed DB数据库

a. 代码初始化

b. 打开数据库

c. 创建数据对象

d. 使用事务

e. 数据保存

f. 数据遍历

5. webworker

I. worKer基本应用

II. worker线程嵌套

javascript对象分为内置对象和自定义对象

append()方法

HTML文档标签更有利于搜索引擎检索

storage存储机制是对cookies的一种改善

dom对象和jquery对象可以互相转换

插件将一系列函数封装起来，便于代码的重复使用

贯穿任务实现

函数使脚本更加结构化、模块化

贯穿任务实现