《网站设计与开发》 课件 项目二 HTML5 基础页面制作.pptx

项目二HTML5基础页面制作;项目引入

超文本标记语言（HyperTextMarkupLanguage，HTML）是制作网页的标准语言。自1990年推出以来，HTML就一直被用作万维网的信息表示语言，在万维网的发展历程中起着关键性作用。它通过标签式的指令，将影像、声音、图片、文字、动画等内容组合在一起，并通过超链接方法将文字、图表与其他信息媒体相关联，最后借助浏览器显示其页面效果。;网页的本质就是使用超文本标记语言编写的一种文本文件，通过在该文本文件中添加标签，可以告诉浏览器如何显示其中的内容（如文字如何处理、画面如何安排、图片如何显示等），并通过超链接技术，与世界各地主机的文件进行链接。

HTML5是HTML的修订版本，是网页开发标准的革命性成果，被认为是互联网的核心技术之一。HTML5技术可应用于移动端网页、移动视频、在线直播等方面，并且能提升用户体验。;学习目标

知识目标

1.了解HTML5的特性及优势。

2.熟悉HTML文件的基本结构。

3.熟悉HTML5元素和常用标签。

技能目标

1.能够查看网页源代码，并能够根据HTML5元素和标签分析网页源代码的基本结构。

2.能够使用HTML5制作简单的文本网页。;任务分析

在制作网页之前，设计人员首先需要掌握HTML的语法规则和编写规范，需要了解网页代码的整体框架结构，包括页面头部信息、页面整体属性设置等。本任务重点学习HTML5的特性和优势、HTML文件基本结构、HTML5元素和常用标签等相关知识。;相关知识

一、HTML5概述

1.HTML5简介

HTML是用于描述网页文档的标记语言，HTML5就是HTML的第5个版本。;HTML的出现由来已久，1993年HTML最初作为互联网工程工作小组工作草案发布，之后得到了快速发展，从2.0版、3.0版、4.0版，直至2014年10月，万维网联盟（WorldWideWebConsortium，W3C）发布了HTML5的正式推荐标准，HTML5逐步成为互联网标准，并广泛应用于互联网应用的开发。HTML5对视频、音频、图片、动画以及与设备的交互等都提供了良好的支持，其强大的功能为网站开发提供了成熟的应用平台支撑。;2.HTML5的特性和优势

HTML5增加了很多非常实用的新功能和新特性。

（1）HTML5的特性

1）语义特性??HTML5赋予Web更好的语义特性和结构，体现在对资源描述框架、微数据与微格式等方面的支持，同时增添了许多新的结构元素。

2）本地存储特性。基于HTML5开发的应用程序具有更短的启动时间和更快的联网速度，这些全得益于HTML5的应用程序缓存以及本地存储功能。;3）设备兼容特性。HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据相连。

4）连接特性。HTML5提供更有效的连接工作效率，使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得以实现。HTML5拥有更有效的服务器推送技术，SSE（服务器发送事件）和WebSockets（浏览器和服务器之间全双工通信协议）就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。;5）网页多媒体特性。HTML5支持网页端的音频、视频等多媒体功能。

6）三维、图形及特效特性。基于SVG（可缩放矢量图形）、Canvas画布、WebGL（Web图形库）及CSS3（层叠样式表版本3）的3D功能，可以在浏览器中呈现非凡的视觉效果。

7）性能与集成特性。HTML5可以帮助Web应用和网站在多样化的环境中更快速的工作。;（2）HTML5的优势

1）强大的兼容性。得益于强大的兼容性，HTML5不但适合用于网页开发，也适合用于手机应用软件开发，并得到了Android（安卓）、iOS（苹果）移动操作系统的支持。

2）跨平台。在HTML5出现之前，由于平台的多样性，要针对不同的平台开发多套版本。而HTML5出现后，开发者只要使用一套程序，就能够很容易地实现多个平台的展现功能，降低了开发难度，节约了开发时间和成本。;3）即时更新。HTML5支持实时更新，因此HTML5的应用可以绕开应用市场的限制，进行自主实时更新。

4）离线缓存功能。HTML5通过JavaScript提供了数种不同的离线储存功能，相对于传统的Cookie有更好的弹性以及架构，可以储存更多的内容，并且拥有更好的安全和性能，即使浏览器关闭后也可以保存。

5）清晰的代码。HTML5更加符合语义学的标签描述内容，可以使写出的代码更加清晰和易于理解。;3.HTML5的开发工具及一般编写规范

（1）HTML5