HTML5라고 하면 표면적으로는 HTML의 5번째 업데이트 버전이라는 뜻이지만 사실 HTML5에는 내재된 것들이 많이 있습니다. 웹 애플리케이션의 개발이 더욱 편리해지고, 빨라지고, 표준화되고, 웹 애플리케이션의 성능이 향상되는 것은 바로 HTML5의 등장 때문입니다. HTML5는 이제 웹 애플리케이션에서 널리 받아들여지고 있다고 말할 수 있습니다.
먼저 HTML5가 어떤 새로운 기능을 제공하는지 살펴보겠습니다.
로컬 스토리지Web storage는 웹사이트의 유용한 정보를 로컬 컴퓨터나 모바일 기기에 저장한 후, 실제 필요에 따라 로컬에서 정보를 읽는 데 사용됩니다. sessionStorage, localhostStorage라는 두 가지 저장소 유형 API 인터페이스를 제공합니다. 전자는 세션 중에 유효하고 후자는 로컬에 저장되며 저장소는 영구적이지만 둘의 API 사용은 기본적으로 동일합니다. 의.
HTML5의 로컬 저장 기능을 이용하면 사용자 정보 저장(HTML4의 쿠키와 유사), 데이터 저장 및 읽기 등 다양한 기능을 사용할 수 있습니다. Web Storage에서는 각 웹사이트의 로컬 캐시 크기를 5MB로 공식 권장하고 있는데 이는 HTML4의 cookie 수 kb보다 훨씬 크고 강력합니다.
다음으로 Web Storage의 사용법을 코드를 통해 자세히 설명하겠습니다. localStorage을 예로 들면, js 코드는 다음과 같습니다.
window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}기본적인 작업 외에 스토리지 이벤트도 모니터링하세요:
window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}오프라인 캐싱을 사용하면 네트워크가 없을 때에도 웹 애플리케이션이 계속 정상적으로 실행될 수 있어 매우 실용적입니다. HTML5의 오프라인 캐싱 기능은 웹 애플리케이션(특히 모바일 애플리케이션) 개발을 위한 좋은 조건을 구축합니다.
오프라인 캐시 기능을 사용하는 것은 쉽습니다. html 태그에 mainfest 속성을 추가하고 mainfest 파일을 지정하기만 하면 됩니다. mainfest 파일의 기능은 오프라인으로 캐시해야 하는 파일을 브라우저에 알려주는 것입니다. .mainfest 파일 적용 예:
CACHE MAINFEST index.html test.js NETWORK /images/
이 내용은 index.html에 이어 test.js, CACHE MAINFEST 두 파일이 캐시 파일로 정의되어 있음을 보여줍니다. 네트워크를 사용할 수 없거나 오프라인일 때 파일의 이 부분은 로컬 캐시에서 직접 읽혀집니다. NETWORK 다음에 오는 파일은 캐시 여부에 관계없이 네트워크에서 다운로드해야 하는 파일로 정의됩니다.
추가로 .mainfest 파일에 필요한 구성을 해야 합니다. web.xml
<mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping>
HTML5 오프라인 캐싱 기술을 사용하면 웹사이트나 웹에서 개발한 애플리케이션을 네트워크 없이 사용할 수도 있습니다. 어떤 상황에서도 네트워크 소비를 크게 줄이고 웹을 사용하여 개발된 앱의 성능을 크게 향상시킵니다.
① 레이아웃 의미 태그
HTML5는 이전 레이아웃 태그를 대체하기 위해 많은 새로운 의미 레이아웃 태그를 추가했습니다. HTML5에서 제공하는 새로운 태그에는 <head>, <footer>, <aside>, <article> 등이 있습니다. 기본적으로 페이지의 각 레이아웃 부분에는 해당 태그가 있습니다.
HTML5 시맨틱 태그의 주요 기능은 주로 다음 세 가지 측면에 반영됩니다.
◎모바일 기기에 더 친화적입니다
◎시맨틱 레이아웃 태그를 사용하면 검색 엔진 크롤링에 더 도움이 됩니다
◎시맨틱 태그는 소프트웨어 유지 관리 및 2차 개발에 간단하고 편리합니다
의미 태그를 사용하는 것이 현재 웹 표준에 더 부합합니다.
②기타 태그
HTML5에는 많은 새로운 기능이 추가되었으며 그 중 일부에는 해당 태그가 있습니다.
멀티미디어 태그. 예를 들어, 태그는 비디오 재생 기능을 지원할 수 있으며, HTML5 비디오 태그와 일부 웹 비디오 플레이어 제작 플러그인을 사용하면 매우 효과적인 웹 플레이어를 만들 수 있습니다. 여기에서 Video.js를 추천합니다. 더 아름답고, 더 나은 성능을 가지며, 학습 비용이 더 낮습니다.
캔버스에 대해서는 추후 자세히 소개하겠습니다.
양식과 관련된 새로운 태그는 추후 자세히 소개될 예정입니다.
현재 위치정보는 기본적으로 모든 모바일 앱에서 지원되는 기능입니다. HTML5에서는 HTML5를 활용한 모바일 앱 개발에 큰 도움이 되는 위치정보 기능도 지원하기 시작했습니다. Geolocation 사용 방법은 매우 간단합니다. getCurrentPosition(): 현재 사용자의 지리적 위치 정보를 가져옵니다. watchPosition(): 정기적으로 기기 위치를 폴링합니다clearWatch(): watchPosition() 폴링 중지를 사용하세요.
현재 대부분의 브라우저는 Geolocation API를 지원합니다.
양식은 항상 웹에서 없어서는 안 될 부분이었습니다. HTML5는 매우 풍부한 양식 태그 및 속성 세트를 제공합니다. 먼저 양식 컨트롤을 위해 HTML5에서 추가된 몇 가지 새로운 태그에 대해 알아 보겠습니다. <meter>/<progress>:은 진행률 표시줄을 설정하는 데 사용됩니다. js를 사용하면 동적 진행률 표시줄을 쉽게 만들 수 있습니다. <details>+<summary>:JS가 전혀 없는 접는 콘텐츠를 만들 수 있으며, 구조는 다음과 같습니다.
<details><summary>This is the summary</summary>This contains detail things.<details>
除了新的标签，input标签还增加了许多类型(type)，包括search/email/number/type/range/url等。
表单标签的新增属性有placeholder/autofocus/list/autocomplete等。
HTML5极大地丰富了表单内容，让编写代码变得更加简单，实现功能更加快捷。
个人认为canvas是HTML5中最强大的功能，有了canvas，HTML5在图像这方面变得无所不能（有关canvas的具体实例请见其他博客）。
canvas可以进行切图、画图、图像的像素级操作等一系列功能，十分强大。说起canvas，应用最多的应该是基于HTML5的游戏。利用HTML5的canvas功能，配合js，可以开发出各种各样的游戏。同时，像素级的操作也让HTML5 canvas可以处理许多细致的图像问题。
创建一个canvas画布很容易，在html中使用<canvas>标签，js代码如下：
var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);
canvas可以创建丰富的图形，包括基本图形、函数曲线等。
综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。
说起HTML5，表面上是说它是HTML更新的第五个版本，而实际上，HTML5有很多内在的东西。正是因为HTML5的出现，使得web应用的开发变得更加方便快捷，更加标准化，提高了web应用的性能。可以说HTML5是web应用现在能够被广泛接受。
首先我们来看一下HTML5给我们带来了哪些新功能。
本地存储Web storage的作用是在网站中把有用的信息存储到本地的计算机或移动设备上，然后根据实际需要从本地读取信息。它提供两种存储类型API接口，分别是sessionStorage和localhostStorage，其中前者在会话期间内有效，后者就存储在本地，并且存储是永久的，但是两个的API使用基本上是相同的。
利用HTML5的本地存储功能，我们可以进行用户信息的保存（类似于HTML4中的cookie）、数据存储与读取等诸多功能。注意Web Storage官方建议每个网站的本地缓存大小为5MB，这相比于HTML4中cookie的几kb要大得多，功能也更强大。
接下来利用代码来具体解释一下Web Storage的使用方式，以localStorage为例，js代码如下：
window.onload = function(){localStorage.clear();//清除之前localStorage存储的全部数据localStorage.setItem(“userData”,”storage demo”）//setItem方法可以设定缓存数据的值，采用键值对的形式}除了基本操作，还可以对Storage事件进行监听：
window.onload = function(){window.addEventListener(“storage”,function(e){console.log(e);
},true);
}离线缓存可以在即使没有网络的状态下web应用仍能正常运行，非常有实用价值。HTML5的离线缓存功能为web应用（尤其是移动应用）的开发建立了良好的条件。
开始使用离线缓存功能很简单，只要在html标签中加入mainfest属性，并指定mainfest文件即可。mainfest文件的作用是告诉浏览器哪些文件需要进行离线缓存操作。举例说明.mainfest文件的应用：
CACHE MAINFEST index.html test.js NETWORK /images/
这些内容就表明，index.html和test.js这两个文件被定义为缓存文件，跟在CACHE MAINFEST后面。当网络不可用或不在线时，此部分文件会通过本地缓存直接读取。NETWORK后面的文件定义为无论这些文件是否已经被缓存，都必须从网络中下载。
除此之外，还要对.mainfest文件进行必要的配置，在web.xml中
<mime-mapping>//.mainfest文件是MIME类型文件<extension>mainfest</extension><mime-type>text/cache-mainfest<mime-type></mime-mapping>
有了HTML5离线缓存技术，就可以使网站或者web开发的应用在无网络的情况下也可以进行访问，大大减少了网络消耗，也让利用web开发出来的app性能大幅提升了。
①布局语义化标签
HTML5新增了许多语义化的布局标签，用以代替之前每个布局都要使用p的无语义性的混乱局面。HTML5提供的新标签包括<head>、<footer>、<aside>、<article>等，基本一个页面的每个布局部分，都有一个对应的标签。
HTML5语义化标签的主要作用主要体现在以下三个方面：
◎对移动端设备更加友好
◎使用语义化的布局标签更有利于搜索引擎的的抓取
◎语义化标签简洁，便于软件的维护和二次开发
使用语义化标签，更加符合现在的web标准。
②其他标签
HTML5增加了许多新功能，这些功能有的对应标签。
多媒体标签。比如标签可以支持视频播放功能，使用HTML5的video标签配合一些web视频播放器制作插件可以制作出效果很好的网页播放器。这里推荐video.js，比较美观，性能较好，且学习成本比较低。
画布，将在后面进行详细介绍。
表单相关的新标签，将在后面进行详细介绍。
目前，地理定位基本上是每个移动app都支持的功能。而HTML5也开始支持地理定位功能，这给利用HTML5开发移动app提供了极大帮助。 Geolocation的使用方法很简单，主要有三个方法： getCurrentPosition():获取当前用户的地理位置信息 watchPosition():定期轮询设备的位置 clearWatch():用于停止watchPosition()的轮询
目前大部分浏览器都支持Geolocation API。
表单一直都是一个web不可缺少的部分。HTML5中提供了非常丰富的表单标签和属性。首先我们来了解几个HTML5为表单控件新添加的标签。 <meter>/<progress>:用于设置进度条，配合js即可方便的搭建出一个动态进度条。 <details>+<summary>:零js即可创建折叠内容，结构如下：
<details><summary>This is the summary</summary>This contains detail things.<details>
除了新的标签，input标签还增加了许多类型(type)，包括search/email/number/type/range/url等。
表单标签的新增属性有placeholder/autofocus/list/autocomplete等。
HTML5极大地丰富了表单内容，让编写代码变得更加简单，实现功能更加快捷。
个人认为canvas是HTML5中最强大的功能，有了canvas，HTML5在图像这方面变得无所不能（有关canvas的具体实例请见其他博客）。
canvas可以进行切图、画图、图像的像素级操作等一系列功能，十分强大。说起canvas，应用最多的应该是基于HTML5的游戏。利用HTML5的canvas功能，配合js，可以开发出各种各样的游戏。同时，像素级的操作也让HTML5 canvas可以处理许多细致的图像问题。
创建一个canvas画布很容易，在html中使用<canvas>标签，js代码如下：
var canvas = document.getElementById(canvas1);var context = canvas.getContext(“2d”);
canvas可以创建丰富的图形，包括基本图形、函数曲线等。
综上，HTML5提供的新功能，使HTML5在移动应用开发、游戏开发、规范开发等方面，都有了质的飞跃。深入学习HTML5,十分必要。
以上就是HTML5能为我们带来什么? 面试必备！的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
