講給Android程式設計師看的前端教程(09)——HTML5標籤(8)
課程安排
HTML不是程式設計語言，而是一種標記語言，它用一些標記、標籤來說明文字的顯示效果。要製作網頁和建立網站，就必須對HTML語言有所瞭解。客觀地講：HTML標籤沒有多少邏輯性而言，為了大家更好的理解和記憶，我們對這些標籤進行分門別類的講解，主要分為：
-
HTML常用標籤
-
HTML文字標籤
-
HTML語義標籤
-
HTML結構標籤
-
HTML列表標籤
-
HTML表格標籤
-
HTML表單標籤
-
HTML新增標籤和API
嗯哼，來吧，我們繼續HTML5標籤的學習。咋了？你竟然有點擔心學不會！？別逗了，這部分和我們常寫的Java比起來簡單多了，它的邏輯性也弱得多。所以，大胸弟你大可放心，就像看電影那樣：一手拿著爆米花，一手拿著可樂，也完全可以看懂本教程。
之前，我們已經學習了HTML常用標籤、HTML文字標籤、HTML語義標籤、HTML結構標籤、HTML列表標籤、HTML表格標籤、HTML表單標籤；今天我們來瞅瞅HTML5中新增的標籤和一些好玩又有用的API以及head中的meta。
HTML5新增標籤
meter標籤
meter標籤用於表示度量結果，請看如下示例：
筆記本剩餘電量:<meter value="7" min="0" max="10"></meter>
執行後結果如下圖所示：
progress標籤
progress標籤用於表示進度，請看如下示例：
本月已完成工作:<progress value="80" 執行後結果如下圖所示：
audio標籤和video標籤
在HTML5之前若想在網頁中播放音訊和視訊都需要藉助第三方外掛。現在，HTML5直接提供了audio標籤和video標籤實現音訊(推薦採用ogg格式)，視訊(推薦採用VP8格式)的播放。請看如下示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML的多媒體標籤</title>
</head>
< 執行後介面效果如下圖所示：
HTML5強大的API
在HTML5中融入了眾多非常實用的功能，比如：控制元件的拖拽，繪圖，多媒體，地理位置，網路狀態，資料儲存，全屏等等。這部分功能多涉及到JavaScript，但是呢？嘿嘿，我們還沒有講JavaScript呢！在此，我們先體驗一把，待我們學完JavaScript再來深入學習這部分知識。
HTML5監聽網路狀態
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML監聽網路狀態</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener('online', function() {
alert('網路連線已建立！');
});
window.addEventListener('offline', function() {
alert('網路連線已斷開！');
})
</script>
</body>
</html>
這玩意兒咋們熟悉不？太熟悉了！咋們在Android裡面是不是可以通過監聽系統廣播判斷網路的狀態？！
HTML5定位功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML5定位</title>
</head>
<body>
<script>
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
alert("您的瀏覽器不支援地理定位");
}
// 獲取地理位置成功的回撥函式
function successCallback(position) {
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
alert("經度=" + longitude + "，緯度=" + latitude);
}
// 獲取地理位置失敗的回撥函式
function errorCallback(error) {
alert("獲取使用者位置失敗");
}
</script>
</body>
</html>
這玩意陌生不？一點都不陌生！我們在Android裡面也經常利用高德地圖，百度地圖實現定位功能；在HTML5中依然可以！
meta
至此，已經介紹完了HTML5中常用的標籤。我們可以用這些標籤寫出自己需要的、美觀的頁面。當然，我們期望別人通過搜尋引擎能夠找到我們的網頁，從而提高訪問量。這個該怎麼辦？這就是接下來要介紹的meta標籤。
meta標籤位於head標籤中，是一種元資料(meta data)。它該標籤不會顯示在頁面上，但是機器卻可以識別。它主要用於定義頁面的說明，關鍵字，最後修改日期和其它的元資料。這些元資料將服務於瀏覽器(如何佈局或過載頁面)、搜尋引擎和其它網路服務。
在此介紹幾個meta中常用的屬性。
name和content
name屬性主要用於描述網頁，比如網頁的關鍵詞，描述等；與之對應的屬性值為content，其內容是對name填入型別的具體描述，以便於搜尋引擎抓取。語法格式如下：
<meta name="引數" content="具體的描述"/>
常見的name取值有如下幾種：
keywords
該取值用於告知搜尋引擎該網頁的關鍵字。例如：
<meta name="keywords" content="百貨，商品，電商" />
description
該取值用於描述網站內容，以便搜尋引擎抓取。例如：
<meta name="description" content="一個專門賣正品的網站" />
- author
該取值用於描述網頁作者。例如：
<meta name="author" content="lf,[email protected]" />
copyright
該取值用於描述版權資訊。例如：
<meta name="copyright" content="sina" />
http-equiv和content
http-equiv顧名思義，相當於(等同於)http的檔案頭作用。它可以向瀏覽器傳回一些有用的資訊，以幫助瀏覽器正確地顯示網頁內容。類似地，其後的content屬性用於http-equiv填入型別的具體描述
常見的http-equiv取值有如下幾種：
content-type
content-type表示HTML內容的編碼格式，瀏覽器將根據這個引數來解析文字資訊。例如：
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
或
<meta charset="utf-8">
expires
expires用於設定網頁的到期時間。快取是一種常見的效能優化手段。瀏覽器支援在本地快取使用者訪問的網頁，因此在快取有效時間內重新訪問這個網址，瀏覽器將從本地載入這個頁面顯示，該策略不僅使用者響應快而且還不佔用伺服器的頻寬。但是，如果快取一直有效，那麼使用者將不能獲得伺服器更新後的內容。因此，快取內容都會有超期時間，超過有效時間後，再次請求這個網址就會重新向伺服器請求這個網頁，這樣就可以得到最新的內容。例如：
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
refresh
refresh用於設定網頁自動重新整理的時間(單位為秒)和跳轉到指定的網址。例如:
<meta http-equiv="refresh" content="3;URL=http://www.sohu.com"/>
Set-Cookie
Set-Cookie用於當網頁過期時自動刪除本地cookie。例如：
<meta http-equiv="Set-Cookie" content="User=lf; path=/; expires=Sunday, 10-Jan-16 80:00:00 GMT"/>
相關推薦
講給Android程式設計師看的前端教程(15)——CSS選擇器(5)
在之前的幾篇部落格中分別介紹了CSS中常用的選擇器：標籤選擇器，類選擇器，ID選擇器，萬用字元選擇器。在本篇部落格中，我們將學習這些選擇器的複合使用。 並集選擇器 並集選擇器由各個選擇器通過逗號連線而成的，它為不同的標籤設定相同的CSS樣式；語
講給Android程式設計師看的前端和後臺教程
今日科技快訊 昨日，第四屆世界網際網路大會迎來了論壇議程最為集中的一天。上午，兩個重磅藍皮書《世界網際網路發展報告2017》、《中國網際網路發展報告2017》在烏鎮釋出，全面展現世界各國和中國網際網路發展現狀及未來趨勢。報告指出，全球移動網際網路爆發式擴張正在接近尾聲，人工智慧等新興網路資訊科技成為
講給Android程式設計師看的前端教程(09)——HTML5標籤(8)
課程安排 HTML不是程式設計語言，而是一種標記語言，它用一些標記、標籤來說明文字的顯示效果。要製作網頁和建立網站，就必須對HTML語言有所瞭解。客觀地講：HTML標籤沒有多少邏輯性而言，為了大家更好的理解和記憶，我們對這些標籤進行分門別類的講
講給Android程式設計師看的前端教程(21)——position定位
在該篇部落格中，將介紹和學習CSS的定位position。嗯哼，開始吧。 定位(position)的簡介 相對於浮動(float)而言定位(position)就要稍微簡單些了。定位(position)允許使用者較為精確地定義元素出現的相對位置，
講給Android程式設計師看的前端教程(08)——HTML5標籤(7)
課程安排 HTML不是程式設計語言，而是一種標記語言，它用一些標記、標籤來說明文字的顯示效果。要製作網頁和建立網站，就必須對HTML語言有所瞭解。客觀地講：HTML標籤沒有多少邏輯性而言，為了大家更好的理解和記憶，我們對這些標籤進行分門別類的講
講給Android程式設計師看的前端教程(25)——基本資料型別
JavaScript是弱型別程式設計語言，當進行變數宣告的時候無須指定變數的資料型別。但程式執行時，變數在記憶體中有對應的資料型別。在JavaScript中常用的基本資料型別有： number 數值型別
講給Android程序員看的前端和後臺教...[Android]
.html dad get clas mys bdd uos b250 htm 2o2c8k該俅磁莢禱姑http://blog.sina.com.cn/s/blog_17bde30600102xi86.htmlgky4c0既諳哨嘿砍魏http://blog.sina.com
寫給java程式設計師看的go教程
去年學的scala,感嘆其簡潔的語法,強大的表達能力,做到的fp和oop的混合程式設計非常的不容易,但是作為一個 充滿漏洞(光就一個sbt就夠折騰的,還有scala的編譯器,就不說了)和世界觀扭曲的語言,實在是不是很適合在生產上用,畢竟後期還要自己或者別的同事維護的,自己作為
給Android程式設計師的一些面試建議
前言 應大家的邀請，寫一篇關於Android面試相關的部落格，需要說明的是本文只針對Android應用開發，不針對rom開發以及逆向工程。我想面試對於程式設計師來說是很重要的一件事件，面試結果的好壞直接決定了能否進入某個公司以及以什麼級別和待遇進入某個公司。我
好程式設計師web前端教程分享網頁設計需要學那些東西？
開發十年，就只剩下這套架構體系了！ >>>
好程式設計師web前端教程分享js檔案引用編碼方式
開發十年，就只剩下這套架構體系了！ >>>
好程式設計師web前端教程：物件
好程式設計師web前端教程：物件 什麼是物件？ 物件的型別是Object。 JavaScript 中的所有事物都是物件：字串
好程式設計師web前端教程：Math函式
好程式設計師web前端教程：Math函式 Math.round(3.6) //四捨五入 random() //返回
好程式設計師web前端教程：字串
好程式設計師web前端教程：字串，觀察某寶網商品資料，有一個東西叫伺服器>>>>js的作用重要作用之一&g
好程式設計師web前端教程分享JavaScript驗證API
好程式設計師web前端教程分享JavaScript驗證API，小編每天會分享一下乾貨給大家。那麼今天說道的就是web前端培訓課程中
好程式設計師web前端教程分享三大前端框架相關問題
好程式設計師web前端教程分享三大前端框架相關問題，三大前端框架，有沒有哪個框架的元件間互動像js的方法傳值一樣簡單？ 首先
好程式設計師web前端教程分享引用型別與基本型別
好程式設計師web前端教程分享引用型別與基本型別，本文將從以下六個方面講解引用型別和基本型別 1. 概念 2. 記
好程式設計師web前端分享常見html5語義化標籤
好程式設計師web前端分享常見html5語義化標籤，我們知道，建立結構清晰的頁面可以建立良好的語義化基礎，也降低了使用css的難度
傳智+黑馬程式設計師web前端開發+專案開發等教程
Python的函式定義非常簡單，但靈活度卻非常大。除了正常定義的必選引數外，還可以使用預設引數、可變引數和關鍵字引數，使得函式定義出來的介面，不但能處理複雜的引數，還可以簡化呼叫者的程式碼。 位置引數 我們先寫一個計算x2的函式： def power(x): r
教程 | 寫給Python程式設計師的Scala入門教程
統計網導讀 本文從安裝、基礎資料型別、運算子、函式等七個方面系統介紹了Scala的語言特性。不僅是Python程式設計師，任何有程式設計經驗或者希望入門的人都可以看看，對Scala做一個基礎的認識。 隨著業務和資料的需要，我們引入了Spark。Spark對Pytho