先回顾一下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. Web API应用架构设计分析（1）

    Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端(包括浏览器,手机和平板电脑等移动设备)的框架, ASP.NET Web API 是一种用于在 .NET Framewor ...

  2. css3飞机起飞进度条

    效果:http://hovertree.com/texiao/css3/27/ 源码下载:http://hovertree.com/h/bjaf/pgwql1x2.htm 本效果使用Font Awes ...

  3. iOS阶段学习第21天笔记(ARC内存管理-Copy-代理)

    iOS学习(OC语言)知识点整理 一.OC 中的ARC内存管理 1)ARC中释放对象的内存原则:看这个对象有没有强引用指向它 2)strong:强引用,默认情况下的引用都是强引用 3) weak:弱引 ...

  4. [moka同学笔记]MySql语句整理

    更改单个表中的字段属性 content 以前为text类型的,现在改为longtext ALTER TABLE `notice` CHANGE `content` `content` LONGTEXT ...

  5. java 克隆

    1. About Java中, 对于基本数据类型可以使用"=" 来克隆,此时两个对象除了相等是没有任何关系的; 而对于引用类型, 却不能简单地使用"="来克隆, ...

  6. windows下打包react-native应用程序

    P.S.0:不截图了,上传图片太麻烦,每次只能上传一张.... 先生成签名文件,如果已有签名文件略过此步: keytool -genkey -v -keystore my-release-key.ke ...

  7. 用SQL语句添加删除修改字段_常用SQL

    1.增加字段     alter table docdsp     add dspcodechar(200)2.删除字段     ALTER TABLE table_NAME DROP COLUMNc ...

  8. C#多线程：使用ReaderWriterLock类实现多用户读/单用户写同步

    摘要:C#提供了System.Threading.ReaderWriterLock类以适应多用户读/单用户写的场景.该类可实现以下功能:如果资源未被写操作锁定,那么任何线程都可对该资源进行读操作锁定, ...

  9. 如何在BPM中使用REST服务（1）：通过程序访问网页内容

    这篇文章主要描述如何通过程序来访问网页内容,这是访问REST服务的基础. 在Java中,我们可以使用HttpUrlConnection类来实现,代码如下. package http.base; imp ...

  10. JSON.stringify()和JOSN.parse()

    JSON.stringify()跟JSON.parse() 终于把这两个方法搞清楚了!!! JSON.tringify():把一个json数据转化成JSON string JSON.stringify ...