《Web前端开发技术——HTML5、CSS3、JavaScript(第3版)》教学大纲
web前端开发技术(第3版)储九良著课后实验11
课后实验11：CSS3动画与过渡1. 实验目的本实验通过实践掌握CSS3动画和过渡的基本用法，熟练运用动画效果和过渡效果，提升网页的用户体验。
2. 实验内容本实验包括以下内容：- 利用CSS3实现简单的动画效果- 利用CSS3实现过渡效果- 结合HTML与CSS3创建漂亮的动画效果和过渡效果3. 实验步骤3.1 实现简单的动画效果在实现简单的动画效果时，首先需要新建一个HTML文件，并在文件中引入CSS样式表。
在CSS样式表中，利用keyframes规则来定义动画关键帧，然后通过animation属性来应用这些关键帧。
示例代码如下：```html<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"> <style>keyframes mymove {0 {left: 0px;}100 {left: 200px;}}div {width: 100px;height: 100px;background-color: red;position: relative;animation: mymove 5s infinite;}</style></head><body><div></div></body></html>```通过上述代码，可以实现一个简单的动画效果，div元素将在5秒内从左向右移动，然后重新开始动画。
3.2 实现过渡效果在实现过渡效果时，可以使用transition属性来控制元素的过渡效果。
通过设置transition的属性值，可以实现元素在不同状态下的平滑过渡效果。
示例代码如下：```html<!DOCTYPE html><html><head><style>div {width: 100px;height: 100px;background: red;transition: width 2s;}div:hover {width: 300px;}</style></head><body><div></div></body></html>```通过上述代码，可以实现一个简单的过渡效果，当鼠标悬停在div元素上时，div元素的宽度将在2秒内平滑过渡到300px。
Web前端开发技术 (第3版)储久良1
3 ftp 4 mailto
文件传输协议 电子邮件地址
5 ldap 6 news 7 file
轻型目录访问协议搜索 Usenet新闻组 当地电脑或网上分享的文件
8 gopher
Internet Gopher Protocol (Internet 查找协议)
教育部高等学校软件工程专业教学指导委员会规划教材
括代码的可维护性、组件的易用性和浏览器兼容性等。
教育部高等学校软件工程专业教学指导委员会规划教材
第1章 Web前端开发技术综述
Page: 11
Web前端开发技术-HTML5、CSS3、JavaScript
1.3 Web前端开发技术
1.3.1 HTML HTML是SGML（Standard Generalized Markup
教育部高等学校软件工程专业教学指导委员会规划教材
第1章 Web前端开发技术综述
Page: 10
1.2 Web前端开发工程师职业需求
Web前端开发技术-HTML5、CSS3、JavaScript
我国互联网行业的发展呈现迅猛的增长势头，对网站开发、 设计制作的人才需求随之大量增加。前端开发和后台开发人员的 比例为1：1，而在我国目前依旧在1：3以下，人才缺口较大。
Language，标准通用标记语言）下的一个应用(也称为一个子集) ，也是一种标准规范，它通过标记符号来标记要显示的网页中的 各个部分。而SGML是一种定义电子文档结构和描述其内容的国 际标准语言，是所有电子文档标记语言的起源。
HTML是构成Web页面(Page)的基础。 HTML文档：用来描述网页，由HTML 标记和纯文本构成文 本文件。不同于纯文本文件（不含HTML标记）。
协议类型://服务器地址（端口号）/ 路径/文件名 http://info.cern.ch/www20/0002 /kexuetansuo_1 2385/index.shtml
HTML5与CSS3 web前端开发技术习题答案
第一章1．简答题（1）在Web前端开发方面，HTML5与HTML4比较，主要解决哪几方面的问题？HTML5的核心在于解决当前Web开发中存在的各种问题。
一是解决Web浏览器之间的兼容性问题。
在一个浏览器上正常显示的网页（或运行的Web 应用程序），很可能在另一个浏览器上不能显示或显示效果不一致；二是文档结构描述的问题。
HTML4之前的各版本中，HTML文档的结构一般用div元素描述，文档元素的结构含义不够清晰；三是使用HTML+CSS+JavaScript开发Web应用程序时，开发功能受到很大的限制，比如本地数据存储功能、多线程访问、获取地理位置信息等，这些都影响了用户的体验。
（2）HTML5新增的全局属性有哪几个？描述其主要功能。
HTML5新增的全局属性，是指可以对任何元素都使用的属性。
功能如下所示。
（3）HTML5是下一代Web语言的开发框架，典型特性有哪些？HTML5从标记语言的功能提升到下一代Web语言的开发框架，他集成了HTML+CSS3+JavaScript的Web应用框架。
良好的语义特性。
HTML5支持微数据与微格式，增加的各种元素赋予网页更好的意义和结构，适于构建对程序、对用户都更有价值的数据驱动的Web应用。
HTML5增加了section元素、article元素、nav元素以及aside元素等结构元素。
强大的绘图功能。
通过使用Canvas API动态地绘制各种效果精美的图形，也可以通过SVG 绘制可伸缩矢量图形。
增强的音视频播放和控制功能。
新增了audio和video 元素，可以不依赖任何插件而播放音频和视频。
HTML5的数据存储和数据处理的功能。
包括离线应用、Web通信、本地存储等功能，HTML5还支持WebSQL和IndexedDB等轻量级数据库，增强了数据存储和数据检索能力。
获取地理位置信息。
HTML5新增了Geolocation API规范，应用于移动设备中的地理定位。
Web前端开发任务驱动式教程HTML5CSS3JavaScript任务9复合选择器通配符选择器课件
图4
任务小结
交集选 择器
并集选 择器
后代选 择器
通配符 选择器
同时应 用多个 样式
课后实训
设计并制作“杭州西湖”景点网页，效果如图所示。
谢谢观看
两个选择器之间不能有空格，必须连续书写。
<p id="red">这个段落是红色。</p> <p class="green">这个段落是绿色。</p>
p#red p.green
知识准备
示例：交集选择器的使用
<style type="text/css"> p{ color: #F00; } .p1 { color: #0F0; } h2.p1 { color: #00F; }
</body>
知识准备
1. 复合选择器
后代：某标记内嵌套的所有子元素，都称为该标记的后代。 后代选择器：把外层的标记写在前面，内层的标记写在后面，之间
用空格分隔。 <h1>热烈庆祝<span>第三十届</span>牡丹文化节召开</h1> h1 span
知识准备
示例：后代选择器的使用
<style type="text/css"> span { text-decoration: underline; } h2 span { color: #F00; } h3 span { color: #00F; } .uu li ul li { font-weight: bold; color: #00F; }
</style>
v3_Chap10-Web前端开发技术—HTML5、CSS3、JavaScript(第3版)-储久良
分别进行DIV 分区设计，写 出DIV结构代 码和CSS样式 文件。
教育部高等学校软件工程专业教学指导委员会规划教材
5.多行三列模式
第10章 DIV+CSS 页面布局
6.多行四列模式
Page: 6
多行三列模式页面布局案例
Web前端开发技术-HTML5、CSS3、JavaScript
设计步骤：1.写出DIV结构； 2.编写CSS文件
本章学习目标
Web 前端开发工程师应掌握以下内容： 熟练地使用DIV标记的CSS各类属性。 掌握CSS定义与引用方法，学会使用外部样式表定义页面样式。 熟悉各类常见的页面布局类型，能够写出相应的DIV结构及CSS 规则。 学会使用DIV+CSS进行页面布局，能够编写HTML代码和CSS 文件。
Web前端开发技术-HTML5、CSS3、JavaScript
第10章 CSS+DIV页面布局（1-2课时）
头部 导航 大图Βιβλιοθήκη 播 其它DIV教育部高等学校软件工程专业教学指导委员会规划教材
第10章 DIV+CSS 页面布局
Page: 1
Web前端开发技术-HTML5、CSS3、JavaScript
2.三列模式
第10章 DIV+CSS 页面布局
Page: 4
Web前端开发技术-HTML5、CSS3、JavaScript
10.1.2 “三行二列”、“三行三列”模式
此模式特点是先将整个页面水平分成三个区域，再将中间区域 分成两列或三列。分别进行DIV分区设计，写出DIV结构代码和CSS 样式文件。
教育部高等学校软件工程专业教学指导委员会规划教材
第10章 DIV+CSS 页面布局
v3_Chap15-Web前端开发技术—HTML5、CSS3、JavaScript(第3版)-储久良
<script type=“text/javascript”for=“对象” event=“事件”> //事件处理程序代码
</script>
教育部高等学校软件工程专业教学指导委员会规划教材
第15章 JavaScript事件分析
Page: 7
15.1.3 事件处理-静态指定
Web前端开发技术-HTML5、CSS3、JavaScript
function testInfo(mes) {alert(mes);} </script> <body> <h2>HTML属性的事件处理器举例</h2> <input type="button" value="直接通过JS语句输出信息" onclick="alert('单击按钮，直接输出信 息')"> <input type="button" value="通过函数输出信息" onclick="testInfo('单击按钮，调用函数输出信 息')"> </body>
当鼠标指针悬停于某元素之上时执行JS代码 当鼠标按钮被松开时执行JS代码 当键盘被按下时执行JS代码 当键盘被按下后又松开时执行JS代码 当键盘被松开时执行JS代码
第15章 JavaScript事件分析
Page: 6
Web前端开发技术-HTML5、Ceb 前端开发工程师应掌握以下内容： 了解JavaScript事件类型。 理解事件发生时事件处理的三种方式。 学会利用表单的提交及重置事件对表单的数据进行校验。 理解鼠标事件中的鼠标单击及鼠标移动事件。 掌握常用的键盘及窗口事件。
Web前端开发任务驱动式教程HTML5CSS3JavaScript任务17视频与音频课件
知识准备
2. 嵌入音频
ቤተ መጻሕፍቲ ባይዱ入音频：<audio src="音频文件路径" controls="controls"></audio>
属性 src controls autoplay width height loop preload
属性值 url地址 controls autoplay 像素值 像素值
知识准备
3. source标签
source标签：没有一种视频格式或音频格式让所有的浏览器都支持， source标签用于指定多个备用的不同格式文件的路径，浏览器将使用 第一个可识别的格式。
<vauiddeio wcoindtrho=ls"=32"c0o"nhteroiglsh"t>="240" controls="controls"> <source src="msoonvgi.eo.gogg"g"tytpyep=e"=a"uvdidioe/oo/gogg"g>"> <source src="msoonvgi.em.mp3p"4"tytpyep=e"=a"uvdidioe/om/mpepg4"">> 您的浏览器不支持该播放文件。 <<//vaiuddeioo>>
loop
preload
含义说明 要播放音频的URL。 如果出现该属性，则向用户显示控件，比如播放按钮。 如果出现该属性，则音频在就绪后马上播放。 设置音频播放器的宽度。 设置音频播放器的高度。 如果出现该属性，则当音频文件完成播放后再次开始播放。 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)-首页
讲授新课内容
授课过程中穿插提问
辅导学生上机操作实践
认真听讲并思考
思考并回答问题
上机操作完成任务
电脑
投影仪
传奇软件
网络
讨论、思考题、作业：
5-17
部门领导意见：
教研室主任签章：2021年 8 月 31 日
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
张老师
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
张老师
部 门
软件与信息学院
课程名称
前端设计与开发
编号
1
适用班级
-班级编号-
课时安排
2学时
教学课型：√理论课 □实验课 □体育课 □习题课 □实训课□实践环境课
教案介质
√纸质√电子
教案篇幅
√打印稿1页 □手写稿__页
√PPT23幅 □有其他电子文件
复习上次课程重点内容
讲授新课内容
授课过程中穿插提问
辅导学生上机操作实践
认真听讲并思考
思考并回答问题
上机操作完成任务
电脑
投影仪
传奇软件
网络
讨论、思考题、作业：
4-11、4-12
部门领导意见：
教研室主任签章：2021年 8 月 31 日
XXXX职业技术学院教案首页
编号：JX/GC7.1-01-JL03
教师姓名
65分钟
10分钟
1、引言
1）简述CSS的引用方法
2）简述基本选择器
3）简述复合选择器
2、CSS基础
1）选择器
伪类和伪元素选择器
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)授课计划
2
掌握JavaScript函数
讲练结合
132号楼机房
3-2电子时钟
7.JavaScript对象（8学时）
7.1JavaScript对象的基本概念
10
2
了解掌握对象和类、对象的使用、对象废除、对象类型
讲练结合
132号楼机房
3-4构造函数
7.2JavaScript对象类型
11
2
掌握对象的类型和部分核心对象
132号楼机房
无
1.2HTML语言概述及语法
1
2
熟悉基本块级标签、列表标签
讲练结合
132号楼机房
2-1、2
2．利用html编写页面
（4学时）
2.1HTML的常用标记
2
2
熟悉表格、分区标记
讲练结合
132号楼机房
2-3、5，3-1
2.2HTML的交互标记
2
2
熟悉链接、图像标记
讲练结合
132号楼机房
3-1/欢迎页面
5.2JavaScript语法基础
9
2
了解掌握数据类型、常量、变量以及数据类型的转换、掌握表达式和运算符
讲练结合
132号楼机房
例2-7简易计算器
6.Javascript程序逻辑
（4学时）
6.1JavaScript程序流程控制
9
2
掌握JavaScript程序流程控制
讲练结合
132号楼机房
四则运算
6.2JavaScript函数
总成绩=项目考评成绩×50%+期中考试×20%+期末考试×30%
教学组织要求：
理论授课:实践教学=1：3
子任务学习的时候以个人为单位，总项目的学习学生以项目小组的形式组织教学，每个小组4-5人，每个老师辅导3-4组为宜。
Web前端开发技术 (第3版)储久良1
教育部高等学校软件工程专业教学指导委员会规划教材
第1章 Web前端开发技术综述
Page: 3
1.1 Web概述
Web前端开发技术-HTML5、CSS3、JavaScript
1980年Tim Berners-Lee（蒂姆·伯纳斯·李）在欧洲核子物理实 验室工作时建议建立一个以超文本系统为基础的项目来使得科学 家之间能够分享和更新他们的研究结果。他与Robert Cailliau一 起建立了一个叫做ENQUIRE的原型系统。
1989年3月，Tim Berners-Lee撰写了Information Management: A Proposal《关于信息化管理的建议》一文，文 中提及 ENQUIRE 并且描述了一个更加精巧的管理模型。
1990年11月12日他和Robert Cailliau（罗伯特·卡里奥）合作提 出了一个更加正式的关于万维网的建议。
括代码的可维护性、组件的易用性和浏览器兼容性等。
教育部高等学校软件工程专业教学指导委员会规划教材
第1章 Web前端开发技术综述
Page: 11
Web前端开发技术-HTML5、CSS3、JavaScript
1.3 Web前端开发技术
1.3.1 HTML HTML是SGML（Standard Generalized Markup
3 ftp 4 mailto
文件传输协议 电子邮件地址
5 ldap 6 news 7 file
轻型目录访问协议搜索 Usenet新闻组 当地电脑或网上分享的文件
8 gopher
Internet Gopher Protocol (Internet 查找协议)
教育部高等学校软件工程专业教学指导委员会规划教材
HTML5+CSS3 Web前端设计基础教程 第3版(第7章)
图7-9 鼠标未经过时预览效果
图7-10 鼠标经过时预览效果
7.3 CSS3动画
7.3.3 CSS 3动画的应用——“幽灵按钮” 1．什么是“幽灵按钮”
图7-11 “幽灵按钮”在某站点的应用
7.3 CSS3动画
2．“幽灵按钮”的实现
图7-12 “幽灵按钮”最终预览效果
7.4 CSS3选项卡
图7-17 “CSS3选项卡”最终预览效果分析
7.1 CSS Sprite技术
7.1.2 CSS Sprite技术的应用
图7-3 使用CSS Sprite技术所用到的配图
7.1 CSS Sprite技术
图7-4 “相机”图标移动示意图
图7-5 “地图”图标移动示意图
7.1 CSS Sprite技术
图7-6 background-position属性正负取值关系
谢谢观看！
图7-8 transform属性预览效果
7.3 CSS3动画
7.3.2 过渡——transition属性
1．transition-property属性 2．transition-duration属性 3．transition-timing-function属性 4．transition-delay属性 5．transition属性
7.2 CSS3渐变
1．Webkit引擎支持的CSS渐变语法 （1）线性渐变 （2）径向渐变 2．创建CSS 3渐变
图7-7 渐变预览效果
7.3 CSS3动画
7.3.1 变形——transform属性 1．旋转函数——rotate( ) 2．移动函数——translate( ) 3．缩放函数——scale ( )
第7章 CSS3与HTML5的高级应用
v3_Chap11-Web前端开发技术—HTML5、CSS3、JavaScript(第3版)-储久良
<td ></td> <td ></td> <td ></td> … </tr> </table>
语法说明
<table></table>标记表示插入表格；<tr></tr>表示插入一行 ；<td></td>表示插入一列；<th></th>插入表头。
教育部高等学校软件工程专业教学指导委员会规划教材
Web前端开发技术-HTML5、CSS3、JavaScript
第11章 表格(2课时)
这是采用表格设计的页面
教育部高等学校软件工程专业教学指导委员会规划教材
第11章 表格
Page: 1
Web前端开发技术-HTML5、CSS3、JavaScript
教学目标
Web 前端开发工程师应掌握以下内容： 掌握设计表格所有标记和属性。 掌握表格行标记的属性及设置方法。 掌握表格单元格的跨行与跨列属性的设置方法。 掌握表格的嵌套方法。 学会在表格中嵌入各种页面元素。 学会使用表格进行简易网页布局。
王小 品
李白
商学院 110204 机械学院 100244
林之 外语系 090101
表头
表体 表尾
<tr><th></th>…<th></th></tr> <tr> <td>李白</td> <td>机械学院</td> <td> 100244 </td>
Web前端开发任务驱动式教程(HTML5+CSS3+JavaScript)任务2 文字与段落排版
属性 alink link vlink text
描述 鼠标点击超链接时的颜色 未访问过的超链接颜色 已访问过的超链接颜色
所有文本的颜色
属性 bgcolor background leftmargin topmargin
描述 网页的背景颜色 网页的背景图像
网页的左边距 网页的上边距
知识准备
示例：利用body的属性设置网页效果
第二单元 HTML5语言基础
任务2 文字与段落排版
学习目标
掌握
标签 标签属性 文本标签 分隔标签 序列标签
学习目标
了解:
文字段落排版的基本规则
任务目标
实战演练——制作科技馆参观须 知页面
强化训练——制作“我家菜馆” 点菜单页面
知识准备
1. HTML5文档格式
<!doctype html> <html> <head> <meta charset="utf-8"> <title>我的网页</title> </head> <body> 我的第一张网页。 </body> </html>
知识准备
4. 分隔标签
换行标签<br>：强制文本换行（但不会在行与行之间留下空行）。一个换 行使用一个<br>，多个换行可以连续使用多个<br>标签。
呈现结果
强调文本 斜体 下标
知识准备
示例：文字修饰综合范例
<!doctype html> <html>
注释标记。用于标注一些便于
<head>
网页设计与开发——HTML、CSS、JavaScript实例教程(第3版)第9章习题答案
习题1. 在CSS语言中下列哪一项是"左边框"的语法？( A )A．border-left-width: <值>B．border-top-width: <值>C．border-left: <值>D．border-top-width: <值>2. 如何去掉文本超级链接的下划线？( B )A．a {text-decoration:no underline}B．a {underline:none}C．a {decoration:no underline}D．a {text-decoration:none}3. 下面（）是ID的样式规则定义。
( C )A. TR{clore:red;font-family:"隶书";font-size:24px;}B. .H2{color:red;font-family:"隶书";}C. #grass{color:green;font- family:"隶书"; font-size:24px;}D. P{background-color:#CCFF33;text-align:left;}4. 若要以加粗宋体、12号字显示“vbscript”以下用法中，正确的是( B )A.<b><font style='font-size:10px'2>vbscript</b></font>B.<b><font face=”宋体”style='font-size:10px'2>vbscript</font></b>C.<b><font size=“宋体”style='font-size:10px'2>vbscript</b></font>D.<b><font size=“宋体”fontstyle='font-size:10px'2>vbscript</b></font>5．以下有关样式表项的定义中，正确的是( A )A. H1{font-family:楷体_gb2312, text-aligh:center}B. H1{font-family=楷体_gb2312, text-aligh=center}C. H1{font-family:楷体_gb2312; text-aligh:center}D. H1{font-family=楷体_gb2312; text-aligh=center}6. 下列代码段是某页面的样式设置：<style TYPE="text/css">.blue { color:blue }.red { color:red }</style>现要求将页面中的第一个H1标题设置为红色，第一个段落设置为蓝色。
HTML5+CSS3 Web前端设计基础教程 第3版(第5章)
relative 相对，元素虽然偏移某个距离，但仍然占据原来的空间
absolute 绝对，元素在文档中的位置会被删除，定位后元素生成一个块级元素
5.2 CSS 定位
5.2.1 静态定位和固定定位 1．静态定位（static） 2．固定定位（fixed）
图5-10 鼠标为滚动时左侧导航固定
图5-11 页面滚动后左侧导航仍然固定
图5-5 父级容器宽度不够的情况
图5-6 浮动的容器相互拥挤的情况
5.1 浮动与清除浮动
5.1.2 清除浮动的三种方法
1．方法一：额外增加应用“clear: both;”规则的空容器 在浮动元素后额外增加一个空容器，比如“<div class="clear"></div>”，然后在CSS中 赋予.clear{clear:both;}属性即可清理浮动。
2．方法二：使用“overflow: ”规则清除浮动 向浮动容器的父容器添加“overflow:hidden;”或“overflow:auto;”可以清除浮动，在添 加overflow属性后，浮动的容器又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
3．方法三：使用:after伪元素清除浮动 :after伪元素能够在被选元素的内容后面插入另一内容。在实际执行时，首先给浮动的容器添 加一个名为“clearfix”的Class，然后给这个Class添加一个:after伪元素实现在容器末尾添加一 个看不见的容器以清理浮动。
5.2 CSS 定位
CSS有关定位的属性包括position、z-index（层叠顺序）、top、 left、right、bottom和clip。
表5-1 position属性的取值及其含义
web前端开发技术第三版5-3-2综合实例
文章标题：探索Web前端开发技术第三版5-3-2综合实例的深度与广度一、引言Web前端开发技术一直都是互联网行业中备受关注和发展的领域。
而Web前端开发技术第三版中的5-3-2综合实例更是备受瞩目，为这一领域的学习者和从业者提供了一套全面的实践教程。
本文将深入探讨这一综合实例的内涵和实践意义，为读者解析其深度与广度。
二、深度探究5-3-2综合实例我们要了解5-3-2综合实例的含义。
其中的5，3，2代表了一种前端开发的框架结构，分别对应了HTML、CSS和JavaScript。
这一实例的深度之处在于，它将这三种技术融合在一起，通过实际案例的演示和实践，向学习者展示了它们之间的紧密联系和互动关系。
在这一实例中，学习者不仅能够了解各项技术的基本语法和用法，更重要的是能够理解它们在实际项目中的应用和交互。
5-3-2综合实例提供了一套全面的练习内容，涵盖了Web前端开发中常见的各种场景和需求。
从页面布局到交互效果，再到数据交互和接口对接，实例中的内容丰富多样，让学习者可以贴近真实的项目开发环境，从而不仅仅是停留在理论层面上，更能够通过实践提升自己的实际操作能力。
三、广度拓展5-3-2综合实例的应用领域5-3-2综合实例所涉及到的技术和实践内容不仅仅局限于基础的Web前端开发领域，它在实际应用中还能够拓展到更广泛的领域。
在移动端应用开发中，5-3-2综合实例同样适用。
移动端的页面布局、样式适配、甚至一些常见的动画效果，都可以通过这一综合实例来学习和实践。
而在大屏幕设备上的应用，比如电视应用或大屏幕网页，同样也可以借鉴5-3-2综合实例的相关内容。
随着互联网技术的不断发展，Web前端开发也在不断涌现出新的需求和挑战。
前端性能优化、前端安全等领域，都成为了人们关注的焦点。
5-3-2综合实例所展示的内容和实践方式，同样可以为这些新的领域提供参考和启示，为学习者拓展了更广阔的发展空间。
四、经验共享与个人观点作为一名从业多年的Web前端开发工程师，我深刻体会到了实践对于技术学习的重要性。
v3_Chap14-Web前端开发技术—HTML5、CSS3、JavaScript(第3版)-储久良
function 函数名(参数1,参数2,…，参数n){函数体语句;}
教育部高等学校软件工程专业教学指导委员会规划教材
第14章 JavaScript基础
Page: 7
Web前端开发技术-HTML5、CSS3、JavaScript
14.1.3 JavaScript放置-主体
<!-- edu_14_1_2_1.html --> <html>
JavaScript是一种基于对象和事件驱动并具有相对安全性的客 户端脚本语言。被广泛应用于各种客户端Web程序尤其是HTML开 发中，能给HTML网页添加动态功能，响应用户各种操作，实现诸 如欢迎信息、数字日历、跑马灯，显示浏览器停留时间等特殊效果 ，提高网页的可观性。
教育部高等学校软件工程专业教学指导பைடு நூலகம்员会规划教材
<h4>head标记内定义的JavaScript函数</h4> <form><input name="btnCallJS" type="button" onclick="message();" value="事件调用自定义函数 "></form> </body> </html>
注：JS脚本插入在头部时，通常需要定义为函数格式，格式：
注：此时在<script></script>标记之间的所有JS语句都被忽略，不 会执行。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web前端开发技术(Web客户端编程)学分：3.5 学时：56 (28时理论/28时上机)一、课程的性质、地位与任务《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。
二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。
掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。
本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM 技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。
三、课程内容（重点△，难点★）1 Web前端开发技术综述1.1 Web概述1.1.1 了解Web起源1.1.2 理解Web特点1.1.3理解Web工作原理1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。
1.2 Web前端开发职业需求了解Web前端开发职业需求1.3 Web前端开发技术1.3.1 △理解HTML概念及在网页中的作用，理解HTML文档定义。
1.3.2理解CSS在Web页面设计中作用1.3.3理解JavaScript在Web页面设计中作用1.3.4了解HTML DOM、BOM及AJAX在页面设计中的作用1.3.5了解jQuery 含义及基本用途1.4 Web前端开发工具△掌握EditPlus、Adobe Dreamweaver、Sublime Text、WebStorm、HBuilder等开发工具1.5 浏览器工具熟悉常用五类浏览器安装与使用1.6 熟悉综合实例2 HTML基础2.1 HTML文档结构2.1.1 △理解HTML文档组成结构2.2 头部△掌握HTML头部标记作用及标题标记、元信息meta标记的语法2.3 主体2.3.1 △掌握HTML主体标记作用2.3.2 △掌握主体标记主要属性及其设置方法2.4 HTML基本语法△掌握标记类型语法及HTML属性语法2.5 注释掌握两种注释标记的使用方法及作用，重点掌握<!-- -->标记的使用。
2.6 HTML文档编写规范2.6.1 掌握HTML代码书写规范2.6.2 掌握HTML文档命名规则2.7 HTML文档类型<!DOCTYPE>了解3种HTML文档类型和HTML5的DTD定义方法。
2.8掌握综合实例中所使用的标记语法3 格式化文本与段落3.1 Web页面初步设计3.1.1 △掌握在<body>添加文字信息的方法3.1.2 掌握标题字标记语法及对齐属性的设置方法3.1.3 掌握添加空格、特殊符号的方法3.2 格式化文本标记3.2.1 掌握文本修饰标记的使用方法3.2.2 了解计算机输出标记的使用方法3.2.3 理解引用和术语标记的使用方法3.2.4 △掌握字体font标记的face、size、color属性语法3.3 段落与排版标记3.4.1 △掌握段落p标记语法及align属性的设置3.4.2 掌握换行、水平分隔线、拼音/音标注释ruby标记和rt/rp标记拼音/音标注释ruby标记和rt/rp标记、预格式化、块引用等标记的使用及属性怕设置3.4 综合实例学会运用所学知识完成Web页面设计4 列表4.1 列表概述4.1.1 了解列表的定义和常用列表的分类4.2 无序列表4.2.1 △掌握无序列表基本语法4.2.2 ★学会使用列表type属性的改变列表的符号样式4.3 有序列表4.3.1 △掌握有序列表基本语法4.3.2 ★学会使用列表type、start属性的改变列表的编号样式4.3.3 了解使用有序列表项value属性改变列表项编号4.3.4理解列表的type与列表项type属性冲突时对列表项编号的影响4.4 列表嵌套4.4.1 △掌握无序列表与有序列表嵌套的方法4.5 定义列表4.5.1 △掌握定义列表基本语法4.5.2 △★理解定义列表与无序、有序列表的外在表现上的差异4.6 综合实例学会运用所学知识完成Web页面设计5 超链接与浮动框架5.1 超链接概述5.2超链接语法、路径及分类5.2.1 △掌握超链接基本语法及href、target、title等属性的设置方法5.2.2 理解超链接中路径的分类和应用场合5.2.3 △掌握内链接、外链接的定义方法5.3 超链接的应用5.3.1 掌握创建HTTP文件下载链接的语法5.3.2 △掌握FTP站点访问链接的基本语法及创建方法5.3.3 △掌握图像超链接的基本语法及创建方法5.3.4 △掌握电子邮件链接的基本语法及创建方法5.3.5△★掌握书签链接的基本语法及创建方法5.4 浮动框架掌握浮动框架使用语法和使用方法。
5.5 综合实例学会运用所学知识完成Web页面设计6 图像与多媒体文件6.1 图像6.1.1 掌握<img>标记基本语法6.1.2 △会利用<img>属性src、width、height、border、alt、hspace、vspace、align等来修饰图像6.2 滚动文字6.2.1 掌握滚动文字标记的基本语法6.2.2 △学会利用滚动文字标记的direction、behavior、loop、scrollamount、scrolldelay等属性来设置滚动文字的效果6.3音频、视频及Flash文件6.3.1 ★掌握<embed>标记的语法。
△学会正确设置<embed>标记的src、loop、autostart、width、height等属性。
6.4 综合实例学会运用所学知识完成Web页面设计7 CSS基础7.1 CSS概念7.1.1 了解CSS基本概念7.1.2 了解传统HTML的缺点7.1.3 了解CSS的特点7.1.4 了解CSS的优势7.1.5 了解CSS编辑方法7.2 使用CSS控制Web页面7.2.1 掌握CSS的基本语法7.2.2 掌握CSS选择器类型（包括标记选择器、类选择器、id选择器、伪类选择器、属性选择器等）7.2.3 △掌握CSS选择器声明类型7.2.4 △掌握CSS定义与引用方法（包括内联样式表(行内样式表)、内部样式表、外部样式表（链接外部样式表、导入外部样式表）等。
）7.3 CSS继承与层叠理解CSS的继承与层叠区别7.4 综合实例学会运用所学知识完成Web页面设计8 DIV与SPAN8.1 △div图层8.1.1 掌握div定义方法8.1.2 学会设置div图层的属性8.2 △图层嵌套与层叠8.2.1学会使用多个<div>进行页面布局8.2.2学会使用图层嵌套与图层层叠8.3 div标记与span标记理解div标记与span标记的使用区别8.4 综合实例学会运用所学知识完成Web页面设计9 CSS样式属性9.1 CSS属性中的单位掌握CSS属性中绝对单位与相对单位9.2 CSS字体样式9.2.1 掌握字体font-size、font-style、font-variant、font-weight、font-family等属性的设置方法9.2.2 掌握字体font复合属性的设置方法9.3 CSS文本样式掌握letter-spacing、text-indent、text-decoration、text-transform、text-align、vertical-align、line-height等排版样式属性的设置方法9.4 CSS颜色与背景9.4.1 掌握颜色属性的设置方法9.4.2 掌握背景background-color、background-image、background-repeat、background-attachment、background-position等子属性的设置方法9.4.3 掌握背景复合属性background的设置方法9.5 CSS列表样式掌握列表样式语法，学会使用list-style-type、list-style-image、list-style-position 等属性美化列表的外观9.6 CSS盒模型9.6.1 理解CSS盒模型结构9.6.2 学会设置边界margin、边框属性border、填充属性padding及其子属性的设置方法9.7 综合实例学会运用所学知识完成Web页面设计10 DIV+CSS页面布局10.1 页面布局设计能够根据常规页面布局编写出DIV结构和定义出CSS样式学会使用DIV+CSS实现简单Web页面布局10.2 导航菜单设计10.2.1 掌握一级水平导航菜单的设计方法10.2.2 掌握二级水平导航菜单的设计方法11 表格11.1 表格熟悉常用表格的标记及作用11.2 表格标记11.2.1 △掌握<table>标记语法及所有表格标记的语法11.2.2 △会利用<table><tr><td>绘制简易表格11.2.3 学会使用表格标题<caption>、<th>标记定义表格标题和表头11.3 表格属性设置11.3.1 掌握表格边框及边框样式属性设置方法11.3.2 掌握表格宽度、高度的设置方法11.3.3 掌握表格的背景颜色和背景图像的设置方法11.3.4 掌握表格边框样式属性的设置方法11.3.5 掌握表格单元格间距、边距的设置方法11.3.6 掌握表格水平对齐属性的设置方法11.4 设置表格行的属性11.4.1 掌握表格行内容水平和垂直对齐的设置方法11.5 设置单元格的属性11.5.1 △掌握单元格跨行属性rowspan设置方法11.5.2 △掌握单元格跨列属性colspan设置方法11.6 表格嵌套学会运用表格嵌套技术实现一般网页布局11.7综合实例学会运用所学知识完成Web页面设计12 表单12.1 表单概述12.1.1 △掌握表单标记的基本语法结构以及表单中包含其它标记12.2 定义域和域标题掌握域和域标题标记的基本语法, 学会使用域和域标题标记设置表单分区12.3 △表单信息输入12.3.1 掌握单行文本输入框的属性设置方法12.3.2 学会使用密码输入框设置用户密码12.3.3掌握复选框checkbox设置及使用方法，学会使用checked属性将某项复选框设为预选项12.3.4掌握单选按钮radio设置及使用方法，学会使用checked属性将某项单选按钮设为预选项12.3.5掌握图像按钮的属性设置方法12.3.6 掌握submit按钮的属性设置方法12.3.7 掌握reset按钮的属性设置方法12.3.8 掌握普通按钮的设置方法12.3.9学会使用file文件选择框浏览文件12.3.10学会hidden隐藏框使用方法12.4 多行文本输入框12.4.1 学会使用多行文本输入框标记在网页中设置多行文本的输入方法12.4.2 掌握cols、rows、wrap等相关属性的设置多行文本区域大小12.5 下拉列表框12.5.1 掌握<select></select>标记的基本语法及size、multiple、name等属性的设置方法12.5.2 学会使用<option>标记设置列表项，学会使用selected属性必将某一选项设为预选项12.5.3 学会运用下拉列表框编写相关网页代码12.6 综合实例学会运用所学知识完成Web页面设计13 HTML5基础与CSS3应用13.1 HTML5概述掌握元素、标记和属性相关概念。