全栈工程师-前端开发-HTML5_HTML5SVG矢量图形.docxVIP

PAGE1

PAGE1

HTML5基础

1HTML5概述

HTML5是超文本标记语言（HyperTextMarkupLanguage）的第五个版本，它于2014年10月由W3C（WorldWideWebConsortium）正式发布。HTML5不仅改进了之前的HTML标准，还引入了许多新的功能，以适应现代网页的需求。HTML5的设计目标是提高网页的可读性、可访问性，以及减少网页开发者的依赖于插件（如Flash）和框架（如jQuery）。

1.1特点

语义化增强：HTML5引入了新的语义化标签，如header、nav、section、article、footer等，使得网页结构更加清晰。

多媒体支持：HTML5内置了对音频和视频的支持，通过audio和video标签，可以直接在网页中嵌入多媒体文件，无需依赖Flash等插件。

离线存储：HTML5提供了离线存储功能，通过localStorage和sessionStorage，可以存储用户数据，使得网页应用可以在离线状态下运行。

绘图能力：HTML5引入了canvas标签，可以用于绘制图形和动画，增强了网页的绘图能力。

设备访问：HTML5提供了对设备的访问能力，如地理位置、摄像头、麦克风等，使得网页应用可以更好地利用设备资源。

2HTML5新特性

HTML5的新特性主要体现在以下几个方面：

2.1语义化标签

HTML5引入了多个语义化标签，这些标签不仅提高了网页的可读性，还使得搜索引擎和屏幕阅读器能够更好地理解网页内容。例如，header标签用于定义页面或区域的头部，footer标签用于定义页面或区域的底部，nav标签用于定义页面的导航链接部分。

2.2多媒体标签

HTML5提供了audio和video标签，可以直接在网页中嵌入音频和视频文件，无需依赖Flash等插件。这不仅提高了网页的多媒体能力，还使得网页更加轻量级和高效。

2.2.1示例代码

!--HTML5音频标签--

audiocontrols

sourcesrc=music.mp3type=audio/mpeg

您的浏览器不支持audio标签。

/audio

!--HTML5视频标签--

videowidth=320height=240controls

sourcesrc=movie.mp4type=video/mp4

您的浏览器不支持video标签。

/video

2.3离线存储

HTML5提供了localStorage和sessionStorage，可以存储用户数据，使得网页应用可以在离线状态下运行。localStorage用于持久化存储数据，sessionStorage用于存储会话级别的数据。

2.3.1示例代码

//存储数据到localStorage

localStorage.setItem(name,JohnDoe);

//从localStorage中获取数据

varname=localStorage.getItem(name);

console.log(name);//输出：JohnDoe

//存储数据到sessionStorage

sessionStorage.setItem(name,JohnDoe);

//从sessionStorage中获取数据

varname=sessionStorage.getItem(name);

console.log(name);//输出：JohnDoe

2.4绘图能力

HTML5引入了canvas标签，可以用于绘制图形和动画，增强了网页的绘图能力。canvas标签本身并不绘制任何图形，而是提供了一个可以绘制图形的容器。通过JavaScript，可以在这个容器中绘制各种图形和动画。

2.4.1示例代码

!--HTML5canvas标签--

canvasid=myCanvaswidth=500height=500/canvas

//获取canvas元素

varcanvas=document.getElementById(myCanvas);

//获取canvas的2D渲染上下文

varctx=canvas.getContext(2d);

//绘制一个矩形

ctx.fillStyle=red;

ctx.fillRect(10,10,100,100);

2.5设备访问

HTML5提供了对设备的访问能力，如地理位置、摄像头、麦克风等，使得网页应用可以更好地利用设备资源。例如，通过navigator.geolocation，可以获取用户的地理位置