第 2 章 HTML5基礎

HTML5 是 HTML 最新的修訂版本，2014 年 10 月由全球資訊網協會（W3C）完成標準制定。目標是取代 1999 年所制定的 HTML 4.01 和XHTML 1.0標準，以期能在網際網路應用迅速發展的時候，使網路標準達到符合當代的網路需求。HTML 語言的發展大致如下圖，最新的版本是 5.0

HTML5 擺脫了 SGML 與 XML 的束縛，將標籤簡化了，例如：單一元素(element)不需要結束標籤(tag)： /> ，並移除以下的元素：applet, center, font frameset, frame, noframe, strike ...。

整個 HTML5 內容相當的多，要避免錯誤的用法1，完整的說明可參考 w3schools 的 HTML5 ，總之HTML5用語意標籤(Semantics)來取代傳統標籤，網頁內容改以大綱(Outline)配置...，本課程以開發 Web 網頁應用的面向，讓諸位了解其精要，首先讓我們利用 Noepad++ 或 code 來編輯一個基本的 HTML5 網頁，內容參考如下，存檔並命名為 index.html。

<!DOCTYPE html>
<html lang="zh-hant-TW">
  <head>
    <meta charset="UTF-8">
    <title>My first web page</title>
  </head>

  <body>
    <p>Hello World!</p>
  </body>
</html>

元素(Element)與標籤(Tag)的關係

  • 巢狀內元素應縮排 4 個空格。
  • 屬性使用雙引號。
  • 單一元素結尾不需要使用斜線。
  • 不要省略關閉標籤（比如 </li> 或 </body>）。
  • 註解開始使用 <!-- 註解結束使用 -->。

2.1 文件模式(Document Type)

瀏覽器在解析 HTML 文件時，若 Document Type 有正確宣告，則會依照W3C的網頁標準來進行對應的解析，這時稱為 Standards Mode，若設定或語法錯誤甚至於不指定 Document Type 則會進入 Quirk Mode，而 IE 瀏覽器因為每個版本針對標準的解析規則都不同，因此有時必須使用相容性檢視，設定網頁使用對應的 IE 版本來進行解析。 透過 IE 瀏覽器的 F12 開發人員工具模擬頁籤，可得知目前作用的文件模式。

過去的寫法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

現在的寫法：

<!DOCTYPE html>

2.2 html 元素

html 是網頁的根元素，lang 屬性(attribute)宣告了網頁內容的語言(語言-字體-地區)：

  • zh-Hant：繁體中文
  • zh-Hant-TW：台灣地區使用的繁體中文
  • zh-Hans：簡體中文

但現在的網頁大都以utf-8編碼，網頁可能同時會有不同語言出現，此時就不需要 lang 屬性了。

過去的寫法：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh_TW" lang="zh_TW">

現在的寫法：

<html lang="zh-hant-TW">

2.3 meta 元素

meta 元素位於 head 標籤之間，是 Meta Data 的縮寫，一般用來放置給搜尋引擎與瀏覽器相關的資訊，例如：

  1. 指定 IE 瀏覽器模擬版本 IE7：
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

  2. 指定瀏覽器提供裝置畫面大小，並動態調整網頁寬度適應之

     <meta name="viewport" content="width=device-width, initial-scale=1">

    viewport 指的是瀏覽器視窗中可呈現內容的部分，不含選單、捲軸與訊息列，此屬性是適應化網頁的基石，瀏覽器就是因為這個 meta 指示敘述，才知道必須配合裝置畫面解析度顯示，後續更可配媒體查詢(Media query)動態調整網頁寬度。

  3. 指定網頁每隔 30 秒自動 Refresh 一次
    <meta http-equiv="refresh" content="30">

meta 元素過去的寫法：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="朱孝國" />
<meta name="Keywords" content="HTML5, CSS3, JAVASCRIPT" />
<meta name="Description" content="現代網頁設計工作坊" />

meta 元素現在的寫法：

<meta charset="utf-8">
<meta name="author" content="朱孝國">
<!-- 因眾人濫用，故 Google 搜尋引擎無視此設定
<meta name="Keywords" content="HTML5, CSS3, JAVASCRIPT">
-->
<meta name="description" content="現代網頁設計工作坊">

2.4 script 與 style 元素

script 是用來撰寫 javascript 程式碼或載入外部 javascript 檔案的元素，style 是用來撰寫 css 表現語法的元素，通常置於 ... 內。

過去的寫法：

<script type="text/javascript">...</script>
<script type="text/javascript" src="foo.js"></script>
<style type="text/css">...</style>

現在的寫法：

<script>...</script>
<script src="foo.js"></script>
<style>...</style>

link 是用來呼叫外部的樣式表檔案，置於 ... 內。

過去的寫法：

<link href="style.css" rel="stylesheet" type="text/css" />

現在的寫法：

<link href="style.css" rel="stylesheet">

2.6 元素介紹

根據 HTML element reference 的元素分類如下：

  • 根元素(Basic elements)：指的是 html。
  • 文件超資料(Document metadata)：如 head, title, meta, style, link...等。
  • 章節(Content sectioning)：如 body, header, footer, hgroup h1~h6, nav, article, section2, aside...等。
  • 文字內容(Text content)：如 div, ol, ul, li, dl, dt, dd, hr, p, pre, blockquote, figure...等。
  • 行內文字語意(Inline3 text semantics)：如 span, a, br, code, dfn, em, strong, sub, sup, u, mark...等。
  • 表格(Table content)：如 table, caption, thead, tbody, tfoot, tr, th, td...等。
  • 表單(Forms)：如 form fieldset, legend, label, input, select, datalist, option, textarea, button...等。
  • 嵌入内容(Embedded content)：如 img, iframe, embed, object, svg, math, audio, video, map, area...等。
  • 腳本(Scripting)：如 script, canvas...等。
  • 劃定編輯(Demarcating edits)：如 del, ins等。
  • 互動元素(Interactive elements)：如 dialog, menu...等。

以上還只是最常用的部分，若全部講完大家應該就昏倒了，HTML5 元素以圖示的分類呈現，給大家15分鐘的時間在不同瀏覽器上把玩了解一下： form表單相關元素請格外用心學習

這部分的學習不需要死背，只要有概念，隨時回來串習即可。

2.7 Take Home 練習

  1. 對於開發 Web 應用程式最應該透徹了解的就是表單元素了，請在閱讀 W3Schools HTML Forms 相關章節之後，利用 HTML5 test 觀察不同瀏覽器對於表單的支援度，再以 jsbin 練習表單的用法：請參考範例，但不要修改它喔。
  2. 請根據 福智全球資訊網 的網站資料，簡化後參考第 1 章介紹的樣板網頁，另行製作一個全新的首頁。

1 避免常見的六種 HTML5 錯誤用法。

2 section 是章節與段落的意思與 article 一樣都是 HTML5 的語意新元素，被 section 包覆的段落，通常都會帶有 headling 標籤，進一步的說明請參考：淺談 section 運用以及與 outline 間的關聯。

3 網頁元素依照輸出後有無換行可分為區塊(block)元素與行內(inline)二大類元素，在接下來的 CSS 課程中會進行深入了解。

results matching ""

    No results matching ""