您好,欢迎您来到UED用户体验网!
您当前位置:UED用户体验网首页 >> 前端开发 >> 拥抱HTML5,《HTML5设计原理》读后随记

拥抱HTML5,《HTML5设计原理》读后随记

2011-01-17 13:04:14 来源:http://www.heiniuhaha.cn/blog/?p=1273&preview=true 浏览:2395
内容提要:HTML5和CSS3的时代到来了,新版2011版淘宝网首页已全部使用HTML5,拥抱变化才是王道。
为之漫笔翻译的很好,看了一遍后,感觉理解了很多,强烈推荐其他做开发的童鞋尤其前端也来看看。
不仅让我摸清了html4,xhtml1.0, xhtml2.0, html5之间的关系,也理解了为什么会出现HTML5,同时,加紧推进在项目中应用HTML5。
机器人三大法则:(著名的伯斯塔尔法则)

机器人不得伤害人类,或袖手旁观人类受伤害。
机器人必须服从人类命令,除非命令违反第一法则。
机器人必须自卫,只要不违背第一和第二法则。

xhtml1.0与html4.0相同点:

两个规范的内容是一样的;
词汇表是一样的;
所有的元素是一样;
所有的属性也都是一样的;

xhtml1.0与html4.0唯一不同点:

XHTML 1.0要求使用XML语法(严格的编码风格)
//所有属性都必须使用小写字母;
//所有元素也必须使用小写字母;
//所有属性值都必须加引号;
//你还得记着使用结束标签,记着对img和br要使用自结束标签。

XHTML 1.1与xhtml1.0唯一的变化:

把文档标记为XML文档
//XML的错误处理模型:解析器如果遇到错误,停止解析。
//不能理解XML的浏览器,用户直接看不到这个网页了。

XHTML 2特点(这个规范没有完成):

仍然使用XML错误处理模型,你必须保证以XML文档类型发送文档;
有意不再向后兼容已有的HTML的各个版本,开发人员和浏览器厂商永远不会支持它。

真正广泛地应用的设计原理:

发送时要保守;接收时要开放。
//作为专业人士,在发送文档的时候,我们会尽量保守一些,尽量采用最佳实践,尽量确保文档格式良好。
//但从浏览器的角度说,它们必须以开放的姿态去接收任何文档。

HTML5
1、2004成立了Web Hypertext Applications Technology Working Group(Web超文本应用技术工作组,WHATWG),完全脱离W3C。
2、W3C在2007年组建了HTML5工作组,在WHATWG工作成果的基础上继续开展工作。


HTML5设计原理一:避免不必要的复杂性
一、DOCTYPE的写法:

//HTML 4.01:
<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

//HTML5:
<!DOCTYPE html>//这种写法会触发浏览器的标准模式。

备注:doctype它不是写给浏览器看的,Doctype是写给验证器看的。让验证器按照该doctype来验证我的文档。

二、指定文档的字符编码的写法:

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

//XHTML 1.0:
<?xml version="1.0" encoding="UTF-8" ?>

//HTML5:
<meta charset="utf-8"/>

备注:此简短写法,它不仅适用于最新版本的浏览器,只要是今天还有人在用的浏览器都同样有效。

HTML5其他简洁写法:

<link href="#" rel="stylesheet"/>
//无需再写type="text/css",否则那就是重复自己了

<script></script>
//无需再写使用的脚本语言 type="text/javascript"

HTML5设计原理二:支持已有的内容

<img src="foo" alt="bar" />
<p class="foo">Hello world</p>

<img src="foo" alt="bar">
<p class="foo">Hello world

<IMG SRC="foo" ALT="bar">
<P CLASS="foo">Hello world</p>

<img src=foo alt=bar>
<p class=foo>Hello world</p>

备注:HTML5支持已存在的各种不严谨的写法。
在JavaScript,你可以在每条语句末尾加上分号,但不是必需的,因为JavaScript会自动插入分号……
JSlint确实是个非常棒的工具,规范统一JavaScript编码风格,在团队项目非常有用。


HTML5设计原理三:解决现实的问题
给整块内容(含多个块级元素)加个链接

//HTML 4.01 XHTML 1.0:
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

//HTML5:
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>

备注:这种写法其实早就已经存在于浏览器中了,但以前这样写是不合乎规范的,现在我们把标准改了,允许你这样写了。


HTML5设计原理四:求真务实
新增语义元素涉及头部(header)、脚部(footer)、分区(section)、文章(article)……

//HTML 4.01 XHTML 1.0:

<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>

//HTML5:
<body>
<header>...</header>
<nav>...</nav>
<div id="main">...</div>
<aside>...</aside>
<footer>...</footer>
</body>

备注:新元素section、article、aside和nav代表了一种新的内容模型,一种HTML中前所未有的内容模型——给内容分区。
将新元素作为类的替代品更有价值,因为这些元素在一个页面中不止可以使用一次,而是可以使用多次,可嵌套使用。
其中最为通用的section,可以说是与内容最相关的一个。而article则是一种特殊的section。Aside呢,是一种特殊的section。最后,Nav也是一种特殊的section。

//HTML 4.01 XHTML 1.0:
<div class="item">
<h2>...</h2>
<div class="meta">...</div>
<div class="content">
...
</div>
<div class="links">...</div>
</div>

//HTML5:
<section class="item">
<header><h1>...</h1></header>
<footer class="meta">...</footer>
<div class="content">
...
</div>
<nav class="links">...</nav>
</section>

备注:在HTML5中,只要你建立一个新的内容块,不管用section、article、aside、nav,还是别的元素,都可以在其中使用H1,而不必担心这个块里的标题在整个页面中应该排在什么级别;H2、H3,都没有问题。


HTML5设计原理五:平稳退化
渐进增强的另一面就是平稳退化。
使用type属性增强表单:

input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"

备注:
现有的浏览器无法理解这些新type值的,但在它们看到自己不理解的type值时,会将type的值解释为text。
HTML5还为输入元素增加了新的属性,比如placeholder(占位符),就是用于在文本框中预先放一些文本。无需JavaScript去实现,太完美了。


HTML5视频对Flash视频(video元素):

<video>
<source src="movie.mp4">
<source src="movie.ogv">
<object data="movie.swf">
<a href="movie.mp4">download</a>
</object>
</video>

备注:两者要兼顾,无论是HTML5,还是Flash。
1、如果浏览器支持video元素,也支持H264,没什么好说的,用第一个视频。
2、如果浏览器支持video元素,支持Ogg,那么用第二个视频。
3、如果浏览器不支持video元素,那么就要试试Flash影片了。
4、如果浏览器不支持video元素,也不支持Flash,我还给出了下载链接。

遵循另一个设计原理,即梅特卡夫定律(Metcalfe’s Law):

网络价值同网络用户数量的平方成正比。

HTML5设计原理六:最终用户优先
本质上是一种解决冲突的机制

一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。

Web的设计原理:

大多数人的意见和运行的代码。

 

转载<< 拥抱HTML5,《HTML5设计原理》读后随记 >>请注明来源于互联网最具影响力的UED发言平台!用户体验网 - Hbued.com

关注HBUED创始人微信号:只需用手机微信扫一扫!

我们提供最全的互联网招聘信息、高端人脉信息、用户体验分析研究、互联网产品定位、网站运营推广等信息,关注HBUED掌门人的微信,可以直接与其沟通交流!

互联网人脉库入驻

优先被名企高薪发现你信息

我是高端互联网人士要入驻

名企高薪招聘发布

帮企业第一时间免费找人脉

我是互联网企业要发布招聘

爆料本地互联网事

每天爆料最新的身边互联网

我有最新互联网新闻要爆料

最新企业项目宣传

帮你针对互联网精准宣传

我要宣传我的最新创业项目




© 2008-2016 Hbued.com 版权所有 著作权与商标声明 | 关于我们 | 我要投稿 | 关于创始人 | 商务合作 | QQ群:66206675 | 谢绝IE6.0浏览器

UED用户体验网 | 互联网+ | 用户体验 | 互联网资讯 | 网站运营 | 移动互联网 | 电子商务 | 创业访谈 | 互联网大佬 | 互联网人脉库 | 产品经理 | 产品设计 | 交互设计 | 视觉设计 | 前端开发 | 互联网招聘 | 热门话题