HTML5的简单介绍

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5的简单介绍相关的知识,希望对你有一定的参考价值。

接触H5以来,还没有系统的整理这方面的知识,先粗略的整理一下

 回顾一下WEB技术的几个阶段

  • Web 1.0 内容为主,主要流行html和CSS
  • Web 2.0 动态网页,流行AJAX/javascript/DOM
  • H5 时代,WEB开发回归富客户端

 

那么H5肯定不是多了一些标签就完事了,H5也跟酷炫没什么关系,那是CSS3的事情,它更多的职责是功能,而不是外观,是JavaScript API和CSS的提升,构建 Web 应用程序整体解决方案

 

 H5应用场景

  • 极具表现力的网页   
  • 网页应用程序   比如PC端的iCloud、百度脑图、Office 365···APP端的淘宝、京东、美团···WeChat端的淘宝、京东、美团···
  • 混合式本地应用   比如PC端的网易云音乐、有道词典··· APP端的淘宝、京东、美团···
  • 简单的游戏

H5新特性

  • 更语义化标签
  • 智能表单    新的表单类型,如:email,url,number
  • 新增表单功能属性,如:autocomplete,autofocus   虚拟键盘适配,通过表单的类型决定移动端弹出的键盘类型
  • 网页多媒体,  音频、视频、字幕
  • 属性,语义化属性      链接关系描述、结构数据标记、ARIA、自定义属性
  • Canvas,提供网页绘图的可能   2D 绘图、3D (WebGL)
  • SVG

JavaScript API

  • 核心平台提升,JS在DOM和BOM两个方向上都新增了很多api,便于开发应用程序    新的选择器、Element.classList、访问历史API、全屏API
  • 网页存储,提供网页中操作客户端本地存储的API   Application Cache、localStorage、sessionStorage、WebSQL、IndexedDB
  • 设备信息访问,JS可以访问硬件的一些信息  网络状态、硬件访问、设备方向、地理围栏
  • 拖放操作  网页内拖放、桌面拖入
  • 文件  文件系统API、FileReader
  • 网络访问  XMLHttpRequest、fetch、WebSocket
  • 多线程、桌面通知等等

H5 骨架

 在Sublime\WebStorm等一些工具中  叹号加回车自动生成H5骨架

 1 <!-- H5的DOCTYPE声明做了最大简化 -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5 <meta charset="UTF-8">
 6 <!-- 在标准的H5骨架中charset是直接在meta中设置charset -->
 7 <!-- 字符编码的设置一定是在head中的第一行 -->
 8 <title>页面标题</title>
 9 </head>
10 <body>
11 
12 </body>
13 </html>

 

语义化标签

H5中制定了一系列语义化标签:

  • section:独立的内容节块,一般包含标题和内容
  • article:一种特殊的section,定义文档中的具体的文章内容
  • nav:页面导航的链接组
  • aside:标签用来装载非正文的内容,此标签中的文字权重低
  • header:定义文档的页眉,不仅仅是文档的页头可以使用header,一个独立块的头部也应该使用header
  • footer:定义section或document的页脚

我们应该根据内容的性质决定使用特定的标签,比如说

  • h1一定只能出现一个,这并不是HTML的约定,页面中最重要的内容
  • time标签专门用于时间,
  • datetime应该是一个标准时间格式,
  • pubdate指的是当前时间为article的发布时间

在H5中,主体结构标签默认和DIV都是相同的块级效果

但是DIV没有语义,而以上标签有特定语义

那么为啥要有语义化标签?

  1. 能够便于开发者阅读和写出更优雅的代码,代码如诗
  2. 同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容
  3. 使用语义化标签会具有更好地搜索引擎优化

最近群里经常讨论,关于什么时候使用H5的新特性,能不能使用新特性的问题

我个人认为,无伤大雅的地方直接用
比如一个文本框,加上placeholder就具备占位文本提示功能,浏览器不支持也不会报错,那就可以直接使用
再比如`<input type="email">`,如果浏览器不支持,默认会显示文本框,那也可以直接用。

 

以上是关于HTML5的简单介绍的主要内容,如果未能解决你的问题,请参考以下文章

H5游戏的发展潜力无限

TechParty 11月 HTML5 专题沙龙总结

HTML5的简单介绍

6.手写函数柯里化工具函数并理解其应用场景和优势

HTML5微信APP:创业寒冬只能选其一,该选哪个?

数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇