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。
- 如果浏览器支持video元素,也支持H264,没什么好说的,用第一个视频。
- 如果浏览器支持video元素,支持Ogg,那么用第二个视频。
- 如果浏览器不支持video元素,那么就要试试Flash影片了。
- 如果浏览器不支持video元素,也不支持Flash,我还给出了下载链接。
遵循另一个设计原理,即梅特卡夫定律(Metcalfe’s Law):
网络价值同网络用户数量的平方成正比。
HTML5设计原理六:最终用户优先
本质上是一种解决冲突的机制
一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。
Web的设计原理:
大多数人的意见和运行的代码。
本文链接:http://www.blueidea.com/tech/web/2011/8281.asp
出处:WEB前端开发工程师的随记
责任编辑:bluehearts
上一页 《HTML5设计原理》读后随记 [2] 下一页
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|