先回顾一下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. ms sql 2005和2008收缩日志的方法

    步骤1: 2005的sql 语句为:back up log 数据库名称 with no_log 目的:截断数据库日志 2008的sql 语句为:alter database 数据库名称 set rec ...

  2. 【Java每日一题】20161114

    package Nov2016; import java.io.Serializable; // V1.0版 public class Ques1114 implements Serializable ...

  3. apache maven pom setting

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  4. css知多少（10）——display

    1. 引言 网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”).在本系列一开始讲<浏览器默认样式>的时候,大家也都看到了浏览器默认样式 ...

  5. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  6. Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》

    <Web 开发最有用的50款 jQuery 插件集锦>系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插 ...

  7. 【追寻javascript高手之路05】理解事件流

    前言 新的一天又开始了,我们对今天对未来抱有很大期待,所以开始我们今天的学习吧,在此之前来点题外话,还是爱好问题. 周三的面试虽然失败,但是也是很有启迪的,比如之前我就从来没有想过爱好问题,我发现我的 ...

  8. [deviceone开发]-动画示例源码

    一.简介 do_FrameAnimtionView组件是用加载GIF动态图片和加载一系列图片形成动画效果的展示组件,这个示例直观的展示组件基本的使用方式.适合初学者. 二.效果图 三.相关讨论 htt ...

  9. 编写jquery常用插件的基本格式

    写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1. ...

  10. eclipse 常用设置，常用快捷键修改

    eclipse 常用设置,常用快捷键,myeclipse和eclipse类似' 首先打开eclipse的首选项-->搜索 keys' 常用的一些快捷键: Ctrl+1 快速修复(最经典的快捷键, ...