你的位置:首页 > 网页设计

[网页设计]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
  • 网络访问  
  • 多线程、桌面通知等等

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">`,如果浏览器不支持,默认会显示文本框,那也可以直接用。