《模块01使用HTML5编写第一个网页电子课件 HTML5网页设计.pptx》由会员分享，可在线阅读，更多相关《模块01使用HTML5编写第一个网页电子课件 HTML5网页设计.pptx（37页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、副主编：刘俊辉HTML5网页设计content模块一使用HTML5编写第一个网页模块二从HTML到HTML5的过渡模块三创建普通文档模块四创建多媒体文档模块五创建超链接content模块六创建表格模块七创建表单模块八 绘制图形模块九 CSS3入门与基础模块十 CSS3高级应用模块一使用HTML5编写第一个网页1.1HTML5简介HTML（hyper text markup language）是超文本标记语言，不同于C语言、Java或C#等编程语言，它是一种标记语言（markup language），标记语言由一套标记标签（如、等）组成，HTML就是使用这些标记标签来描述网页的。HTML5是HT
2、ML最新的修订版本。设计HTML5的目的是在移动设备上支持多媒体。1.1HTML5简介1.1.1 HTML5的概念HTML5 是新一代 HTML 标准。HTML5的上一个版本HTML4.01诞生于1999年。在那以后，Web 世界经历了巨变。目前，HTML5 仍处于完善之中，然而大部分现代浏览器已经支持HTML5标准。1.1HTML5简介1.1.2 HTML5的发展HTML5的前身名为Web应用程序，由WHATWG于2004年提出，W3C于2007年接受，并成立了一个新的HTML工作组。第一个正式的HTML5草案于2008年1月22日发布。目前，大多数浏览器都有一些面向HTML5的支持。201
3、2年12月17日，W3C发布HTML5规范的正式草案，该草案凝聚了大量网络工作者的心血。根据W3C的声明，HTML5是开放网络平台的基石。2014年10月29日，W3C宣布，经过近8年的努力，HTML5标准终于完成并发布。HTML5也有望成为开放Web平台（open Web platform）的基石。1.1HTML5简介1.1.3 HTML5的改进1.视频对多媒体的支持可以说是HTML5的一大亮点，用户再也不用借助第三方的插件（如Flash插件），省去了中间繁杂的配置环节，最主要的是运行环境的变化带来了性能上的提升和资源上的节约。video元素允许包含多个 source 元素，source元素
4、可以链接多个不同的视频文件，浏览器会使用第一个可以识别的文件。2.音频对多媒体支持的第二个关键元素则是对音频的支持，使用audio标签。其与video的使用方法相似，支持的音频文件格式主要包括wav、mp3、ogg，避免了对Flash等外部插件的依赖。1.1HTML5简介1.1.3 HTML5的改进3.画布我们可以在Windows自带的画图软件中自由地画图，而其中的画布就与此处的画布（canvas）有相似之处。HTML5中的canvas使用 JavaScript在网页上绘制图形，画布是一个矩形区域，可以控制上面每一个像素的属性。canvas拥有多种绘制图形、路径、矩阵和添加图形的方法。4.HT
5、ML5 的W eb 存储HTML5提供了两种在客户端存储数据的方式：localStorage和sessionStorage。在HTML4中，客户端数据的存储主要依靠cookie来实现，但cookie的缺点是不适合大数据的存储，因为它们的传递依赖于对服务器的请求，这使得cookie的速度慢且效率低下。1.1HTML5简介1.1.3 HTML5的改进5.新的input 类型HTML5 提供了新的input类型，这些新的类型可以让其对用户输入数据的验证变得更加简单方便，主要有以下几种类型：email、url、number、range、date pickers、search、color。6.新的表单类
6、型HTML5 添加了新的表单类型，主要有以下几种。（1）datalist。（2）keygen。（3）output。1.1HTML5简介1.1.3 HTML5的改进7.新增加的表单属性新增加的表单属性包括新的form表单和input表单的属性，为提升网站整体性能提供了更好的表现。8.新增加的语义元素HTML5 添加了、等很多语义元素。说明：HTML5的设计是以效率优先为原则，要求样式和内容分离，因此在HTML5的实际开发中，必须使用CSS来定义样式。1.1HTML5简介HTML具有以下特征：1.跨平台2.兼容性3.各大浏览器厂商支持1.1HTML5简介1.1.4 HTML5的应用（1）HTML5
7、是HTML、CSS和JavaScript的组合，强化了Web网页的表现技能。HTML5的网页应用如图1-1所示。图1-1 HTML5的网页应用提示：点击链接预览https:/1.1HTML5简介1.1.4 HTML5的应用（2）HTML5可以实现更具结构化、语义化的 Web 文档，方便搜索引擎索引站点。（3）作为下一代的网页语言，HTML5 拥有很多让人期待的新特性。HTML5能够在移动设备上未安装任何插件的情况下播放多媒体影音。提示：点击链接预览https:/1.1HTML5简介1.1.4 HTML5的应用（4）HTML5是Web标准的集合，不仅能够操作前端所见所得，还能操作后台输送到前台的
8、数据，实现离线存储功能。图1-3 HTML5实现手机App功能（5）HTML5可以实现Web App及智能手机App应用，如轻应用、微网站、手机网页等，如图1-3和图1-4所示。图1-4 HTML5实现手机网页功能1.1HTML5简介1.1.4 HTML5的应用（6）HTML5 提供了基于JavaScript的2D绘图功能和基于WebGL的3D绘图功能，操作网页游戏无须任何插件，如图1-5所示。图1-5 HTML5实现网页游戏功能（7）HTML5可以提供更多的CSS属性，可以做出更加丰富的渲染效果。1.1HTML5简介1.1.4 HTML5的应用（8）HTML5能快速地构建框架，使实现一些功能
9、更加简便，节省开发时间，如图1-6所示。图1-6 用HTML5实现购物网站的搭建（9）HTML5图表方案可以更加直观地在网站中用可视化的方式显现大量的数据及信息。提示：点击链接预览https:/1.2实现你的第一个HTML5页面1.2.1 准备上机环境Dreamweaver CC 2017本书采用Dreamweaver CC 2017版本软件，双击文件夹中的安装程序（setup）进行安装，安装过程中需要登录（没有Adobe账户的用户需要先行注册），登录后安装程序会自动运行。接受软件的许可协议后，会进入软件的第一次使用界面，设置软件的工作区和主题后，即可进入软件主界面，如图1-7图1-10所示。
10、1.2实现你的第一个HTML5页面1.2.1 准备上机环境Dreamweaver CC 2017图1-7 登录界面图1-8 安装过程提示提示：点击链接了解Dr eamw eav erhttps:/1.2实现你的第一个HTML5页面1.2.1 准备上机环境Dreamweaver CC 2017图1-9 软件许可协议界面1.2实现你的第一个HTML5页面1.2.1 准备上机环境Dreamweaver CC 2017图1-10 软件的初始化设置1.2实现你的第一个HTML5页面1.2.2 支持HTML5的浏览器支持HTML5的浏览器有Firefox、IE 10和IE 10以上版本，Chrome（谷歌
11、浏览器）、Opera、Safari等；Maxthon Browser（傲游）、360浏览器、QQ浏览器、搜狗浏览器、猎豹浏览器等国产浏览器也有支持HTML5的能力。本书采用的浏览器版本为IE 11。下面以加入画布标记为例检测浏览器的支持情况。在HTML页面中插入一段HTML5画布标记，当浏览器支持时，则会出现一个矩形，否则将会在页面中显示“您的浏览器不支持HTML5画布”。想一想：你还接触过哪些浏览器？1.2实现你的第一个HTML5页面1.2.2 支持HTML5的浏览器其代码如下。浏览器测试#myCanvasbackground:blue;width:100px;height:100px;您的
12、浏览器不支持HTML5画布1.2实现你的第一个HTML5页面1.2.2 支持HTML5的浏览器在Dreamweaver CC 2017中运行后，生成HTML文件，在IE 8中执行页面文件，由于IE 8不支持HTML5的画布标记，因而在浏览器中将显示“您的浏览器不支持HTML5画布”，如图1-11所示；如果在IE 11中执行，由于IE 11支持HTML5的画布标记，所以在浏览器中将显示一个蓝色的正方形，如图1-12所示。图1-11 IE 8浏览器测试结果图1-12 IE 11浏览器测试结果1.2实现你的第一个HTML5页面1.2.3 建立站点和编写第一个网页建立站点 01（1）在计算机中新建一个
13、文件夹。例如，在D盘建立一个名为“测试”的文件夹，如图1-13所示，将所有相关网页文件和文件夹都存储在该新建的文件夹中。图1-13 新建的“测试”文件夹1.2实现你的第一个HTML5页面1.2.3 建立站点和编写第一个网页建立站点 01（2）启动Dreamweaver，选择“站点”“新建站点”菜单命令,在弹出的对话框的“站点名称”文本框中输入站点名称为“测试”，设置“本地站点文件夹”为在D盘中新建的“测试”文件夹，如图1-14所示。图1-14 新建站点1.2实现你的第一个HTML5页面1.2.3 建立站点和编写第一个网页编写第一个网页 02图1-15 新建HTML文档（1）启动Dreamwea
14、ver，选择“文件”“新建”菜单命令，弹出“新建文档”对话框（默认选中HTML文档类型），在“标题”文本框中输入“我的第一个网页”，在“文档类型”下拉列表框中选择HTML5，如图1-15所示。1.2实现你的第一个HTML5页面1.2.3 建立站点和编写第一个网页编写第一个网页 02图1-16 新建的HTML文档界面（2）在新建的文档中选择“拆分”模式（默认），主页面被分成上下两部分，上半部分为页面预览，下半部分为代码部分，如图1-16所示。1.2实现你的第一个HTML5页面1.2.3 建立站点和编写第一个网页编写第一个网页 02（3）新建文档中有默认的代码，共10行，在之间插入代码，在代码中添
15、加文字，如图1-17所示。我的第一个网页我的第一个段落图1-17 在代码中添加文字1.2实现你的第一个HTML5页面1.2.3 建立站点和编写第一个网页编写第一个网页 02（4）保存页面。选择“文件”“保存”菜单命令，在弹出的“另存为”对话框中选择将编辑好的文件存储到D盘“测试”文件夹中，并更改文件名为“我的第一个网页”，如图1-18所示。图1-18 保存页面1.2实现你的第一个HTML5页面1.2.3 建立站点和编写第一个网页编写第一个网页 02（5）预览页面。打开D盘“测试”文件夹，用IE 11打开“我的第一个网页.html”文件，效果如图1-19所示。图1-19 用IE 11预览页面的效
16、果1.3案例【案例描述】学习完本模块的内容，小张同学已经迫不及待地想做一个网页，以展示自己的学习成果。小张同学希望做一个能显示“让我们一起开始HTML5语言的旅程吧！”的网页。1.3案例【源代码展示】!doctype html 制作的第一个HTML5文件让我们一起开始HTML5语言的旅程吧！1.3案例【运行结果】运行结果如图1-20所示。图1-20 模块1案例运行结果【分析】小张同学结合本模块所学的知识完成了网页的设计。在设计中，小张同学运用标签定义了页面标题，使用标签定义了页面内容。1.4思考与练习一、填空题1.HTML5 给人们带来了很多人性化和方便的改变，包括新的解析顺序、新的input
17、 属性等。2.HTML5设计的目的是在 支持多媒体。二、选择题1.网页的基本语言是（）。A.JavaScript B.VBScript C.HTML D.XML2.借助网页中所谓的（），通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其他文件，获得相应的信息。A.超链接 B.热区 C.图片 D.多媒体1.4思考与练习3.网页的扩展名是（）。A.html B.doc C.bat D.ppt4.HTML指的是（）。A.超文本标记语言（hyper text markup language）B.家庭工具标记语言（home tool markup language）C.超链接和文本标记语言（hyperlinks and text markup language）D.以上都不正确三、判断题1.HTML5标记符的属性一般不区分大小写。（）2.HTML5能快速地构建框架，更加简便地实现一些功能，节省开发时间。（）THANKS