2016年2月17日 星期三

HTML 5 快速導覽 - 語法

HTML 5 快速導覽 - 語法




基本上， HTML 文件是由標籤 (tag) 組成的，標籤就是用角括號，也就是數學用的小於 < 跟大於 > 符號圍起來的部份，完整的 HTML 文件都需要 <html> 、 <head> 、 <body> 三個標籤



其中文件起始的 <!DOCTYPE html>
?
<!DOCTYPE html>
這是告訴瀏覽器 (broswer) 此為 HTML 5 文件。


HTML 由標籤 (tag) 與內容構成元素 (element) ，標籤有成對標籤與獨立標籤，成對標籤所圍住的便是內容，這也可以是標籤，獨立標籤由屬性設定所屬內容。成對標籤有分開始標籤 (start tag) 與結束標籤 (end tag) ， <html> 、 <head> 、 <body> 都是成對標籤。

元素依功能區分，可分為幾大類
  • 根元素 (root element)
  • 文件資料元素 (document metadata)
  • 區域元素 (sections)
  • 群組元素 (grouping content)
  • 文字階層元素 (text-level semantics)
  • 編訂元素 (edits)
  • 內嵌元素 (embedded content)
  • 表格元素 (tabular data)
  • 表單元素 (forms)
  • 互動式元素 (interactive elements)
<html> 為 HTML 文件的根元素，所有的 HTML 文件資料與內容都需要放在 <html> 到 </html> 之間
?
<html>
  <!-- 文件資料與內容 -->
</html>

<head> 為 HTML 文件的文件資料元素，所有其他的 HTML 文件資料元素，如 <meta> 、 <title> 等都需要放在 <head> 到 </head> 之間
?
<head>
  <!-- 文件資料元素 -->
</head>


<body> 為 HTML 文件的區域元素，所有的 HTML 文件內容，包括其他的區域元素、群組元素等都需要放在 <body> 到 </body> 之間
?
<body>
  <!-- 文件內容 -->
</body>

一般而言，除了 <body> 外的區域元素用來組織群組元素、文字階層元素、編訂元素、內嵌元素、表格元素、表單元素及互動式元素，這些區域元素具有語意化的標籤，可將網頁規劃成不同區域。
元素依性質區分，可分為
  • 非文字內容元素 (void elements)
  • 原始文字元素 (raw text elements)
  • RCDATA 元素 (RCDATA elements)
  • 外來元素 (foreign elements)
  • 正規元素 (normal elements)

非文字內容元素包含 <area> 、 <base> 、 <br / > 、 <col> 、 <command> 、 <embed> 、 <hr> 、 <img> 、 <input> 、 <keygen> 、 <link> 、 <meta> 、 <param> 、 <source> 、 <track> 、 <wbr> 等，由於這些元素不需要文字內容，因此只需要開始標籤，不需要結束標籤。


原始文字元素包括 <script> 與 <style> ，這類元素瀏覽器不會將文字內容解譯成正規元素來呈現。 <script> 為瀏覽器支援的直譯語言，必須是有效的 MIME 型態，預設為 JavaScript ， <style> 則是瀏覽器支援的樣式表，同樣必須是有效的 MIME 型態，預設為 CSS 。

RCDATA 元素包含 <textarea> 與 <title> ，外來元素則是 MathML 或 SVG 的相關元素，其他以上未列出的元素都屬於正規元素。


中英文術語對照
元素element
屬性attribute
樣式style
瀏覽器broswer
區域元素sections
群組元素grouping content
文字階層元素text-level semantics
編訂元素edits
內嵌元素embedded content
表格元素tabular data
表單元素forms
互動式元素interactive elements
非文字內容元素void elements
原始文字元素raw text elements
RCDATA 元素RCDATA elements
外來元素foreign elements
正規元素normal elements

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)