移动前端不得不了解的HTML5 head 头标签(2016最新版)

html5-head

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head> 部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head> 头部标签,可以很有效的增强页面的可用性。

注:去年整理过移动前端不得不了解的html5 head 头标签,随着时间和浏览器厂商的升级,现在看起来似乎有些过时了。所以重新整理了一下。增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。

HTML基本的头部标签

下面是HTML基本的头部元素:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--具体可以查看本文 为移动设备添加 viewport 部分-->
    <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
    <title>页面标题</title>
    ...
</head>

其中

<meta http-equiv="x-ua-compatible" content="ie=edge">

在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行,那么

<meta name="viewport" content="width=device-width, initial-scale=1">

也可以省略。

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

继续阅读

微信浏览器中播放声音的正确姿势及html5中的audio标签

标榜的正确姿势似乎还是不对。

状态是

wx.config({
    // 配置信息
});
wx.ready(function () {
    media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
    media.play();
});

代码放在一起是可以的,代码分开,或调用别的JS SDK,就不行了。
测试了很久,始终无法实现。想起了以前的WeixinJSBridge,测试了一下,竟然成了。

var media = document.getElementById("musicBox");
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    WeixinJSBridge.invoke('getNetworkType', {}, function (res) {
        // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
        // alert(res.err_msg);
        media.play();
    });
}

前端就是这么蛋碎。
===========以上内容2016年4月15日===========

在实际项目中需要在微信浏览器中播放声音。所以学习了一下html5中播放声音的一些相关知识。iOS Safari 不允许自动播放 audio,只能通过用户交互触发。

了解了基本的声音播放的属性和时间,开始写代码,比如html:

<audio style="display:none" id="musicBox" preload="metadata" controls autoplay="false"></audio>

js代码:

var media = document.getElementById("musicBox");
if (!media.src) {
    media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
}
media.play();

在pc浏览器下能正常播放,但是在微信页面中不行。尝试了好多姿势,就是播放不了声音。 想起了微信的JS SDK,找了一边也没有合适的接口。

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

实在没有办法了,索性在wx.ready(function () {...});中尝试了一下,结果成了!估计是微信浏览器做了一些特殊处理。

wx.config({
    // 配置信息
});
wx.ready(function () {
    media.src = "http://a.f265.com/project/shake-money/img/shake.mp3"
    media.play();
});

继续阅读

移动前端不得不了解的html5 head 头标签

时间和浏览器厂商的升级的关系,本文有些过时了。
所以重新整理了一下 移动前端不得不了解的HTML5 head 头标签(2016最新版) 。
增加了新的内容,及过时的一些提示,同时增加了部分桌面端浏览器的一些说明。

本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签

移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签显得非常重要。

 

DOCTYPE

DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

使用 HTML5 doctype,不区分大小写。

<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->

charset

声明文档使用的字符编码,

<meta charset="utf-8">

html5 之前网页中会这样写:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

这两个是等效的,具体可移步阅读:<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>,所以建议使用较短的,易于记忆。 继续阅读

使用window.postMessage实现跨域通信

JavaScript由于同源策略的限制,跨域通信一直是棘手的问题。当然解决方案也有很多:

  • document.domain+iframe的设置,应用于主域相同而子域不同;
  • 利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限
  • Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要在同一客户端就行,跨应用程序, 可以跨域。
  • window.name 保存数据以及跨域 iframe 静态代理动态传输方案,充分的运用了window.name因为页面的url改变而name不改变的特性。

各种方案网上都有很多实例代码,大家可以自己搜索一下。
html5中最炫酷的API之一:就是  跨文档消息传输Cross Document Messaging。高级浏览器Internet Explorer 8+, chrome,Firefox , Opera  和 Safari 都将支持这个功能。这个功能实现也非常简单主要包括接受信息的”message”事件和发送消息的”postMessage”方法。

发送消息的”postMessage”方法

向外界窗口发送消息:

otherWindow.postMessage(message, targetOrigin);

otherWindow:  指目标窗口,也就是给哪个window发消息,是 window.frames 属性的成员或者由 window.open 方法创建的窗口 继续阅读

html5客户端本地存储之sessionStorage及storage事件

首先您可以看一下《JavaScript本地存储实践(html5的localStorage和ie的userData)
sessionStorage和上文中提到的localStorage非常相识,方法也几乎一样:

非常通俗易懂的接口:

  • sessionStorage.getItem(key):获取指定key本地存储的值
  • sessionStorage.setItem(key,value):将value存储到key字段
  • sessionStorage.removeItem(key):删除指定key本地存储的值
  • sessionStorage.length是sessionStorage的项目数

直接上demo:http://www.css88.com/demo/sessionStorage/

sessionStorage与 localStorage 的异同

sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时,之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
[code=”javascript”]
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); } [/code] sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据,比如localStorage.clear(),它将删除所有同源的本地存储的localStorage数据,而对于Session Storage,它只清空当前会话存储的数据。 关闭页面会导致 sessionStorage 的数据被清除,但刷新或重新打开新页面数据还是存在,如果需要存储的只是少量的临时数据。我们可以使用sessionStorage 。或者做页面间的小交互。 sessionStorage 和 localStorage具有相同的方法storage事件,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触发,这其中包含许多有用的属性:

  • storageArea: 表示存储类型(Session或Local)
  • key:发生改变项的key
  • oldValue: key的原值
  • newValue: key的新值
  • url*: key改变发生的URL
  • * 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性
    如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。
    PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更让人想的通些.

    直接上demo,同事打开这两个页面(代码一模一样):

    http://www.css88.com/demo/sessionStorage/index2.html 

    http://www.css88.com/demo/sessionStorage/index3.html 

    感谢:Mr.Prime在storage事件上给予的帮助,另外推荐一下他写的关于storage的博文:http://www.cnblogs.com/AndyWithPassion/archive/2011/07/04/html5_localstorage.html

HTML5和CSS3特性检测-Modernizr

HTML5和CSS3逐渐成为WEB前端开发的必须技能,开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情。

比如我们要检查某个浏览器是否支持canvas元素:

[code=”javascript”]

function SUP_canvas() {
var elem = document.createElement(‘canvas’);
return !!(elem.getContext &amp;amp;amp;amp;&amp;amp;amp;amp; elem.getContext(‘2d’));
};

[/code]
是否支持WebGL:
[code=”javascript”]

function SUP_webgl() {
return !!window.WebGLRenderingContext;
};

[/code]
还有很多html5和css3其他属性…,值得庆幸的是我们发现了Modernizr开源Javascript库

Modernizr是一个用来检测浏览器是否支持HTML5以及CSS3特性的基于MIT证书的开源Javascript库。Modernizr的功能其实很简单,就是用js检测浏览器对HTML5/CSS3的特性支持情况,支持某个属性,就在页面的标 签上添加一个相应的class,不支持的话就添加一个no-前缀的class,比如,如果检测的浏览器支持video标签,MODERNIZR就会 在标签上添加video类,否则,添加no-video类。

最新的Modernizr是2.0.6版本的,如果你下载开发(development)版本,给我们提供全部的内容,如果要下载production版本的modernizr,我们会发现,我们可以根据自己的需要进行订制。在其下载页面上,我们选择自己所需的HTML和CSS特性,然后生成一个javascript文件。这么做会极大程度上减少冗余代码,减少不必要的检测,对web前端这个很看重用户体验的地方,性能就是一点一点压出来的。

使用Modernizr也非常简单,只要而且必须在标签里应用就可以了,无需调用Modernizr_init()之类的初始化方法。modernizr必须放在里,最好放在css声明之后,因为HTML5 Shiv(用以在IE中启用HTML元素)必须在之前执行,而且要使用modernizr添加的class,需要阻止FOUC。还有一点在于html声明里的no-js的class。它设置了一个默认状态,如果页面禁用了javascript我们就可以知道了。

用调试工具我们看到在html标签里加了很多样式类,从这些样式类里我们可以完全看出您使用的浏览器对HTML5和CSS3支持情况,以“no-”开头的,就是这个浏览器不支持的特性:

知道了这些特性的支持情况我们就可以使用css选择器做一些表现上的差异,比如,如果不支持标签,那么test类文本为红色。
.canvas .test {
color: blue;
}

.canvas .test {
color: red;
}

同样,我们也可以在JavaScript利用这些特性检测的结果,代码:
[code=”javascript”]
if(Modernizr.canvas){
//开始画图啦!

}else{
alert(“fuck!”);
}
[/code]

Modernizr 2还提供了一种load机制,方便代码管理,比如:
[code=”javascript”]
Modernizr.load({
test: Modernizr.canvas,//检查是否支持标签及相应的属性
yep : ‘canvas.js’,//如果支持标签及相应的属性那么加载canvas.js,
nope: ‘no-canvas.js’//如果不支持标签及相应的属性那么加载no-canvas.js,
});
[/code]

如果直接用的是development版本的modernizr,你会发现,根本就没有Modernizr.load,因为它是作为一个单独文件发布的:yepnope.js。而在production版本,我们选择将其包含在modernizr里。

官方网址:http://www.modernizr.com/

群熠创想招聘前端开发工程师(html5方向)

请将简历发到 Bryan#galaxy-idea.com
Gtalk: zhaozuoyang#gmail.com
QQ: 17335553
岗位要求
1. 深刻理解Web标准,精通XHTML/CSS/JS。
2. 熟悉Jquery等,能快速高效实现各种交互效果。
3. 极强的学习能力,能快速掌握HTML5 和 Mobile Web 开发。
4. 具备HTML5 和 Mobile Web开发经验者优先。
5. 英雄不问出身。不限学校、学历、专业、工作年限。
主要的工作是用html5技术,开发手机客户端。
看看demo,可以分别用支持html5的浏览器(chrome,Safari)或者手机(iPhone,android,ipad),

访问如下网址:
http://zheli.com/html5/sencha/examples/kitchensink/
待遇视具体水平和当前薪资而定,8000起步,不设上限。
如果有更多决心和我们一起创业,也可以自愿选择其他报酬形式和薪资构成(工资 + 股权/期权)。
同时招募兼职或实习生职位,薪资面议。

公司名称:北京群熠创想信息技术有限公司

公司网址:http://www.galaxy-idea.com

产品网址:http://www.zheli.com

HTML5 中的一些新特性

简洁的DOCTYPE:

HTML5 只有一个简单的文档类型:<!DOCTYPE html>。它不使用版本,因此该文档类型适用所有版本的HTML。

简单易记的语言标签:

你并不需要在<html> 中使用xmlns 或xml:lang标记。<html lang=”en”> 将对HTML5 有效。

简单易记的编码类型:

你现在可以在meta 标签中使用”charset”:<meta charset=”utf-8″ />

不需要闭合标签:

在HTML5 中,空标签(如:br、img 和input )并不需要闭合标签。

废弃的标签:

下面这些标签并不被HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和<xmp>。

更加语义化的新增标签:

HTML5 新增的一些新标签除了不仅仅是更具语义的<div> 标签的替代品,并不提供额外的功能。这些都是新增的标签:<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>。 继续阅读