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 26 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
Nov 13 HTML / CSS
css3实现书本翻页效果的示例代码
Mar 08 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
HTML5未来发展趋势
Feb 01 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS去掉字符串中所有的逗号
2017/10/18 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
JS实现简单tab选项卡切换
2019/10/25 Javascript
Python内存读写操作示例
2018/07/18 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python爬虫增加访问量的方法
2019/08/22 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
如何基于Python按行合并两个txt
2020/11/03 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
一道SQL面试题
2012/12/31 面试题
户外亲子活动策划方案
2014/02/07 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python