博客 - 标签：html5

淘宝首页开始使用HTML5

2011-01-20 下午 - html/css/xml/xsl -

2011，淘宝首页又改版了，值得称道是使用了HTML5，淘宝的开发团队在前端技术上始终是走在国内最前沿。

说到HTML5，最大的问题还是IE6/7/8的保护，他们使用了Remy Sharp的IE Print Protector办法。可以在head看到代码：

<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js" type="text/javascript"></script>
<![endif]-->

如果IE6/7/8用户禁用了js呢？淘宝的办法有两个：

  1. 根据向导启用js；
  2. 让用户进入HTML4页面。

下面代码处理：

<!--[if lte IE 8]><noscript><div class="site-nav"></noscript><![endif]-->
......
<!--[if lte IE 8]><noscript></div></noscript><![endif]-->

最后还要记得CSS中设置文档中使用到的新标签display属性为block。

section,article,aside,header,footer,nav,dialog,figure{
    display:block;
}

开发实践：http://www.slideshare.net/lijing00333/2011-6516501

3 Comments »

html5 forms

2010-04-12 上午 - html/css/xml/xsl -

html5-forms-demo

预览demo：html5 forms demo

必填项

很简单，添加属性 required

输入框自动获取焦点

载入页面后，第一个NAME的输入框自动获取焦点。添加属性 autofocus

文本框的输入提示

一直以来都是利用javascript的onblur、onfocus来实现一个输入框的提示信息，现在只需要添加属性 placeholder="要提示的内容"

表单验证功能

将输入框的type设置为email，即可验证是否正确的邮箱地址。

有趣的input type=”range”

可拖动的滑块，可设置一个最小值(min)和一个最大值(max)，还可以设置每拖动一格数字变动的步长(step)。配合output实现当前值的显示。

<input type="range" min="10" max="100" step="10" name="a">

output写法：

<output name="result"  onforminput="value=a.value"  >0</output>

input type=”number”

点击上下箭头按钮实现数字的加减操作。与“可拖动的滑块”类似，可设置最小值、最大值、步长。

<input type="number" min="18" max="25" step="2" name="age">

输入框下拉提示

可自行输入，也可以直接下拉选择。

<input id="search" type="url" list="searchlist" />
<datalist id="searchlist">
    <option value="http://www.google.com" label="Google" />
    <option value="http://www.yahoo.com" label="Yahoo" />
    <option value="http://www.bing.com" label="Bing" />
    <option value="http://www.baidu.com" label="Baidu" />
</datalist>

日期选择

不需要任何脚本的支持即可实现日历控件。

<input type="date" name="birthday" />

2 Comments »

It’s Beautiful

2010-03-29 下午 - html/css/xml/xsl - -

点击图片查看大图

3 Comments »

HTML 5 几个应用案例

2010-03-22 下午 - html/css/xml/xsl -

　　光说HTML 5的强大了，贴几个应用，感受一下(请使用支持HTML5的浏览器)。

  1. Gordon

    　　号称：An open source Flash runtime，一个JS＋SVG应用。解析SWF文件，然后播放。不需要Flash插件，不可思议！但并不是所有的flash都能解析播放的。

  2. 基于HTML 5的在线画板

    　　酷毙了!功能强大，画图毕后还能保存一张PNG格式的图片。

  3. SublimeVideo

    　　HTML 5视频的一个强大的应用。播放器的操控很便捷，播放、暂停、拖动进度、时间显示，甚至还能够全屏播放，这里的全屏是浏览器窗口的范围，不是整个屏幕。全屏后播放器的控制条还能随鼠标的状态渐隐渐显，体验真是great！

  4. HTML 5的YouTube(需要翻个“围墙”)

    　　最后我们再来看看伟大的YouTube，看她是如何将HTML 5付诸现实的。当然你需要有支持HTML 5的浏览器，还有H.264编码器。

　　HTML 5究竟离我们还有多远，我相信不会很快。直到IE9的普及，HTMl 5才能说真正意义上的敢派上“战场”！IE6这个绊脚石都还没瓦解，谈其它的，显得有点荒谬！IE6这个话题扯远了，罢了。保持那份期待还是美好的！

2 Comments »

HTML5来了

2010-03-22 下午 - html/css/xml/xsl -

　　HTML5现在火，不火就怪了。很好，很弓虽大，哈哈！希望是个“喜剧”，而且不断的“演”下去。

　　先了解一下HTML5：

W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。

通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。

　　记录HTML5标签元素相对HTML4.01标签的不同处：

未作修整的元素此表不一一列出，查看详细表格
HTML5新增标签
标签 描述
<article> 定义 article。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<canvas> 定义图形。
<command> 定义命令按钮。
<datagrid> 定义树列表 (tree-list) 中的数据。
<datalist> 定义下拉列表。
<datatemplate> 定义数据模板。
<details> 定义元素的细节。
<dialog> 定义对话（会话）。
<embed> 定义外部交互内容或插件。
<event-source> 为服务器发送的事件定义目标。
<figure> 定义媒介内容的分组，以及它们的标题。
<footer> 定义 section 或 page 的页脚。
<header> 定义 section 或 page 的页眉。
<m> 定义有记号的文本。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<nest> 定义数据模板中的嵌套点。
<output> 定义输出的一些类型。
<progress> 定义任何类型的任务的进度。
<rule> 为升级模板定义规则。
<section> 定义 section。
<source> 定义媒介源。
<time> 定义日期/时间。
<video> 定义视频。
HTML5删减标签
<acronym> 不支持。定义首字母缩写。
<applet> 不支持。定义 applet。
<basefont> 不支持。请使用 CSS 代替。
<big> 不支持。定义大号文本。
<center> 不支持。定义居中的文本。
<dir> 不支持。定义目录列表。
<font> 不赞成。定义文本的字体、尺寸和颜色。
<frame> 不支持。定义子窗口（框架）。
<frameset> 不支持。定义框架的集。
<isindex> 不支持。定义单行的输入域。
<noframes> 不支持。定义 noframe 部分。
<noscript> 不支持。定义 noscript 部分。
<s> 不支持。定义加删除线的文本。
<strike> 不支持。定义加删除线的文本。
<tt> 不支持。定义打字机文本。
<u> 不支持。定义下划线文本。

记录HTML5标签元素相对HTML4.01属性的不同处：

未作修整的属性此表不一一列出，查看详细表格
HTML5新增属性
属性 值 描述
contenteditable true、
false		 设置是否允许用户编辑元素。
contentextmenu id of a menu element 给元素设置一个上下文菜单。
draggable true、
false、
auto		 设置是否允许用户拖动元素。
irrelevant true、
false		 设置元素是否相关。不显示非相关的元素。
ref url or elementID 引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。
registrationmark registration mark 为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。
template url or elementID 引用应该应用到该元素的另一个文档或本文档上另一个位置。
HTML5删减属性
acceskey a character 设置访问一个元素的键盘快捷键。不支持。HTML4.01版本已不支持。

记录HTML5标签元素相对HTML4.01事件属性的不同处：

未作修整的事件属性此表不一一列出，查看详细表格
HTML5新增事件属性
属性 值 描述
onabort script  发生 abort 事件时运行脚本。
onbeforeonload script  在元素加载前运行脚本。
oncontextmenu script  当菜单被触发时运行脚本。
ondrag script  只要脚本在被拖动就允许脚本。
ondragend script  在拖动操作结束时运行脚本。
ondragenter script  当元素被拖动到一个合法的放置目标时，执行脚本。
ondragleave script  当元素离开合法的放置目标时。
ondragover script  只要元素正在合法的放置目标上拖动时，就执行脚本。
ondragstart script  在拖动操作开始时执行脚本。
ondrop script  当元素正在被拖动时执行脚本。
onerror script  当元素加载的过程中出现错误时执行脚本。
onmessage script  当 message 事件触发时执行脚本。
onmousewheel script  当鼠标滚轮滚动时执行脚本。
onresize script  当元素调整大小时运行脚本。
onscroll script  当元素滚动条被滚动时执行脚本。
onunload script 当文档卸载时运行脚本。
HTML5删减事件属性
onbeforeunload script  在元素未加载前运行脚本。
onreset script  当表单重置时执行脚本。不支持。

　　总结：HTML5提供了一系列新的元素和属性，并新增了新的视频和音频功能(<audio>、<video>)，取消了一些过时的标签、属性、事件属性。强化了网页的表现性能，追加了本地数据库等Web应用功能。

推荐阅读：

  1. 5 Exciting Things to Look Forward to in HTML 5
  2. 各浏览器对css3和html5的兼容表
  3. 维基百科：HTML 5
  4. W3C：HTML 5
  5. Google 发布介绍 HTML 5 新特性的视频

No Comments »

你会使用html5 doctype吗？

2010-03-20 下午 - html/css/xml/xsl - -

taobao的head里一些标签“瘦身”了！doctype、meta、script、style…让我好奇的主要是doctype的写法。

后来仔细一查，google，百度，口碑，支付宝，阿里巴巴都是这样。

为了解疑，在淘宝ued陈成的blog找到新首页开发PPT详解 —— HTML规范一文，再一对照Doctype和渲染模式对照表，疑惑解决了，同时也学到了不少的新知识。

记录一下：

html5 的 doctype：

<!DOCTYPE html>

html5 的其他标签：

<meta charset="gbk" />
<script src=""></script>
<style></style>
<link rel="stylesheet" href="" />

这种格式，所有主流浏览器都进入标准模式。这样一来就不会出现明显的兼容事件，也就无后顾之忧。不过问题还是有的，html5 doctype与图片多余空白一文就有提到——除IE7和IE6，其他支持HTML5的浏览器都在图片与容器之间出现了多余空白，并且给出了解决方法，很赞。另，iframe也受到影响，解决方法和图片一致！

最优的解决方法：

img{vertical-align:middle} /*or bottom top and so on*/

补充：

秦歌：不仅 html5 的 doctype 会引发此类问题，还有 html4.01 Strict ，这应该是标准与准标准之间的问题。

推荐阅读：

  1. 给HTML文档设置XHTML Doctype是有害的
  2. Optimizing Optimizing HTML

No Comments »