博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 设计原理笔记
阅读量:7000 次
发布时间:2019-06-27

本文共 2114 字,大约阅读时间需要 7 分钟。

今天拜读了,算是重新认识了html5,这里做下笔记总结。

  1. 设计原理 设计原理本质上是一种信念、一种想法、一个概念,是你行动的支柱。
  2. HTML 伯斯塔尔法则(Postel’s Law):发送时要保守;接收时要开放。
  3. HTML5 HTML5必将是一个伟大的规范,而W3C与WHATWG已经认可这就是他们的共同行动纲领。
  4. 避免不必要的复杂性
复制代码
复制代码
  1. 支持已有的内容 在HTML5中,你可以随意使用下列任何语法:
bar

Hello world

bar

Hello worldbar

Hello world

bar

Hello world

复制代码
  1. 解决现实的问题

Headline text

Paragraph text.

复制代码

在HTML5中,我只要简单地把所有内容都包装在一个链接元素中就行了。

    

Headline text

Paragraph text.

复制代码
  1. 求真务实

...

...
...
复制代码

可替换为

    
...
...
...
复制代码

即便是现在,你照样可以使用div和类来描述页面中不同的部分,就像下面这样:

...

...
...
复制代码

其中包含可能是有关内容作者的元数据,而下面会给出一些链接,差不多就这样。在HTML5中,我完全可以说这块内容就是一个文档,通过对内容分区,使用section或article或aside,我可以说“这一块完全是可以独立存在的。”因此,我当然可以使用header和footer。

...

...
...
复制代码

这个变化太厉害了。想一想吧,这个变化对内容管理是革命性的。因为现在,你可以把每个内容分区想象一个独立的、能够从页面中拿出来的部分。此时,根据上下文不同,这个独立部分中的H1,在整个页面中没准会扮演H2或H3的角色——取决于它在文档中出现的位置。面对这个突如其来的变化,也许有人的脑子会暂时转不过弯来。不要紧,但我可以告诉你,我认为这才是HTML5中这些新语义标记的真正价值所在。换句话说,我们现在有了独立的元素了,这些元素中的标题级别可以重新定义。

  1. 平稳退化

有关HTML5遵循这条原理的例子,就是使用type属性增强表单。

input type="number"    input type="search"    input type="range"    input type="email"    input type="date"    input type="url"复制代码

现有的浏览器,不是将来的浏览器,现有的浏览器是无法理解这些新type值的。但在它们看到自己不理解的type值时,会将type的值解释为text。

复制代码

上面的代码中包含了4个不同的层次。

1).如果浏览器支持video元素,也支持H264,没什么好说的,用第一个视频。

2).如果浏览器支持video元素,支持Ogg,那么用第二个视频。

3).如果浏览器不支持video元素,那么就要试试Flash影片了。

4).如果浏览器不支持video元素,也不支持Flash,我还给出了下载链接。

  1. 最终用户优先

一旦遇到冲突,最终用户优先,其次是作者,其次是实现者,其次标准制定者,最后才是理论上的完满。 软件,就像所有技术一样,具有天然的政治性。代码必然会反映作者的选择、偏见和期望。 所以,我认为平常多看一看别人推崇的设计原理,有助于做好自己手头的工作。你可以把自己认为有道理的设计原理贴在墙上。当然,你可以维护一个URL,把自己认为有价值的设计原理分享出来,就像Mozilla基金会那样,对不对,以下是Mozilla的设计原理: Internet作为一种公共资源,其运作效率取决于互通性(协议、数据格式、内容)、变革及全球范围内的协作。 基于透明社区的流程有助于增进协作、义务和信任。

我觉得像这样的设计原理都非常好。而有了设计原理,我认为才更有希望设计出真正有价值的产品。设计原理是Web发展背后的驱动力,也是通过HTML5反映出来的某种思维方式。

转载于:https://juejin.im/post/5ac4931851882555677ec62c

你可能感兴趣的文章
浅谈C/C++中的typedef和#define
查看>>
浅谈C/C++中的指针和数组(一)
查看>>
这该死的数字化生活
查看>>
matlab练习程序(圆柱投影)
查看>>
需要谨记的产品设计原则
查看>>
checkbox实现单选多选
查看>>
billing是如何的拆分的?
查看>>
Lua 迭代器与closure
查看>>
mybatis_helloworld(2)_源码
查看>>
完整部署CentOS7.2+OpenStack+kvm 云平台环境(3)--为虚拟机指定固定ip
查看>>
BLE 广播数据解析
查看>>
Oracle用户密码过期和用户被锁解决方法【转】
查看>>
Android 解决Android的TextView和EditText换行问题
查看>>
CSS效果集锦(持续更新中)
查看>>
通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[中]:管道如何处理请求...
查看>>
Eigen教程(9)
查看>>
单元测试
查看>>
操作hadoop的经验积累
查看>>
微信企业号验证
查看>>
请问set JAVA_OPTS的各项參数是什么意思?
查看>>