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

简介:

本节书摘来异步社区《移动网页设计与开发 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属性:

a0935fed637ae3b3a10a497e32d523f3a7603ffe

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

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

1.4.2 新型最佳实践

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

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

a4f9cbfa863778e4537bf8fee0f2eb323d509a06

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

8e6c0833cf1da0b317f2b3365fe3483f33980211

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

075acc3158cd51b8cd5d639524a321348dccca17

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

14758817ba06a523390fac63729e5cfc6900bccd

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

e7b97ad9550c97942e18e9bdad13051f7c474481

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

034daf78ffec2a4f977a158db038a1d24c8712f3

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

相关文章
|
9月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
324 14
|
11月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
本文展示了AI编程从概念到实践的革命性突破,以一个CSS代码优化工具为例,说明AI如何在3分钟内完成传统开发需2天的任务。文章详细解析了AI在垂直领域工具开发、高频技术场景覆盖及代码维护优化中的应用,并探讨了智能上下文感知、模式识别优化等核心功能。同时,面对语义理解与逻辑验证等挑战,AI结合开发者补充规则,实现人机协同。最终总结指出,AI编程并非取代开发者,而是助力效率提升,推动“需求即代码”的未来方向,开启软件开发新纪元。
210 4
【CodeBuddy】三分钟开发一个实用小功能之:CSS代码瘦身专家
|
11月前
|
人工智能 前端开发 JavaScript
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
这是一个由AI生成的完整CSS渐变生成器项目,具备可视化交互、实时预览和代码生成功能。通过HTML、CSS和JavaScript实现,支持线性与径向渐变,提供随机生成和复制代码功能。项目展示了AI编程助手在快速原型开发、教学辅助和设计系统集成中的应用价值。其智能上下文感知、全链路代码生成和决策能力,为开发者提供了高效工具支持,助力从样板代码中解放创造力。附带优化方向如增强渐变类型、智能推荐系统及工程化改进,进一步拓展了应用场景。
248 2
【CodeBuddy】三分钟开发一个实用小功能之:CSS渐变背景生成器
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
789 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
638 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
873 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
291 34
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
609 33
|
移动开发 前端开发 JavaScript
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
407 4
|
移动开发 HTML5
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
515 0
HTML5实现好看的中秋节网页源码