分享好友 前端技术首页 频道列表

HTML5设计原理 html5+css3网页设计基础

html教程  2023-02-08 14:140

HTML5是Web标准的巨大飞跃,它为什么要包含那些东西,它背后的设计原则是什么?

《JavaScript DOM编程艺术》和《HTML5 For Web Designer》作者Jeremy Keith与大家一起回顾了HTML的发展历程,分享了HTML5的设计原则,并与在场与会者做了精彩互动。

首先,Jeremy回顾了HTML的历史,从HTML 2.0到XHTML 2.0,此处他引用了Postel法则(鲁棒性原则):

对自己发送的东西要严格,对接收的东西则要宽容。指出XHTML 2.0由于语法解析过于严格,因此不太适合于Web。

Jeremy认为所有的项目都应该有设计原则,HTML5也同样如此,W3C就为此发布了HTML设计原则,他强调了其中的兼容性、实用性与互操作性。

1、避免不必要的复杂性

Jeremy举了DOCTYPE的例子,表示HTML 4.01和XHTML中的DOCTYPE过于冗长,连自己都记不住这些内容,但在HTML5中只需要简单的<!DOCTYPE html>就可以了。DOCTYPE是给验证器用的,而非浏览器,浏览器只在做DOCTYPE切换时关注这个标签,因此并不需要写得太复杂。然后,他又提到如何指定字符集,在HTML5中只需要<meta charset="utf-8">。

规范也许会写得十分复杂,但浏览器的实现却可能很简单,规范有时会去迁就浏览器的实现。

2、支持已有内容

XHTML 2.0最大的问题就是不支持已经存在的内容,这违反了Postel法则。现实情况中,开发者可以写出各种风格的HTML,浏览器遇到这些代码时,在内部所构建出的结构应该是一样的,呈现的效果也应该是一样的。

3、解决实际问题

规范应该去解决现实中实际遇到的问题,而不该考虑那些复杂的理论问题。例如,既然有在<a>中嵌套多个段落标签的需要,那就让规范支持它。

4、用户怎么使用的,就怎么设计规范

当一个实践已经被广泛接受时,就应该考虑将它吸纳进来,而不是禁止它或搞一个新的实践出来。

例如,HTML5中新增了nav、section、article及aside标签,它们引入了新的文档模型,即文档中的文档。在section中,还可以嵌套h1到h6的标签,这样就有了无限的标题层级,这也是很早之前Tim Berners Lee所设想的。

5、优雅地降级

Jeremy在此处举了input的例子,HTML5中input标签的type属性增加了很多类型,当浏览器不支持这些类型时,默认会将其视为text。这就是一种优雅降级。

此外,在谈到HTML5与Flash之争时,他认为很多情况下,这就是<video>和<object>的问题,完全没有必要二者选其一。可以先使用<video>,当浏览器不支持时降级到<object>,反之亦然。如果浏览器对两者都不支持,再降级到<a>,提供一个链接。

6、支持的优先级

在考虑优先级时,应该按照这个顺序:

用户 > 编写HTML的开发者 > 浏览器厂商 > 规范制定者 > 理论

用户与开发者的重要性要远远高于规范和理论。

在最后的问答环节中,有人提到了HTML5的语法过于灵活,会造成一定的滥用,Jeremy表示赞同,并推荐使用类似JavaScript Lint的工具来帮助编写更好的代码。

此外,有人担心<video>外观的可定制性不强,控件不美观,可能会重蹈<select>的覆辙。Jeremy当场演示了一个通过CSS定制样式的<video>,并表示如果不喜欢浏览器提供的控件,完全可以实现自己的控件。

http://developer.51cto.com/art/201104/256672.htm

健壮性法则,博斯塔尔法则,【发送时要保守,接受时要开放】,这是对开发者很高的要求,首先要让自己严格按规范来做,其次要尽可能容忍别人的不够标准的东西,这周设计上尤其重要,我们不能严格别人按标准来做,但要尽可能让他们的输入得到最好的处理,因此要更多的考虑各种异常情况,以及对异常情况作出取舍处理。XHTML2要求太严格又不兼容之前的HTML,所以最终没被使用。

HTML5的发展过程也很波折,开始W3C确认XHTML2是未来的方向反对继续发展HTML,于是一些浏览器厂商成立Web Hypertext Applications Technology Working Group(Web超文本应用技术工作组,WHATWG)在HTML基础上添加新东西并逐一做到浏览器中,工作效率很高,不久就有成效,而W3C的XHTML2没有什么实质性进展。2006年,W3C同意和WHATWG一起开发开展HTML5工作。两个工作组理念完全不同,前者是一种***工作机制,而W3C是一种***的工作机制,大家都有投票表决权,但实践上前者的工作机制运行的更好,它主要归功于伊恩·希克森,归功于伊恩·希克森,他在听取各方意见时,始终可以做到丝毫不带个人感情色彩。两个工作组最终能一起合作,主要原因就是HTML5的设计思想,因为他们一开始就确定了设计HTML5所要坚持的原则。

XHTML 2仍然使用XML错误处理模型,你必须保证以XML文档类型发送文档;这一点不言自明:没人愿意这样做。其次,XHTML 2有意不再向后兼容已有的HTML的各个版本。他们甚至曾经讨论过废除img元素,这对每天都在做Web开发的人来说确实有点疯了的味道。但我们知道,他们之所以这样做,理论上确实有充足的理由——使用object元素可能会更好。

  因此,无论XHTML 2在理论上是多么完美的一种格式,但却从未有机会付诸实践。而之所以难以将其付诸实践,就是因为像你我这样的开发人员永远不会支持它,它不向后兼容。同样,浏览器厂商也不会,浏览器厂商必须要保证向后兼容。

  为什么XHTML 1.1没有像XML那样得到真正广泛地应用,为什么XHTML 2从未落到实处?因为它违反了一条设计原理,这条设计原理就是著名的伯斯塔尔法则(Postel’s Law)。大家都知道:

  发送时要保守;接收时要开放。

  没错,接收的时候要开放,而这也正是Web得以构建的基础。开发浏览器的人必须敞开胸怀,接收所有发送给浏览器的东西,因为它们过去一直都在接收那些不够标准的东西,对不对?Web上的很多文档都不规范,但那正是Web发展的动力。从某种角度讲,Web走的正是一条混沌发展之路,虽然混沌,但却非常美丽诱人。在Web上,格式不规范的文档随处可见,但那又怎样呢?如果所有人都能够写出精准的XML,所有文档的格式都十分正确,那当然好了。可是,那不现实。现实是伯斯塔尔法则。

  作为专业人士,在发送文档的时候,我们会尽量保守一些,尽量采用最佳实践,尽量确保文档格式良好。但从浏览器的角度说,它们必须以开放的姿态去接收任何文档。

  有人可能会说XML有错误处理模型,XHTML 1.1和XHTML 2都使用该模型,但那个错误处理模型太苛刻了。它绝对不符合接收时开放这个法则,遇到一个错误就停止解析怎么能叫开放呢?我们只能说它与健壮性法则(也就是伯斯塔尔法则)是对立的。

 

在2004年W3C成员内部的一次研讨会上,当时Opera公司的代表伊恩·希克森(Ian Hickson)提出了一个扩展和改进HTML的建议。他建议新任务组可以跟XHTML 2并行,但是在已有HTML的基础上开展工作,目标是对HTML进行扩展。W3C投票表决的结果是——“反对”,因为HTML已经死了,XHTML 2才是未来的方向。然后,Opera、Apple等浏览器厂商,以及其他一些成员说:“那好吧,不指望他们了,我们自已一样可以做这件事,我们脱离W3C。”他们成立了Web Hypertext Applications Technology Working Group(Web超文本应用技术工作组,WHATWG)——可巧的是,他们自称工作组,而不是特别小组(task force),这就为HTML5将来的命运埋下了伏笔。

  WHATWG决定完全脱离W3C,在HTML的基础上开展工作,向其中添加一些新东西。这个工作组的成员里有浏览器厂商,因此他们不仅可以说加就加,而且还能够一一实现。结果,大家不断提出一些好点子,并且逐一做到了浏览器中。

  WHATWG的工作效率很高,不久就初见成效。在此期间,W3C的XHTML 2没有什么实质性的进展。特别是,如果从实现的角度来说,用原地踏步形容似乎也不为过。

  结果,一件有意思的事情发生了。那是在2006年,蒂姆·伯纳斯-李写了一篇博客,说:“你们知道吗?我们错了。我们错在企图一夜之间就让Web跨入XML时代,我们的想法太不切实际了,是的,也许我们应该重新组建HTML工作组了。”善哉斯言,后来的故事情节果真就是这样发展的。W3C在2007年组建了HTML5工作组。这个工作组面临的第一个问题,毫无疑问就是“我们是从头开始做起呢,还是在2004年成立的那个叫WHATWG的工作组既有成果的基础上开始工作呢?”答案是显而易见的,他们当然希望从已经取得的成果着手,以之为基础展开工作。于是他们又投了一次票,同意“在WHATWG工作成果的基础上继续开展工作”。好了,这下他们要跟WHATWG并肩战斗了。

  第二个问题就是如何理顺两个工作组之间的关系。W3C这个工作组的编辑应该由谁担任?是不是还让WHATWG的编辑,也就是现在Google的伊恩·希克森来兼任?于是他们又投了一次票,赞成“让伊恩·希克森担任W3C HTML5规范的编辑,同时兼任WHATWG的编辑,更有助于新工作组开展工作。”

  这就是他们投票的结果,也就是我们今天看到的局面:一种格式,两个版本。WHATWG的网站上有这个规范,而W3C的站点上同样也有一份。

  如果你不了解内情,很可能会产生这样的疑问:“哪个版本才是真正的规范?”当然,这两个版本内容是一样的……基本上相同。实际上,这两个版本将来还会分道扬镳。现在已经有了分道扬镳的迹象了。我的意思是说,W3C最终要制定一个具体的规范,这个规范会成为一个工作草案,定格在某个历史时刻。

  而WHATWG呢,他们还在不断地迭代。即使目前我们说的HTML5,也不能完全涵盖WHATWG正在从事的工作。最准确的理解是他们正在开发一项简单的HTML或Web技术,因为这才是他们工作的核心目标。然而,同时存在两个这样的工作组,这两个工作组同时开发一个基本相同的规范,这无论如何也容易让人产生误解。误解就可能造成麻烦。

  其实这两个工作组背后各自有各自的流程,因为它们的理念完全不同。在WHATWG,可以说是一种***的工作机制。我刚才说了,伊恩·希克森是编辑。他会听取各方意见,在所有成员各抒己见,充分陈述自己的观点之后,他批准自己认为正确的意见。

  W3C则截然相反,可以说是一种***的工作机制。所有成员都可以发表意见,而且每个人都有投票表决的权利。这个流程的关键在于投票表决。从表面上看,WHATWG的工作机制让人不好接受。岂止是不好接受,简直是历史的倒退。相信谁都会认为“运作任何项目都不能采取这种方式!”

  W3C的工作机制听起来让人很舒服。至少体现了人人平等嘛。但在实践中,WHATWG的工作机制运行得非常非常好。我认为之所以会这样,主要归功于伊恩·希克森。他的的确确是一个非常称职的编辑。他在听取各方意见时,始终可以做到丝毫不带个人感情色彩。

  从原理上讲,W3C的工作机制很公平,而实际上却非常容易在某些流程或环节上卡壳,造成工作停滞不前,一件事情要达成决议往往需要花费很长时间。那到底哪种工作机制最好呢?我认为,最好的工作机制是将二者结合起来。而事实也是两个规范制定主体在共同制定一份相同的规范,我想,这倒是非常有利于两种工作机制相互取长补短。

  两个工作组之所以能够同心同德,主要原因是HTML5的设计思想。因为他们从一开始就确定了设计HTML5所要坚持的原则。结果,我们不仅看到了一份规范,也就是W3C站点上公布的那份文档,即HTML5语言规范,还在W3C站点上看到了另一份文档,也就是HTML设计原理。而这份文档的一位编辑今天也来到了我们大会的现场,她就是安妮·奇泰丝(Anne Van Kesteren)。如果大家对这份文档有问题,可以请教安妮。

  这份文档非常好,真的非常出色。这份文档,可以说见证了W3C与WHATWG同心协力共谋发展的历程。难道你们不觉得他们像是一对欢喜冤家吗?那他们还怎么同心同德呢?这份文档忠实地记录了他们一道做了什么,他们共同拥护什么。

  接下来,我想要讲的就是这份文档。因为,既然他们能就这份文档达成共识,那么我相信,HTML5必将是一个伟大的规范,而他们已经认可这就是他们的共同行动纲领。为此,你才会看到诸如兼容性、实用性、互用性之类的概念。即便W3C与WHATWG之间再有多大的分歧——确实相当多——至少他们还有这份文档中记录的共识。这一点才是至关重要的。正因为他们有了共识,才有了这份基于共识描述设计原理的文档。

https://kb.cnblogs.com/page/79308/

查看更多关于【html教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
HTML中将背景颜色渐变 html设置背景颜色渐变
通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:从左到右的线性渐变,且带有透明度的样式:#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*

0评论2023-03-08625

html5 Canvas 如何自适应屏幕大小
但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。 html代码 canvas width="300" height="300" id="myCanvas"/canvas设置样式 * {

0评论2023-03-08811

HTML的video标签,不能下载视频代码
!-- 在线视频不能下载代码 --!DOCTYPE html html headscript src="../Demo/demo/book/JQuery/jQuery v2.2.0.js"/script/headbody div style="text-align:center;"video src="../images/PreviewVideo.mp4" width="820"controls="controls&

0评论2023-03-08596

HTML特殊字符、列表、表格总结 html特殊符号对照表
        HTML实体字符  在HTML中一些特殊的字符需要用特殊的方式才能显示出来,比如小于号、版权等,  在课堂上老师教了我们一个有点意思的:空格,在教材上字符实体是“nbsp”通过老师  的演示我们发现不同的浏览器他所显示的效果不同,有的比

0评论2023-03-08521

【JavaScript】使用document.write输出覆盖HTML问题
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。分析HTML输出流是指当前数据形式是HTML格式的数据,这部分数据正在被导出、传输或显示,所以称为“流”。通俗的来说就是HTML文档的加载过程,如果遇到document.writ

0评论2023-03-08815

ASP.Net MVC 控制@Html.DisplayFor日期显示格式
在做一個舊表的查詢頁時,遇到一個問題:字段在db里存儲的是DATETIME,但保存的值只有日期,沒有時間數據,比如2018/2/26 0:00:00,顯示出來比較難看,當然也可以做一個ViewModel,在字段上添加Attribute定義來更改名稱和顯示名稱,如下:[Display(Name = "建

0评论2023-03-08716

html 基础代码
title淄博汉企/title/headbody bgcolor="#00CC66" topmargin="200" leftmargin="200" bottommargin="200"a name="top"/a今天br /天气nbsp;nbsp;nbsp;nbsp;nbsp;不错br /font color="#CC0000"格式控制标签br /b 文字加粗方式1\bbr /str

0评论2023-03-08466

HTML-js 压缩上传的图片方法(默认上传的是file文件)
//压缩图片方法function compressImg(file,callback){var src;var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);var read = new FileReader();read.readAsDataURL(file);read.onload = function (e) {var img = new Image(); img.src

0评论2023-03-08909

html中使table设置固定宽度的列不改变
在开发中发现,有时设置table列的宽度,但是当页面的宽度变时,列宽还是会变,解决方法就是设置table的table-layout属性,设置成table-layout="fixed"就可以了,关于它的其他值,大家可以查查

0评论2023-03-08732

HTML Table 拼凑表格数据并支持滚动条
1 !DOCTYPE html 2 html xmlns="http://www.w3.org/1999/xhtml" 3 head 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 5 title/title 6 /head 7 body 8 div style="width:600px; height:60px; overflow:scroll;

0评论2023-03-08728

html5 中meta中 content=width=device-width注意
!DOCTYPE html        html        head        meta http-equiv="content-type" content="text/html; charset=UTF-8"        meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"        sty

0评论2023-03-08540

HTML a标签 target属性作用
特殊的目标有 4 个保留的目标名称用作特殊的文档重定向操作:_blank浏览器总在一个新打开、未命名的窗口中载入目标文档。_self这个目标的值对所有没有指定目标的 a 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多

0评论2023-03-08328

HTML5] html和css的使用方法以及样式
第一步: 清除默认样式第二步: 划分模块第三步: 设置模块的大小以及位置第四步: 划分下一级模块html和css引入网页头像link rel="shortcut icon" href="img/...ico"css样式表的引入方式css样式表的引入方式1、外链式link href="" rel="stylesheet"2、嵌入式

0评论2023-03-08936

转载:原文http://www.cnblogs.com/gao241/p/3522143.html
shell实例手册0说明{手册制作: 雪松更新日期: 2013-12-06欢迎系统运维加入Q群: 198173206请使用"notepad++"打开此文档,"alt+0"将函数折叠后方便查阅请勿删除信息,转载请说明出处,抵制不道德行为。错误在所难免,还望指正!# shell实例手册最新下载地址:http

0评论2023-03-08722

HTML里link meta全部标签的作用
做网站建设的时候很少用到太多的标签,但是在网站运营的时候,特别是像移动互联网发展、做SEO之后我们就特别容易看到很多不常见的link标签。那么这些标签都有什么作用呢?E维科技今天来为您整理一下,欢迎其他技术大牛共同分享。HTML里link 和 meta 标签详解m

0评论2023-03-08413

MVC 自定义标签,给Html.ActionLink加上支持图片链接的功能
转载:http://blog.csdn.net/niewq/article/details/17537873Html.ActionLink只支持文字链接,现在我们利用C#的扩展方法写一个Html.ActionLinkWithImage()让其支持图片链接的功能。一、首先新建一个静态类,将命名空间在改在System.Web.Mvc下,代码如下 usin

0评论2023-03-08587

更多推荐