INN823.com » html5

INN823.com » html5 http://www.inn823.com 发现可能！ Tue, 27 Jul 2010 11:14:57 +0000 http://wordpress.org/?v=2.9.1 zh hourly 1 讨厌微软的懒惰，不喜欢使用笨拙的INTERNET EXPLORER。 http://www.inn823.com/2010/04/323 http://www.inn823.com/2010/04/323#comments Fri, 02 Apr 2010 15:07:17 +0000 weweloo http://www.inn823.com/?p=323 自从自己动手开始琢磨wp模板以来，在外观的控制上，主流的浏览器IE却总表现得特别的非主流，功能上也十分欠缺，今天终于把IE浏览器拒绝了。往后通过IE浏览器将不能打开该网站。虽然会在极少的浏览量中雪上加霜，但这样以式对微软的懒惰表示不满。虽然力量微不足道。
同时这样做也是为了将来自己学习及应用新的网络技术html5以及css3做个准备吧。

推荐三款自己较为喜欢的浏览器：
Firefox Chorme Safari

]]> http://www.inn823.com/2010/04/323/feed 0 HTML 5 参考手册 http://www.inn823.com/2010/02/301 http://www.inn823.com/2010/02/301#comments Wed, 24 Feb 2010 14:21:00 +0000 weweloo http://www.inn823.com/?p=301 W3C 在 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 <header>, <section>, <footer>, 以及 <figure>。

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

按字母顺序排列

4: 指示在 HTML 4.01 中是否定义了该元素
5: 指示在 HTML 5 中是否定义了该元素

标签	描述	4	5
<!–…–>	定义注释。	4	5
<!DOCTYPE>	定义文档类型。	4	5
<a>	定义超链接。	4	5
<abbr>	定义缩写。	4	5
<acronym>	不支持。定义首字母缩写。	4
<address>	定义地址元素。	4	5
<applet>	不支持。定义 applet。	4
<area>	定义图像映射中的区域。	4	5
<article>	定义 article。		5
<aside>	定义页面内容之外的内容。		5
<audio>	定义声音内容。		5
<b>	定义粗体文本。	4	5
<base>	定义页面中所有链接的基准 URL。	4	5
<basefont>	不支持。请使用 CSS 代替。	4
<bdo>	定义文本显示的方向。	4	5
<big>	不支持。定义大号文本。	4
<blockquote>	定义长的引用。	4	5
<body>	定义 body 元素。	4	5
<br>	插入换行符。	4	5
<button>	定义按钮。	4	5
<canvas>	定义图形。		5
<caption>	定义表格标题。	4	5
<center>	不支持。定义居中的文本。	4
<cite>	定义引用。	4	5
<code>	定义计算机代码文本。	4	5
<col>	定义表格列的属性。	4	5
<colgroup>	定义表格列的分组。	4	5
<command>	定义命令按钮。		5
<datagrid>	定义树列表 (tree-list) 中的数据。		5
<datalist>	定义下拉列表。		5
<datatemplate>	定义数据模板。		5
<dd>	定义定义的描述。	4	5
<del>	定义删除文本。	4	5
<details>	定义元素的细节。		5
<dialog>	定义对话（会话）。		5
<dir>	不支持。定义目录列表。	4
<div>	定义文档中的一个部分。	4	5
<dfn>	定义定义项目。	4	5
<dl>	定义定义列表。	4	5
<dt>	定义定义的项目。	4	5
<em>	定义强调文本。	4	5
<embed>	定义外部交互内容或插件。		5
<event-source>	为服务器发送的事件定义目标。		5
<fieldset>	定义 fieldset。	4	5
<figure>	定义媒介内容的分组，以及它们的标题。		5
<font>	不赞成。定义文本的字体、尺寸和颜色。	4
<footer>	定义 section 或 page 的页脚。		5
<form>	定义表单。	4	5
<frame>	不支持。定义子窗口（框架）。	4
<frameset>	不支持。定义框架的集。	4
<h1> to <h6>	定义标题 1 到标题 6。	4	5
<head>	定义关于文档的信息。	4	5
<header>	定义 section 或 page 的页眉。		5
<hr>	定义水平线。	4	5
<html>	定义 html 文档。	4	5
<i>	定义斜体文本。	4	5
<iframe>	定义行内的子窗口（框架）。	4	5
<img>	定义图像。	4	5
<input>	定义输入域。	4	5
<ins>	定义插入文本。	4	5
<isindex>	不支持。定义单行的输入域。	4
<kbd>	定义键盘文本。	4	5
<label>	定义表单控件的标注。	4	5
<legend>	定义 fieldset 中的标题。	4	5
<li>	定义列表的项目。	4	5
<link>	定义资源引用。	4	5
<m>	定义有记号的文本。		5
<map>	定义图像映射。	4	5
<menu>	定义菜单列表。	4	5
<meta>	定义元信息。	4	5
<meter>	定义预定义范围内的度量。		5
<nav>	定义导航链接。		5
<nest>	定义数据模板中的嵌套点。		5
<noframes>	不支持。定义 noframe 部分。	4
<noscript>	不支持。定义 noscript 部分。	4
<object>	定义嵌入对象。	4	5
<ol>	定义有序列表。	4	5
<optgroup>	定义选项组。	4	5
<option>	定义下拉列表中的选项。	4	5
<output>	定义输出的一些类型。		5
<p>	定义段落。	4	5
<param>	为对象定义参数。	4	5
<pre>	定义预格式化文本。	4	5
<progress>	定义任何类型的任务的进度。		5
<q>	定义短的引用。	4	5
<rule>	为升级模板定义规则。		5
<s>	不支持。定义加删除线的文本。	4
<samp>	定义样本计算机代码。	4	5
<script>	定义脚本。	4	5
<section>	定义 section。		5
<select>	定义可选列表。	4	5
<small>	不支持。定义小号文本。	4	5
<source>	定义媒介源。		5
<span>	定义文档中的 section。	4	5
<strike>	不支持。定义加删除线的文本。	4
<strong>	定义强调文本。	4	5
<style>	定义样式定义。	4	5
<sub>	定义上标文本。	4	5
<sup>	定义下标文本。	4	5
<table>	定义表格。	4	5
<tbody>	定义表格的主体。	4	5
<td>	定义表格单元。	4	5
<textarea>	定义 textarea。	4	5
<tfoot>	定义表格的脚注。	4	5
<th>	定义表头。	4	5
<thead>	定义表头。	4	5
<time>	定义日期/时间。		5
<title>	定义文档的标题。	4	5
<tr>	定义表格行。	4	5
<tt>	不支持。定义打字机文本。	4
<u>	不支持。定义下划线文本。	4
<ul>	定义无序列表。	4	5
<var>	定义变量。	4	5
<video>	定义视频。		5
<xmp>	不支持。定义预格式文本。	4	5

HTML 标签拥有属性。您可以在每个标签的参考页中找到相应的特殊属性。这里列出的属性是通用于每个标签的核心属性和语言属性（有个别例外）。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 中的新属性：contenteditable, contextmenu, draggable, irrelevant, ref, registrationmark, template。

HTML 4.01 中不再支持的属性：accesskey。

属性

属性	值	描述	4	5
acceskey	a character	设置访问一个元素的键盘快捷键。不支持。	4
class	class_rule or style_rule	元素的类名。	4	5
contenteditable	true false	设置是否允许用户编辑元素。		5
contentextmenu	id of a menu element	给元素设置一个上下文菜单。		5
dir	ltr rtl	设置文本方向。	4	5
draggable	true false auto	设置是否允许用户拖动元素。		5
id	id_name	元素的唯一 id。	4	5
irrelevant	true false	设置元素是否相关。不显示非相关的元素。		5
lang	language_code	设置语言码。	4	5
ref	url or elementID	引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。		5
registrationmark	registration mark	为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。		5
style	style_definition	行内的样式定义。	4	5
tabindex	number	设置元素的 tab 顺序。	4	5
template	url or elementID	引用应该应用到该元素的另一个文档或本文档上另一个位置。		5
title	tooltip_text	显示在工具提示中的文本。	4	5

HTML 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个 HTML 元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。

如果需要学习更多有关使用这些事件进行编程的内容，请学习我们的 JavaScript 教程和 DHTML 教程。

HTML 4.01 与 HTML 5 之间的差异

HTML 5 中的新事件：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。

不再支持的 HTML 4.01 属性：onreset。

属性

属性	值	描述	4	5
onabort	script	发生 abort 事件时运行脚本。		5
onbeforeonload	script	在元素加载前运行脚本。		5
onblur	script	当元素失去焦点时运行脚本。	4	5
onchange	script	当元素改变时运行脚本。	4	5
onclick	script	在鼠标点击时允许脚本。	4	5
oncontextmenu	script	当菜单被触发时运行脚本。		5
ondblclick	script	当鼠标双击时运行脚本。	4	5
ondrag	script	只要脚本在被拖动就允许脚本。		5
ondragend	script	在拖动操作结束时运行脚本。		5
ondragenter	script	当元素被拖动到一个合法的放置目标时，执行脚本。		5
ondragleave	script	当元素离开合法的放置目标时。		5
ondragover	script	只要元素正在合法的放置目标上拖动时，就执行脚本。		5
ondragstart	script	在拖动操作开始时执行脚本。		5
ondrop	script	当元素正在被拖动时执行脚本。		5
onerror	script	当元素加载的过程中出现错误时执行脚本。		5
onfocus	script	当元素获得焦点时执行脚本。	4	5
onkeydown	script	当按钮按下时执行脚本。	4	5
onkeypress	script	当按键被按下时执行脚本。	4	5
onkeyup	script	当按钮松开时执行脚本。	4	5
onload	script	当文档加载时执行脚本。	4	5
onmessage	script	当 message 事件触发时执行脚本。		5
onmousedown	script	当鼠标按钮按下时执行脚本。	4	5
onmousemove	script	当鼠标指针移动时执行脚本。	4	5
onmouseover	script	当鼠标指针移动到一个元素上时执行脚本。	4	5
onmouseout	script	当鼠标指针移出元素时执行脚本。	4	5
onmouseup	script	当鼠标按钮松开时执行脚本。	4	5
onmousewheel	script	当鼠标滚轮滚动时执行脚本。		5
onreset	script	当表单重置时执行脚本。不支持。	4
onresize	script	当元素调整大小时运行脚本。		5
onscroll	script	当元素滚动条被滚动时执行脚本。		5
onselect	script	当元素被选中时执行脚本。	4	5
onsubmit	script	当表单提交时运行脚本。	4	5
onunload	script	当文档卸载时运行脚本。		5

]]> http://www.inn823.com/2010/02/301/feed 0 html5与html4的对比 http://www.inn823.com/2010/02/293 http://www.inn823.com/2010/02/293#comments Tue, 23 Feb 2010 18:10:37 +0000 weweloo http://www.inn823.com/?p=293 由于缺少结构，即使是形式良好的 HTML 页面也比较难以处理。必须分析标题的级别，才能看出各个部分的划分方式。边栏、页脚、页眉、导航条、主内容区和各篇文章都由通用的 div 元素来表示。HTML 5 添加了一些新元素，专门用来标识这些常见的结构：

section：这可以是书中的一章或一节，实际上可以是在 HTML 4 中有自己的标题的任何东西
header：页面上显示的页眉；与 head 元素不一样
footer：页脚；可以显示电子邮件中的签名
nav：指向其他页面的一组链接
article：blog、杂志、文章汇编等中的一篇文章

我们来考虑一个典型的 blog 主页，它的顶部有页眉，底部有页脚，还有几篇文章、一个导航区和一个边栏

过去编写的典型blog页面

<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<div id=”page”>
<div id=”header”>
<h1><a href=”http://www.elharo.com/blog”>Mokka mit Schlag</a></h1>
</div>
<div id=”container”>
<div id=”center”>
<div id=”post-1000572″>
<h2><a href=
“/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/”>
Spring Comes (and Goes) in Sussex County</a></h2>
<div>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
</div>
</div>
<div id=”post-1000571″>
<h2><a href=
“/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/”>
But does it count for your life list?</a></h2>
<div>
<p>Seems you can now go <a
href=”http://www.wired.com/science/discoveries/news/
2007/04/cone_sf”>bird watching via the Internet</a>. I
haven’t been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can’t imagine it replacing
actually being out in the field by any small amount.
On the other hand, I’ve always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</div>
</div>
</div>
<div>
<div>
<a href=”/blog/page/2/”>« _fcksavedurl=”"/blog/page/2/”>«” Previous Entries</a>
</div>
<div></div>
</div>
</div>
<div id=”right”>
<ul id=”sidebar”>
<li><h2>Info</h2>
<ul>
<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>
<li><a href=”/blog/todo-list/”>Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href=’/blog/2007/04/’>April 2007</a></li>
<li><a href=’/blog/2007/03/’>March 2007</a></li>
<li><a href=’/blog/2007/02/’>February 2007</a></li>
<li><a href=’/blog/2007/01/’>January 2007</a></li>
</ul>
</li>
</ul>
</div>
<div id=”footer”>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</div>
</div>
</body>
</html>

HTML5编写的典型blog页面

<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>
<h1><a href=”http://www.elharo.com/blog”>Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
“/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/”>
Spring Comes (and Goes) in Sussex County</a></h2>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15. </p>
</article>
<article>
<h2><a href=
“/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/”>
But does it count for your life list?</a></h2>
<p>Seems you can now go <a
href=”http://www.wired.com/science/discoveries/news/
2007/04/cone_sf”>bird watching via the Internet</a>. I
haven’t been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can’t imagine it replacing
actually being out in the field by any small amount.
On the other hand, I’ve always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</article>
<nav>
<a href=”/blog/page/2/”>« _fcksavedurl=”"/blog/page/2/”>«” Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href=”/blog/comment-policy/”>Comment Policy</a></li>
<li><a href=”/blog/todo-list/”>Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href=’/blog/2007/04/’>April 2007</a></li>
<li><a href=’/blog/2007/03/’>March 2007</a></li>
<li><a href=’/blog/2007/02/’>February 2007</a></li>
<li><a href=’/blog/2007/01/’>January 2007</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</footer>
</body>
</html>

现在不再需要 div 了。不再需要自己设置 class 属性，从标准的元素名就可以推断出各个部分的意义。这对于音频浏览器、手机浏览器和其他非标准浏览器尤其重要。

]]> http://www.inn823.com/2010/02/293/feed 0 html5未来网页标准 http://www.inn823.com/2010/02/287 http://www.inn823.com/2010/02/287#comments Tue, 23 Feb 2010 15:49:13 +0000 weweloo http://www.inn823.com/?p=287 HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 发起的，最开始的名称叫做Web Application 1.0，而后这个标准吸纳了Web Forms 2.0的标准，并一同被W3C组织所采用，合并成为下一代的HTML5标准。

前言

HTML语言作为如今编程最为广泛的语言，具有易用、快捷、多浏览平台兼容等特点，但是随着时代的进步，HTML的标准却停滞不前，这一次还在不断开发中的HTML5标准的更新可以说给这门标记语言带来了新的生命力。本文将着重讨论HTML5中的Web Forms 2.0, 即表单的部分。

表单是网页中常见的控件(集)。小到网站注册登录，大到一个企业的数据管理系统，都基本上有表单的身影。表单之所以如此重要，主要是因为它担负大量的用户和网页后台数据更新交互的任务。Web开发人员，对于网页表单可以说又爱又恨，爱的是它方便的收集、组织数据的功能，恨的是它的功能很大程度上也就仅此而已。一些在最终网站用户看起来稀松平常的功能，比如说输入类型检查、表单校验、错误提示等等，开发人员无不需要花费大量精力利用 JavaScript和DOM编程来满足这些天然所需的功能点，而随着Ajax的流行，出现的一些JavaScript的工具库，比如Dojo, YUI等都提供了方便的JavaScript Widget或者API来减轻开发人员的负担。

HTML5的表单新特性

HTML5 Web Forms 2.0是对目前Web表单的全面提升，它在保持了简便易用的特性的同时，增加了许多内置的控件或者控件属性来满足用户的需求，并且同时减少了开发人员的编程。在我看来，HTML5 主要在以下几个方面对目前的Web表单做了改进：

新的控件类型

还在为类型检查犯愁吗，还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗，HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框，Email输入框等。

<input type="url"></input>
<input type="email"></input>

当然还有非常重要的日期输入框，要知道使用JavaScript和CSS来“手工”制作一个日期输入框还是非常花功夫的，类似 Dojo，YUI这样的类库也无不在这个widget上面大做文章

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

作为我痛苦记忆的一部分，我经常记得我们开发人员要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库，比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性，为select控件外联数据源！

<select data="http://domain/getmyoptions"></select>

改进的文件上传控件，你可以使用一个控件上传多个文件，自行规定上传文件的类型（accept），你甚至可以设定每个文件最大的大小（maxlength）。你看出它和一般操作系统提供的文件上传控件的区别了吗，反正我觉得基本一致了。在HTML5应用中，文件上传控件将变得非常强大和易用。

重复（repeat）的模型，HTML5提供一套重复机制来帮助我们构建一些重复输入列表，其中包括一些诸如add、remove、 move-up，move-down的按钮类型，通过这一套重复的机制，开发人员可以非常方便的实现我们经常看到的编辑列表，这是一个很常见的模式，我们可以增加一个条目、删除某个条目、或者移动某个条目等等。

内建的表单校验系统，HTML5为不同类型的输入控件各自提供了新的属性，来控制这些控件的输入行为，比如我们常见的必填项 required属性，以及为数字类型控件提供的max、min等。而在你提交表单的时候，一旦校验错误，浏览器将不执行提交操作，而会显示相应的检验错误信息。

<input type="text" required></input>
<input type="number" min=10  max=100></input>

XML Submission，我们一般常见的是form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式，数据送到服务器端，可以方便的存取。HTML5将提供一种新的数据格式：XML Submission，即application/x-www-form+xml。简单的举例说，服务器端将直接接收到XML形式的表单数据。

<submission>
     <field name="name" index="0">Peter</field>
     <field name="password" index="0">password</field>
</submission>

HTML5对表单控件的更新，无疑是很振奋人心的。本文描述了一部分表单的新特性，还有一部分新特性同样很令人期待。相信随着标准的深入开发以及浏览器对 HTML5支持程度的进一步提升，设计一个简单易用的表单的工作，将变得非常轻松。

]]> http://www.inn823.com/2010/02/287/feed 0