HTML5学习笔记之一HTML5基础

最新推荐文章于 2024-07-28 20:59:34 发布

原创最新推荐文章于 2024-07-28 20:59:34 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5的基础知识，包括其作为新一代Web标准的重要特性，如语义化标签、离线存储、多媒体支持等，并通过一个简单的按钮交互实例演示了如何应用HTML5的新功能。

这章主要介绍一下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块浏览器无关

什么是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

然后是一个练习题。实现三种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>