《移动网页设计与开发 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

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

相关文章
|
6天前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
6天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
27 1
|
6天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
6天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
6天前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
6天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 移动端开发篇】CSS 媒体查询与移动端特定样式
【4月更文挑战第30天】CSS媒体查询在移动端开发中至关重要,它基于设备特性(如屏幕尺寸、分辨率、方向)应用特定样式,实现响应式设计。通过`@media`规则定义条件,如`(max-width: 600px)`,当屏幕宽度小于或等于600px时应用相应样式。常见条件包括屏幕宽度、高度、方向和分辨率。媒体查询可用于响应式布局、导航菜单优化、图片加载及字体调整。在实践中,需注意保持查询简洁,充分测试,渐进增强,并提前规划。掌握媒体查询能提升移动端用户体验,创造更优秀的网页设计。
|
6天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
6天前
|
编解码 缓存 前端开发
【专栏:HTML与CSS移动端开发篇】移动端网页布局与适配
【4月更文挑战第30天】本文探讨了如何使用HTML和CSS优化移动端网页布局与适配,强调响应式设计、灵活布局和媒体查询的重要性。针对移动设备的屏幕尺寸、操作方式、网络速度和性能差异,提出了断点选择、触摸优化、图像和性能优化等最佳实践。测试和调试、框架工具的应用也是关键步骤,以确保在多设备上提供优秀用户体验。开发者需持续学习新趋势和工具,以适应移动端发展。
|
6天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
6天前
|
编解码 前端开发 UED
【专栏:HTML与CSS实践篇】响应式网站开发实战
【4月更文挑战第30天】本文探讨了响应式网站开发,它能根据用户设备自动调整布局,提供最佳浏览体验。通过HTML和CSS,利用媒体查询、Flexbox和百分比宽度等技术实现响应式设计。媒体查询按屏幕尺寸定义CSS规则,Flexbox处理元素排列。文章通过新闻网站首页设计实例,展示了如何应用这些理论,包括使用Flexbox设计导航栏,使用媒体查询调整轮播图和内容区域,以及创建自适应页脚。遵循移动优先原则,关注性能优化和用户体验,响应式设计是前端开发的关键,为多设备用户提供优质浏览体验。