最新web前端开发大纲.doc

《最新web前端开发大纲.doc》由会员分享，可在线阅读，更多相关《最新web前端开发大纲.doc（100页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精品资料web前端开发大纲. web前端开发教学大纲编写人： 石亚平 课 时： 80课时 一、 课程教学内容及目标（一） 知识目标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

2、实现简单的交互功能；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概述1.2.1.1超文本1.2.1.2什么是HTML1.2.2HTML基础语法1.2.2.1标记语法1.2.2.2元素1.2.2.3元素嵌套1.

3、2.2.4属性和值1.2.2.5标准属性1.2.2.6注释1.2.2.7HTML和XHTML1.2.3文档结构1.2.3.1HTML文档的结构1.2.3.2文档类型声明1.2.3.3元素1.2.3.4元素1.2.3.5文档头部内容-1.2.3.6文档头部内容-1.2.3.7元素1.3 文本和图像1.3.1 文本标记概述1.3.1.1文本标记的作用1.3.1.2文本与特殊字符1.3.2 使用文本标记1.3.2.1文本样式1.3.2.2标题元素1.3.2.3段落元素1.3.2.4换行元素1.3.2.5分区元素和1.3.2.6行内元素与块级元素1.3.2.7分隔线元素1.3.3 图像和连接1.3.3

4、.1URL1.3.3.1.1URL1.3.3.1.2绝对路径1.3.3.1.3相对路径1.3.3.2图像1.3.3.2.1图像格式1.3.3.2.2图像元素1.3.3.3链接1.3.3.3.1链接元素1.3.3.3.2链接的表现形式1.4 表格和列表 1.4.1表格的作用 1.4.2使用表格 1.4.2.1创建表格 1.4.2.2表格的常用属性 1.4.2.3表格标题 1.4.3使用列表 1.4.3.1列表的作用 1.4.3.2有序列表 1.4.3.3无序列表 1.4.3.4列表嵌套【考核要求】1. 掌握组成web前端的三大语言Html，Css，JavaScript 2.了解web的工作原理1

5、） 基于浏览器/服务器模式 （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）一个元素的属性可能不止一个，多个属性之

6、间用空格隔开 3）多个属性之间不区分先后顺序 4）属性和值之间用等号连接 5）属性的值包含在引号中 例如：段落7.了解四个通用属性id,title,class,style8. 了解html和XHTML的区别XHTML是更严格的html版本，XHTML元素必须被关闭，单标记也要关闭9. 掌握html文档的基本结构 - DOCTYPE一般大写 -标题元素 - 定义字符集，防止乱码10. 了解标题元素的规则1） 标题元素的内容出现在浏览器顶部2） 没有属性3） 必须出现在元素中4） 一个文档只能有一个标题例如：我的第一个网页 11. 了解几个特殊字符< - © - -版权 

7、 - 空格12. 了解几个常见的文本样式 - 加粗 - 倾斜 - 下划线 - 删除线 - 上标 - 下标13. 了解6个标题样式,14. 掌握块级元素和行内元素的区别1） 块级元素：默认情况下，块级元素独占一行，即元素前后会自动换行例如：,-2） 行内元素：不会换行，和其他行内元素位于同一行例如：,15. 了解web页面主要二种路径形式1） 绝对路径 如：2） 相对路径 如：src=”images/logo.png”16. 掌握图像元素1) 作用：将图像添加到页面2) 单标记3) 必须属性：src4) 行内元素5) 常用属性：width,height例如：17. 掌握链接元素1） 作用：创建一

8、个超链接2） 文本3） href属性：链接的地址 空链接设为#4） target属性：目标，可取值为 _blank、_self等18. 掌握表格的创建方法1） 定义表格：2） 创建表行：3） 创建表列：例如：创建一个两行三列的表格第一行，第一列第一行，第二列第一行，第三列第二行，第一列第二行，第二列第二行，第三列 19. 掌握列表的创建方法（有序列表和无序列表）1） 有序列表科比詹姆斯库里2） 无序列表科比詹姆斯库里3） 列表嵌套勇士库里湖人科比1. 项目1及步骤项目1执行步骤:1) 在中输入一对无序列表标签2) 在中插入9对列表项标签3) 在每对中输入对应的学院名称Html代码如下： dem

9、o 软工学院建筑学院传媒学院移动通信学院动画学院网工学院高翻学院俄语学院 基础学院 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) 在中输入无序

10、列表标签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)

11、 设置表格属性：宽(width)、高(height)、边框(border)7) 设置每个tr属性：水平居中（align）Html代码如下： demo 文字文字单元格 文字文字单元格 文字文字单元格 第二单元：css基础2.1 CSS语法 2.1.1 css概述 2.1.1.1css的作用 2.1.1.2什么是css 2.1.1.3css与html之间的关系 2.1.2 使用css样式表 2.1.2.1使用css样式表的方式 2.1.2.2内联方式使用css 2.1.2.3内部样式表 2.1.2.4外部样式表 2.1.3 css语法规范2.1.3.1css语法规范总结2.1.3.2css样式表特

12、征2.1.3.3样式优先级2.1.3.4！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 外边距2.3.2.1什么是外边距2.3.2.2外边距margin2.3.2.3外边距的简洁写法2.3.2.4外边距合并 2.3.3 内边距2.3.3.1什么是内边距2.3.3.2内边距padding2.3.3.3内边距的简洁写法 2.3.4 背景属性2.3.4.1背景色backg

13、round-color2.3.4.2背景图片background-image2.3.4.3背景重复background-repeat2.3.4.4背景图片尺寸background-size2.3.4.5背景图片的固定background-attachment2.3.4.6背景定位background-position2.4 浮动和定位2.4.1 定位概述2.4.1.1什么是定位2.3.1.2定位属性2.4.2 浮动定位2.4.2.1浮动概述2.4.2.2浮动定位2.4.2.3float属性2.4.2.4clear属性2.4.3 定位方式2.4.3.1相对定位2.4.3.2绝对定位2.4.3.3

14、堆叠顺序2.4.3.4固定定位【考核要求】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） 样

15、式定义在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） 类选择器 - .className

16、4） 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） 可以将多个类选择器应用在同一个

17、元素上，用空格分隔，如：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） 子代选择器要求选择器之

18、间只能存在父子关系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

19、: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如：pad

20、ding-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） 背景图片尺寸 - b

21、ackground-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设置水平方向的偏移量；使用

22、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-i

23、ndex: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) 代

24、码为：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代码：

25、 Css代码：divwidth:200px;height:100px;border:5px #FF0000 solid;border-bottom:3px #00FF00 dashed;第三单元：CSS3基础3.1 复杂选择器3.1.1兄弟选择器3.1.1.1相邻兄弟选择器3.1.1.2通用兄弟3.1.2属性选择器3.1.3伪类选择器3.1.3.1目标伪类3.1.3.2结构伪类3.1.3.3否定伪类3.1.4伪元素选择器3.1.4.1伪元素：first-letter3.1.4.2伪元素：firs-line3.1.4.3伪元素：selection3.2 多列属性3.3.1分隔列3.3.2列间隔3

26、.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） 属性名 - 选择包含指定属

27、性名的所有元素如：title - 选择网页中所有包含title属性的元素缺点：范围比较泛2） 其他属性值属性名 - 选择网页中所有包含指定属性名的指定属性值如：imgtitle - 选择网页中所有包含title的img元素3） 自定义条件(4)语法：其他选择器条件精确条件：属性名=”属性值” - 选择包含指定属性，且属性值等于指定属性值得元素如：pid=”logo” - 选择包含id属性的元素，其中id属性的值为logo模糊条件：属性名=”关键字” - 选择包含指定属性，且属性值必须以关键字开头如：pclass=”b” - 选择class属性值以b开头的所有元素模糊条件：属性名$=”关键字”

28、- 选择包含指定属性，且属性值必须以关键字结尾如：pclass$=”b” - 选择class属性值以b结尾的所有元素模糊条件：属性名*=”关键字” - 选择包含关键字的指定属性值如：pclass*=”b” - 选择class属性值中包含字串b的所有元素4.掌握伪类选择器1） 目标伪类 - ：target 选取当前正在被跳转到的锚点元素一次只可能选中一个元素唯一一个可以触发其他元素样式变化的伪类2） 结构伪类 - 选择处在特殊位置上的子元素:first-child - 匹配其父元素的首个子元素 - 写在子元素上:last-child - 匹配其父元素的最后一个子元素 - 写在子元素上:only-

29、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-g

30、ap: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样式属性名前加上一些只有特定

31、浏览器才能识别的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=p2