當前位置 : IT培訓網 > Web前端 > Web教程 > 如何認識html5(h5)

如何認識html5(h5)

時間:2016-12-06 12:09:39??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
隨著html的更新換代,未來將會有越來越多的瀏覽區支持html5,如果你還沒有學習html5,那就趕緊加快速度補習下吧,學好h5制作精美的頁面,就在IT培訓網!

隨著互聯網的發展,網頁設計技術在逐步的提升,前端代碼也在逐漸的精細化,那么H5的到來是否可以將網頁的瀏覽速度大大提高呢,作為新一代的網頁設計人員該如何學習html5技術呢?

什么是 HTML5?

HTML5 是下一代 HTML 標準。

HTML , HTML 4.01的上一個版本誕生于 1999 年。自從那以后,Web 世界已經經歷了巨變。

HTML5 仍處于完善之中。然而,大部分現代瀏覽器已經具備了某些 HTML5 支持。

HTML5 簡介

HTML5是HTML最新的修訂版本,2014年10月由萬維網聯盟(W3C)完成標準制定。

HTML5的設計目的是為了在移動設備上支持多媒體。

HTML5 簡單易學。

HTML5 是如何起步的?

HTML5 是 W3C 與 WHATWG 合作的結果,WHATWG 指 Web Hypertext Application Technology Working Group。。

WHATWG 致力于 web 表單和應用程序,而 W3C 專注于 XHTML 2.0。在 2006 年,雙方決定進行合作,來創建一個新版本的 HTML。

HTML5 中的一些有趣的新特性:

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內容元素,比如 article、footer、header、nav、section

新的表單控件,比如 calendar、date、time、email、url、search

HTML5 <!DOCTYPE>

<!doctype> 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單:

<!DOCTYPE html>

最小的HTML5文檔

下面是一個簡單的HTML5文檔:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>文檔標題</title>

</head>

<body>

文檔內容......

</body>

</html>

注意:對于中文網頁需要使用 <meta charset="utf-8"> 聲明編碼,否則會出現亂碼。

HTML5 的改進

新元素

新屬性

完全支持 CSS3

Video 和 Audio

2D/3D 制圖

本地存儲

本地 SQL 數據

Web 應用

HTML5 多媒體

使用 HTML5 你可以簡單的在網頁中播放 視頻(video)與音頻 (audio) 。

HTML5 <video>

HTML5 <audio>

HTML5 圖形

使用 HTML5 你可以簡單的繪制圖形:

使用 <canvas> 元素。

使用內聯 SVG。

使用 CSS3 2D 轉換、CSS3 3D 轉換。

HTML5 應用

使用 HTML5 你可以簡單地開發應用

本地數據存儲

訪問本地文件

本地 SQL 數據

緩存引用

Javascript 工作者

XHTMLHttpRequest 2

HTML5 使用 CSS3

新選擇器

新屬性

動畫

2D/3D 轉換

圓角

陰影效果

可下載的字體

語義元素

HTML5 添加了很多語義元素如下所示:

標簽

描述

<article>

定義頁面獨立的內容區域。

<aside>

定義頁面的側邊欄內容。

<bdi>

允許您設置一段文本,使其脫離其父元素的文本方向設置。

<command>

定義命令按鈕,比如單選按鈕、復選框或按鈕

<details>

用于描述文檔或文檔某個部分的細節

<dialog>

定義對話框,比如提示框

<summary>

標簽包含 details 元素的標題

<figure>

規定獨立的流內容(圖像、圖表、照片、代碼等等)。

<figcaption>

定義 <figure> 元素的標題

<footer>

定義 section 或 document 的頁腳。

<header>

定義了文檔的頭部區域

<mark>

定義帶有記號的文本。

<meter>

定義度量衡。僅用于已知最大和最小值的度量。

<nav>

定義導航鏈接的部分。

<progress>

定義任何類型的任務的進度。

<ruby>

定義 ruby 注釋(中文注音或字符)。

<rt>

定義字符(中文注音或字符)的解釋或發音。

<rp>

在 ruby 注釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內容。

<section>

定義文檔中的節(section、區段)。

<time>

定義日期或時間。

<wbr>

規定在文本中的何處適合添加換行符。

HTML5 表單

新表單元素, 新屬性,新輸入類型,自動驗證。

已移除元素

以下的 HTML 4.01 元素在HTML5中已經被刪除:

<acronym>

<applet>

<basefont>

<big>

<center>

<dir>

<font>

<frame>

<frameset>

<noframes>

<strike>

每一章中的實例

通過我們的 HTML 編輯器,您能夠編輯 HTML,然后點擊按鈕來查看結果。

實例:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>IT培訓網(www.oalvodamoda.com)</title>

</head>

<body>

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  你的瀏覽器不支持 video 標簽。

</video>

</body>

</html>

HTML5 瀏覽器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

隨著html的更新換代,未來將會有越來越多的瀏覽區支持html5,如果你還沒有學習html5,那就趕緊加快速度補習下吧,學好h5制作精美的頁面,就在IT培訓網!

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天