这章主要介绍一下HTML5相关的基本概念,并且以一道练习题结束。
Web技术
技术 | 角色 | 示例 |
HTML (HTML5) | 标记(Markup)语言 | Headings, Paragraphs |
CSS (CSS3) | 评注(Annotation)语言 | Font Style, Size, and Color |
JavaScript | 编程语言 页面的行为 | 提示窗口 DOM操控 |
jQuery | JavaScript类库 | 通用任务合理化 |
什么是HTML5?
它是HTML的新一代,完全替代了HTML4.01, XHTML1.0和XHTML1.1。
是Web平台的标准功能。
与之前版本一样设计为跨平台。
设计了新的标签(sign)和标注(markup)。
描述了新的JavaScript API。
抛弃或者重新定义了一些不常用的功能。
被最新版本的Opera, Chrome, Firefox广泛支持,IE9的部分支持。
那么,HTML5包括哪些内容呢?如下表。表中内容不太懂,要等学完估计才能准确的翻译出来。先贴出来。
Class | Examples (Source: http://www.w3.org/html/logo/) |
Semantics | Giving meaning to structure, data driven web |
Offline & Storage | Local Storage, Indexed DB, File API |
Device Access | Geo Location, Audio/Video Input Access |
Connectivity | Web Sockets, Pushing Data from the Client |
Multimedia | Audio and video are first class citizens in the HTML5 |
3D, Graphics & Effects | SVG, Canvas, WebGL, and CSS3 3D |
Performance & Integration | Web Workers, XMLHttpRequest2 |
CSS3 | Wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance |
使用文本编辑器新建一个*.html,然后加上自己的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 Essentials</title>
<style>
button {
margin: 16px;
}
</style>
</head>
<body>
<button type="button" οnclick='alert("Hello World!")'>
Press Me!
</button>
<br>
<button type="button" οnclick="location.href='http://news.163.com'">
<img src="img/HTML5_Badge_32.png">
</button>
<br>
<button type="button" οnclick="location.href='view-source:' + window.location.href">
View Source!
</button>
</body>
</html>
然后,双击html使用浏览器显示。测试了三种浏览器。
Chome和Firefox都是下载的最新版本,所以三个button都没问题。
由于机器自带是IE8,所以打开网页时有安全性的提示,需要手工解除block。并且第三个button显示源码,IE8还不支持。毕竟MS声称IE9才支持HTML5。