HTML5學習筆記之一HTML5基礎
這章主要介紹一下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" 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學習筆記之一HTML5基礎
這章主要介紹一下HTML5相關的基本概念，並且以一道練習題結束。 Web技術 技術 角色 示例 HTML (HTML5) 標記（Markup）語言 頁面內容 頁面語義（Semantics） Headings, Paragraphs Sections,
Html5 學習筆記 --》html基礎 css 基礎
學習 ado itl doctype tran red 陰影 基礎 插圖 HTML5 功能 HTML5特點 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta
HTML5學習筆記（三）canvas畫布基礎
、基本內容 Canvas在HTML頁面提供畫布的功能， 在畫布中繪製各種圖形 Canvas繪製的圖形與HTML頁面無關，無法通過DOM獲取繪製的圖形，也無法為繪製的圖形繫結DOM事件，只能使用Canvas提供的API 二、Canvas用途
HTML5學習筆記
math stat http 方案 html5學習 .html 學習筆記 不能 cdn 1.解決IE8及以下瀏覽器不能創建html5元素的方案： 將此引用放在<head> 標簽內： <!--[if lt IE 9]> <script src
HTML5學習筆記(<command>,<details>,<dialog>)
detail win str strong data property html5 rop 支持 <command> 目前，主流瀏覽器都不支持 <command> 標簽。 註釋：只有 IE 9 支持 <command> 標簽，其他之前
html5學習筆記2——新元素
let 屬性 顯示 最小 AR pla 正則 idt detail 一：H5的改變 <canvas> 新元素 標簽描述 <canvas> 標簽定義圖形，比如圖表和其他圖像。該標簽基於 JavaScript 的繪圖 API 新多媒體元素
HTML5學習筆記（四）地圖功能
一、HTML5中地理定位 地理定位功能並不是屬於HTML5專有內容 HTML5的地理定位技術,由Google公司提供的Google Map產品來實現地理定位技術
HTML5學習筆記（二）視訊與音訊處理
一、<video> 1、<video>是H5的新標籤，用來處理視訊，在此之前，各網站用來處理視訊一直使用flash技術 flash的缺點有以下幾方面，首先原生瀏覽器原生不支援，需要外掛，其次過多的使用會導致網站效能變差，最後就是
HTML5學習筆記（一）HTML5新標籤新屬性
一、HTML5簡介 2014年10月29日，HTML5標準規範制定完成，並公開發布。 二、HTML5頁面結構 HTML5提供了新的語義元素來明確一個Web頁面的不同部分。 <header>：定義文件的頭部區域。 <nav>：定義導航連結的部分。 <
前端學習筆記day01 html5 新增標籤
1. header 標籤； nav標籤； article標籤； section標籤； aside標籤；footer標籤； <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"&
HTML5學習筆記——day one
一、HTML5的發展和區別 XML：可擴充套件標記語言，類似HTML語言，設計宗旨是傳輸資料而非顯示資料。1998年2月W3C推薦標準。 HTML:超文字標記語言，描述網頁，包含HTML標籤和純文字。 XHTML:可擴充套件性超文字標記語言，上面兩者的結合，與HTM
HTML5學習筆記簡明版（2）：新元素之section,article,aside
section section元素描繪的是一個文件或者程式裡的普通的section節，一般來說一個section包含一個head和一個content內容塊。section可以表示成一個小節，或者tab頁面裡的一個tab下的box塊。一個頁面裡可以拆分成多個section，分
HTML5學習筆記簡明版（9）：變化的元素和屬性
改變的元素（Element） 以下元素在HTML5裡的用法稍作修改以便能在web裡更好的使用或者起到更大作用： 沒有href屬性的a元素將顯示成一個佔位符，而且a元素內部現在支援flow content型別的元素了（例如：article, input, span等）。
HTML5學習筆記簡明版（8）：新增的全域性屬性
contenteditable屬性 任何元素使用contenteditable屬性的話，代表該元素是一個可編輯的區域。使用者可以改變元素的內容以及操作標記。例如： <p contenteditable="true">這是一段可編輯的段落。請試著編輯該文字。&l
【HTML5學習筆記一】環境搭建和需要掌握的技能
初學HTML5，特此寫一些學習筆記，記錄自己的成長。 一、開發環境 1.安裝JDK（現在暫時還沒用到，估計以後會用到）。 2.配置環境變數 2.1.新建JAVA_H
html5學習筆記三：canvas中平移，縮放，旋轉等影象變換問題
1，儲存與恢復問題 關鍵字：save / restore save指儲存save之前的canvas狀態，restore恢復save儲存的canvas狀態。舉個例子我想在canvas中隔一秒顯示一個圖片，那我可以先用save指令儲存空白的canvas，然後在顯示一張圖片之後r
Html5學習筆記四—播放音訊和視訊檔案
1， 載入音訊檔案： Key word ：<audio src=”路徑” controls=”controls”> Src是音訊路徑 ，controls屬性用來提供播放，暫停，音量控制 下面是一個簡單程式碼進行播放本地音訊 <!DOCTYPE HTML&
html5學習筆記五--表單
html5表單是很強大的東西，裡面增加了例如Email，range等型別。 一，首先介紹的幾個輸入型別應用格式差不多，首先介紹下demo_form.php，在使用這些型別時首先把資料提交到伺服器，如果格式不對就會有錯誤反饋。 詳細介紹其中的search型別： <!D
Kotlin學習筆記之一：Kotlin基礎
1.函式： /** * 關鍵詞fun 申明是函式 * 引數形式：引數名：型別 * Kotlin中陣列是一個類 * 這是一個不帶返回值的函式 */ fun main(args: Array<String>){ println("
html5學習筆記二：利用canvas繪製簡單圖形
一，認識canvas Canvas是html5新增的開發跨平臺動畫 遊戲的標準方案，能夠實現對圖形和視訊進行畫素級操作，這為web圖形和視訊處理打開了廣闊的空間。藉助canvas，使用者可以再web中繪製各種圖形。Canvas元素及隨其而來的程式設計介面canvas api