本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

HTML 5 快速導覽 - 元素

元素 (element) 為構成 HTML 文件的基本單位,其由標籤與內容組合而成。不同的元素具有不同的用途,依性質可分為

  • 根元素 (root element)
  • 文件資料元素 (document metadata)
  • 區域元素 (sections)
  • 群組元素 (grouping content)
  • 文字階層元素 (text-level semantics)
  • 編訂元素 (edits)
  • 內嵌元素 (embedded content)
  • 表格元素 (tabular data)
  • 表單元素 (forms)
  • 互動式元素 (interactive elements)


根元素有
<root>


文件資料元素有
<head> <title> <base> <link> <meta> <style> <script> <noscript>


區域元素有
<body> <section> <nav> <article> <aside> <h1> <h2> <h3> <h4> <h5> <h6> <hgroup> <header> <footer> <address>


群組元素有
<p> <hr> <pre> <blockquote> <ol> <ul> <li> <dl> <dt> <dd> <figure> <figcaption> <div>


文字階層元素有
<a> <em> <strong> <small> <s> <cite> <q> <dfn> <abbr> <time> <code> <var> <samp> <kbd> <sub> <sup> <i> <b> <u> <mark> <ruby> <rt> <rp> <bdi> <bdo> <span> <br / > <wbr>


編訂元素有
<ins> <del>


內嵌元素有
<img> <iframe> <embed> <object> <param> <video> <audio> <source> <track> <canvas> <map> <area>


表格元素有
<table> <caption> <colgroup> <col> <tbody> <thead> <tfoot> <tr> <td> <th>


表單元素有
<form> <fieldset> <legend> <label> <input> <button> <select> <datalist> <optgroup> <option> <textarea> <keygen> <output> <progress> <meter>


互動式元素有
<details> <summary> <command> <menu>


各種元素有各自專用的屬性 (attribute) ,例如 <img> 有 src 、 alt 、 width 等,另外具有全域屬性,就是每一種元素都有的屬性


大多數的情況下並不需要設定每一個屬性值,瀏覽器會自動載入預設值,但是有些元素如 <img> 沒有設定特定屬性如 src 的話,就沒有來源圖檔,會導致元素沒有內容,例如
<img width="200px" height="200px">


Safari 開啟如下



由於 <img> 有設定 width 及 height ,但是沒有設定 src ,因此沒有來源圖檔, Safari 僅保留寬及高的空間,其他瀏覽器可能有不同的處理方式,如 Firefox



就完全不顯示沒有設定 src 的 <img> 了。


除了屬性之外,元素還有文件物件模型 (DOM) 介面,這是提供給 JavaScript 寫用戶端程式用的,基本的元素文件物件模型介面為 HTMLElement ,大多元素都有由 HTMLElement 衍生出的專屬文件物件模型介面。



中英文術語對照
根元素root element
文件資料元素document metadata
區域元素sections
群組元素grouping content
文字階層元素text-level semantics
編訂元素edits
內嵌元素embedded content
表格元素tabular data
表單元素forms
互動式元素interactive elements
元素element
屬性attribute
文件物件模型DOM


您可以繼續參考
JavaScript 範例

基本概念


相關目錄
HTML 5 快速導覽
HTML, CSS 教材
首頁


參考資料
http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#elements
http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#elements

沒有留言: