HTML5 基礎教程
HTML 介紹HTML 元素HTML 屬性HTML 文字樣式元素HTML 水平線HTML 清單元素HTML +CSSHTML +JavascriptHTML 超連結HTML 檔案路徑HTML <!-- 註解 -->HTML 特殊文字HTML 顏色HTML 區塊元素與佈局XHTMLHTML5 多媒體教程
HTML <table>表格HTML <iframe>線內框架HTML <img> 圖片HTML <video> 影片HTML <audio> 音樂HTML5 表單教程
HTML <form> 表單HTML 各種表單元素HTML <input>HTML <input>屬性HTML5
HTML5 介紹HTML5 支援HTML5 新元素HTML5 正確語法HTML5 Graphics
HTML5 CanvasHTML5 SVGHTML5 Google Maps注意
- 以下的程式碼皆是寫於<body>與</body>標籤之內。
- 程式碼的示範,已由本網站「樣式表自動修飾」,實際測試將依各家瀏覽器「預設樣式表不同而有差距」。
區塊元素
什麼是區塊元素?可以參考:文字樣式元素第四節的部分。
在HTML5中有許多區塊元素,但大同小異,只要用css加以修飾就可以達成效果,這些元素之中,最常拿來使用的就是<div>
常見區塊元素
最常被用來使用的區塊元素就是<div>,<div>很適合拿來「排版」時使用,但是整個程式碼都是<div>也不太好讀吧!所以在HTML5中就直接新增了跟<div>「效果相同」但「名稱更自然」的元素:
- <header> 文檔的頁眉
- <nav> 導航欄
- <section> 文章的結
- <article> 文章
- <footer> 文檔底部
- <details> 額外細節(具有展開效果)
- <summary> 細節標題 - 搭配<details>使用
除了<details>和<summary>效果較特殊外,其餘說穿了跟<div>沒什麼兩樣。
- <div>最常見的區塊元素:div</div>
- <header>文檔的頁眉</header>
- <nav>導航欄</nav>
- <section>文章的結</section>
- <article>文章</article>
- <footer>文檔底部</footer>
- <br/>
- <details>
- <summary>細節標題(點我以展開)</summary>
- <p>這功能還滿炫的,通常都得使用JavasSript才有辦法做到</p>
- </details>
其他區塊元素
以下的所有元素,使用<div>透過css調整都可以辦到。
- <q>q -簡短引用- 預設樣式通常為加引號</q>
- <blockquote>blockquote -引用- 預設樣式通常為進行縮排</blockquote>
- <abbr>abbr -縮寫- 為瀏覽器、翻譯系統和搜索引擎提供有用的信息。</abbr>
- <address>address -聯繫資訊- 通常以斜體顯示</address>
- <cite>cite -作品標題- 通常以斜體顯示</cite>