HTML5 tags used in this article: <video> | <textarea> | <div> | <style> | <span> |
HTML5最吸引人的的是整合Video的播放，並可偵測瀏覽器對於影像格時的支援，自動選取適合的codec。影片播放器控制項 (controls)、影片preload、poster圖片、和影片來源<source src="...">等，都可以簡單的tag attributes來表示。以下簡單HTML5 <video>寫法就可以製作影片播放器於網頁中。
順便談談HTML5 <textarea>的新功能，在此範例用於顯示HTML5 codes，避免瀏覽次再次解讀<textarea>內的<video>內容。設定rows和cols屬性，如同程式碼的行列數，按照指定行列數大小顯示文字內容。使用style float=left主要是為了讓兩區塊可以浮動，若寬度夠，會顯示在同一列，如同兩欄顯示。
要排版整齊，就要善用<div> tag，以定義文件的區塊概念，讓版面整整齊齊。但這些工作要做好，就必須先瞭解CSS，也就是HTML5 <style>的運用。在此範例中，設計4個styles: content, explain, exp-left, exp-right，分別用於顯示部落格文字、解釋HTML碼和對應的效果區塊，所以exp-left,right分別用於設定左右區塊的大小位置。以現今設計HTML文件的趨勢和習慣，盡量用<div>而少用<table>，以免DOM結構過於複雜。過去習慣以<table>建立網頁區塊概念，在各區塊再獨立設計內容呈現，因此很容易照成<table>內的<td>再度使用<table>，DOM tree的巢狀深度過深，也就是DOM結構太複雜，造成DOM parser效能差。
但是自訂CSS styles和部落格網站內定版面styles可能衝突，導致網頁呈現變得很奇怪，又找不出錯誤在哪？因此，最好命名要特殊，在此都以 "il-" 為開頭，例如："il-content" 可避免和常用的 "content" style衝突。
結論：以部落格撰寫HTML5測試功能可以，但是使用到複雜的CSS使用方式，建議還是自己開新檔案測試，畢竟網站設計的版面CSS實在太雜亂了，導致偵錯困難！
要排版整齊，就要善用<div> tag，以定義文件的區塊概念，讓版面整整齊齊。但這些工作要做好，就必須先瞭解CSS，也就是HTML5 <style>的運用。在此範例中，設計4個styles: content, explain, exp-left, exp-right，分別用於顯示部落格文字、解釋HTML碼和對應的效果區塊，所以exp-left,right分別用於設定左右區塊的大小位置。以現今設計HTML文件的趨勢和習慣，盡量用<div>而少用<table>，以免DOM結構過於複雜。過去習慣以<table>建立網頁區塊概念，在各區塊再獨立設計內容呈現，因此很容易照成<table>內的<td>再度使用<table>，DOM tree的巢狀深度過深，也就是DOM結構太複雜，造成DOM parser效能差。
但是自訂CSS styles和部落格網站內定版面styles可能衝突，導致網頁呈現變得很奇怪，又找不出錯誤在哪？因此，最好命名要特殊，在此都以 "il-" 為開頭，例如："il-content" 可避免和常用的 "content" style衝突。
結論：以部落格撰寫HTML5測試功能可以，但是使用到複雜的CSS使用方式，建議還是自己開新檔案測試，畢竟網站設計的版面CSS實在太雜亂了，導致偵錯困難！
No comments :
Post a Comment