html5需遵循的6个设计原则


Posted in HTML / CSS onApril 27, 2016

实际上,html5并不是由w3c直接制定的,w3c的方向是xhtml2,而不是html5。当xhtml2脱离现实,无法付诸实践时,w3c工作组才将研究方向转向html5。为什么xhtml2从未落到实处?因为它违反了一条设计原理,这条设计原理就是著名的伯斯塔尔法则——发送时要保守;接收时要开放。而在html5设计过程中遵循了一系列原则,才使得html5得以快速推广,本文将介绍html5遵循的6个设计原则,具体如下

原则一:避免不必要的复杂性

html4

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

html5

<!DOCTYPE html>
 
html4

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

html5

<meta charset="utf-8">
 
原则二:支持已有的内容

以下四段代码,在xhtml中只有第一段是正确的;而在html5中,所有的都是正确的

XML/HTML Code复制内容到剪贴板
  1. <img src="foo" alt="bar" />  
  2. <p class="foo">Hello world</p>  
  3.     
  4. <img src="foo" alt="bar">  
  5. <p class="foo">Hello world   
  6.     
  7. <IMG SRC="foo" ALT="bar">  
  8. <P CLASS="foo">Hello world</P>  
  9.     
  10. <img src=foo alt=bar>  
  11. <p class=foo>Hello world</p>  
  12.   

原则三:解决现实的问题

在html4中,即使两个块级元素元素有相同的链接地址,也必须分开写,因为内联元素不能包含块级元素

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

而在html5中,由于使用了内容模型,<a>元素也可以包含块级元素

XML/HTML Code复制内容到剪贴板
  1. <a href="/path/to/resource">  
  2.     <h2>Headline text</h2>  
  3.     <p>Paragraph text.</p>  
  4. </a>  

 
原则四:求真务实

html5新增了多个元素,其中包括:section、article、aside和nav,它们代表了一种新的内容模型——给内容分区。以前人们一直都在用div来组织页面中的内容,但与其他类似的元素一样,div本身并没有语义。但section、article、aside和nav实际上是在明确地告诉你——这一块就像文档中的另一个文档一样。位于这些元素中的任何内容,都可以拥有自己的概要、标题,自己的脚部。

原则五:平稳退化
 
浏览器在遇到不识别的type值时,会将type的值解释为text

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

原则六:最终用户优先

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

以上就是html5需遵循的6个设计原则,希望对大家的学习有所帮助。

HTML / CSS 相关文章推荐
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
May 23 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 #HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 #HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 #HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 #HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 #HTML / CSS
基于html5绘制圆形多角图案
Apr 21 #HTML / CSS
浅析border-radius如何兼容IE
Apr 19 #HTML / CSS
You might like
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
JScript的条件编译
2007/05/29 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
JS验证码实现代码
2017/09/14 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
Vue插槽原理与用法详解
2019/03/05 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python 遍历pd.Series的index和value
2019/11/26 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python切割图片的示例
2020/11/12 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
"引用"与指针的区别是什么
2016/09/07 面试题
四种会话跟踪技术
2015/05/20 面试题
商务日语专业毕业生自荐信
2014/03/27 职场文书
给医院的感谢信
2015/01/21 职场文书
迎新生晚会主持词
2015/06/30 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
pandas数值排序的实现实例
2021/07/25 Python