《Windows 8 开发权威指南:HTML5 和JavaScript卷》——第2章 HTML5 JavaScript概述以及新特性 2.1 HTML5概述

简介: 以前你一定听说过这句话或类似的内容。 我想,当你听到这句话时,可能会变得很激动,转动眼珠、皱着眉头一脸疑问。 也可能这三种反应你都有。有这些反应,我非常能理解。 HTML5 十分令人称道,正如我们所知,它可能会改变 Web,但它的作用也被夸大了。 而且,它的真正意义还难以琢磨。

本节书摘来自异步社区《Windows 8 开发权威指南:HTML5 和JavaScript卷》一书中的第2章,第2.1节,作者:尹成 , 李亚男 , 王腾 , 丁宽帅 , 尹子磊著,更多章节内容可以访问云栖社区“异步社区”公众号查看

第2章 HTML5 JavaScript概述以及新特性

2.1 HTML5概述

HTML5已经推出,Web也不会是一成不变的。

以前你一定听说过这句话或类似的内容。 我想,当你听到这句话时,可能会变得很激动,转动眼珠、皱着眉头一脸疑问。 也可能这三种反应你都有。有这些反应,我非常能理解。 HTML5 十分令人称道,正如我们所知,它可能会改变 Web,但它的作用也被夸大了。 而且,它的真正意义还难以琢磨。 在使用 HTML5 构建应用程序时,我自己也有过上面所说的每一种反应。 HTML5 是一个宽泛的话题,要掌握它很困难,更不用说知道从哪里开始使用这套激动人心的新技术了。

2.1.1 什么是HTML5
到现在为止,你可能会发现HTML5对不同的人有着不同的意义。 对有些人来说,它只意味着诸如和之类的新标记以及可用在标记中的一些新属性。 对另一些人来说,它意味着Web上一切崭新和有趣的功能,包括在单个浏览器中实现的技术或未正式包含在HTML5中的其他规范。 当然,了解HTML5的真正意义通常是很多人面临的第一个障碍。

坦率地讲,存在各种各样的定义是有道理的。 HTML5十分庞大! HTML5由国际标准团体万维网联盟(W3C)正式定义,包含与下一代Web技术相关的100多项规范。 将所有这100多项规范统称为HTML5,您可能会认为W3C过度简化了这些规范的定义。HTML5涉及的内容非常广泛,很难为它下一个合适的明确定义。我认为 W3C 是通过引入HTML5作为Web变化的统一概念,从而界定这种变化的范围。

实际上,HTML5是描述一组HTML、CSS和JavaScript规范的泛称,这些规范旨在帮助开发人员构建下一代网站和应用程序。 这个定义主要由3部分组成:HTML、CSS 和 JavaScript。这3部分规定开发人员如何使用改进的标记、更丰富的样式功能以及新的JavaScript API以充分利用新Web开发功能。

简单地说,HTML5 = HTML + CSS + JavaScript。

就是这样。HTML5是关于对HTML、CSS和JavaScript的更改的。这3个术语描述了HTML5的广度和范围,你不必担心所有这100多条规范。还是认为这有点简略? 可能是这样,但你很快会明白,全面的HTML5定义并不像你选择采用的技术那样重要,因为这些技术值得你花费时间和精力。

以下几小节我们将介绍HTML5的重要新特性。

2.1.2 新的文档类型
目前很多网页还在使用XHTML1.0,并且要在第一行像这样声明文档类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">

在HTML5中,上面的声明方式将失效。HTML5的声明方式为:

<!DOCTYPE html>
HTML4.01中的DOCTYPE需要对DTD进行引用,因为HTML4.01基于SGML。而HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为。需要注意的是DOCTYPE对大小写很敏感,请书写时注意大小写。

2.1.3 脚本和链接无需添加type属性
在HTML4或XHTML中,你需要用下面的两行代码来给你的网页添加CSS和JavaScript文件。

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />

<script type="text/javascript" src="path/to/script.js"></script>

而在HTML5中,你不再需要指定类型属性。因此,代码可以简化如下:

<link rel="stylesheet" href="path/to/stylesheet.css" />

<script src="path/to/script.js"></script>

2.1.4 用于绘画的画布(canvas元素)
HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,你可以控制其每一个像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

2.1.5 用于媒介播放的video和audio元素
我们无需再依赖第三方插件区渲染音频。HTML5提供了

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

Mozilla和WebKit还没有完全相处,当涉及音频格式时,Firefox会希望看到一个.ogg文件,而WebKit的浏览器支持.mp3扩展。这意味着,至少在现在,你应该创建两个版本的音频。当Safari加载页面时,它不会承认.ogg格式,将会跳过它并转移到MP3版本。

2.1.6 新的特殊内容元素
< article>< /article>
用于定义独立的内容,比如,论坛帖子、报纸文章、博客条目、用户评论。标签的内容独立于文档的其余部分。

< footer>< /footer>
用于定义section或document的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及联系信息。假如,你使用footer来插入联系信息,应该在footer元素内使用< address>元素。

< header>< /header>
用于定义文档的页眉(介绍信息)。

< nav>< /nav>
定义导航链接的部分。如果文档中有“前后”按钮,则应该把它放到< nav>元素中。

< section>< /section>
用于定义文档中的节,比如,章节、页眉、页脚或文档中的其他部分。

2.1.7 新的表单控件
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

数据检出器
HTML5拥有多个可供选取日期和时间的新输入类型,date、month、week、time、datetime、datetime-local。

email
用于应该包含E-mail地址的输入域。在提交表单时,会自动验证email域的值。例如:

E-mail:< input type=”email” name=”user_email”>
url
用于应该包含URL地址的输入域。在提交表单时,会自动验证URL域的值。

search
用于搜索域,比如站点搜索或Google搜索。search域显示为常规文本域。

相关文章
|
28天前
|
Web App开发 存储 JavaScript
Node.js概述
Node.js概述
29 3
|
1天前
|
存储 移动开发 前端开发
html5有哪些新特性?
【10月更文挑战第19天】
|
15天前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
17天前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
16 4
|
15天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
35 1
前端基础(十七)_HTML5新特性
|
2月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
42 9
|
17天前
|
监控 关系型数据库 MySQL
PowerShell 脚本编写 :自动化Windows 开发工作流程
PowerShell 脚本编写 :自动化Windows 开发工作流程
17 0
|
2月前
|
存储 移动开发 API
HTML5的新特性
HTML5引入了众多新特性和增强功能,简化并强化了网页开发。新增结构元素如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;article&gt;`等使页面布局更清晰;表单增强支持更多输入类型及属性;内置音频视频播放无需插件;`&lt;canvas&gt;`与SVG支持提升了图形处理能力;Geolocation API和Web存储改善了用户体验;离线应用、拖放功能及Web Workers则进一步提升了网页应用的实用性和交互性。HTML5令网页开发更为现代化,为开发者提供了丰富的工具集。
|
2月前
|
SQL JavaScript 数据库
sqlite在Windows环境下安装、使用、node.js连接
sqlite在Windows环境下安装、使用、node.js连接