《HTML5设计原理》读后随记（3）
作者：黑妞HAHA 来源：WEB前端开发工程师的随记 时间：2011-01-25 12:26:00
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的设计原理:
大多数人的意见和运行的代码。
0
投稿猜你喜欢
PYQT5实现控制台显示功能的方法
pytorch实现好莱坞明星识别的示例代码
mysql存储过程详解
python2.7读取文件夹下所有文件名称及内容的方法
javabean servlet jsp实现分页功能代码解析
mysql一对多关联查询分页错误问题的解决方法
python3中编码获取网页的实例方法
Python Ruby 等语言弃用自增运算符原因剖析
Python调用腾讯云短信服务发送手机短信
使IE浏览器支持PNG格式图片的透明效果
MySQL单表多关键字模糊查询的实现方法
Python 实现PS滤镜中的径向模糊特效
公共Hooks封装报表导出useExportExcel实现详解
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
Python全栈之for循环
Go语言获取系统性能数据gopsutil库的操作
golang设置http response响应头与填坑记录
Python基础知识方法重写+文件处理+异常处理
