theme-color支持

Standard

从Android Lollipop上Chrome 39开始,就支持theme-color,在手机上的效果如下:

实现这样的效果很简单,只需要在<head>中添加名为theme-color<meta>标签即可:
<meta name="theme-color" content="#3498db">

标题前面的icon设置也同样非常的简单,只要需要添加一个<link>标签即可:
<link rel="icon" sizes="192x192" href="miaomiao.png">

更多内容,请访问Google Developers

Html阻断input激活软键盘

Standard
经测试,如果想在手机浏览器上阻断点击input域的时候不弹出软键盘,必须阻断onmousedown 方法,主要用于点击input时进行逻辑处理,比如唤起原生的密码键盘等操作。
document.getElementById(‘pwd’).onmousedown = function(ev) {
ev.preventDefault();
};

检测浏览器对HTML5的支持

Standard

针对不同的浏览器,以及android的不同版本的webview对html支持的不一致(android平台中有很多仅仅支持HTML5的节点,但是却不能正常工作),我们需要做出一些检测,根据结果处理不同的情况。
[code lang=”javascript”]
<script type="text/javascript">
function supportVideo() {
return !!document.createElement("video").canPlayType;
}
function supportCanvas() {
return !!document.createElement("canvas").getContext;
}
/**
* 检查是否支持本地存储(Local Storage)
*/
function supportLocalStorage() {
return (‘localStorage’ in window) && window[‘localStorage’] != null;
}
/**
* 检查是否支持Web Workers
*/
function supportWebWorkers() {
return window.Worker;
}
/**
* 检查是否支持离线web应用
*/
function supportOffLine() {
return !!window.applicationCache;
}
/**
* 检查是否支持地理位置(Geolocation)
*/
function supportGeolocation() {
return !!navigator.geolocation;
}
/**
* 检查是否支持画布文本(Canvas Text)
*/
function supportCanvasText() {
if (!supportCanvas) {
return false;
}
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
return typeof context.fillText == "function";
}
/**
* 检查是否支持MP4
*/
function support_h264BaseLine_VideoFormats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/mp4;codecs=’avc1.42E01E,mp4a.40.2’")
}
/**
* 检查是否支持ogg
*/
function support_ogg_theora_VideoFromats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/ogg;codecs=’theora,vorbis’")
}
/**
* 检查是否支持webM
*/
function support_webM_VideoFromats() {
if (!supportVideo()) {
return false;
}
var v = document.createElement("video");
return v.canPlayType("video/webm;codecs=’vp8,vorbis’")
}
</script>
[/code]
 

还可以使用检测插件Moderniz, Moderniz是一个开源的js类库,用于检测浏览器是否支持html5及css3特性;在页面引用后,会创建对应的全局对象,并开放 对应特性 是否支持的属性,我们可以直接进行访问对应属性,就可以知道是否支持某特性了.

查看DEMO

HTML5学习笔记——A标签

Standard

定义和用法

<a> 标签定义超链接,用于从一个页面链接到另一个页面。

<a> 元素最重要的属性是 href 属性,它指定链接的目标。

在所有浏览器中,链接的默认外观是:

  • 未被访问的链接带有下划线而且是蓝色的
  • 已被访问的链接带有下划线而且是紫色的
  • 活动链接带有下划线而且是红色的

 

实例

链接到 主页:
[code lang=”html”]
<a href="http://ilovn.com">ilovn.com</a>
[/code]

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中,<a> 标签既可以是超链接,也可以是锚。这取决于是否描述了 href 属性。

在 HTML 5 中,<a> 是超链接,但是假如没有 href 属性,它仅仅是超链接的一个占位符。

HTML 5 有一些新的属性,同时不再支持一些 HTML 4.01 的属性。

提示和注释

提示:如果没有使用 href 属性,则不能使用 hreflang, media, ping, rel, target 以及 type 属性。

提示:通常在当前浏览器窗口中显示被链接页面,除非规定了其他 target。

提示:请使用 CSS 来改变链接的样式。

属性

属性 描述
charset char_encoding HTML 5 中不支持。
coords coordinates HTML 5 中不支持。
href URL 链接的目标 URL。
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用。
media media query 规定目标 URL 的媒介类型。

默认值:all。仅在 href 属性存在时使用。

name section_name HTML 5 中不支持。
rel
  • alternate
  • archives
  • author
  • bookmark
  • contact
  • external
  • first
  • help
  • icon
  • index
  • last
  • license
  • next
  • nofollow
  • noreferrer
  • pingback
  • prefetch
  • prev
  • search
  • stylesheet
  • sidebar
  • tag
  • up
规定当前文档与目标 URL 之间的关系。

仅在 href 属性存在时使用。

rev text HTML 5 中不支持。
shape
  • default
  • rect
  • circle
  • poly
HTML 5 中不支持。
target
  • _blank
  • _parent
  • _self
  • _top
在何处打开目标 URL。仅在 href 属性存在时使用。
type mime_type 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。

注:MIME = Multipurpose Internet Mail Extensions。

全局属性

<a> 标签支持 HTML 5 中的全局属性。

事件属性

<a> 标签支持 HTML 5 中的事件属性。

HTML5学习笔记——DOCTYPE标签

Standard

定义和用法

<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。

doctype 声明不属于 HTML 标签;tag; 它是一条指令,告诉浏览器编写页面所用的标记的版本。

在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。

HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。

实例

具有正确文档类型(doctype)的 HTML5 文档:
[code lang=”html”]
<!DOCTYPE HTML>
<html>

<head>
<title>Title of the document</title>
</head>

<body>
The content of the document……
</body>

</html>
[/code]

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中有 3 个不同的文档类型,在 HTML 5 中只有一个:
[code lang=”html”]
<!DOCTYPE HTML>
[/code]
在 HTML5 中,文档类型声明是不是很简单。

提示和注释:

注释:<!DOCTYPE> 标签没有结束标签!

提示:<!DOCTYPE> 对大小写不敏感。