HTML5学习笔记之一HTML5基础
2014-06-04 22:47
375 查看
这章主要介绍一下HTML5相关的基本概念,并且以一道练习题结束。
Web技术
什么是HTML5?
它是HTML的新一代,完全替代了HTML4.01, XHTML1.0和XHTML1.1。
是Web平台的标准功能。
与之前版本一样设计为跨平台。
设计了新的标签(sign)和标注(markup)。
描述了新的JavaScript API。
抛弃或者重新定义了一些不常用的功能。
被最新版本的Opera, Chrome, Firefox广泛支持,IE9的部分支持。
那么,HTML5包括哪些内容呢?如下表。表中内容不太懂,要等学完估计才能准确的翻译出来。先贴出来。
然后是一个练习题。实现三种button的功能。点击button实现对话框抛出,跳转到另外一个网页,以及显示页面源代码。
使用文本编辑器新建一个*.html,然后加上自己的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5 Essentials</title>
<style>
button {
margin: 16px;
}
</style>
</head>
<body>
<button type="button" onclick='alert("Hello World!")'>
Press Me!
</button>
<br>
<button type="button" onclick="location.href='http://news.163.com'">
<img src="img/HTML5_Badge_32.png">
</button>
<br>
<button type="button" onclick="location.href='view-source:' + window.location.href">
View Source!
</button>
</body>
</html>
然后,双击html使用浏览器显示。测试了三种浏览器。
Chome和Firefox都是下载的最新版本,所以三个button都没问题。
由于机器自带是IE8,所以打开网页时有安全性的提示,需要手工解除block。并且第三个button显示源码,IE8还不支持。毕竟MS声称IE9才支持HTML5。
Web技术
技术 | 角色 | 示例 |
HTML (HTML5) | 标记(Markup)语言 页面内容 页面语义(Semantics) | Headings, Paragraphs Sections, Headers, Footers, Articles Hyperlinks, Buttons |
CSS (CSS3) | 评注(Annotation)语言 页面格式 页面的外观 | Font Style, Size, and Color 语义块的布局 转换, 生动活泼 |
JavaScript | 编程语言 动态页面 页面的行为 | 提示窗口 Button事件处理 DOM操控 AJAX及相关技术 |
jQuery jQueryUI | JavaScript类库 最优实践解决方案 针对域的语言(Domain Specific Language) | 通用任务合理化 可复用的UI块 浏览器无关 |
它是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" onclick='alert("Hello World!")'>
Press Me!
</button>
<br>
<button type="button" onclick="location.href='http://news.163.com'">
<img src="img/HTML5_Badge_32.png">
</button>
<br>
<button type="button" onclick="location.href='view-source:' + window.location.href">
View Source!
</button>
</body>
</html>
然后,双击html使用浏览器显示。测试了三种浏览器。
Chome和Firefox都是下载的最新版本,所以三个button都没问题。
由于机器自带是IE8,所以打开网页时有安全性的提示,需要手工解除block。并且第三个button显示源码,IE8还不支持。毕竟MS声称IE9才支持HTML5。
相关文章推荐
- 【HTML5】学习笔记1(基础介绍)
- HTML5学习笔记二 HTML基础
- HTML5基础学习笔记(十三)
- HTML5学习笔记(二):HTML基础学习之一
- HTML5基础学习笔记(十七)
- HTML5基础知识学习笔记
- HTML5基础学习笔记(八)
- HTML5基础学习笔记(十四)
- HTML5基础学习笔记(十)
- HTML5基础学习笔记(十八)
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
- HTML5基础学习笔记(五)
- HTML5新特性基础学习笔记上
- HTML5基础学习笔记(二)
- HTML5基础学习笔记(十五)
- HTML5学习笔记-第一章基础知识
- HTML5基础学习笔记(四)
- HTML5基础学习笔记(六)
- HTML5基础学习笔记(十九)
- HTML5基础学习笔记(十六)