Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (8)[9页]

合集下载

Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (2)[9页]

2
<html>
<head>
<title>我的第一个HTML文档</title>
</head>
<body>
油哦！
欢迎你，我的第一个HTML文档!我现在开始学习HTML，加
</body>
</html>
• 第三步：保存后，关闭用记事本软件打开的first_page.html文件窗口；
• 第四步：在保存该文件的路径下，直接双击该文件，默认情况下会自动用浏览器打开（若无法直接打开该文件，可选择打开文件方式为浏览器）。浏览器显示效果如图2-1所示：
第二章 HTML基础本章内容： HTML文档结构 HTML各种常用标签 HTML页面控制 HTML媒体
1
2.1 HTML文档结构
• 2.1.1 第一个HTML文档 • HTML文档到底是如何演绎网页内容，它的文档结构又是怎
样的，不妨带着这些疑问试着写一个最简单的HTML文档来开启学习HTML之门。 • 第一步：新建一个文本文档，单击菜单中的"另存为"选项，在熟悉路径下（这样保证不会忘记该路径，便于以后经常使用），将文本文档保存成".html"后缀的文件（本案例保存文件名为first_page.html）； • 第二步：用记事本软件打开first_page.html文件，输入以下内容：
HTML文档头部信息
head元素（包含<head>和</head>标签）是所有头部信息的容器。其内可包含<title>、<base>、<link>、<meta>、<script>以及<style> 标签，如表2-1所示

《Web前端开发技术——HTML5、CSS3、JavaScript(第3版)》教学大纲

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服务器、超链接基本概念。

Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (10)[8页]

6、JavaScript的条件运算符
• 条件运算符只有一个(?:)运算符，是JavaScript中唯一的一个三元运算符。该运算符具有三个操作对象，第一个操作对象必须是布尔类型，第二个以及第三个操作对象可以是任意类型。条件运算符操作的结果即返回值是由第一个操作对象的值决定的，当第一个操作对象的值为true时，则返回第二个操作对象的值，当第一个操作对象Байду номын сангаас值为 false时，则返回第三个操作对象的值。
中的语句1为循环初值，在循环开始前执行，语句2为循环条件，是执行语句块的条件，语句3为步长，在语句块执行后执行。语法如下所示： • for(语句1-循环初值;语句2-循环条件;语句3步长){ • 循环体-语句块; }
• 逻辑运算符是二元运算符，用于测定变量或值之间的逻辑，操作对象为布尔值或者布尔变量。逻辑运算符如下所示：
4、JavaScript的赋值运算符
• 赋值运算符是二元运算符，用作给变量赋值。赋值运算符如下表所示。
5、JavaScript的字符串运算符
• 字符串运算符只有一个+运算符，该运算符不同于算术运算符中的+，它的操作对象是字符串，作用是连接左右两个字符串，返回连接后的字符串。
第五章 JavaScript基础
1、掌握运算符 2、掌握程序控制语句
1
1、JavaScript的算术运算符
• 算术运算符是对数字类型的对象进行操作，运算符如下表所示：
2
2、JavaScript的比较运算符
• 比较运算符在逻辑语句中使用，以测定变量或值是否相等。比较运算符如下表所示：
3、JavaScript的逻辑运算符
7、JavaScript的程序控制语句

面向移动互联网的Web应用技术研究

面向移动互联网的Web应用技术研究随着移动互联网的迅猛发展，Web应用技术也开始逐渐向移动端发展。

Web应用技术的发展，对于移动互联网的发展起到至关重要的作用。

在这个过程中，我们需要对面向移动互联网的Web应用技术进行深度的研究。

一、Web前端开发技术Web前端开发技术是Web应用技术中的重要组成部分。

随着智能手机和平板电脑的普及，对于前端开发的要求也越来越高。

在移动端，我们需要考虑更加轻量级的页面和更好的交互体验。

因此，我们需要深入研究HTML5、CSS3、jQuery等技术，来满足移动端的需求。

1. HTML5技术HTML5技术是Web前端开发技术中比较重要的一个技术。

HTML5不仅可以提供更加丰富的页面内容和更好的兼容性，还可以通过基于JavaScript的API实现更多的交互功能。

在移动端，我们可以利用HTML5实现更加轻量级的应用，并且支持离线应用功能。

2. CSS3技术CSS3技术可以帮助我们创建更加美观、灵活和动态的页面。

在移动端，CSS3技术非常适用于设计简洁的页面和创建动画效果。

同时，利用CSS3技术，我们可以自适应移动设备的不同分辨率，提高页面的兼容性和用户体验。

3. jQuery技术jQuery技术是一种JavaScript框架，可以帮助我们实现DOM操作、事件处理、动画效果等功能。

在移动端，jQuery技术可以帮助我们实现更加快速、友好和美观的页面效果。

通过利用jQuery Mobile技术，我们还可以快速创建基于移动设备的Web应用。

二、Web后端开发技术Web后端开发技术是Web应用技术中的另一个重要组成部分。

Web后端开发技术的主要任务是处理数据、完成后台业务逻辑和生成响应结果。

在移动端，我们需要考虑更加高效和稳定的后台系统，以支持移动端的访问需求。

1. Node.js技术Node.js技术是一种基于JavaScript语言的后台开发技术，可以帮助我们实现高效、可扩展的后端应用。

HTML5移动端Web应用开发指南

HTML5移动端Web应用开发指南第一章：HTML5移动端Web应用开发概述HTML5移动端Web应用开发是基于HTML5、CSS3和JavaScript等技术的移动应用开发方式，具有跨平台、可视化、易学易用等特点。

本章将介绍HTML5移动端Web应用开发的背景、概念以及发展趋势。

第二章：HTML5移动端Web应用的基础知识2.1 HTML5标准HTML5标准是一种新的标记语言，提供了一系列新的元素和API，以支持移动设备的开发。

本节将介绍HTML5标准的基本特性和发展历程。

2.2 CSS3CSS3是层叠样式表的最新版本，针对移动端提供了更多的样式和效果，用于美化和布局移动端Web应用。

本节将介绍CSS3的常用样式和效果。

2.3 JavaScriptJavaScript是一种脚本语言，用于为HTML页面添加交互和动态效果。

在移动端Web应用开发中，JavaScript是不可或缺的一部分。

本节将介绍JavaScript的基本语法和常用功能。

第三章：HTML5移动端Web应用的设计与布局3.1 响应式设计响应式设计是一种灵活的设计方法，使得移动端Web应用能够自动适应不同大小的屏幕。

本节将介绍响应式设计的原理和常用技术。

3.2 移动端布局移动端布局与传统的Web布局略有不同，需要考虑屏幕大小、交互方式等因素。

本节将介绍移动端布局的方法和技巧。

3.3 图片优化在移动端Web应用中，图片的加载速度直接影响用户体验。

本节将介绍如何优化图片，以提高移动应用的加载速度。

第四章：HTML5移动端Web应用的交互与动画4.1 手势与触摸事件移动设备具有触摸屏幕的特点，用户的交互方式也较传统Web 应用有所不同。

本节将介绍移动端常用的手势和触摸事件，并介绍如何在Web应用中使用它们。

4.2 动画效果动画效果可以为移动端Web应用增加趣味性和交互性。

本节将介绍如何使用CSS3和JavaScript实现各种动画效果。

第五章：HTML5移动端Web应用的数据处理与存储5.1 数据交互移动端Web应用常需要与服务器进行数据交互，本节将介绍如何使用AJAX和JSON等技术实现数据的异步传输。

Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-使用Flex实现网页响应式布局

第8章使用Flex实现网页响应式布局教学过程课堂实训同步训练：使用Flex实现云景旅游公司首页响应式布局1.实现首页头部响应式效果手机端页面最终的显示效果是：Logo、导航、导航项、搜索表单全部居中。

云景旅游手机端页面头部Flex代码1 .logo{2 display: flex;3 justify-content: center;4 }5 nav ul li{6 display: flex;7 justify-content: center;8 }9 .navbar form {10 display: flex;11 }12 .navbar input {13 flex-grow: 1;14 }云景旅游PAD端页面头部Flex代码1 @media(min-width:768px){2 nav ul{3 display: flex;4 }5 nav{6 display: flex;7 justify-content: center;8 }9 }云景旅游桌面端页面头部Flex代码1 @media(min-width:992px){2 header{3 display: flex;4 }5 .navbar{6 display: flex;7 flex: 1;8 justify-content: space-between;9 }10 .navbar input{11 flex-grow: 0; /12 }13 }2.主体内容.main_top区域实现.top区域Flex代码1 .top{2 display: flex;3 }4 .top_left{5 flex: 1;6 display: flex;7 align-items: center;8 }9 .top_right{10 flex: 1;11 }.bottom区域Flex代码1 .bottom{2 display: flex;3 }4 .col{5 flex: 1;6 }3.主体内容.main_middle区域实现.main_middle区域包含两个.jingqu部分，两部分代码相同，此处只列举其中一个部分代码。

Web前端开发与应用教程 (HTML5+CSS3+JavaScript)第2版第16章参考答案

第16章参考答案
1. bootstrap是Twitter推出的一个用于前端开发的开源工具包，在bootstrap 4的断点设置如下，阅读理解以下代码片段：
// 默认为手机端样式
// 等于或大于34*16 = 544px（手机横屏）
@media (min-width: 34em) { ... }
// 等于或大于48*16 = 768px(平板竖屏)
@media (min-width: 48em) { ... }
// 等于或大于62*16 = 992px（pc窄屏）
@media (min-width: 62em) { ... }
// 等于或大于75*16 = 1200px（pc宽屏）
@media (min-width: 75em) { ... }
最后再补充一个超大屏断点，一般用于图片居多的站点如视频，购物类站点（单位为em 或px都是一样的）
// pc超大屏1380px
@media (min-width: 1380px) { ... }
略。

2. 查阅目前市场上常见设备的屏幕分辨率，对响应式网页的CSS media query媒体查询设置相应的断点。

利用搜索引擎完成查阅。

3. 在CSS样式中练习将页面元素设置为相对尺寸，如字体大小单位为rem，图片尺寸为百分比等。

参考16.2部分。

4. 结合CSS3弹性盒布局，制作响应式网页，当屏幕分辨率小于1000px时，页面为两列内容，当屏幕分辨率大于1000px时，页面显示为三列内容。

参考16.3部分。

5. 请模仿例16-1尝试制作一个响应式的网页，主题自拟。

略。

HTML5+CSS3网页设计任务教程(第2版)课程标准、授课计划

XXX职业技术学院202X级《WEB开发基础》课程标准课程代码XXXXXX课程性质专业平台课课程学分4总学时64适用专业软件技术专业制（修）订日期202X-X-XX执笔审核一、课程定位本课程是软件技术专业群的平台课，是培养学生B/S架构项目开发的基础必修课程。

本课程主要培养学生的网站设计和开发能力，通过“教、学、做”一体化教学，使学生能熟练掌握PC端网页、WebApp自适应网站、响应式网站的开发规范和制作技巧，培养学生的创新能力、审美能力、自学能力、沟通能力、解决问题能力、自我管理能力、团队协作能力，为后续课程及其他程序设计课程的学习和应用打下基础。

先修课程：《计算机应用基础》《程序设计基础》。

后续课程：《Java Web应用开发》《Vue前端应用开发》《微信平台应用开发》等。

二、课程目标（-）总体目标通过本课程的学习，学生能了解WWW、HTTP、HTML5、CSS3的定义、概念和作用；了解服务器、客户端、浏览器的概念和作用，熟悉web项目规划和需求分析的基本方法，具备web网页设计、制作及站点管理的基本知识和基本技能，学生能够独立制作中小型的网站。

熟练掌握HTML5语言中的各种文本格式、字符格式、段落设置、列表、标记的使用方法；熟练CSS3样式表制作方法和技巧；熟悉PC端网站、WebApp自适应网站、响应式网站的排版技巧，根据前端设计师的任职要求，参照计算机程序员职业标准和网站开发和网页制作的职业资格标准，改革课程体系和教学内容。

课程内容突出职业能力培养，体现基于职业岗位分析和能力为导向的课程设计理念，以真实工作任务或社会产品为载体组织教学内容，在真实工作情境中采用新的教学方法和手段进行实施。

（二）具体目标课程教学目标具体体现为专业知识、专业技能和专业素质三方面的目标。

（1）专业知识目标①掌握HTML5与CSS3基础知识及最新技术。

②熟悉企业网站制作具体流程。

③掌握不同类型静态网站的开发技巧。

Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (4)[10页]

2
2.引入方法
• 按照CSS出现在页面的位置不同，CSS的使用可以分为3种方法：HTML元素中直接使用、从页面头部调用、采用链接形式调用。
• （1）行内样式 • （2）内嵌式 • （3）链接式 • （4）导入式
2、CSS选择器
• CSS使用基本语法形式如下：
• <style type = "text/css">
（3）class选择器
• class是对HTML多个标签的一种组合。 class选择器可以在HTML页面中使用 class=”名称”进行样式调用，如果希望同一个标签在不同的位置显示不同的样式，就可以使用类选择器。
（4）群组选择器
• 语法格式如下： • 选择器1，选择器2，选择器3，
（5）包含选择器
• 如果存在上述多种选择器同时定义时，在页面中直接使用的是CSS样式优先级最高的样式，优先级原则按照如下约定：
• 优先级：id选择器 > class选择器 >标签选择器>通用优先级
第三章 CSS基础 1、CSS基本概念 2、CSS选择器
1
1.什么是CSS
• CSS是英文单词Cascading Style Sheets的缩写，也叫层叠样式菜单，是一种用来表现HTML或XML等文本样式的计算机语言，主要用于在网页中进行样式的定义。CSS 可以通过控制标签对象的CSS宽度、CSS高度、文字大小、字体、背景来达到我们想要的美化网页的效果。
• <!--
• .选择器{
•
属性1：取值1；
•
属性2：取值2；
•
…}
• --!>
• </style>
（1）标签选择器

web前端设计与开发技术参考书

web前端设计与开发技术参考书摘要：1.web 前端设计概述2.HTML5 与CSS3 基础3.JavaScript 与jQuery4.前端框架与库5.移动端开发技术6.Node.js 与后端开发7.全栈开发与职业发展正文：web 前端设计与开发技术参考书web 前端设计是网站开发的重要组成部分，涉及到网站的视觉表现、用户体验等方面。

要成为一名优秀的web 前端设计师，需要掌握多种技术和工具。

以下是一些常用的web 前端设计与开发技术参考书。

1.《HTML5 与CSS3 权威指南》这本书是HTML5 和CSS3 的入门教程，介绍了HTML5 的新特性、CSS3 的样式设置以及响应式布局等内容。

对于初学者来说，这本书是一本不可多得的好书。

2.《JavaScript 高级程序设计》这本书是JavaScript 的进阶教程，详细介绍了JavaScript 的面向对象编程、异步编程、函数式编程等内容。

对于想要深入了解JavaScript 的同学来说，这本书是一本必读之作。

3.《jQuery 实战》这本书是jQuery 的入门教程，介绍了jQuery 的选择器、动画、事件处理等内容。

对于初学者来说，这本书是一本不错的选择。

4.《前端框架与库》这本书介绍了前端框架和库的使用，包括React、Vue、Angular 等主流前端框架以及Bootstrap、Lodash 等常用库。

对于想要学习前端框架和库的同学来说，这本书是一本值得参考的书籍。

5.《移动端开发技术》这本书介绍了移动端开发的技术和工具，包括响应式布局、移动端框架、调试工具等内容。

对于想要学习移动端开发的同学来说，这本书是一本必读之作。

6.《Node.js 实战》这本书介绍了Node.js 的基本概念和使用方法，包括Node.js 的安装、异步编程、文件系统操作等内容。

对于想要学习后端开发的同学来说，这本书是一本不错的选择。

7.《全栈开发与职业发展》这本书介绍了全栈开发的概念和技能，包括前端开发、后端开发、数据库管理等。

web应用技术原理

web应用技术原理Web应用技术是指一系列用于开发和运行在Web上的应用程序的技术和工具。

这些技术和工具主要涉及前端开发、后端开发、数据库管理等方面，是构建现代Web应用的重要基础。

首先，前端开发是Web应用技术中的重要组成部分。

前端开发主要负责构建Web应用程序的用户界面。

前端开发使用的技术主要包括HTML、CSS和JavaScript。

HTML用于定义Web页面的结构，CSS用于控制页面的样式，JavaScript用于实现页面的交互和动态效果。

其次，后端开发是Web应用技术中的另一个重要方面。

后端开发主要负责处理Web应用程序的业务逻辑和数据处理。

后端开发使用的技术包括各种编程语言（如Java、Python、PHP等）、Web框架和数据库管理系统。

Web框架提供了一套用于开发Web应用程序的工具和库，使得开发者能够更加高效地构建和管理Web应用程序。

数据库管理是Web应用技术中的另一个重要组成部分。

数据库主要用于存储和管理Web应用程序中的数据。

常用的关系型数据库管理系统包括MySQL、Oracle、SQL Server等，而NoSQL数据库管理系统主要用于存储非结构化的大规模数据集，如MongoDB、Redis等。

数据库管理系统提供了一系列用于管理和查询数据库的工具和API，以提供可靠的数据存储和访问。

此外，Web应用技术中还有一些其他重要的概念和技术，如网络协议、Web服务器、web安全等。

网络协议主要用于规定Web应用程序和Web服务器之间进行通信的规则和方式，最常用的网络协议是HTTP。

Web服务器是用于存储、处理和提供Web应用程序的硬件或软件设备，常用的Web服务器有Apache、Nginx等。

Web安全主要涉及Web应用程序在设计和开发阶段应该采取的安全措施，以保护用户隐私和防范各种网络攻击。

总的来说，Web应用技术是一门综合性的技术，涉及到前端开发、后端开发、数据库管理和网络安全等多个方面。

Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (6)[11页]

2、CSS盒模型
• CSS中所有文档元素都会生成一个由边界、框边等元素组成的矩形框，这个矩形框就是盒模型（Box Model）。因此，在网页开发中，可以将所有页面中的元素都可以看成是一个盒子，一个盒子模型由内容（content）、边框（border）、内边距（padding）和外边距（margin）组成。一个标准的盒子模型效果图如下：
3. 盒模型边框
• 盒模型边框属性包括边框样式属性、边框宽度属性和边框颜色属性等。接下来将 CSS中最为常用的边框属性进行详细介绍，并通过具体的实例来讲解其使用流程。
4. 盒模型边界
• 盒模型边界包括边界属性、单侧边界属性和页面元素边界重叠等。接下来将CSS中最为常用的边界属性进行详细介绍，并通过具体的实例来讲解其使用流程。
5. 盒模型大小
• 在实际网页制作应用中计算盒模型大小主要分为如下两个方面：
• 水平方向上的宽度计算 • 垂直方向上的高度计算
1.盒模型内容
• 盒模型内容只能出现在盒模型中标有高度和宽度的部分，即除宽度和高度包含的区域外，而盒模型的其他部分不能包含任何内容元素。
• 当盒模型内容大于容器空间时，内容的显示顺序是从左到右；当内容超过定义的容器宽度时，将自动换行显示。
2. 盒模型填充
• 盒模型中填充即padding属性，其呈现了元素的背景，其具体的使用语法格式为： padding:长度值/百分比值
第四章 DIV及CSS页面布局
1、掌握网页布局与规划 2、掌握网页布局标准 3、掌握CSS盒模型
1
1、Web标准布局
• Web标准布局页面中表现部分和结构部分各自独立，结构部分用HTML或XHTML编写实现，表现部分可以调用CSS 文件实现，可以实现页面结构和表现内容分离，利于页面维护。

Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (13)[5页]

第五章 JavaScript基础
1、掌握运算符 2、掌握程序控制语句 3、掌握函数的用法 4、掌握数组的用法 5、掌握HTML DOM 6、掌握JavaScript事件
1
1、综合案例
• 1.注册案例 • 此案例使用JavaScript实现注册。注册要求：所有输入文
本框不能为空；用户名只能是只能由字母、数字、下划线组成，并且不能以数字开头，长度必须是6-20个字符；密码长度必须是6-15个字符，并且二次输入密码必须一致；手机号码必须以1开头，长度必须是11个字符；固定电话中的第一个输入文本框为区号，长度必须是3-4个字符，第二个输入文本框长度必须是7-8个字符。效果如图注册案此案例是使用JavaScript实现级联菜单。
根据用户选择的第一个下拉菜单的值，动态改变第二个下拉菜单的值，使第二个下拉菜单中的市名与第一个下拉菜单的省份对应。效果如图级联菜单案例所示：

数字媒体技术应用专业技术的Web应用开发指南

数字媒体技术应用专业技术的Web应用开发指南随着互联网的迅猛发展，Web应用开发成为数字媒体技术应用专业中的重要组成部分。

本文将为读者提供一份关于数字媒体技术应用专业技术的Web应用开发指南，帮助读者了解相关技术和方法。

一、前端开发前端开发是Web应用开发中的重要环节，它涉及到用户界面的设计和实现。

在数字媒体技术应用专业中，前端开发需要掌握HTML、CSS和JavaScript等基本技术。

HTML用于构建网页的结构，CSS用于美化网页的样式，而JavaScript则用于实现网页的交互功能。

在进行前端开发时，需要注意以下几点：1. 设计用户友好的界面：界面设计应简洁明了，符合用户习惯，提供良好的用户体验。

2. 响应式设计：随着移动设备的普及，网页需要适应不同的屏幕尺寸。

采用响应式设计可以使网页在不同设备上呈现出最佳效果。

3. 优化网页加载速度：减少HTTP请求、压缩文件大小、使用浏览器缓存等方法可以提高网页的加载速度，提升用户体验。

二、后端开发后端开发是Web应用开发中的另一个重要环节，它涉及到服务器端的逻辑处理和数据存储。

在数字媒体技术应用专业中，后端开发需要掌握一种或多种编程语言，如Java、Python、PHP等，并熟悉数据库的使用。

在进行后端开发时，需要注意以下几点：1. 安全性：保护用户数据的安全是后端开发的重要任务。

采用加密算法、防止SQL注入、设置权限等措施可以提高系统的安全性。

2. 性能优化：对于大型Web应用，性能优化显得尤为重要。

可以通过使用缓存、优化数据库查询、并发处理等方法提高系统的性能。

3. 接口设计：为了方便前端与后端的交互，需要设计良好的接口。

接口应符合RESTful风格，提供清晰的文档和易于使用的API。

三、移动应用开发随着智能手机的普及，移动应用开发成为数字媒体技术应用专业中的热门方向。

移动应用开发涉及到Android和iOS平台的开发技术，以及移动应用的用户界面设计和性能优化等方面。

Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (12)[7页]

2、JavaScript事件
• 2. JavaScript拖动事件 • JavaScript拖动事件发生在鼠标拖拽时，JavaScript常
见的拖动事件如下表所示：
2、JavaScript事件
• 3. JavaScript常见的键盘事件 • JavaScript常见的键盘事件如下表所示：
第五章 JavaScript基础 1、掌握HTML DOM 2、掌握JavaScript事件
1
1、DOM
•Model，简称 DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为 DOM。
2
1. 定位HTML元素
• 通过id定位HTML元素，使用的函数是 getElementById()，参数为元素的id。
2. 更改HTML
• 使用函数document.write()，改变 HTML 输出流。
2、JavaScript事件
• 1.鼠标事件 • JavaScript常见的鼠标事件如下表所示：

Web应用技术指南(HTML5+CSS3+jQuery+ BootStrap (11)[10页]

• 12）setHours函数：设定日期的“小时”部分，值为0 ～23。
• 13）setMinutes函数：设定日期的“分钟”部分，值为 0～59。
• 14）setMonth函数：设定日期的“月”部分，值为0～ 11。其中0表示1月，...，11表示12月。
4.数学函数（一）
• 1）abs函数：即Math.abs(以下同)，返回一个数字的绝对值。
时间与GMT格林威治标准时间的地区时差)，单位为分钟。
• 9）getYear函数：返回日期的“年”部分。返回值以 1900年为基数，例如1999年为99。
• 10）parse函数：返回从1970年1月1日零时整算起的毫秒数(当地时间)。
3.日期函数（三）
• 11）setDate函数：设定日期的“日”部分，值为0～31 。
• 1）getDate函数：返回日期的“日”部分，值为1～31 • 2）getDay函数：返回星期几，值为0～6，其中0表示星
期日，1表示星期一，依此类推，6表示星期六 • 3）getHours函数：返回日期的“小时”部分，值为0～
23。 • 4）getMinutes函数：返回日期的“分钟”部分，值为0
制)。 • 8)prompt函数：显示一个输入对话框，提示等待用户输入
。
2
2.数组函数
• 1）join函数：转换并连接数组中的所有元素为一个字符串。
• 2）langth函数：返回数组的长度。 • 3）reverse函数：将数组元素顺序颠倒。 • 4）sort函数：将数组元素重新排序。
3.日期函数（Biblioteka ）</script> </head> <body> </body> </html>

Web前端技术项目式教程(HTML5 CSS3 Flex Bootstrap)教案-初探Web前端技术

第1章初探Web前端技术课程名称Web前端开发项目名称初探Web前端技术任务名称初探Web前端技术课时 2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1. 具备使用编辑工具编写HTML代码的能力知识目标：1. 了解网页和网站的基本概念2. 了解Web标准的构成及Web前端技术的发展3. 掌握网页开发工具的使用素质目标：1. 培养学生信息搜集能力2. 培养学生团结合作、互帮互助的能力教学内容1. 任务描述旅游公司是一家经营旅游文化产业的公司，公司因发展的需要准备建设网站。

接到网站制作任务的是前端工程师Peter。

公司员工John想借此机会跟着Peter学习。

因为John在网页制作方面没有基础，Peter打算从网页制作基础知识开始，逐步教会John制作网页的技能。

2. 任务展示与实现（1）展示第一个网页效果（2）利用编辑工具编写HTML代码并验证其效果（3）学生动手操作3. 教师讲解本任务涉及的知识点4. 任务小结教学重点1. 什么是Web前端开发2. 利用编辑工具编写HTML代码并使用浏览器预览教学难点 1. 利用编辑工具编写HTML代码、使用浏览器调试网页教学准备1. 装有Sublime或者Hbuilder的电脑2. 教学课件PPT3. 教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计 1. 参考课本例1-2代码，使用Sublime Text 3制作一个网页来介绍自己的家乡。

教学过程教学环节教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。

《HTML5+CSS3Web前端开发技术(第2版)》参考文献

附件3 参考文献（更新）参考文献[1] 唐彩虹等.Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap). 北京：人民邮电出版社，2020.[2] 章早立等. Bootstrap响应式网站开发实例教程. 北京：机械工业出版社，2022.[3] 王金柱.HTML5移动网站与App开发实战. 北京：清华大学出版社:2022.[4] 刘锡冬等.Web前端开发项目教程（HTML5+CSS3+JavaScript）（微课版）. 北京：人民邮电出版社，2022.[5] Jon Duckett Web（美）著. 杜静，敖富江译. 编程入门经典—HTML、XHTML和CSS（第2版）. 北京：清华大学出版社，2010.[6] Elizabeth Castro（美）著. 陈剑瓯，张扬译. HTML XHTML CSS基础教程（第6版）. 北京：人民邮电出版社，2007.[7] 陆凌牛. HTML5与CSS3权威指南（第3版）. 北京：机械工业出版社，2015.[8] 唐四薪. 基于Web标准的网页设计与制作（第2版）. 北京：清华大学出版社，2015.[9] 温谦等. CSS网页设计标准教程（第2版）. 北京：人民邮电出版社，2015.[10] 刘玉红等. HTML5网页设计案例课堂. 北京：清华大学出版社，2016.[11] 陈婉凌. 网页设计必学的实用编程技术HTML5+CSS3+JavaScript. 北京：清华大学出版社，2015.[12] 张大为等. HTML5+CSS3+JavaScript+Bootstrap网站开发实用技术（第3版）. 北京：人民邮电出版社，2020.[13] 温谦. jQuery+Bootstrap Web开发案例教程. 北京：人民邮电出版社，2022.[14] 黑马程序员.响应式Web开发项目教程（HMTL5+CSS3+Bootstrap）. 北京：人民邮电出版社，2019.[15] 表严肃. HTML 5与CSS 3核心技法. 北京：电子工业出版社，2020.[16] 前端科技.HTML5+CSS3从入门到精通（微课精编版）（第2版）. 北京：清华大学出版社:2022.362。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

• • #container{ • position:relative; • margin:0px auto 0px auto; • width:900px; • text-align:left; •}
2.制作页面主体
• 页面的主体包括4个部分：左侧景区看点部分、中间文字介绍部分、右侧景区动态和特色推荐部分，实现主体基本过程为：
• 规划本案例有三个部分组成： • 文件index.html：页面布局文件 • 文件style.css：页面样式文件 • 文件夹images：保存系统所需要的素材图片
3、页面实现
• 经过前面的需求分析和布局规划后，开始进入具体的页面实施操作，页面实现流程如下：
• 制作页面头部 • 制作页面主体部分 • 制作页面底部部分 • 解决兼容性问题
•
background-repeat: no-repeat;
•
height: 149px;
•
background-position: left top;
•}
（4）制作导航列表元素
• 此部分是设置导航列表元素的修饰样式，首先设置列表的整体样式，再设置列表菜单的显示样式，以及链接样式，对应样式代码如下：
type="text/css">
（2）设置页面整体属性
• 首先设置body元素内的字体属性，并指定背景图片、整体的边界，实现代码如下所示：
•
• body{
•Байду номын сангаас
margin: 0px;
•
padding:0px;
•
text-align:center;
•
font-size:12px;
•
font-family:Arial, Helvetica, sans-serif;
第四章 DIV及CSS页面布局掌握页面规划布局的流程和方法
1
1、页面功能需求分析
• 案例要实现一个针对著名旅游景点九寨沟的宣传介绍页面，功能比较简单，主要是实现信息展示功能，展现形式包括图片性介绍，文字性介绍等。
2
2、页面布局规划实施
• 将整个页面分为头部部分、中间部分和底部部分，其中头部部分又分为logo部分和导航部分，中间内容又分为左侧“景区看点”、中间正文、右上侧“景区动态”和右下侧“特色推荐”。
•
background: url(img/bg99.jpg) no-repeat center;
•}
（3）制作banner
• 此部分指定banner元素的显示效果，首先确定元素的大小，然后对元素进行定位处理，对应样式代码如下：
•
• #banner{
•
background-image: url(img/banner_9.png);
• （1）设置主体父元素样式 • （2）设置左侧整体样式 • （3）设置中间样式部分 • （4）设置右侧景区动态和特色推荐部分
（ 1 ）制作页面头部
• 制作页面头部基本过程为：编写调用文件实现对样式文件的调用；设置页面整体属性；编写导航样式；
• （1）设置外部样式调用文件 • 通过样式调用文件可以将页面和CSS文件关联起来，具体
实现方法是：在 • <head></head>标签内加入如下代码： • • <link href="20.css" rel="stylesheet"