HTML5是目前超文本标记语言 (Hyper Text Markup Language)最新修订版。HTML可以理解为一门程序语言,HTML5字面的意思,这门程序语言的第五次修订,也是HTML的第五个版本。

广义上,可以理解成HTML5、CSS、Javascript的组合,是Web前端开发的必备技能,简称H5技术。相比较之前版本,最大的变动就是除了对PC端个浏览器解析起来更加方便快捷外,更加适合移动端的Web开发,因此增加了很多标签和属性,比如<article>、<nav>、<block>等等。

HTML5的技术组成:

一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,而不只是第一印象仅仅HTML部分而已,在CSS 3和JavaScript层面也有许多的创新,让整个网页从布局到处理都更加给力,新囊括的技术让之前实现相当困难且安全性危机重重的功能变为了现实,

HTML5优越性

相对于之前版本,HTML5标签更加简练,在布局上更得体。以前主流table布局已经过渡到主流div布局,当前布局布局更加友好,有层次,对搜索引擎更加友好。比如<block><section>标记为块,这是以前根本就没有的,<article>标签用来标记文章内容,<nav>标记导航内容,新版增加的这些标签能够让布局变得更加清晰、简单。

HTML5前所未有的支持移动设备上的多媒体,成为一大特性,在移动设备上产生了重大影响。引入了新的语法功能来支持这一功能,例如视频,音频和画布标签。HTML5还引入了新功能,可以真正改变用户与文档交互的方式。

HTML5新特性

1、离线功能

HTML5透过JavaScript提供了数种不同的离线储存功能,相对于传统的Cookie而言有更好的弹性以及架构,并且可以储存更多的内容。

WebStorage – 比Cookies更大、更有弹性的的储存

Web SQL Database – 本地端的SQL资料库

Indexed DB – Key-value的本地资料库

Application Cache – 将部分常用的网页内容cache起来

2、即时通讯

以往网站由于HTTP协定以及浏览器的设计,即时的互动性相当的受限,只能使用一些技巧来「模拟」即时的通讯效果,但HTML5提供了完善的即时通讯支援。

什么轮询、第三方的统统不要,自已来实现。

WebSocket– 即时的socket连线

Web Workers – 以往JavaScript都是single thread,透过Worker可以有多个运算

Notifications – 塬生的提示讯息,类似像OS X的Growl提示

3、文件以及硬件支持

不知道大家有没有发现,在Gmail等新的网页程式当中,已经可以透过拖拉的方式将档案作为邮件附件?这就是这部份HTML5档案的功能中的Drag’n  Drop和File API。

Drag’n Drop – HTML元素的拖拉

File API – 读取使用者本机电脑的内容

Geolocation – 地理定位

Device orientation – 手持装置的方向

Speech input – 语音输入

4、语意化

语意化的网路是可以让电脑能够更加理解网页的内容,对于像是搜寻引擎的优化(SEO)或是推荐系统可以有很大的帮助。

New tags – 新的标籤,像是<header>、<section>等

Application tags – 也是新的标籤,像是<meter>、<progress>等

Microdata – 加入语意的资料让搜寻引擎等网站可以正确显示

Form type – <form>可以加入的type便多了,包含email和tel等属性,浏览器会协助进行资料格式的验证

5、多媒体

Audio、Video的标签支援以及Canvas的功能应该是大家对于HTML5最熟悉的部份了,也是许多人认为Flash会被取代的主要原因。

Audio video – 影片和音乐的塬生播放支援

Canvas – 2D的绘图功能支援

Canvas 3D – 3D的绘图功能支援

SVG – 向量图支援

6、CSS 3

CSS3支援了字体的嵌入、版面的排版,以及最令人印象深刻的动画功能。

Selector – 更有弹性的选择器

Webfonts – 嵌入式字体

Layout – 多样化的排版选择

Stlying radius gradient shadow – 圆角、渐层、阴影

Border background – 边框的背景支援

Transition – 元件的移动效果

Transform – 元件的变形效果

Animation – 将移动和变形加入动画支援

7、JavaScript

在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。

DOM API – 更方便的查询DOM元件

History API – 浏览器的上下页内容修改,方便AJAX可以保留浏览记录

HTML5的兼容问题

以前HTML的浏览器兼容是最大的问题,浏览器厂商很多,开发标准也不是完全一致,导致了兼容成为一个顽疾,给无数前端开发人员造成无数的麻烦。

目前为止,现代的主流浏览器都支持HTML5,那些不适应HTML5的已经退出了人们视野,就连顽固的IE系列浏览器也越来越好的支持。

HTML5掀起的浪潮,不光是洗刷了浏览器市场,同样也席卷了WEB应用框架提供者,前端框架纷纷更新换代,功能越来越强大,BOOTSTRAP、VUE、MUI、JQ等等。前端响应式布局营运而生,让一个网站能够兼容多个终端成为了可能。更为不可思议的是,开发者们可以用一套代码来实现IOS App、Android App、微信小程序、支付宝小程序、头条小程序,真是奇思妙想,叹为观止!

我们期待技术的进步,也希望HTML越来越强大,WEB应用的用户体验越来越优秀。

HTML5是什么的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. Flutter: SearchDelegate 委托showSearch定义搜索页面的内容

    API class _MyHomeState extends State<MyHome> { List<String> _list = List.generate(100, ( ...

  2. PAA房产智慧社区:解决社区管理服务的痛点难点

    社区,是社交与生活的舞台,更是家的延伸.社区之所有能够有所创新发展,得益于借助数字化和智能化.智能化给社区带来的便利体现在社区门禁可以人脸识别:AI的摄像头可以自动捕获异常的现象,便于社区管理员第一时 ...

  3. 交易所频频跑路?Baccarat去中心化交易平台助力资金安全

    过去,黑客攻击可能是交易所跑路的最常见原因.自OKEx事件以来,这些交易所暂停提币或跑路还多了一个原因,就是因创始人正在协助调查. 据不完全统计,自OKEx于10月16日宣布暂停提币后不到两个月,已经 ...

  4. NGK DeFi Baccarat怎么玩能赚钱?

    市面上大多数DeFi项目都是基于以太坊来开发的,除了吞吐量低.存储量小以及交易速度慢等问题以外,高额的Gas手续费将不少终端用户拒之门外. 基于此NGK.IO推出了低门槛的DeFi项目-- Bacca ...

  5. C++算法代码——质数的和与积

    题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=1682 题目描述 两个质数的和是S,它们的积最大是多少? 输入 输入文件名为prime ...

  6. 微信支付/支付宝支付/银联支付,对比加总结(Java服务端)

    今天来讲讲支付. 工作到现在,接入过好几个项目的支付,其中涉及到了微信支付.支付宝支付.银联支付. 三种支付的对接感受其实整体上大同小异.都遵循同一个流程: 1).商户APP向商户服务器请求生成订单 ...

  7. Java基本概念:多态

    一.简介 描述: 多态性是面向对象编程中的一个重要特性,主要是用来实现动态联编的.换句话说,就是程序的最终状态只有在执行过程中才被决定,而非在编译期间就决定了.这对于大型系统来说能提高系统的灵活性和扩 ...

  8. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  9. Hadoop的常用命令

    注:hadoop的使用命令包含 hadoop fs 开头 or hdfs dfs开头 等多种形式来操作. 这里以hadoo fs的形式来介绍在这些命令 1.列出根目录下所有的目录或文件 hadoop ...

  10. 使用egg.js开发后端API接口系统

    什么是Egg.js Egg.js 为企业级框架和应用而生,我们希望由 Egg.js 孕育出更多上层框架,帮助开发团队和开发人员降低开发和维护成本.详细的了解可以参考Egg.js的官网:https:// ...