标签归档:HTML5

用HTML制作幻灯片(PPT)

这周五给公司的同事做了一个HTML的培训,之前也看到过很多HTML的幻灯片,于是借此机会实践了一把,感觉不错!我搜索之后发现下面几个HTML做幻灯片的框架比较好。

1)deck.js

deckjs目前提供四个模板,三种页面切换方式,而且支持页面跳转(按下g键),按下M键还可以出现幻灯片的列表。

2)html5slides

Google I/O 2011就是使用的这个框架做的幻灯片!

 

 

HTML5跨浏览器实现总结(HTML5 Cross Browser Polyfills)

在GitHub上发现的好东西,GitHub最近风光无限啊,很多项目都在向上面迁移,俨然就是一个开源项目和程序员的世外桃源。

这篇文章中总结了SVG、Canvas、Local Storage、Web Sockets、File Api等各个方面的跨浏览器的解决方案总结,如果你想要使用HTML5进行开发,并且希望支持旧的浏览器,那么这个网页绝对有用。

原文链接:https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

 

placeholder在非标准(IE)浏览器的实现

题目写得好拗口啊:)

placeholder是HTML5的一个新特性,今天在考虑如何提示表单输入内容格式的时候,左思右想还是把提示内容放在input中最好。刚开始还不知道有placeholder这个东西,想要找一些js实现同样的效果,不久就发现原来HTML5中有placeholder这个标签属性,恰好支持这种效果。

高兴了没有一会,万恶的IE就把我拉回了现实。

方法就是比问题要多,找了N多用JS实现的placeholder的效果,最后发现一个相对完美的实现。

源码:

// HTML5 placeholder plugin version 1.01
// Copyright (c) 2010-The End of Time, Mike Taylor, http://miketaylr.com
// MIT Licensed: http://www.opensource.org/licenses/mit-license.php
//
// Enables cross-browser HTML5 placeholder for inputs, by first testing
// for a native implementation before building one.
//
//
// USAGE:
//$('input[placeholder]').placeholder();

//
(function($){
//feature detection
var hasPlaceholder = 'placeholder' in document.createElement('input');

//sniffy sniff sniff -- just to give extra left padding for the older
//graphics for type=email and type=url
var isOldOpera = $.browser.opera && $.browser.version < 10.5; $.fn.placeholder = function(options) { //merge in passed in options, if any var options = $.extend({}, $.fn.placeholder.defaults, options), //cache the original 'left' value, for use by Opera later o_left = options.placeholderCSS.left; //first test for native placeholder support before continuing //feature detection inspired by ye olde jquery 1.4 hawtness, with paul irish return (hasPlaceholder) ? this : this.each(function() { //TODO: if this element already has a placeholder, exit //local vars var $this = $(this), inputVal = $.trim($this.val()), inputWidth = $this.width(), inputHeight = $this.height(), //grab the inputs id for the

//stuff in some calculated values into the placeholderCSS object
options.placeholderCSS['width'] = inputWidth;
options.placeholderCSS['height'] = inputHeight;

// adjust position of placeholder
options.placeholderCSS.left = (isOldOpera && (this.type == 'email' || this.type == 'url')) ?
'11%' : o_left;
placeholder.css(options.placeholderCSS);

//place the placeholder
$this.wrap(options.inputWrapper);
$this.attr('id', inputId).after(placeholder);

//if the input isn't empty
if (inputVal){
placeholder.hide();
};

//hide placeholder on focus
$this.focus(function(){
if (!$.trim($this.val())){
placeholder.hide();
};
});

//show placeholder if the input is empty
$this.blur(function(){
if (!$.trim($this.val())){
placeholder.show();
};
});
});
};

//expose defaults
$.fn.placeholder.defaults = {
//you can pass in a custom wrapper
inputWrapper: '',

//more or less just emulating what webkit does here
//tweak to your hearts content
placeholderCSS: {
'font':'0.75em sans-serif',
'color':'#bababa',
'position': 'absolute',
'left':'5px',
'top':'3px',
'overflow-x': 'hidden'
}
};
})(jQuery);

源码:https://github.com/miketaylr/jQuery-html5-placeholder/blob/master/html5placeholder.jquery.js

DOCTYPE怎么支持html5

DOCTYPE即DTD,文档类型定义。通常来说他决定了浏览器选用什么样的布局模式来显示网页。选用不同的DOCTYPE通常会对网页的布局和书写规则产生影响。现在比较常用的XHTML 1.0的DOCTYPE主要有三种。

1)过度类型

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

这是一种不是很严格的DOCTYPE,一些不被推荐的标签也可以使用。现在大多数的网页都在使用这种类型。

2)严格类型

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

这种要求比较严格不允许使用表现性的标签,如<hr/>。标签的书写必须符合规定。

3)框架类型

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

一种支持框架的DOCTYPE。

此外还有支持XHML4.01的DTD和适合手机浏览器的DTD,参见维基百科的DOCTYPE的介绍

那么如何让我们的网站支持仍处于开发阶段的HTML5呢?方法很简单,使用如下的类型,那么我们的网站就可以支持HTML5啦,同时向后兼容。

<!DOCTYPE HTML>

就这么简单网站就可以支持HTML5啦,很简单的书写方式,相对于老式的DOCTYPE,这个更容易记忆。关键是这样的类型我们现在就可以使用,如此短的定义正合Google这种大流量网站的

心意。除了Google以为,现在使用这种类型的网站还有淘宝

HTML5新特性学习-自定义数据

此文章属翻译作品,如果看的不通顺或者看不懂,请翻看原文!

原文链接HTML 5 data- Attributes

自定义数据属性是在HTML5中新加入的一个特性。对于规范来说,好像有点怪异–但他的确提供了一些便利。

简单来说,自定义数据属性规范规定任何以data-开头的属性都将被视为私有数据的存储区域(”私有”在这里的意思是最终用户无法看到他-他不会影响页面的布局和表现)

这允许你书写有效的HTML标记的同时,嵌入数据到你的网页中去。简单示例如下:

<li class=”user”   data-name=”John Resig”  data-city=”Bostondata-lang=”js”  data-food=”Bacon>

<b>John says:</b> <span>Hello, how are you?</span>

</li>

上面的代码完全符合HTML5的规范。对所有的javascript开发者来说这是一个很受欢迎的新特性。一直以来我们都在需求一种最好的用有效地方式添加元数据到htmL元素的方法,框架用各种不同的方式去解决这一问题。一下是两种解决方案:

1)使用HTML,但自定义DTD。

2)使用XHTML,与特定的命名空间。

The addition of this prefix completely routes around both issues (including any extra markup for validation or needing to be valid XHTML) with this effective addition.

On top of this a simple JavaScript API is presented to access these attribute values (in addition to the normal get/setAttribute):

var user = document.getElementsByTagName(“li”)[0];
var pos = 0, span = user.getElementsByTagName(“span”)[0];

var phrases = [
{name: “city“, prefix: “I am from},
{name: “food“, prefix: “I like to eat},
{name: “lang“, prefix: “I like to program in}
];

user.addEventListener( “click”, function(){
var phrase = phrases[ pos++ ];
// Use the .dataset property
span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
}, false);

这种.dataset用法看起来很像.attributes的用法(但是他只是作为key-value 对),由于现在还没浏览器实现这一DOM特性,对他的需求并不是很大-因此上面的代码可以被替代为:

span.innerHTML = phrase.prefix + user.getAttribute(“data-” + phrase.name );

我认为最令人兴奋的是我们可以在所有的浏览器去实现这些特性之前就可以使用它们。现在在你的网页上使用这种特性,那你可以很明确的知道他们在未来可以继续有效。当HTML验证完全整合到W3C的认证当中的时候,你的网站讲兼容他们(当然,假设你已经通过HTML5的验证并且正在使用HTML5的Doctype)