HTML5 亂記

時間 2019-12-08

標籤 html5 html 亂記欄目 HTML5 简体版

原文原文鏈接

HTML5 的文檔類型聲明能夠觸發全部具有標準模式的瀏覽器的標準模式，包括那些對 HTML5 一無所知的瀏覽器，也就是說，能夠在任何網頁中都使用 HTML5 文檔類型聲明 <!DOCTYPE html> 若是沒有文檔類型聲明，大多數瀏覽器將轉換到混雜模式。
爲文檔添加字符編碼 <meta charset="utf-8"> 。
指定網頁中使用的天然語言 <html lang="en"> en 表示英語。
添加樣式表 <link rel="stylesheet" href="xxx.css"> 。
添加 JS 文件 <script src="xxx.js"></script>>。
在 HTML 中，應保持良好的代碼風格。
1. 包含 <html>，<body> 和 <head> 標籤。
2. 標籤所有小寫。
3. 屬性值加引號
4. 省略關閉空元素的斜槓。
HTML5 驗證器。
瀏覽器裝機狀況統計。
檢測功能。
使用膩子腳本填補功能缺陷。
HTML5 語義元素。
1. <time>：用於在網頁中標註一個有效的日期，時間。
2. <header>：用來標註網頁的頁眉或標註內容的標題。
3. <footer>：頁腳，能夠放一些網站版權信息，做品來源，法律限制及連接之類的信息，不能放太多連接，重要的或無關的內容，如廣告，社交媒體，按鈕等。
4. <article>：包含全部相關的內容，包括標題，做者署名以及正文。
5. <figure>：添加插圖，與圖片的概念不太同樣，HTML5 規範建議咱們把插圖想像成一本書的附圖，圖題能夠放在 <figure> 中的 <figcaption> 元素裏。
6. <aside>：添加附註，表示與它周圍文本沒有密切關係的內容，也能夠用來盛放廣告，相關內容的連接，和醒目引文。
瀏覽器（IE8 及更早版本除外）在遇到不認識的元素時，會把它們當成內聯(inline)元素，大多數 HTML5 語義元素（<time> 除外）都是塊級元素，因此要在老的瀏覽器中兼容它們，須要顯式的設置 display：block。
對於 IE8 及更早版本的瀏覽器，它們會拒絕給沒法識別的元素應用樣式，好在能夠經過 JS 建立新元素，就能夠騙過 IE ，讓它識別外來元素，document.createElement('header') 。簡單的方法是直接使用別人作好的「墊片」腳本 <script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"><script> 固然，這應該只在使用舊版本 IE 的狀況下執行，爲了不沒必要要的加載 JS 文件，能夠將這段代碼放在 IE 的條件註釋中 <!--[if lt IE 9]> 腳本 <[!endif--]> 這樣，其餘瀏覽器（IE9 及更高版本）就會忽略這個腳本。（使用第 9 條的檢查工具也能夠解決這個問題，此工具內置了 HTML5 墊片腳本，所以會自動解決這些問題。）
若是你在 IE 中要花大量時間檢測包含 JS 的頁面，還應該在 <head> 區塊中包含一條特殊的註釋，叫作 web 標誌。這行註釋要放在指定字符編碼的標籤後面， 這行註釋告訴 IE 將頁面視爲從遠程網站上下載來的。不然，IE 會切換到一種特殊的鎖定模式，彈出一條安全警告，在你點了「容許阻止的內容」按鈕以後纔會執行 JS 代碼。其它全部瀏覽器都會忽略這個 web 標誌註釋，對遠程站點和本地文件使用相同的安全設置。
語義元素續。
1. <nav>：用來包裝一組連接。
2. <section>：區塊元素。若是有一個帶有標題的內容塊，而其它語義元素都不合適，那麼選擇 <section> 一般比選擇 <div> 更好一些。
3. <main>：用於標識網頁的主要內容，不能把 <main> 嵌套在 <article> 或其餘任何語義元素裏面。這是由於 <main> 元素的使命是包裹頁面中的主要內容，而非標識文檔中某個重要的部分。換句話說，一個頁面中只能有一個 <main> 元素。在複雜些的頁面中，好比包含多個 <article> 元素時，<main> 就應該包含全部 <article>。
查看綱要：
1. 在線的 HTML 綱要生成器。
2. Chrome擴展。
3. Opera擴展。
使用 <time> 元素標註日期和時間
css
對於瀏覽網頁的人，你能夠隨便採用任何格式來顯示日期時間，只要你在 datetime 屬性中提供計算機可以看懂的通用格式的日期時間就好了。另外，<time> 還有一個 pubdate 屬性。若是當前內容（例如 <time> 元素所在的 <article>）對應一個發表時期，可使用這個屬性。
語義元素續。
1. <output>：標註 JS 返回值。實際上，這個元素就是一個佔位符，用於展現一小段計算後的信息。好比，經過某些計算後，JS 返回值顯示在頁面中。之前通常是利用一個 <span> 來用作佔位符，而惟一的問題就是該元素不提供任何語義 <p>返回值：<span id="result"></span></p>。
2. <mark>：用於標註一段文本，這段文本會突出顯示。在須要引用他人的內容，而你想吸引人注意時，就可使用 <mark> 元素。
關於其餘未由 HTML5 規定的語義元素，諸如名字，地址，企業名錄，產品說明，我的簡介等等。能夠由其餘語義標準（微格式，微數據等等）來實現。
能夠且只能給 <input> 或 <textarea> 元素添加一個 autofocus 屬性，使得瀏覽器可以在用戶未操做以前，自動把焦點給予正確的控件。
在 <form> 元素中添加 novalidate 屬性能夠禁用驗證功能。
表單僞類。
1. required（必填）和optional（選填）：根據字段是否使用了 required 屬性來應用不一樣的樣式。
2. valid（有效）和 invalid（無效）：根據控件中是否包含錯誤來應用不一樣的樣式。注意，除非訪客提交表單，不然大多數瀏覽器並不會發現哪些值有效，哪些值無效。換句話說，訪客不會實時看到表示輸入無效的樣式變化。
3. in-range（在範圍內）和 out-of-range（超出範圍）：根據控件的 min 和 max 屬性判斷輸入值是否超出範圍，從而爲控件應用樣式。
在 <input> 元素中可使用 pattern 屬性使用正則表達式來進行驗證（不推薦）。
也可使用 setCustomvalidy() 方法自定義驗證（推薦）。
下面是借特殊的表單輸入屬性，這不是用於驗證的屬性，而是用於在編輯表單時控制瀏覽器的行爲。
1. spellcheck：拼寫檢查。true，開啓。false，關閉。
2. autocomplete：是（on）否（off）提供最近輸入的值進行選擇。
3. autocorrect 和 autocapitalize：這兩個屬性能夠用來在移動設備（即 iPad 和 iPhone 中的 Safari）上控制自動糾錯和自動大小寫功能。
4. multiple：好久以來，web 開發人員一直經過爲 <select> 元素添加 multiple 屬性，達到讓用戶能選擇多個列表項的目的，如今也能夠爲某些類型的 <input> 元素添加這個屬性，包括用於上傳文件的 file 類型和 email 類型。在支持的瀏覽器中，用戶能夠選擇多個文件一塊上傳，或者能夠在一個輸入框中貼上多個郵件地址。
<input> 元素碰見不認識的 type 類型，會將其看成普通文本框來處理，但支持 HTML5 表單的瀏覽器會更聰明一些，好比會提供便於編輯的輔助，限制可能出現的錯誤和執行驗證。下面是 HTML5 表單的新類型。
1. email：電子郵件。
2. url：網址。
3. search：搜索框。
4. tel：電話號碼。
5. number：常規數值，可以使用 min 和 max 屬性限制大小，step 屬性控制數值間隔。
6. range：滑動條形狀的數值。與 number 屬性同樣。
7. date 和 time：日期和時間。
8. color：顏色。
表單新元素。
1. <datalist>：可讓你在普通文本框中添加一個建議列表。
2. <progress> 和 <meter>：進度條和計量條。
網頁中的HTML編譯器。
1. contenteditable：把這個屬性添加到任何元素中而且設置它的值爲 true ，那麼該元素的內容即可以編輯了。
2. designMode：使用戶編輯整個頁面。最經常使用的形式是將這個屬性添加到 <iframe> 元素中，從而使它充當了一個超級的編譯框。
<audio>：音頻。
1. src 屬性指定文件。
2. preload屬性告訴瀏覽器如何加載一個媒體文件，當值爲 auto 時，瀏覽器在後臺下載整個文件，爲 metadata 時，告訴瀏覽器先獲取音頻文件的數據塊，從而足以肯定一些基本信息（好比音頻的總時長），爲 none 時，告訴瀏覽器沒必要預先下載預先下載。
3. autoplay 屬性告訴瀏覽器在加載完音頻文件後當即播放。
4. loop 屬性告訴瀏覽器在播放結束時，再從頭開始播放。
5. controls 屬性顯示播放控件。
<video>：視頻。與 <audio> 元素很像，也有 src ，controls ，preload ，autoplay ，loop 屬性。<video> 元素還有另外三個屬性。
1. height 和 width 屬性用於設置視頻窗口的大小（像素），在設置這個尺寸時，應該注意按照視頻的原始比例設置。而明確設置視頻窗口大小，能夠在視頻未加載完成時（或者在視頻加載失敗時），不影響頁面的佈局。
2. poster 屬性用於設置替換視頻的圖片。瀏覽器會在三種狀況下使用這個圖片。視頻第一幀爲加載完畢。把 preload 屬性設置爲 none 。沒有找到指定的視頻文件
如今主流且最新版的瀏覽器都支持 mp3 與 mp4 格式，對於老式瀏覽器，咱們有兩種替代的後輩措施。
1. 使用 <video> 和 <audio> 元素內置的格式後輩系統，要使用它，就要從 <video> 和 <audio> 元素中刪除 src 屬性，而後嵌套一組 <source> 元素。
2. 添加 flash。
-prefix-free庫，使用它能夠自動添加開發商前綴（CSS3）。
實現透明效果的方法有兩種。
1. 使用 rgba() 函數，它接受 4 個數值做爲參數，前三個值分別表明紅，綠，藍份量，取值範圍爲 0 到 255 ，最後一個值是 alpha（不透明度）值，取值範圍爲 0 到 1 。
2. opacity 屬性，這個屬性跟 alpha 值同樣，取值範圍爲 0 到 1 ，0 表示徹底透明，1 表示徹底不透明。
rem 設定的文字大小始終相對於 <html> 元素（而不是包含元素）的文字大小計算。而 em 的大小則是根據包含元素的文字大小計算。
要讓網頁可以在移動設備中不要自動執行縮放，那就得修改視口的設置 <meta content="initial-scale=1.0" name="viewport"> 。
web 存儲分爲二種，分爲對應兩個 JS 對象。
1. 本地存儲，對應 localStorage 對象，用於長期保存網站的數據，而且站內任何頁面均可訪問該數據。
2. 會話存儲，對應 sessionStorage 對象，用於臨時保存針對一個窗口的數據。
要把一段信息保存到本地存儲或會話存儲中，首先要爲該信息想一個名字，這個名字叫作鍵，未來要經過它取回數據。
1. 要保存數據，須要使用 setItem() 方法。localStorage.setItem("鍵", "值") 。
2. 要讀取數據，須要使用 getItem() 方法。 localStorage.getItem("鍵") 。
3. 也可使用屬性名或索引方式進行讀寫。 localStorage.鍵，localStorage["鍵"] 。
4. 刪除數據項，須要調用 removeItem() 方法。localStorage.removeItem("鍵") 。
5. 也能夠調用 clear() 方法，清空網站在本地保存的會話數據。 sessionStorage.clear()。
6. 要查找全部數據項，可使用 key() 方法。
7. 經過本地或會話存儲保存數據時，該數據會自動被轉換爲文本字符串。
8. 在本地或會話存儲發生變化時，同一站點中其它頁面的窗口就會觸發 window.onstorage 事件。
......html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。