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

H5一二事的更多相关文章

  1. Hadoop 一二事(1) - 简单介绍与杂谈

    大数据大数据,身边很多朋友都在谈大数据,Big Data!!! 到底是什么,用来干嘛的,也很少有人说得出一二,那今天开始就简单说说这一二事吧 hadoop 的来源:是作者女儿的一个玩具 - 一只黄色的 ...

  2. Question | 关于Android安全的一二事

    本文来自网易云社区 "Question"为网易云易盾的问答栏目,将会解答和呈现安全领域大家常见的问题和困惑.如果你有什么疑惑,也欢迎通过邮件(zhangyong02@corp.ne ...

  3. RabbitMQ 一二事(5) - 通配符模式应用

    之前的路由模式是通过key相等来匹配 而通配符,顾名思义,符合条件,则进行消息匹配发送 将路由键和某模式进行匹配.此时队列需要绑定要一个模式上. 符号“#”匹配一个或多个词,符号“*”匹配不多不少一个 ...

  4. RabbitMQ 一二事(4) - 路由模式介绍

    路由模式其实和订阅模式差不多,只不过交换机的类型不同而已 路由模式可以用下图来表示,比订阅模式多了一个key,举个栗子就是根据不同的人群来订阅公众号,来收取消息 根据不同的key来获取不同的消息 最简 ...

  5. RabbitMQ 一二事(3) - 订阅模式（微信公众号模式）的应用

    之前讲的消费者互相可以把队列中的消息全部读取,但是不是读完整的所有信息 那么采用订阅模式就行,这就是微信公众号的模式, 比如10个人订阅了我的公众号"BeJavaGod",当我发送 ...

  6. RabbitMQ 一二事(2) - 工作队列使用

    上篇文章讲了简单队列的使用,这其实就是RMQ给的demo,实际并没有什么用 本篇讲讲工作模式队列,也称之为任务队列 一个生产者发布了多条消息,消费者A可以接受消息,接受消息后该消息就消除,消费者B可以 ...

  7. RabbitMQ 一二事 - 简单队列使用

    消息队列目前流行的有三种 1. RabbitMQ 2. ActiveMQ 3. Kafka 这三种都非常强大,RabbitMQ目前用的比较多,也比较流行,阿里也在用 ActiveMQ是阿帕奇出品,但是 ...

  8. FreeMarker 一二事 - 静态模板结合spring展示

    freemarker可以脱离web使用 前一篇文章使用了普通的方法 这回说说结合spring pom额外引入这个jar包 <dependency> <groupId>org.s ...

  9. FreeMarker 一二事 - 静态模板的使用与生成

    如今前后端分离,动静分离 使用freemarker实现动静分离,nginx处理静态资源文件,提高效率 加载jar包 <!-- freemarker --> <dependency&g ...

随机推荐

  1. 【iOS】desctiption和debugDescription

    一.简介 与.NET一样,在.NET上得Object对象有个ToString()方法可以用于输出对象的信息,在iOS上的NSObject也有一个方法,为description,该方法返回objc对象的 ...

  2. 【VBS】vbs指定编码保存文本文件（含xml、ini什么的）

    本文还是折腾安装包期间衍生出来的产物. 我那安装包在安装期间有这个动作: - 让用户填写一些信息,待安装完成后把这些信息写入软件安装目录中的指定ini.xml文件中 上文说的是如何用vbs写ini,i ...

  3. QT添加二次确认功能，QMessageBox的使用

    对于一些重要的操作需要让用户再次确认一次,给出几个基本的实例 是和否 switch( QMessageBox::warning(NULL, "warning",QString::f ...

  4. 微信--获取jsapi_ticket 然后在计算出signature

    最近做微信公众号,记录一下,仅供参看. 关于jsapi_ticket微信公众号有相关说明: 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临 ...

  5. 不可或缺 Windows Native (19) - C++: 对象的动态创建和释放, 对象的赋值和复制, 静态属性和静态函数, 类模板

    [源码下载] 不可或缺 Windows Native (19) - C++: 对象的动态创建和释放, 对象的赋值和复制, 静态属性和静态函数, 类模板 作者:webabcd 介绍不可或缺 Window ...

  6. Wijmo 2016年蓝图

    2015年很快就过去了,这是 Wijmo 重要的一年,尤其是对 Wijmo5.脱离传统的小部件,重新写一套 JS 控件,现在看来这个决定是正确的.用 TypeScript 写 Wijmo5,意味着我们 ...

  7. 把VIM打造成IDE

    =======================================                                    安装vim相关软件 =============== ...

  8. 由select * from table where 1=1中的1=1说开数据库

    众多网站都有select * from table where 1=1此类语句的介绍,并且,针对该类语句,讲得实在是让人越看越迷茫(一个抄袭一个的,简直不像话),不知道是在说什么,导致很多新手不得要领 ...

  9. 让我们来讲讲，SCRUM和AGILE(资料来源:https://www.youtube.com/ 文中有代理参数配置)

    本期我们讨论的主题是项目管理 以前,一直以为“ Write the code, Change the world ”.但实质上,我们就一写代码的.如果我们能上升到项目管理的角度来实行Project M ...

  10. Web应用网络模型

    Web应用网络模型 前言 这篇文章要介绍的是一个常见Web应用基本的过程跟网络模型,当然,对于多数的Client/Server应用也是适用的.延续这个系列文章的风格,只管通俗不管严谨. 概览 总体模型 ...