先回顾一下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. C#基础-replace()过滤非法字符

    string FilterfileName(string strName) { string result=string.Empty ; if (string.IsNullOrWhiteSpace(s ...

  2. 介绍开源的.net通信框架NetworkComms框架 源码分析（十九 ）ConnectionIncomingData

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  3. CodeSmith连接Oracle

    Win7上仅安装了Oracle32位客户端,此时CodeSmith无法连接Oracle数据库. 解决方法一:如果同一台电脑安装了Oracle64位数据库,这样CodeSmith可以连接数据库. 解决方 ...

  4. 关于ASP.NET的“Forms身份验证”

    目录结构如图如示: 如果用户没有通过身份验证则跳转到登录页面让用户登录,在配置文件的<system.web></system.web>结点下添加如下代码: <!--身份验 ...

  5. GET DIAGNOSTICS Syntax

    http://dev.mysql.com/doc/refman/5.7/en/get-diagnostics.html GET [CURRENT | STACKED] DIAGNOSTICS { st ...

  6. 矩阵乘法&矩阵快速幂&矩阵快速幂解决线性递推式

    矩阵乘法,顾名思义矩阵与矩阵相乘, 两矩阵可相乘的前提:第一个矩阵的行与第二个矩阵的列相等 相乘原则: a b     *     A B   =   a*A+b*C  a*c+b*D c d     ...

  7. ahjesus自定义隐式转换和显示转换

    implicit    关键字用于声明隐式的用户定义类型转换运算符. 如果可以确保转换过程不会造成数据丢失,则可使用该关键字在用户定义类型和其他类型之间进行隐式转换. 参考戳此 explicit    ...

  8. 高性能 Windows Socket 组件 HP-Socket v2.3.1-beta-1 发布

    HP-Socket 是一套通用的高性能 Windows Socket 组件包,包含服务端组件(IOCP 模型)和客户端组件(Event Select 模型),广泛适用于 Windows 平台的 TCP ...

  9. Pop Easy – 轻松实现模态窗口的 jQuery 插件

    PopEasy 是一款轻量的 jQuery 插件,可以帮助开发人员容易的创建效果精美的模态窗口.PopEasy 在主流浏览器中都能够正常工作,同时兼容 IE 7 哦. 您可能感兴趣的相关文章 Metr ...

  10. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...