先回顾一下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. [函数] Firemonkey 取得 Windows 目前 User 的 Desktop 目录

    下列方法仅提供 Windows 平台使用,所以需要使用编译开关,代码如下: uses {$IFDEF MSWINDOWS} Winapi.Windows, Winapi.SHFolder, {$END ...

  2. XE8 for iOS 状态栏的几种效果

    XE8 实现 iOS 状态栏的几种效果: 一.状态栏底色: 开一个新工程. 设定 Fill.Color 颜色属性. 设定 Fill.Kind = Solid. 无需修改任何官方源码. 二.隐藏状态栏( ...

  3. JMS中的消息通信模型

    1. MQ简介: 消息队列(Message Queue,简称MQ),是应用程序与应用程序之间的一种通信方法.应用程序通过发送和检索出入列队的针对应用程序的数据 - 消息来通信,而无需专用连接来链接它们 ...

  4. ORM实现原理

    1.什么是ORM ORM的全称是Object Relational Mapping,即对象关系映射.它的实现思想就是将关系数据库中表的数据映射成为对象,以对象的形式展现,这样开发人员就可以把对数据库的 ...

  5. 想要学好JQuery看这里

    一.简介 jQuery 库可以通过一行简单的标记被添加到网页中 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操 ...

  6. $('div a') 与$('div>a')，.div+.div2与.div~.div2

    $('div a'):div标签下所有层次a元素的jquery对象 $('div>a'):div标签下子元素层次a元素的jquery对象 <body> <div class=' ...

  7. JSCapture – 基于 HTML5 实现的屏幕捕捉库

    JSCapture 是用纯 JavaScript 和 HTML5 实现的屏幕捕捉库.它可以让从您的浏览器中截图和记录在桌面的视频.JSCapture 使用 getUserMedia 来实现屏幕捕获.目 ...

  8. ssh框架搭建的基本步骤（以及各部分作用）

    ssh框架搭建的基本步骤(以及各部分作用)     一.首先,明确spring,struts,hibernate在环境中各自的作用.   struts: 用来响应用户的action,对应到相应的类进行 ...

  9. AloneJs —— 简洁高效的JavaScript UI库

    以前做项目时用了一些第三方的JS UI库,项目比较low的时候用还行,一旦项目要求比较高,特别是交互比较复杂时,某些第三方UI库就显得无能为力,用起来也不顺手,改也不好改,所以我就自己基于jQuery ...

  10. .NET web开发之WebApi初试水

    前几天看了.NET的EF(Entity Framework),发现居然有这么先进的东西,只要操作几个类就可以完成数据库的增删查改,而且可以用数据库直接导出类(DB First).也可以用类来生成数据库 ...