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 相关文章推荐
css3实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
CSS list-style-type属性使用方法
May 21 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
python实现目录树生成示例
2014/03/28 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
《蜗牛》教学反思
2014/02/18 职场文书
2014年纪检工作总结
2014/11/12 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
房屋所有权证明
2015/06/19 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书