本节书摘来异步社区《移动网页设计与开发 HTML5+CSS3+JavaScript》一书中的第1章,第1.4节,作者:【英】Peter Gasston,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.4  真正的HTML5

HTML5是HTML4.01的迭代,它在HTML4.01基础上添加了一些新功能,废弃或者删除了几项旧功能,并且对一些现有的功能进行了修改。编写HTML5的目的一是为了规范许多开发人员已使用多年的常见程序编辑和设计模式,二是为了满足现代网络的需求,这是因为,现代网络与应用程序的相关性和它与文档的相关性是一样大的(也可能更大)。事实上,Web Applications 1.0是HTML5的前身。

HTML5的新功能包括建立可提供含义和可接入性的文档,我会在第2章中介绍。HTML5还会有一系列的新窗体功能和UI控件,使得应用程序的生成变得更加简单,这方面的内容可以翻阅第8章。此外,HTML5还包括依然被很多人用来相互联系的本机(无插件)视频,第9章将讲述这个话题。

如今有两个主要群体正对HTML5产生着影响,他们的角色和职责大致是这样的:WHATWG(读者不需要知道这个首字母缩略词是什么意思),这是个由浏览器生产商们和“感兴趣各方”组成的财团,通过最重要的规格编辑器Ian Hickson,它创建了HTML的“现存规范”—这基本上是一个无版本的规范,它能不断地合并新功能、更新现有功能;另一个是W3C(万维网联盟),即万维网的标准机构,它的职责是获取无版本规格的快照,来创建编号了的版本,以使浏览器供应商能确保实现的兼容性。

事实上,情况比这要复杂些,另外,这还涉及很多政治争论。只有标准的书呆子才会对这些争论感兴趣,它们不会对读者有任何的实际影响。

W3C提议,虽然眼下还不能确认,到2014年时HTML5应当进入推荐状态—即“完成”状态;随后,在2016年推出HTML5.1。它还提议,HTML5应当分解成单独的模块,这样,就可以在不同的模块上同时进行操作,而不用担心影响到整体的速度。然而,这些对读者来说真的无关紧要,你仅仅需要知道的是当浏览器里何时会包含HTML5,以及何时可以使用HTML5。

1.4.1 HTML5模板

作为一个具备HTML基本使用知识的人,你要熟悉基本的页面标记。但是对于HTML5,情况稍有不同—虽然不多,但值得提及。下面的代码块是本书中所有例子的基本模块(也可以参考范例文件template.html):

大家应该对这个例子中的大部分代码比较熟悉,但我想讨论两个兴趣点。第一个兴趣点是Doctype。它是一个残余物,因为在过去,你不得不告诉浏览器所写的是哪种文档类型(strict HTML、transitional HTML、XHTML1.1等其他文档类型)。然而,在HTML5中,就没有必要这样做了—因为HTML5只青睐一种HTML—所以就不再需要Doctype声明了。理论上就是这样。

现代浏览器往往有三种渲染模式:怪异模式(quirks mode)模仿IE5的非标准渲染,这是为了满足兼容旧版网页的需求;标准模式(standards mode)是现代的标准兼容行为;近乎标准模式是添加了稍许混杂的标准模式。

想知道使用哪种模式,浏览器就要求助于Doctype。我们总是想要使用标准模式,所以在HTML5中,Doctype是能触发标准模式的最短可行路线:

第二个兴趣点是meta标记,它也是标准HTML5模板所做的另一个更改,用来表明Unicode字符范围。使用Unicode字符可以呈现页面上的文本,而UTF-8是一种被万维网普遍默认使用的Unicode字符,所以大多数情况都会使用UTF-8。meta标记使用charset属性:

确实可以这样:如果客户要求“用HTML5来创建网站”,则只需更新那两个标记,然后向他们收取一大笔费用。不要真这么做,我只是开个玩笑。

其实,我本应该涵盖很多其他模式,但是为了清晰和简洁,我把它们都省略了。如果想要了解更多模式,则可以访问深受用户欢迎的HTML5 Boilerplat网站。这里提供了全面的模板,读者可以仔细阅读,看看这个模板有什么作用—但请牢记,只能把它当成参考,不要一字不差地生搬硬套。

1.4.2 新型最佳实践

除了对核心模板的更改外,HTML5还有一两个新的最佳实践,读者应该考虑去实现它们。开发人员利用许多不同编写代码的方式来编写HTML5,当然,这些方式不应该被当作一成不变的规则,但在我看来,它们会使代码易于编写和维护。

HTML5的第一个最佳实践是,用户不再需要使用type属性来调用最常见的外部资源。在使用HTML4.01或者XHTML时,我们不得不为每个link、script或style标签声明类型:

但在万维网上工作时,CSS和JavaScript事实上是使用这些标记的默认资源类型,所以每次都将它们写出确实有一点冗余。因此可以立即删除它们,这样不仅浏览器能更好地理解代码,而且代码也能更整洁一些:

只有在不使用默认的CSS或JavaScript时,才需要使用这些标签。例如,某些版本的火狐浏览器具有最新版本JavaScript的实验实现。并且,为了安全起见,当用户想要使用最新版本JavaScript时,只需要在type属性中加上一个标记:

HTML5对语法也非常宽容。无论是使用所有的小写字符, 或是引用属性值,还是喜欢关闭空元素,HTML5都很乐于分析和理解它们。因此,以下三条代码的作用是相同的:

注释:
当属性值有多个值时,就需要使用引号,例如类名列表。如果属性值包含某些特殊字符,则也需要引号。
某些被称为布尔值属性(Boolean attribute)的属性,只有真或者假两种值;除非另有指定,否则它们被推定为以“真”这个值存在,所以用户不需要提供一个值—除非使用的是类似XML的语法,那就必需提供值,在这种情况下,需要使用属性本身的名称。这就意味着,以下两者是等效的:

我自己的偏好是全部使用小写,全部引用,但我不喜欢关闭空元素:

在整本书中,我使用的都是这种模式,因为我觉得这样更简洁,并且更易于使用。此外,我使用的文本编辑器具有语法高亮显示,这使得代码变得清晰,方便浏览。读者可以随心所欲地使用自己想要的模式,但必须保持一致,以确保可维护性。

《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 1.4  真正的HTML5相关推荐

  1. 《移动网页设计与开发 HTML5+CSS3+JavaScript》—— 2.5 RDFa

    本节书摘来异步社区<移动网页设计与开发 HTML5+CSS3+JavaScript>一书中的第2章,第2.5节,作者:[英]Peter Gasston,更多章节内容可以访问云栖社区&quo ...

  2. 《HTML5+ CSS3+JavaScript 网页设计实战(视频教学版)》代码下载、简介与前言

    代码下载:https://pan.baidu.com/s/1o8aBMjw(密码:f3u2) 图书简介 本书由浅入深,系统.详尽地介绍了HTML5.CSS3和JavaScript相关技术及其在Web前 ...

  3. html网页特效微课,网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)

    网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版) 编辑 锁定 讨论 上传视频 <网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)& ...

  4. HTML5期末大作业:web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript

    HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...

  5. HTML5期末大作业:web网页设计与开发网站设计——爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

    HTML5期末大作业:web网页设计与开发网站设计--爱奇艺首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网 ...

  6. 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~

    b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...

  7. HTML5期末大作业:游戏官网网站设计——神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发

    HTML5期末大作业:游戏官网网站设计--神之刃游戏官网网页(6页) HTML+CSS+JavaScript web网页设计与开发 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商 ...

  8. HTML5期末大作业:210套 Dreamweaver网页设计与制作 HTML+CSS+JavaScript【建议收藏】

    HTML5期末大作业:Dreamweaver网页设计与制作210例 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板 ...

  9. 《HTML5+CSS3+JavaScript前端开发从零开始学(视频教学版)》简介

    #好书推荐##好书奇遇季#<HTML5+CSS3+JavaScript前端开发从零开始学(视频教学版)>,京东当当天猫都有发售.定价69元.本书配套本书配套示例源代码.PPT课件与同步教学 ...

最新文章

  1. 巧用Eclipse Java编辑器调试
  2. 北大清华“合并开班”:AI大牛朱松纯带队,面向元培和自动化系招生
  3. 单引号 数字_办公软件操作技巧010:如何在excel中输入连续多个数字“0”
  4. (转)IIS7 配置ASP.NET 2.0, WCF, ASP.NET MVC
  5. PB级分布式大数据的处理和分析应用
  6. Oracle 客户端库时引发 BadImageFormatException
  7. vim: 远程登陆服务器时可能出现的: 方向键,回退符不能正常使用
  8. found.000文件夹的问题
  9. 循环与函数及相关例子
  10. Google的wiki-map也上线了
  11. 使用react-native做一个简单的应用-03欢迎界面
  12. jquery插件函数传参错误
  13. raid5通常需要几块盘_磁盘阵列是什么东西,为什么需要阵列?
  14. C# 第三方控件 错误 LC-1
  15. 数据分析学习总结笔记09:文本分析
  16. 数字电视 机顶盒原理
  17. elas算法源码赏析(一):PGM格式图片的读取和保存
  18. vs2003常见问题
  19. 2825 codevs危险的组合(递推)
  20. JavaScript防流量劫持-前端安全

热门文章

  1. LuckyFrame执行Web自动化用例
  2. git21天打卡day20-合并分支
  3. 同样是软件测试工程师,为什么性能测试月薪更高?
  4. 道客巴巴 解析_华为2019数字芯片岗笔试解析(多选部分)
  5. linux 抓包文件 导出,Fiddler抓包13-fiddler 抓包导出 curl 命令行
  6. oracle修改seq为order,Oracle 创建和修改sequence
  7. mnist tensorrt 运行_TensorRT学习
  8. 云服务器学习linux_云服务器怎么选linux系统
  9. 数据结构和算法 D2
  10. 多特征自动植物病害识别与检测