web前端开发大纲.doc

资料收集于网络，如有侵权请联系网站删除 web前端开发教学大纲编写人： 石亚平 课 时： 80课时 一、 课程教学内容及目标4（一） 知识目标41. 掌握html、 html5、css、css3的基本语法；42. 掌握html5的canvas绘图；43. 熟练应用div+css 实现页面布局；44. 掌握JavaScript基本语法；45. 掌握DOM的基本用法；46. 掌握jQuery的基本用法；47. 熟悉w3c规范，了解各大主流浏览器的兼容性；48. 熟悉bootstrap框架4（二） 能力目标51. 通过本课程的学习要求学生掌握div+css实现页面的布局，实现静态页面；52. 通过JavaScript实现简单的交互功能；53. 通过jQuery简化js的原生代码，减少代码量；54. 通过bootstrap框架，实现页面快速布局55. 能解决各大浏览器的兼容性问题；5（三） 参考教材5JavaScript高级程序设计、W3School离线手册、jQuery1.9.3帮助文档5二、 课程教学内容及考核要求5第一单元：HTML基础51.1 Web基础知识51.2 HTML快速入门51.3 文本和图像61.4 表格和列表6第二单元：css基础172.1 CSS语法172.2 CSS基础选择器172.3 框模型和背景182.4 浮动和定位18第三单元：CSS3基础293.1 复杂选择器293.2 多列属性303.3 CSS Hack30第四单元 CSS3高级364.1 转换364.2 过渡364.3 动画36第五单元 JavaScript455.1 JavaScript概述455.2 JavaScript基础语法465.3 变量和常量46第六单元 JavaScript数据类型转换和运算符496.1数据类型496.2基本类型496.3 数据类型转换496.4 运算符49第七单元 JavaScript函数547.1 函数的定义547.2 函数的调用547.3 变量的作用域547.4 全局函数54第八单元 JavaScript分支结构588.1 什么是分支结构588.2 If语句588.3 If-else语句588.4 else if语句588.5 switch-case语句58第九单元 循环结构619.1 什么是循环结构619.2 While语句619.3 do-while语句619.4 For语句61第十单元 创建和访问数组6410.1 什么是数组6410.2 数组的定义和初始化6410.3 访问数组6410.4 数组的常用方法6410.5 二维数组64第十一单元 DOM6911.1 DHTML概述6911.2 DOM概述6911.3 节点信息6911.4通过HTML选取元素6911.5通过CSS选取元素69第十二单元 HTML5基础7212.1HTML5表单元素7212.2HTML5表单属性及验证72第十三单元 音视频处理和Canvas绘图7513.1视频处理7513.2音频处理7613.3Canvas概述7613.4Canvas绘图76第十四单元 jQuery7914.1jQuery介绍7914.2 jQuery的编程步骤7914.3jQuery对象7914.4jQuery选择器79第十五单元 jQuery操作DOM和jQuery事件8215.1查询8215.2样式操作8215.3遍历节点8215.4创建、插入、删除8215.5替换DOM节点8215.6复制DOM节点8215.7jQuery事件82第十六单元 jQuery动画效果和bootstrap起步8516.1隐藏和显示8516.2自定义动画8516.3并发与排队效果8516.4响应式网页概述8516.5编写响应式网页8616.6bootstrap概念86第十七单元全局CSS样式9417.1概述9417.2布局容器9417.3按钮9417.4图片9417.5表格9417.6排版9417.7栅格9417.8表单94一、 课程教学内容及目标（一） 知识目标1. 掌握html5、css3的基本语法；2. 掌握html5的canvas绘图；3. 掌握css3动画；4. 掌握JavaScript基本语法；5. 掌握DOM的基本用法；6. 掌握jQuery的基本用法和jQuery的动画效果；7. 熟悉w3c规范，了解各大主流浏览器的兼容性；8. 熟悉bootstrap框架（二） 能力目标1. 通过本课程的学习要求学生掌握css3新增的选择器和html5新增的表单元素；2. 会使用canvas绘图3. 通过JavaScript实现简单的交互功能；4. 通过jQuery简化js的原生代码，减少代码量；5. 通过bootstrap框架，实现页面快速布局6. 能解决各大浏览器的兼容性问题；（三） 参考教材JavaScript高级程序设计、W3School离线手册、jQuery1.9.3帮助文档二、 课程教学内容及考核要求第一单元：HTML基础 1.1 Web基础知识 1.1.1web简介 1.1.2web工作原理 1.1.3web浏览器1.2 HTML快速入门 1.2.1HTML概述超文本什么是HTML1.2.2HTML基础语法标记语法元素元素嵌套属性和值标准属性注释HTML和XHTML1.2.3文档结构HTML文档的结构文档类型声明元素元素文档头部内容-文档头部内容-元素1.3 文本和图像1.3.1 文本标记概述文本标记的作用文本与特殊字符1.3.2 使用文本标记文本样式标题元素段落元素换行元素分区元素和行内元素与块级元素分隔线元素1.3.3 图像和连接URL.1URL.2绝对路径.3相对路径图像.1图像格式.2图像元素链接.1链接元素.2链接的表现形式1.4 表格和列表 1.4.1表格的作用 1.4.2使用表格 创建表格 表格的常用属性 表格标题 1.4.3使用列表 列表的作用 有序列表 无序列表 列表嵌套【考核要求】1. 掌握组成web前端的三大语言Html，Css，JavaScript 2.了解web的工作原理1） 基于浏览器/服务器模式 （B/S）2） 由web服务器、浏览器和通信协议三部分组成 3.了解主要web浏览器产品 1）IE2） Firefox3） Chrome4） Opera5） Safari4. 掌握什么是HTML1） 超文本标记语言2） 用该语言编写的文件，以.html或者.htm为后缀3） 由浏览器解释执行4） Html不区分大小写，习惯上全小写5. 掌握标记语法1） 封闭类型标记（也叫双标记）：必须成对出现 例如：,等2） 非封闭类型标记（也叫空标记或者单标记） 例如：,等6. 掌握元素属性和值的写法 1）属性的声明必须位于开始标记里面 2）一个元素的属性可能不止一个，多个属性之间用空格隔开 3）多个属性之间不区分先后顺序 4）属性和值之间用等号连接 5）属性的值包含在引号中 例如：段落7.了解四个通用属性id,title,class,style8. 了解html和XHTML的区别XHTML是更严格的html版本，XHTML元素必须被关闭，单标记也要关闭9. 掌握html文档的基本结构 - DOCTYPE一般大写 -标题元素 - 定义字符集，防止乱码10. 了解标题元素的规则1） 标题元素的内容出现在浏览器顶部2） 没有属性3） 必须出现在元素中4） 一个文档只能有一个标题例如：我的第一个网页 11. 了解几个特殊字符< - © - -版权  - 空格12. 了解几个常见的文本样式 - 加粗 - 倾斜 - 下划线 - 删除线 - 上标 - 下标13. 了解6个标题样式,14. 掌握块级元素和行内元素的区别1） 块级元素：默认情况下，块级元素独占一行，即元素前后会自动换行例如：,-2） 行内元素：不会换行，和其他行内元素位于同一行例如：,15. 了解web页面主要二种路径形式1） 绝对路径 如：2） 相对路径 如：src=”images/logo.png”16. 掌握图像元素1) 作用：将图像添加到页面2) 单标记3) 必须属性：src4) 行内元素5) 常用属性：width,height例如：17. 掌握链接元素1） 作用：创建一个超链接2） 文本3） href属性：链接的地址 空链接设为#4） target属性：目标，可取值为 _blank、_self等18. 掌握表格的创建方法1） 定义表格：2） 创建表行：3） 创建表列：例如：创建一个两行三列的表格第一行，第一列第一行，第二列第一行，第三列第二行，第一列第二行，第二列第二行，第三列 19. 掌握列表的创建方法（有序列表和无序列表）1） 有序列表科比詹姆斯库里2） 无序列表科比詹姆斯库里3） 列表嵌套勇士库里湖人科比1. 项目1及步骤项目1执行步骤:1) 在中输入一对无序列表标签2) 在中插入9对列表项标签3) 在每对中输入对应的学院名称Html代码如下： demo 软工学院建筑学院传媒学院移动通信学院动画学院网工学院高翻学院俄语学院 基础学院 2. 项目2执行步骤:：1) 在中输入一对无序列表标签2) 在中插入5对列表项标签3) 在每对中输入对应的歌曲及歌手的名字Html代码如下： demo bad girl-吴亦凡 逆战-张杰 李白-李荣浩 sugar-Maroon 5 放纵-权志龙 3. 项目3执行步骤:1) 在中输入两对有序列表2) 在每对中输入对应的国家名称3) 在每对ol的下面各添加3对4) 在每对中输入对应的城市名称Html代码如下： demo 中国城市北京上海 广州 美国城市华盛顿 芝加哥 纽约 4. 项目4执行步骤:1) 在中输入无序列表标签2) 在中输入7对标签3) 在写入对应的新闻信息4) 为每一条新闻加上超链接，注意：超链接标签必须嵌套到li标签里，直接包含文字。5) 设置超链接的href的属性值为“#”实现空链接。Html代码如下： demo 呱呱首届网络诗歌朗诵首届网络朗诵大赛再添辉煌年轻选手我的心声势宏大再起风云10进5谁与争锋新人诞生的摇篮耿耿老师妙语连珠殷瑜老师第四日点评 5. 项目5执行步骤:创建一个宽200，高80的三行三列的表格1) 查看该表格的结构为三行三列的表格;2) 向网页中插入表格的标签3) 在table中插入3对行标记4) 在每个tr中插入3对单元个格标记5) 在每个td中插入相应的文字6) 设置表格属性：宽(width)、高(height)、边框(border)7) 设置每个tr属性：水平居中（align）Html代码如下： demo 文字文字单元格 文字文字单元格 文字文字单元格 第二单元：css基础2.1 CSS语法 2.1.1 css概述 css的作用 什么是css css与html之间的关系 2.1.2 使用css样式表 使用css样式表的方式 内联方式使用css 内部样式表 外部样式表 2.1.3 css语法规范css语法规范总结css样式表特征样式优先级！Important规则2.2 CSS基础选择器2.2.1通用选择器2.2.2元素选择器2.2.3类选择器2.2.4id选择器2.2.5群组选择器2.2.6后代选择器2.2.7子代选择器2.2.8伪类选择器2.2.9选择器优先级2.3 框模型和背景 2.3.1框模型 2.3.2 外边距什么是外边距外边距margin外边距的简洁写法外边距合并 2.3.3 内边距什么是内边距内边距padding内边距的简洁写法 2.3.4 背景属性背景色background-color背景图片background-image背景重复background-repeat背景图片尺寸background-size背景图片的固定background-attachment背景定位background-position2.4 浮动和定位2.4.1 定位概述什么是定位定位属性2.4.2 浮动定位浮动概述浮动定位float属性clear属性2.4.3 定位方式相对定位绝对定位堆叠顺序固定定位【考核要求】1. 掌握什么是css1） 层叠样式表，又叫级联样式表，简称样式表2） 定义html中的样式3） 实现了内容与表现分离4） 提高了代码的可重用性和可维护性2. 了解css与html之间的关系1） html用于构建网页的结构2） Css用于构建html元素的样式3） Html是页面的内容组成，css是页面的表现3. 掌握css样式表的三种方式1） 内联样式-定义在单个html元素中2） 内部样式表-样式定义在html页的头元素中3） 外部样式表-将样式表定义在一个外部的css文件中(.css文件)-由html页面引用样式表文件4. 了解内联样式表1） 样式定义在html元素的标准属性style里2） 属性和属性值之间用：连接3） 多对属性之间用；隔开4） 如：我是一号标题 5. 掌握内部样式表1） 样式表定义在文档头元素中的元素内2） 在元素中添加样式规则3） 如：h1color:red htmlcss6. 掌握外部样式表1） 创建一个单独的样式表文件用来保存样式规则2） 文件后缀为.css3） 使用元素链接需要的外部样式表4） 5） 该文件只能包含样式规则6） 样式规则由选择器和样式声明组成7） 如： 7. 掌握css选择器分类1） 通用选择器 - *2） 元素选择器 - html文档中的元素，如：,3） 类选择器 - .className4） id选择器 - #idName5） 群组选择器6） 后代选择器7） 子代选择器8） 伪类选择器8. 了解通用选择器 - *1） 可以与任何元素匹配2） 常用于设置一些默认样式3） 如：*font-size:10px;font-family:”Times New Roman”; 9. 了解元素选择器1） html文档中的元素2） 如：htmlcolor:black;h1color:blue;h2color:red;10. 掌握类选择器1） 语法：.classname2） 类名称不能以数字开头3） 所有有class属性的元素都可以使用此样式声明4） 如： 5） 可以将多个类选择器应用在同一个元素上，用空格分隔，如：11. 掌握id选择器1） 仅作用于id属性值2） 选择器前面有一个#号3） 选择器本身则为文档中的某个元素的id属性的值12. 掌握群组选择器1） 以逗号隔开的选择器列表2） 将一些相同的规则作用于多个元素3） 如：html代码这是一个段落这是一个二号标题 Css代码：h2,.importantcolor:green;font-size:30px;border:1px solid red;13. 掌握后代选择器1） 用空格分隔2） 如：html代码：后代 选择 器后代选择器Css代码：h1 spancolor:red;14. 掌握子代选择器1） 子代选择器要求选择器之间只能存在父子关系2） 使用大于号()连接3）15. 掌握伪类选择器1） 使用冒号(:)连接，冒号左边是其他选择器，右边是伪类2） 选择器:伪类选择器 3）分类： 动态伪类:hover - 适用于鼠标悬停时 14.掌握框模型总尺寸=外边距+边框+内边距+内容17. 掌握外边距 - margin1） 围绕在元素边框周围的空白区域是外边距2） 外边距是透明的3） 会在元素外创建额外的空白4） 单边设置margin-top/margin-bottom/margin-left/margin-right如：margin-top:10px;margin-left:20px;5) 外边距简写方式margin:value; - 四个方向相同margin:value value; - 上下 左右margin:value value value; - 上 左右 下margin:value value value value; - 上 右 下 左如：margin:10px 20px 30px 40px;6) 使用外边距实现元素左右居中margin:0 auto;18. 掌握内边距 - padding1） 内容区域和边框之间的空间就是内边距2） 内边距会扩大元素边框所占用的区域3） 单边设置padding-top/padding-bottom/padding-left/padding-right如：padding-top:10px;padding-left:20px;4）内边距简写方式padding:value; - 四个方向相同padding:value value; - 上下 左右padding:value value value; - 上 左右 下padding:value value value value; - 上 右 下 左如：padding:10px 20px 30px 40px;19. 掌握背景属性1） 背景色 - background-color2） 背景图片 - background-image3） 背景重复 - background-repeat4） 背景图片尺寸 - background-size20. 了解几种定位方式1） 普通流定位2） 浮动定位3） 相对定位4） 绝对定位21. 掌握浮动定位 - float1） 将元素排除在普通流之外，元素将不在页面占用空间2） 将浮动元素放置在包含框左边或者右边3） 浮动元素依旧位于包含框之内4） 浮动元素不会互相重叠5） 浮动元素不会上下浮动6） 左浮: float:left; 右浮： float:right;22. 掌握相对定位 - relative1） 元素原本所占的空间仍保留2） 元素仍保持其未定位前的形状3） 语法：position:relative;4） 使用left和right设置水平方向的偏移量；使用top和bottom设置垂直方向的偏移量5） 如：position:relative;top:10px;left:20px;23. 掌握绝对定位 - absolute1） 将元素的内容从普通流中完全移除，不占据空间2） 相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么他的位置相对于body元素定位3） 语法：position:absolute;4） 使用left和right设置水平方向的偏移量；使用top和bottom设置垂直方向的偏移量24.掌握堆叠顺序 - z-index1）值为数值2）数值越大表示堆叠顺序更高，即离用户更近3）可以设置为负值，表示离用户更远4）如： z-index:999;25.掌握固定定位1）元素从普通流中完全移除，不占用页面空间2）当用户向下滚动页面时元素框并不随着移动3）语法： position:fixed;4）使用left和right设置水平方向的偏移量；使用top和bottom设置垂直方向的偏移量1.项目1及步骤1) 在网页中输入段落标签，在其中输入6对标签2) 在span标签内部分别输入字母：G、o、o、l、e3) 设置p标签样式：字号130px、字体Times New Roman、文字颜色属性4) 给网页相应需要变色的字母添加相应的类别选择器.red .yellow .green5) 给相应的span标签应用相应的类选择器6) 代码为：Html代码：Googlecss代码： pfont-size:130px; font-family:Times New Roman; color:#1269eb; .red color:#da4530; .yellow color:#ffb800; .green color:#009756;2.项目2执行步骤: 1) 向网页中插入标签2) 在头部插入标签3) 设置div的尺寸属性：宽200像素，高100像素4) 利用border复合属性设置div的四周的5px、红色的实线边框5) 将下边框border-bottom改写为：3px、绿色的虚线(dashed)边框6) 代码为：Html代码： Css代码：divwidth:200px;height:100px;border:5px #FF0000 solid;border-bottom:3px #00FF00 dashed;第三单元：CSS3基础3.1 复杂选择器3.1.1兄弟选择器相邻兄弟选择器通用兄弟3.1.2属性选择器3.1.3伪类选择器目标伪类结构伪类否定伪类3.1.4伪元素选择器伪元素：first-letter伪元素：firs-line伪元素：selection3.2 多列属性3.3.1分隔列3.3.2列间隔3.3.3列规则3.3 CSS Hack 3.3.1标准模式和混杂模式3.3.2什么是css hack3.3.3css hack的原理3.3.4css类内部hack【考核要求】 1.掌握复杂选择器分类1） 兄弟选择器2） 属性选择器3） 伪类选择器4） 伪元素选择器2. 掌握兄弟选择器 - 选择当前元素，平级元素的唯一方式1） 相邻兄弟选择器 - + 选择器1 + 选择器2 选择紧接在另一个元素后的一个元素(平级、一个、相邻之后)2） 通用兄弟选择器 - 选择器1 选择器2 选择之后所有符合条件的平级元素(平级、之后所有)3. 掌握属性选择器 - 自定义选择器条件1） 属性名 - 选择包含指定属性名的所有元素如：title - 选择网页中所有包含title属性的元素缺点：范围比较泛2） 其他属性值属性名 - 选择网页中所有包含指定属性名的指定属性值如：imgtitle - 选择网页中所有包含title的img元素3） 自定义条件(4)语法：其他选择器条件精确条件：属性名=”属性值” - 选择包含指定属性，且属性值等于指定属性值得元素如：pid=”logo” - 选择包含id属性的元素，其中id属性的值为logo模糊条件：属性名=”关键字” - 选择包含指定属性，且属性值必须以关键字开头如：pclass=”b” - 选择class属性值以b开头的所有元素模糊条件：属性名$=”关键字” - 选择包含指定属性，且属性值必须以关键字结尾如：pclass$=”b” - 选择class属性值以b结尾的所有元素模糊条件：属性名*=”关键字” - 选择包含关键字的指定属性值如：pclass*=”b” - 选择class属性值中包含字串b的所有元素4.掌握伪类选择器1） 目标伪类 - ：target 选取当前正在被跳转到的锚点元素一次只可能选中一个元素唯一一个可以触发其他元素样式变化的伪类2） 结构伪类 - 选择处在特殊位置上的子元素:first-child - 匹配其父元素的首个子元素 - 写在子元素上:last-child - 匹配其父元素的最后一个子元素 - 写在子元素上:only-child - 匹配其父元素唯一子元素 - 写在子元素上:empty - 匹配没有子元素的每个元素，必须为空，空格也不行 -写在父元素上3）否定伪类 ：not( ) - 匹配非指定元素的每个元素5.掌握伪元素选择器1） :first-letter - 用于选取指定选择器的首字母2） :first-line - 用于选取指定选择器的首行3） :selection - 选择器匹配被用户选取的部分 - 了解6.了解多列属性 - 仅IE和opera支持 -不考核1） 分隔列 - column-count:;如：column-count:3;2） 列间隔 - column-gap:;如：column-gap:45px;3） 列规则 - column-rule:;如：column-rule:2px solid red;4） 例如：Html代码：大量文本.(大量文本略)Css代码：divwidth:400px;height:130px;border:1px solid black;column-count:3;column-gap:45px;column-rule:2px solid red;7.了解css hack1）为解决浏览器兼容性问题，为特定浏览器专门定义的css代码2）重点解决旧版本浏览器兼容性问题3）css hack的原理css类内部hack - 在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀如：* + - _ # 等选择器hackhtml头部引用hack8.了解浏览器运行模式1）标准模式：严格按照XHTML或html4.0标准解析网页，只要符合标准的网页，在不同浏览器显示效果应该是一致的2）混杂模式：按照浏览器自带的规则解析网页，没有标准可循，同一网页在不同浏览器显示效果可能不一致解决办法：声明DOCTYPE1.项目1及执行步骤运用属性选择器，实现以上效果1） 在页面插入一个元素和两个元素2） 给元素添加title属性和id属性3） 给两个元素添加id属性4） 在样式表中给h1添加黄色背景5） 在样式表中给两个元素添加边框6） 在样式表中修改段落2的文字为红色7） 代码如下：Html代码： h1 text段落一段落2 Css代码：titlebackground-color:yellow;pidborder:1px solid red;pid=p2color:red;2.项目2及执行步骤运用结构伪类选择器，实现以上效果1） 向页面插入元素2） 向元素中插入四个元素3） 在样式表中选择第一个元素，字体颜色设置为蓝色4） 在样式表中选择最后一个元素，字体颜色设置为红色5） 在样式表中选择空元素，设置高为20px，并添加绿色边框6） 在样式表中选择唯一子元素，添加黑色边框7） 代码如下：Html代码：段落1段落2段落3 Css代码：P:first-childcolor:blue;P:last-childcolor:red;P:emptyborder:1px solid green;height:20px;div:only-childborder:1px solid black;第四单元 CSS3高级4.1 转换4.1.1转换简介什么是转换转换属性转换的原点4.1.22D转换2D位移2D缩放2D旋转2D倾斜4.2 过渡4.2.1过渡概述什么是过渡过渡示例触发过渡4.2.2过渡子属性过渡属性transition-property过渡时间transition-duration过渡函数transition-timing-function过渡延迟transition-delay4.3 动画4.3.1动画概述什么是动画动画示例4.3.2关键帧keyframes的作用keyframes的语法4.3.3动画属性动画子属性animation属性动画与过渡【考核要求】1. 掌握转换(变形) - transform1） 转换是使元素改变形状、尺寸和位置的一种效果2） 2D转换使元素在X轴和Y轴平面上发生变化3） 参照原点 - transform-origin:;默认情况下，转换的参照原点在元素的中心点,坐标（width/2,height/2）坐标原点：在元素的左上角，坐标（0,0）修改参照原点：transform-origin：数值/百分比/关键字；数值：一个值 - 表示所有轴的位置 两个值 - 表示X轴和Y轴 三个值 - 表示X轴、Y轴和Z轴关键字：right、left、top、bottom2. 掌握变形的四个函数1） 旋转 - rotate定义：围绕一个参照原点，旋转指定角度语法：transform:rotate(n deg);n：度数 deg：单位如：transform:rotat