开发者社区> 异步社区> 正文

《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域显示为常规文本域。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Vue入门 基本使用 与 事务管理【1】
Vue入门 基本使用 与 事务管理【1】
10 0
SpringMVC 视图解析器 方法返回值 异常处理器
SpringMVC 视图解析器 方法返回值 异常处理器
7 0
iOS 底层原理37:链式编程
iOS 底层原理37:链式编程
6 0
8 月份 GitHub 最火的 6 个 Java 开源项目
8 月份 GitHub 上最热门的 Java 开源项目排行新鲜出炉,一起来看看~
7 0
比赛-以企业为服务目标的政策大数据应用
比赛-以企业为服务目标的政策大数据应用
5 0
记住这两个二分模板,秒杀所有二分查找算法题!
二分查找是一种在每次比较之后将查找空间一分为二的算法。当我们要处理的问题具备单调性,或者要搜寻序列的边界时,应该考虑使用二分查找算法
9 0
变量、常量
变量、常量
5 0
Win系统 - 重装系统(微PE、MSDN镜像)【绝对纯净】
Win系统 - 重装系统(微PE、MSDN镜像)【绝对纯净】
14 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载