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实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
Nov 16 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
对Python信号处理模块signal详解
2019/01/09 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
在python中使用nohup命令说明
2020/04/16 Python
python tkinter实现连连看游戏
2020/11/16 Python
python 如何上传包到pypi
2020/12/24 Python
中学生运动会新闻稿
2014/09/24 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
计算机教师工作总结
2015/08/13 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技