Web前端开发实训案例教程(初级) -课件全套 王晓玲 第1-17章 概述、开发环境：第一个HTML5程序- -案例：在线视频课程网站

第1章概述（1）掌握HBuilder工具的安装和使用。（2）掌握HTML页面结构、表单、文本标签、超链接、图像、表格、列表等元素的使用方法。（3）掌握HTML5语义化元素、新增全局属性、页面增强元素、表单标签和属性、多媒体等元素的使用方法。（4）掌握CSS选择器、字体样式、文本样式、颜色、背景、区块、网页布局、单位等功能和应用。（5）掌握CSS3新增选择器、边框新特性、新增颜色、字体的功能、动画效果、多列布局及弹性布局的使用方法。（6）掌握JavaScript基础语法、语句、函数、数组、事件、DOM操作、面向对象等。（7）掌握jQuery选择器、DOM操作、事件、动画等。（8）遵循企业Web标准设计和开发过程，培养良好的工程能力，能进行企业静态网站开发，提高静态网站开发实践能力。1.1实践目标序号类型专题名称内容说明训练知识点1开发环境第一个HTML5程序1．下载安装Chrome浏览器2．下载并安装HBuilder3．使用HBuilder创建一个Web项目工程4．使用HBuilder在项目工程中创建一个HTML5页面，页面能够在浏览器中正确显示1．HBuilder的下载、安装及基本操作2．Web项目工程结构3．HTML5简介4．HTML5页面声明<!DOCTYPEhtml>2HTML5表单注册页面（表单）1．使用HTML5的表单元素，制作一个用户注册页面2．利用HTML5表单属性实现非空验证1．文本标签（1）标题标签（2）段落标签（3）水平线标签2．表单（1）HTML5表单属性（2）HTML5表单输入类型（3）HTML5新的表单控件3HTML5页面

增强资讯网站（页面增强

元素）使用HTML5的标准元素，制作一个资讯详情页面，使用HTML5页面增强元素实现图文信息展示1．图文排版（1）标题标签（2）段落标签（3）图片标签2．HTML5页面增强元素<figure>、<figcaption>、<mark>4HTML5全局

属性通信录（全局属性）使用HTML5的标准元素，制作一个通信录表格页面，使用HTML5全局属性实现通信录内容编辑和隐藏1．表格标签2．HTML5新增全局属性contenteditable属性、hidden属性、data*属性1.2技术专题设计序号类型专题名称内容说明训练知识点5HTML5多媒体HTML5播放音频

（Audio元素）使用HTML5的Audio元素，播放音频文件1．audio元素2．音频格式和浏览器的支持3．audio标签和属性4．audio标签的使用HTML5播放视频

（Video元素）使用HTML5的Video元素，播放本地视频1．video元素2．视频格式和浏览器的支持3．video标签和属性4．video标签的使用67HTML5语义化元素音乐内容页（语义化元素）使用HTML5的标准元素，制作一个音乐内容页1．文本标签2．图片标签3．超链接标签4．HTML5语义化元素header、section、article、nav、aside、footer8CSS3（CSS+CSS3）微博网站首页（CSS3选择器）模拟微博的首页，页面中主要包括导航栏和微博话题列表1．选择器兄弟选择器、伪类选择器、属性选择器2．颜色3．文本属性4．布局（1）display（2）float（3）position9技术论坛系统首页（CSS3布局）使用CSS3制作技术论坛的首页，页面中主要包括以下几部分内容（1）头部导航栏：包括“推荐”“热门”等菜单（2）正文：分为左右两部分，左边为帖子列表，右边为最新帖子列表和帖子阅读排行列表1．弹性布局弹性容器、弹性容器的属性、弹性项目的属性2．多列布局3．边框特性4．CSS3动画1.2技术专题设计序号类型专题名称内容说明训练知识点10移动端HTML5表单电商列表页（移动端布局）制作电商网站的商品列页面表，页面分为两个部分（1）页头：标题和导航（2）商品列表：每个列表项中包括商品名称、商品价格、交易数量和1张商品缩略图1．HTML5（1）视口（2）语义和结构元素（3）页面增强元素2．CSS3（1）边框特性（2）弹性布局11视频网站（移动端布局）制作视频播放页面，页面主要包括以下几部分（1）视频播放区域（2）评论区域，可以查看评论列表和发表评论1．HTML5（1）视口（2）语义和结构元素（3）表单元素（4）多媒体元素2．CSS3弹性布局12JavaScript日期计算器（基础语法）1．通过使用JavaScript实现一个日期计算器2．单击页面“计算”按钮，显示某日期距那年1月1日经过了多少天1．JavaScript基础语法2．JavaScript函数、数组3．JavaScript事件监听13学生信息管理（面向对象）1．定义一个学生信息构造方法，通过原型链的方式给该构造方法定义一个初始化学生信息的方法，需要传入学生的姓名、年龄及班级2．实例化该构造函数并传入初始化数据。修改其中的学生班级属性并将实例化的对象在控制台打印输出1．OOP2．创建对象字面量方式创建3．属性的操作（1）属性的读取（2）属性的修改14学生信息列表（DOM操作）将数组中的学生信息以列表的形式显示到页面1．JavaScript基础语法2．JavaScript函数3．JavaScriptDOM操作4．JavaScript事件监听1.2技术专题设计序号类型专题名称内容说明训练知识点15jQuery目录页面生成（jQuery综合）将数组中书籍目录信息显示到页面，单击页面目录进行页面切换1．jQuery基础语法2．jQuery选择器3．jQueryDOM操作4．jQuery事件1.2技术专题设计项目选取“在线视频课程网站”为Web静态网页程序，采用HBuilder工具开发，技术选型为“HTML5+CSS3+JavaScript+jQuery+移动端”。案例按企业标准进行建设，结合瀑布模型、RUP模型、增量开发思想，内容包括项目目标、需求分析、系统设计、每个功能迭代开发，在迭代开发过程中，按功能、技能和知识进行组织。整个项目分为4大阶段，分别为HTML5、HTML5+CSS3、JavaScript+jQuery、移动端。1.3案例设计第2章

开发环境：第一个HTML5程序2.1技能和知识点1．下载安装Chrome浏览器。2．下载安装HBuilder。3．使用HBuilder创建一个Web项目工程。4．使用HBuilder在项目中创建一个HTML5页面，页面能够在浏览器中正确显示。2.2需求简介1．在GoogleChrome官网浏览GoogleChrome浏览器。2．在HBuilder官网下载安装HBuilder编程工具。3．创建Web项目并运行（1）用Hbuilder创建一个Web项目。（2）在Web项目中创建HTML页面并进行编辑。（3）使用HBuilder内置服务器运行HTML静态网页，并使用Chrome浏览器进行访问。2.3设计思路2.4.1下载安装Chrome2.4.2下载安装Hbuilder2.4.3创建Web项目并运行2.4实现1．下载Chrome（1）访问Chrome官网。（2）在Chrome官网页面中单击“下载Chrome”按钮，如图所示，下载Chrome安装包。2.4.1下载安装Chrome2．安装Chrome双击安装包即可自动完成安装，安装完成后，启动Chrome浏览器，启动完成后浏览器界面如图所示。2.4.1下载安装Chrome3．Chrome的开发者工具（1）打开“开发者工具”打开Chrome浏览器，按F12打开“开发者工具”。也可以在页面空白处单击右键，在弹出的快捷菜单中选择“检查”选项，如图所示。2.4.1下载安装Chrome3．Chrome的开发者工具（2）常用的“开发者工具”功能。①Elements：查看页面元素及布局。②Console：控制台，用于打印输出和调试。③Network：查看网络通信的数据包。2.4.1下载安装Chrome3．Chrome的开发者工具（3）模拟移动设备。单击“

”按钮，可切换到移动设备模拟状态，如图所示。2.4.1下载安装Chrome1．下载HBuilder（1）进入HBuilder官方网站首页，单击“DOWNLOAD”按钮下载HBuilder，如图所示。2.4.2下载安装HBuilder1．下载HBuilder（2）在弹出的窗口中选择“上一代HBuilder下载”，选择Windows包，如图所示。下载后得到压缩文件（HBuilder.9.1.29.windows.zip），如下图所示。2.4.2下载安装HBuilder2．安装（解压下载文件后即可以使用）（1）解压HBuilder.9.1.29.windows.zip到一个目录下（例如，解压到C盘根目录下，解压后将生成C:\HBuilder），即HBuilder的文件夹，文件目录如图所示。2.4.2下载安装HBuilder2．安装（解压下载文件后即可以使用）（2）运行HBuilder.exe文件。第一次使用，会弹出注册界面，如图所示，可以选择“注册用户”或“暂不登录”。2.4.2下载安装HBuilder3．HBuilder主界面2.4.2下载安装HBuilder4．设置语法验证器（1）在HBuilder主界面上，选择“工具”按钮，选择“选项”命令，如图所示。2.4.2下载安装HBuilder4．设置语法验证器（2）在弹出的“选项”窗口，如图所示，左侧选择“HBuider”下的“语法验证器设置”。将右侧表格中HTML、JSON、JavaScript、CSS语法验证器打开。2.4.2下载安装HBuilder1．新建项目（1）在HBuilder主界面上，选择“文件”按钮，在弹出菜单中选择“新建”按钮，选择“Web项目”，如图所示。2.4.3创建Web项目并运行1．新建项目（2）在弹出的如下图所示窗口中，设置项目名称与项目位置，单击完成即可新建一个空的Web项目。2.4.3创建Web项目并运行1．新建项目（3）可在左侧项目管理器查看、新建和修改项目目录与文件，右侧的文档编辑区域可编辑文件，如图所示。2.4.3创建Web项目并运行2．新建HTML5页面文件（1）在HBuilder主界面上，右键单击需要新建文件的项目或文件夹，在弹出菜单中选择“新建”按钮，在弹出的二级菜单中选择“HTML文件”，如图所示。2.4.3创建Web项目并运行2．新建HTML5页面文件（2）在弹出的窗口上填写文件名，选择需要的模板，单击“完成”按钮即可新建HTML文件，如图所示。2.4.3创建Web项目并运行3．使用浏览器打开HTML文件（1）在HBuilder主界面上，单击导航栏中的浏览器图标，即可以打开对应的浏览器来访问指定的HTML页面，如图所示。2.4.3创建Web项目并运行3．使用浏览器打开HTML文件（2）浏览器运行效果如图所示。2.4.3创建Web项目并运行第3章

HTML5表单—注册页面3.1技能和知识点制作一个用户注册页面，页面分为头部和正文两部分。头部显示“用户注册”标题，正文部分为一个form表单，效果图如图所示。（1）表单中的账号、密码、手机号需要非空验证。（2）表单中的输入框需提示输入信息。（3）表单中手机号、邮箱、年龄

需使用HTML5新增的表单控件。（4）表单中的上传头像可以一次上传

多个文件。3.2需求简介1．项目设计（1）项目名称：register。（2）项目文件结构如表所示。3.3设计思路类型文件说明html文件register.html用户注册html页面2．搭建用户注册页面主体结构使用语义化标签搭建用户注册页面register.html主体结构，包括页头和正文两个部分，页头使用header标签，正文使用article标签，如下图所示。3.3设计思路3．编写页头页头<header>编写一个标题<h2>和水平线<hr>，如下图所示。3.3设计思路4．编写正文正文<article>部分编写表单内容。（1）账号、密码、手机号设置required属性。（2）输入框元素全部使用placehoder属性提示输入信息。（3）手机号类型使用tel。（4）邮箱类型使用email。（5）年龄类型使用number。（6）上传头像设置multiple属性。3.3设计思路3.4.1创建注册页面3.4.2搭建头部和正文结构3.4.3编写头部3.4.4编写正文3.4实现创建一个注册页面，命名为register.html，基本结构如下。3.4.1创建注册页面使用HTML5语义化标签搭建页面结构。使用<header>搭建头部，<article>标签搭建正文结构。3.4.2搭建头部和正文结构在头部区域使用标题标签<h2>编写一个标题“用户注册”，使用<hr>标签创建一个下划线。页面效果：3.4.3编写头部（1）在正文区域<article>标签内，编写一个form表单。在form表单内设置一个提交按钮，将提交按钮的value更改为“注册”。3.4.4编写正文（2）添加表单元素。①用户账号的输入框type值为text，变更为文本输入框。②用户密码的输入框type值为password，变更为密码输入框。③手机号码的输入框type值为tel，变更为电话号码输入框。④用户邮箱的输入框type值为email，变更为电子邮箱输入框。⑤用户年龄的输入框type值为number，变更为数字输入框。⑥上传头像控件的type值为file，变更为文件上传域。3.4.4编写正文（3）设置表单元素属性。①用户账号，设置placehoder提示信息为“请输入账号”，设置require非空验证。②用户密码，设置placehoder提示信息为“请输入密码”，设置require非空验证。③手机号码，设置placehoder提示信息为“请输入手机号”，设置require非空验证。④用户邮箱，设置placehoder提示信息为“请输入手机号”。⑤用户年龄，设置placehoder提示信息为“请输入年龄”。⑥上传头像：设置属性multiple可同时上传多个文件。3.4.4编写正文（3）设置表单元素属性。3.4.4编写正文第4章

HTML5页面增强：资讯网站4.1技能和知识点制作一个资讯详情页，使用HTML5页面增强元素实现图文信息展示，页面内容包括以下三个部分：（1）页面标题；（2）图片及图片说明文字；（3）资讯文字信息。4.2需求简介1．项目设计（1）项目名称：news。（2）项目文件结构如表所示。4.3设计思路类型文件说明html文件detail.html资讯详情html页面图片文件01.jpg资讯详情图片大小320*2002．搭建用户注册页面主体结构使用语义化标签搭建资讯详情页面detail.html主体结构，包括页头和正文两个部分，页头使用header标签，正文使用article标签，如下图所示。4.3设计思路3．编写页头在页头<header>中使用<h4>标签编写标题，如下图所示。4.3设计思路4．编写正文正文<article>部分编写一个<figure>标签存放资讯图片和一个<p>标签存放资讯内容，如图所示。4.3设计思路4.4.1创建资讯详情页面4.4.2搭建头部和正文结构4.4.3编写头部4.4.4编写正文4.4实现创建一个资讯详情页面，命名为detail.html，基本结构如下。4.4.1创建资讯详情页面使用HTML5语义化标签搭建页面结构。使用<header>搭建头部，<article>标签搭建正文结构。4.4.2搭建头部和正文结构在头部区域使用标题标签<h4>编写一个标题“HTML5语义化”。页面效果：4.4.3编写头部（1）创建资讯图片。（2）在正文区域编写一个<figure>标签，在<figure>标签中添加一张图片，并使用<figcaption>元素为<figure>添加标题。页面效果如右图。4.4.4编写正文（3）创建资讯内容。在正文区域编写一个<p>标签，存放资讯内容，并使用<mark>标签突出显示内容中的关键字。页面效果：4.4.4编写正文（4）页面最终效果如图所示。4.4.4编写正文第5章

HTML5全局属性：通信录5.1技能和知识点制作一个通信录表格页面，使用HTML5全局属性实现通信录内容的编辑和隐藏，页面要求如下：（1）搭建一个通信录表格；（2）将手机号列隐藏；（3）可对邮箱进行编辑。页面效果如图所示。5.2需求简介1．项目设计（1）项目名称：contacts。（2）项目文件结构如表所示。5.3设计思路类型文件说明html文件contacts.html通信录html页面2．搭建页面主体结构使用语义化标签搭建页面主体结构，如下图所示。5.3设计思路3．编写标题在页头<header>中使用<h2>标签编写标题，如下图所示。5.3设计思路4．创建并编写表格正文区域创建表格，并编写表格元素，设置“手机号”全局属性hidden，设置“邮箱”全局属性contenteditable，设置“联系地址”全局属性data-*，如图所示。5.3设计思路5.4.1创建通信录页面5.4.2搭建头部和正文结构5.4.3编写头部5.4.4编写正文5.4实现创建一个通信录页面，命名为contacts.html，基本结构如下。5.4.1创建通信录页面使用HTML5语义化标签搭建页面结构。使用<header>搭建头部，<article>标签搭建正文结构。5.4.2搭建头部和正文结构在头部区域使用标题标签<h2>编写一个标题“通信录”。页面效果：5.4.3编写头部1．创建表格（1）在正文区域使用<table>标签创建一个2行5列的表格。（2）使用两个<tr>标签在表格中创建表格中的两行。①第一行为表头，<th>标签代表表头中的一个单元格；②第二行为数据，<td>标签代表表格中的一个单元格。（3）编写表格中的单元格内容，包括“编号”“姓名”“手机号”“邮箱”“联系地址”。5.4.4编写正文1．创建表格表格代码如下。5.4.4编写正文2．设置全局属性（1）设置“手机号”列的

全局属性hidden=“hidden”，

将此列隐藏。（2）页面效果：5.4.4编写正文3．设置“邮箱”列的数据单元格设置全局属性

contenteditable=“true”

，将此列设置为可编辑的

状态。4.页面效果：5.4.4编写正文5．设置全局属性设置“联系地址”列的数据部分全局属性data-*，如设置为data-address=“湖北省武汉市”。5.4.4编写正文6．复制并更改数据内容将数据部分的<tr>复制两份，并更改数据内容。5.4.4编写正文7．页面最终效果5.4.4编写正文第6章

HTML5多媒体：HTML5播放音频6.1技能和知识点编写音乐试听页面，使用HTML5的audio元素播放音频文件，页面效果如图所示。6.2需求简介1．项目设计（1）项目名称：musicPlay。（2）项目文件结构如表所示。6.3设计思路类型文件说明html文件index.html播放音频html页面mp3文件audio/song.mp3音频文件，格式mp32．搭建页面主体结构搭建页面主体结构，<table>创建音乐列表，<audio>创建播放控件，如下图所示。6.3设计思路6.4.1

搭建页面结构6.4.2

设置标题6.4.3创建音乐列表6.4实现（1）创建Web项目musicPlay。（2）在项目中创建index.html文件，在index.html文件中搭建页面结构。①使用标题标签<h1>创建页面标题区域；②使用表格标签<table>创建页面内容区域。6.4.1

搭建页面结构（1）修改<title>内容为“musicPlay”。（2）修改<h1>内容为“音乐试听”。（3）页面效果如右图所示。6.4.2设置标题1．创建音乐列表在<table>中添加<tr>和<td>，在<td>中嵌入<audio>标签创建音乐播放器。设置<audio>标签src属性为音乐地址。2.页面效果：6.4.3创建音乐列表3．显示播放控件（1）给<audio>标签添加controls属性，显示播放控件。（2）页面效果：6.4.3创建音乐列表第7章

HTML5多媒体：HTML5播放视频7.1技能和知识点编写页面，使用HTML5的video元素播放视频文件，功能需求效果如图所示。7.2需求简介1．项目设计（1）项目名称：videoPlay。（2）项目文件结构如表所示。7.3设计思路类型文件说明html文件index.html播放视频html页面mp4文件video/01.mp4视频文件，格式mp42．搭建页面主体结构搭建页面主体结构，<table>创建播放列表，<video>创建播放控件，如下图所示。7.3设计思路7.4.1

搭建页面结构7.4.2

设置标题7.4.3创建视频列表7.4实现（1）创建Web项目videoPlay。（2）在项目中创建index.html文件，在index.html文件中搭建页面结构。①使用标题标签<h1>创建页面标题区域；②使用表格标签<table>创建页面内容区域。7.4.1

搭建页面结构（1）修改<title>内容为“videoPlay”。（2）修改<h1>内容为“播放记录。（3）页面效果如右图所示。7.4.2设置标题1．创建视频在<table>中添加<tr>和<td>，在<td>中嵌入<video>元素创建播放列表，使用<video>的width属性设置视频宽度为200px。2.页面效果：7.4.3创建视频列表3．显示播放控件（1）给<video>标签添加controls属性，显示播放控件。（2）显示播放控件效果如下图所示。7.4.3创建音乐列表第8章

HTML5语义化元素：音乐内容页8.1技能和知识点使用HTML5的标准元素，制作一个音乐内容页。1．页头4个导航链接2．正文（1）音乐名（2）音乐内容：歌手、

所属专辑和音乐图片（3）操作按钮3．页脚3个链接页面效果如右图所示。8.2需求简介1．项目设计（1）项目名称：musicContent。（2）项目文件结构如表所示。8.3设计思路类型文件说明html文件index.html音乐内容页html文件jpg文件img/01.jpg音乐图片，大小130×1302．搭建页面主体结构页面分为页头、正文和页脚三部分，如下图所示。使用HTML5语义化标签搭建页面主体结构。8.3设计思路3．创建正文内容使用HTML5元素创建正文内容，正文部分主体结构如下图所示。8.3设计思路8.4.1

搭建页面结构8.4.2制作页头8.4.3创建正文结构8.4.4创建音乐内容8.4.5操作按钮8.4.6制作页脚8.4实现（1）创建项目musicContent。（2）编写index.html，使用HTML5语义化标签搭建页面主体结构。8.4.1

搭建页面结构（1）在<header>标签中使用HTML5语义化标签<nav>创建导航栏。编写导航栏内容，使用<a>标签创建4个导航链接。（2）页面效果如下图所示。8.4.2制作页头在<article>标签中创建正文音乐内容。8.4.3创建正文结构（1）使用<h1>标签定义音乐的名称，<small>让歌手和所属专辑以小号字体显示，<img>向页面中插入音乐图片。（2）音乐正文部分效果如右图所示。8.4.4创建音乐内容（1）在<section>标签中使用<button>按钮创建四个操作按钮，包括播放、收藏、分享和下载。（2）添加按钮后效果如右图所示。8.4.5操作按钮（1）在<footer>标签中编写页脚内容，使用<small>使链接显示为小号字体。链接内容为“服务条款”“隐私政策”“意见反馈”。（2）运行效果如右图所示。8.4.6制作页脚第9章

CSS+CSS3：微博网站首页9.1技能和知识点编写微博的首页，页面分为页头、正文两部分。1．页头页头部分具有logo、搜索栏、登录、注册链接。2．正文（1）导航栏正文左侧导航栏分为“热门”“头条”“视频”和“榜单”4个分类导航。（2）微博列表正文右侧为微博列表，每条微博包含微博内容、头像、用户名和发布时间。9.2需求简介页面效果如下图所示。9.2需求简介1．项目设计（1）项目名称：tinyBlog。（2）项目文件结构如表所示。9.3设计思路类型文件说明html文件index.html微博网站首页html文件css文件index.css微博网站首页样式css文件png文件img/logo.pngimg/default.pnglogo图片，大小150*48默认用户头像，大小48*48ttf文件font/SIMYOU.TTF字体文件2．搭建页面主体结构页面主体分为页头和正文两部分，如下图所示。页头包括logo、搜索表单和登录注册链接。正文包括左侧导航栏和右侧微博列表。9.3设计思路3．设置搜索栏使用CSS3颜色样式设置搜索栏，如下图所示。9.3设计思路4．设置导航栏使用CSS3伪类选择器和字体样式设置导航栏，如下图所示。9.3设计思路5．设置微博列表使用CSS3兄弟选择器、属性选择器和颜色设置微博列表，如下图所示。9.3设计思路9.4.1

搭建页面结构9.4.2制作页头9.4.3制作正文导航栏9.4.4制作正文微博列表9.4实现（1）创建项目tinyBlog。（2）在index.html中搭建页面主体结构。①页头<div>标签设置class为“navbar”。②正文<div>标签设置class为“pageContainer”。9.4.1

搭建页面结构（1）在<divclass="navbar">中编写页头内容。①logo部分为一个超链接标签<a>，设置class值为“logo”。②搜索表单内部为一个文本输入框及一个搜索按钮。③导航栏部分为注册和登录两个超链接标签，设置导航栏容器class值为“nav”，设置超链接标签class值为“nav_link”。9.4.2制作页头（2）在index.css中设置页头样式。①在index.html的<head>标签中引入样式文件css/index.css。9.4.2制作页头（2）在index.css中设置页头样式。②创建index.css文件，在文件中编写初始化样式。使用通配符选择器*将所有元素的内边距padding、外边距margin都设置为0。去除列表样式。使用标签选择器，设置所有<a>标签文本颜色为黑色，去除文本下划线。9.4.2制作页头（3）使用class选择器设置<divclass="navbar">样式。①设置元素宽度为父元素的70%，上下内边距为0，左右内边距为15%。②当内容超过溢出时隐藏。③设置下边框为宽度的1px实线且颜色为黑色，透明度为0.1。9.4.2制作页头（4）使用class选择器通过背景属性设置logo图。①设置内容宽度为150px，高度为48px。②上外边距为6px。③设置背景图片为logo.png且背景图片不重复。④设置浮动布局为左浮动。9.4.2制作页头（5）设置<form>表单样式。①设置form表单上外边距为60px，左外边距为30px，右下外边距为0。②设置表单为行内块元素，使用raga()函数设置表单的背景颜色。③设置表单边框宽度为1px的黑色实线透明度为0。④设置表单内的输入框上下内边距为2px，左右内边距为5px。⑤输入框背景颜色为transparent，即全透明的黑色。⑥去除输入框的边框。9.4.2制作页头（7）设置<divclass="nav">样式。①设置浮动布局为右浮动。②设置文本行高为60px。页头部分效果如下图所示。9.4.2制作页头（1）在index.html的<divclass="pageContainer">中编写导航栏。正文左侧导航栏为一个ul无序列表，内容为“热门”“头条”“视频”和“榜单”。导航栏效果如下图所示。9.4.3制作正文导航栏（2）在index.css中设置导航栏样式。①设置<divclass="pageContainer">样式。②设置元素宽度为65%，上下外边距为20px，左右外边距为auto。③元素内容溢出时隐藏。导航栏效果如下图所示。9.4.3制作正文导航栏（3）设置并使用自定义字体。①使用CSS3自定义字体@font.face来引入外部字体并命名为“myFont”。②设置导航栏整体宽度为20%，左浮动且字体大小为20px。设置字体为自定义字体“myFont”。导航栏效果如下图所示。9.4.3制作正文导航栏（4）设置导航栏列表项样式。①使用后代选择器设置列表项行高为40px，文本居中对齐。②使用CSS3伪类选择器nth-child()设置第一个元素文字颜色为白色，背景颜色为橘黄色。导航栏效果如下图所示。9.4.3制作正文导航栏1．在<divclass="pageContainer">中继续编写微博列表（1）编写一个class为page_right的<div>。（2）编写一个class为blog_module的超链接标签<a>，其内部内容有微博内容、用户头像、用户昵称及发布时间。（3）将<aclass=“blog_module”>及其内容复制4份。9.4.4制作正文微博列表2．在index.css中设置微博列表样式编写微博列表布局，设置其宽度为80%，且为右浮动。微博列表部分效果

如右图所示。9.4.4制作正文微博列表3．编写微博模板样式（1）设置元素为块级元素。（2）设置元素内边距为20px，上右外边距为0，下左外边距为20px，边框宽度为1px黑色实线，透明度为0.1。（3）设置元素内容溢出隐藏。微博列表部分效果

如右图所示。9.4.4制作正文微博列表4．使用兄弟选择器设置用户头像样式（1）设置宽度为20px，左浮动。（2）上外边距为16px，右外边距为8px，下左外边距为0。微博列表部分效果

如下图所示。9.4.4制作正文微博列表5．使用属性选择器设置用户名和发布日期样式（1）设置元素为行内块元素。（2）字体大小为14px，文本颜色为灰色。（3）上右外边距为16px，下左外边距为0。9.4.4制作正文微博列表最终运行效果如下图所示。9.4.4制作正文微博列表第10章

CSS+CSS3：技术论坛系统首页10.1技能和知识点使用CSS3制作技术论坛的首页，页面内容包括页头、正文两部分。1．页头标题和3个导航链接。2．正文（1）分类列表：4个分类导航。（2）帖子列表：最新帖子列表和最热帖子列表。10.2需求简介页面效果如下图所示。10.2需求简介1．项目设计（1）项目名称：techForum。（2）项目文件结构如表所示。10.3设计思路类型文件说明html文件index.html技术论坛系统首页html文件css文件index.css技术论坛系统首页样式css文件2．搭建页面结构页面分为页头和正文两部分，页头包括标题和导航链接，正文包括左侧分类列表和右侧帖子列表，如下图所示。10.3设计思路3．搭建页头使用CSS3弹性布局搭建页头，CSS3动画制作标题，如下图所示。10.3设计思路4．搭建正文使用CSS3弹性布局和多列布局搭建正文内容，如下图所示。10.3设计思路10.4.1

搭建页面结构10.4.2制作页头10.4.3添加标题动画10.4.4制作正文分类列表10.4.5制作正文帖子列表10.4实现（1）创建项目techForum。（2）在index.html中搭建页面主体结构。10.4.1

搭建页面结构1．在<divclass="navbar">中编写页头内容（1）页头由标题和导航链接两部分构成。其中标题部分为一个<span>标签和一个<h1>标签，导航链接部分为“首页”“推荐”和“热门”三个<a>标签。（2）页面效果如下图所示。10.4.2制作页头2.在index.css中设置页头样式。（1）在index.html的<head>标签中引入样式文件。（2）样式初始化，使用通配符选择器*去掉所有元素内边距和外边距。使用标签选择器去掉<a>标签的下划线，设置文字颜色为黑色。10.4.2制作页头2.在index.css中设置页头样式。（3）设置<divclass="navbar">样式。①设置上下内边距为0，左右内边距为15%。行高为60px。下边框为黑色实线1px，透明度为0.1。②设置为弹性布局，并使用justify-content属性使弹性子元素（标题和导航）在主轴两端对齐。

（4）页面效果如下图所示。10.4.2制作页头（5）编写导航链接样式。设置上下内边距为0，左右内边距为10px。（6）导航增加内边距效果如下图所示。10.4.2制作页头（1）设置<divclass="title">为相对定位。（2）使用@keyframes规则创建动画move，控制top及left属性。10.4.3添加标题动画（3）设置<spanclass="move">样式。①该元素为绝对定位，背景颜色rgba(255,0,0,0.5)，25px的圆角边框，animation属性应用动画move：持续时间3s，以低速结束，无限循环。

②CSS3动画效果如下图所示。10.4.3添加标题动画1．在index.html的<divclass="pageContainer">中编写分类列表（1）分类列表为一个ul无序列表，内容为一个标题“论坛分类”和四个列表项“HTML”“CSS”“HTML5”和“CSS3”。10.4.4制作正文分类列表2．在index.css中设置分类列表样式（1）设置<divclass=“pageContainer”>为弹性布局，设置为弹性布局后的效果如下图所示。10.4.4制作正文分类列表2．在index.css中设置分类列表样式（2）使用flex属性分配弹性子元素占有的区域大小，正文部分效果如图所示。10.4.4制作正文分类列表1．在<divclass="pageContainer">中继续编写帖子列表（1）编写一个<div>标签，内容为一个<h2>标题“最新”及一个ul无序列表。其中列表项为帖子标题。（2）将<div>及其内容复制一份，修改<h2>标题内容为“最热”。10.4.5制作正文帖子列表2．在index.css中设置帖子列表样式（1）使用多列布局将列表内容分成3列，列间距为50px，列分隔线为褐色1px的实线。10.4.5制作正文帖子列表2．在index.css中设置帖子列表样式（2）正文部分效果如图所示。10.4.5制作正文帖子列表第11章

移动端：电商列表页11.1技能和知识点制作电商网站的商品列表页面，页面分为两个部分。（1）页头：标题和导航。（2）商品列表：每个列表项中包括商品图、商品名称、商品价格和交易数量。页面效果如图所示。11.2需求简介1．项目设计（1）项目名称：productList。（2）项目文件结构如表所示。11.3设计思路类型文件说明html文件index.html电商列表页html文件css文件index.css电商列表页样式css文件png文件img/01.png商品图片，大小125*1252．搭建页面结构页面分为页头、商品列表两部分，使用HTML5语义化标签搭建页面，页面结构设计如下图所示。11.3设计思路3．搭建页头使用标题标签<h1>和HTML5语义化标签<nav>搭建页头，如下图所示。11.3设计思路4．创建商品列表项使用HTML5语义化标签和页面增强元素创建商品列表项，如下图所示。11.3设计思路11.4.1

搭建页面结构11.4.2设置视口11.4.3

制作页头11.4.4创建商品列表11.4实现（1）创建项目productList。（2）在index.html中搭建页面主体结构。11.4.1

搭建页面结构<body> <header> <!--页头--> </header> <article> <!--正文--> </article></body>使用viewport属性适配移动端视口，设置页面初始缩放比为1.0。11.4.2设置视口1．编写页头内容在<header>标签中编写页头内容，包括标题和导航栏。2．页头效果页头效果如下图所示。11.4.3

制作页头<header> <h1>商品列表</h1> <nav> <ahref="">综合</a> <ahref="">销量</a> <ahref="">价格</a> </nav></header>3．添加页头样式（1）引入样式文件index.css。（2）设置导航<nav>为弹性布局，且设置弹性子元素在横轴上平均分布。（3）页头部分效果：11.4.3

制作页头nav{

/*设置弹性布局*/

display:flex;

/*设置弹性子元素在横轴上平均分布*/justify-content:space-around;}<linkrel="stylesheet"href="./css/index.css">3．添加页头样式（4）设置导航链接样式，去除下划线，设置宽度为100%且文本居中，字体颜色为黑色。（5）为第一个导航链接添加下边框。（6）页头部分效果如下图：11.4.3

制作页头nava:nth-child(1){border-bottom:1pxsolid#000;}nava{text-decoration:none;width:100%;text-align:center;color:black;}1．创建正文的商品列表在<article>标签中创建正文的商品列表，包含商品图和商品信息。11.4.4创建商品列表<article> <section> <figure> <imgsrc="./img/01.png"> </figure> <div> <p>手机</p> <p>￥2980</p> <p>199人付款</p> </div>

</section> <!--复制两份<section>--></article>2．商品列表页面效果商品列表页面效果如下图所示。11.4.4创建商品列表3．添加商品列表样式（1）设置<section>为弹性布局，5px的圆角边框半径。（2）正文部分效果如右图所示。11.4.4创建商品列表section{display:flex;

border:1pxsolidlightgray;

/*设置圆角边框半径为5px*/

border-radius:5px;margin:10px5px;}第12章

移动端：视频网站12.1技能和知识点制作视频播放页面，页面主要包括以下几部分：（1）视频播放区域；（2）评论列表；（3）发表评论表单。页面效果如右图所示。12.2需求简介1．项目设计（1）项目名称：videoSite。（2）项目文件结构如表所示。12.3设计思路类型文件说明html文件index.html视频网站html文件css文件index.css视频网站样式css文件mp4文件video/01.mp4视频，格式mp42．搭建页面结构语义化标签搭建页面结构，<video>创建播放控件，<ul>创建评论列表，<form>创建发布评论表单，页面结构设计如下图所示。12.3设计思路12.4.1

搭建页面结构12.4.2设置视口12.4.3创建视频播放控件12.4.4创建评论列表12.4.5创建发布评论表单12.4.6页面优化12.4实现（1）创建项目videoSite。（2）编写index.html，使用HTML5语义化标签搭建页面主体结构。12.4.1

搭建页面结构<body> <section> <!--视频--> </section> <section> <!--评论列表--> </section> <section> <!--发布评论表单--> </section></body>使用viewport属性适配移动端视口，设置页面初始缩放比为1.0。12.4.2设置视口<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0"><title>videoSite</title></head>使用<video>元素嵌入视频，通过width属性设置视频宽度为100%，controls属性显示播放控件。视频播放控件页面效果如右图所示。12.4.3创建视频播放控件<section><videosrc="./video/01.mp4"width="100%"controls>

当前浏览器不支持video

</video></section>（1）使用<ul>无序列表标签创建评论列表，分为“第1条评论”“第2条评论”和“第3条评论”。（2）评论列表效果如右图所示。12.4.4创建评论列表<section> <ul> <li>第1条评论</li> <li>第2条评论</li> <li>第3条评论</li> </ul></section>1．创建发布评论表单使用<form>元素创建发布评论表单，HTML5表单属性placeholder设置提示信息。2．发布评论表单效果发布评论表单效果如图所示。12.4.5创建发布评论表单<section><formaction=""method="GET"><inputtype="text"placeholder="请输入评论"></input><inputtype="submit"value="发布"></form></section>3．添加发布评论表单样式（1）编写index.html，在头部<head>中引入样式文件index.css。（2）设置<form>为弹性布局，固定定位在底部。（3）使用固定定位布局如右图所示。12.4.5创建发布评论表单form{display:flex;width:100%;background:whitesmoke;/*使用固定定位固定在底部*/

position:fixed;bottom:0;left:0;}<linkrel="stylesheet"href="./css/index.css">3．添加发布评论表单样式（4）设置<input>行高30px，外边距10px。（5）发布评论表单样式效果如下图所示。12.4.5创建发布评论表单input{line-height:30px;margin:10px;}3．添加发布评论表单样式（6）使用flex属性分配弹性子元素占有的区域大小。输入框占4份，发布按钮占1份。（7）发布评论表单样式效果如下图所示。12.4.5创建发布评论表单forminput[type="text"]{flex:4;}forminput[type="submit"]{flex:1;}1．当前页面会产生的问题（1）因为固定定位脱离文档流，所以当评论列表内容增多产生滚动条时，底部的内容会被发布评论表单遮挡。（2）页面效果如右图所示。12.4.6页面优化<section> <ul> <li>第1条评论</li> <li>第2条评论</li> <li>第3条评论</li> …… <li>第25条评论</li> </ul></section>2．解决问题（1）评论列表添加大于发布评论表单高度的底部外边距。（2）页面优化后效果如右图所示。12.4.6页面优化ul{margin-bottom:60px;}第13章

JavaScript基础语法：日期计算器13.1技能和知识点（1）通过使用JavaScript实现一个日期计算器。（2）页面有一个日期选择框，选择日期后单击计算按钮，在下方显示该年的1月1日到当天经过的天数。（3）功能效果图如下图所示。13.2需求简介1．项目设计（1）项目名称：dateCal。（2）项目文件结构如表所示。13.3设计思路类型文件说明html文件index.html日期计算器页面2．页面结构页面结构设计如下图所示。13.3设计思路3．绑定单击事件“计算”按钮绑定单击事件，调用计算函数Counter。4．计算函数Counter（1）获取日期选择器的值。（2）将值切割为“年，月，日”形式的数组。（3）获取该年1月1日日期对象jan1。（4）获取该天日期对象now。（5）计算相差天数days，显示结果。13.3设计思路13.4.1编写页面13.4.2获取日期值13.4.3创建日期对象13.4.4计算并显示结果13.4实现（1）创建项目dateCal。（2）编写日期计算器页面文件index.html，创建一个日期输入框、一个计算按钮和一个计算结果显示元素。给按钮绑定单击事件，单击时调用方法Counter()。（3）页面效果如右图所示。13.4.1编写页面<!DOCTYPEhtml><html>

<head>

<metacharset="utf-8"/>

<title>日期计算器</title>

</head>

<body>

请选择日期：<inputtype="date"id="date"/>

<buttonid="btn"onclick="Counter()">计算</button>

<pid="past"></p>

</body></html>（1）在</body>之前添加<script>标签，在<script>标签中定义方法Counter()。13.4.2获取日期值<script> functionCounter(){ }</script>（2）使用getElementById()函数通过元素的id属性获取日期输入框的值并打印输出。在日期输入框中选择日期，然后单击计算按钮。查看浏览器开发者工具中Console界面的打印输出。获取日期值效果如下图所示。13.4.2获取日期值functionCounter(){ vardate=document.getElementById("date").value;

console.log(date);}（3）使用split方法将日期值切割为字符串数组。单击计算按钮查看Console界面输出。切割日期值效果如下图所示。13.4.2获取日期值functionCounter(){ ……//使用split函数按照参数切割字符串为数组 vararr=date.split("-"); console.log(arr);}

console.log(date);}（1）使用Date对象分别创建该年1月1日和该天的日期对象并打印输出对象内容。单击计算按钮后，页面效果如下图所示。13.4.3创建日期对象functionCounter(){ ……

//创建该年1月1日的日期对象 varjan1=newDate(arr[0],0,1); console.log(jan1);

//创建该天的日期对象

varnow=newDate(arr[0],arr[1]-1,arr[2]);

console.log(now);}（1）将两个时间对象相减，获得该天日期距离该年的1月1日有多少毫秒。将毫秒转换为天数，并使用innerText属性将结果显示在id为past的<p>标签中。（2）单击计算按钮后，运行结果页面效果如下图所示。13.4.4计算并显示结果第14章

面向对象：学生信息管理14.1技能和知识点（1）定义一个学生信息构造方法，通过原型链的方式给该构造方法定义一个初始化学生信息的方法，需要传入学生的姓名、年龄及班级。（2）实例化该构造函数并传入初始化数据。修改其中的学生班级属性并将实例化的对象在控制台打印输出。（3）功能效果图如下图所示。14.2需求简介1．项目设计（1）项目名称：stuManage。（2）项目文件结构如表所示。（3）定义一个学生信息构造方法Student()。（4）使用prototype给构造方法Student定义一个方法init（参数name、age、classID），用来初始化学生信息。（5）实例化Student并传入初始化数据。（6）修改实例对象的classID。（7）在控制台打印输出实例化对象。14.3设计思路类型文件说明html文件student.html学生信息管理页面14.4.1创建文件14.4.2创建构造函数14.4.3添加原型方法14.4.4实例化对象14.4实现（1）创建项目stuManage。（2）创建学生信息管理页面文件student.html，设置页面标题标签<title>。14.4.1创建文件<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>学生信息管理</title> </head> <body>

</body></html>（1）在<body>中添加<script>标签。（2）在<script>标签中定义构造函数Student()。14.4.2创建构造函数<body><script>functionStudent(){};</script></body>使用原型prototype属性给构造方法Student定义一个原型方法init()，用来初始化学生信息，包含三个参数name、age和classID。在init()方法内部使用this关键词访问构造方法自身属性。14.4.3添加原型方法<script>functionStudent(){};Stotype.init=function(name,age,classID){=name;this.age=age;this.classID=classID;};</script>（1）使用new关键字实例化构造方法Student，得到对象student。14.4.4实例化对象<script>functionStudent(){};Stotype.init=function(name,age,classID){//省略代码};varstudent=newStudent();</script>（2）调用原型方法init()，传入初始值。14.4.4实例化对象<script>functionStudent(){};Stotype.init=function(name,age,classID){ //省略代码};varstudent=newStudent();student.init("小明",18,"软件工程1班");</script>（3）修改student对象的classID属性值，并使用console.log()方法在控制台进行打印。14.4.4实例化对象<script>functionStudent(){};Stotype.init=function(name,age,classID){ //省略代码};varstudent=newStudent();student.init("小明",18,"软件工程1班");student.classID="计算机2班";console.log(student);</script>（4）运行后页面效果如下图所示。14.4.4实例化对象第15章

DOM操作：学生信息列表15.1技能和知识点将数组中的学生信息以表格的形式显示到页面。（1）定义一个二维数组存放学生信息，包括姓名、年龄和班级，遍历数组生成表格。（2）表单填写信息后，单击新增按钮，表格新增一行学生信息。（3）单击删除按钮，删除该行数据。功能需求如下图所示。15.2需求简介（1）项目名称：stuInfo。（2）项目文件结构如表所示。15.3设计思路类型文件说明html文件index.html学生信息列表页面（3）页面结构设计如图所示。15.3设计思路（4）定义二维数组student，存放初始学生信息，内容包括姓名、年龄和专业。（5）遍历student，调用新增行方法addRow(array)，参数array为学生信息，生成表格。（6）创建新增行方法，遍历学生信息数组，生成<td>添加到<tr>，再单独创建一个单元格放置删除按钮，最后将该行添加到<table>。（7）新增按钮绑定单击事件，获取表单数据，调用addRow方法，添加一行数据。（8）删除按钮绑定单击事件，从<table>中删除该行。15.3设计思路15.4.1编写页面15.4.2生成学生信息表格15.4.3新增学生信息15.4.4删除学生信息15.4实现（1）创建项目stuInfo。（2）编写简易计算器页面文件index.html，设置标题标签<title>内容为“学生信息列表”。15.4.1编写页面<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>学生信息列表</title> </head> <body>

</body></html>（3）编写新增学生信息表单，表单控件为“姓名”“年龄”“专业”三个输入框及一个新增按钮。给每一个表单控件添加id属性，以便后续用JavaScript代码进行操作。（4）页面效果如右图所示。15.4.1编写页面<body>

<form>

姓名：<inputtype="text"name="stu_name"id="stu_name"/><br/>

年龄：<inputtype="number"name="stu_age"id="stu_age"/><br/>

专业：<inputtype="text"name="stu_major"id="stu_major"/><br/><inputtype="submit"value="新增"id="addForm"/>

</form></body>（5）编写放置学生信息的表格，表格设置边框属性botder为1。表格中主要有四列：姓名、年龄、专业、操作。页面效果如右图所示。15.4.1编写页面<body> …… <br/> <tableborder="1"> <tr> <th>姓名</th> <th>年龄</th> <th>专业</th> <th>操作</th> </tr> </table></body>1．定义学生信息二维数组在</body>之前添加<script>标签，在<script>标签中定义学生信息二维数组student。数组内容为多个学生信息，每条学生信息包含学生姓名、年龄及专业。15.4.2生成学生信息表格<body> …… <script> varstudent=[

["张三",29,"软件工程"], ["李四",17,"计算机"], ["王五",18,"软件工程"] ] </script></body>2．生成表格使用for循环遍历学生信息数组，调用addRow方法生成表格。15.4.2生成学生信息表格<script> …… vartable=document.getElementsByTagName("table")[0]; for(vari=0;i<student.length;i++){ addRow(student[i]); }</script>3．创建新增行方法addRow（1）创建一个表格行元素tr。（2）使用for循环遍历学生信息，创建单元格元素