2017.2.14 HTML/CSS有感3
阿新 • • 發佈：2019-02-14
請你描述一下 cookies，sessionStorage 和 localStorage 的區別?
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 請求之間儲存資料。有了本地資料，就可以避免資料在瀏覽器和伺服器間不必要地來回傳遞。
sessionStorage、 localStorage 、 cookie 都是在瀏覽器端儲存的資料，其中 sessionStorage 的概念很特別，引入了一個“瀏覽器視窗”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始終存在的資料。也就是說只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後， sessionStorage 即被銷燬。同時“獨立”開啟的不同視窗，即使是同一頁面， sessionStorage 物件也是不同的
cookies會發送到伺服器端。其餘兩個不會。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制為每個域名 50 個，但 IE7 似乎也允許每個域名 50 個 cookie 。 Firefox 每個域名 cookie 限制為 50 個。 Opera 每個域名 cookie 限制為 30 個。 Firefox 和 Safari 允許 cookie 多達 4097 個位元組，包括名（ name ）、值（ value ）和等號。 Opera 許 cookie 多達 4096 個位元組，包括：名（ name ）、值（ value ）和等號。 Internet Explorer 允許 cookie 多達 4095 個位元組，包括：名（ name ）、值（ value ）和等號。
區別：
- Cookie
+ 每個域名儲存量比較小（各瀏覽器不同，大致 4K ）
+ 所有域名的儲存量有限制（各瀏覽器不同，大致 4K ）
+ 有個數限制（各瀏覽器不同）
+ 會隨請求傳送到伺服器
- LocalStorage
+ 永久儲存
+ 單個域名儲存量比較大（推薦 5MB ，各瀏覽器不同）
+ 總體數量無限制
- SessionStorage
+ 只在 Session 內有效
+ 儲存量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
說說你對HTML語義化的理解?
(1)什麼是 HTML 語義化？
<基本上都是圍繞著幾個主要的標籤，像標題（ H1~H6 ）、列表（ li ）、強調（ strong em ）等等 >
??根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。
(2)為什麼要語義化？
為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構 : 為了裸奔時好看；
使用者體驗：例如title、 alt 用於解釋名詞或解釋圖片資訊、 label 標籤的活用；
有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
(3) 語義化標籤
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用來在頁面中表示一套結構完整且獨立的內容部分
<aslde></aside> SM:主題的附屬資訊 ( 用途很廣，主要就是一個附屬內容 ) ，如果 article 裡面為一篇文章的話，那麼文章的作者以及資訊內容就是這篇文章的附屬內容了
<figure></figure>SM:媒體元素，比如一些視訊，圖片啊等等
<datalist></datalist>
SM:選項列表，與 input 元素配合使用，來定義 input 可能的值
<details></details>
SM:用於描述文件或者文件某個部分的細節 ~ 預設屬性為 open~
ps:配合 summary 一起使用
link和@import的區別?
XML/HTML程式碼
<link rel='stylesheet' rev='stylesheet' href='CSS檔案 ' type='text/css' media='all' />
XML/HTML程式碼
<style type='text/css' media='screen'>
@import url('CSS檔案 ');
</style>
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1： link 是 XHTML 標籤，除了載入 CSS 外，還可以定義 RSS 等其他事務； @import 屬於 CSS 範疇，只能載入 CSS 。
區別2： link 引用 CSS 時，在頁面載入時同時載入； @import 需要頁面網頁完全載入以後載入。
區別3： link 是 XHTML 標籤，無相容問題； @import 是在 CSS2.1 提出的，低版本的瀏覽器不支援。
區別4： ink 支援使用 Javascript 控制 DOM 去改變樣式；而 @import 不支援。
說說你對SVG理解?
SVG可縮放向量圖形（ Scalable Vector Graphics ）是基於可擴充套件標記語言（ XML ），用於描述二維向量圖形的一種圖形格式。 SVG 是 W3C('World Wide Web ConSortium' 即 ' 國際網際網路標準組織 ') 在 2000 年 8 月制定的一種新的二維向量圖形格式，也是規範中的網路向量圖形標準。 SVG 嚴格遵從 XML 語法，並用文字格式的描述性語言來描述影象內容，因此是一種和影象解析度無關的向量圖形格式。 SVG 於 2003 年 1 月 14 日成為 W3C 推薦標準。
特點：
(1)任意放縮
使用者可以任意縮放影象顯示，而不會破壞影象的清晰度、細節等。
(2)文字獨立
SVG影象中的文字獨立於影象，文字保留可編輯和可搜尋的狀態。也不會再有字型的限制，使用者系統即使沒有安裝某一字型，也會看到和他們製作時完全相同的畫面。
(3)較小檔案
總體來講，SVG檔案比那些 GIF 和 JPEG 格式的檔案要小很多，因而下載也很快。
(4)超強顯示效果
SVG影象在螢幕上總是邊緣清晰，它的清晰度適合任何螢幕解析度和列印解析度。
(5)超級顏色控制
SVG影象提供一個 1600 萬種顏色的調色盤，支援 ICC 顏色描述檔案標準、 RGB 、線 X 填充、漸變和蒙版。
(6)互動 X 和智慧化。 SVG 面臨的主要問題一個是如何和已經佔有重要市場份額的向量圖形格式 Flash 競爭的問題，另一個問題就是 SVG 的本地執行環境下的廠家支援程度。
瀏覽器支援：
Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支援 SVG 。
IE8和早期版本都需要一個外掛 - 如 Adobe SVG 瀏覽器，這是免費提供的。
HTML全域性屬性(global attribute)有哪些?
參考資料：MDN: html global attribute或者W3C HTML global-attributes accesskey:設定快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可啟用元素
class:為元素設定類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable: 指定元素內容是否可編輯
contextmenu: 自定義滑鼠右鍵彈出選單內容
data-*: 為元素增加自定義屬性
dir: 設定元素文字方向
draggable: 設定元素是否可拖拽
dropzone: 設定元素拖放型別：
copy, move, link hidden: 表示一個元素是否與文件。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果
id: 元素id，文件內唯一
lang: 元素內容的的語言
spellcheck: 是否啟動拼寫和語法檢查
style: 行內css樣式
tabindex: 設定元素可以獲得焦點，通過tab可以導航
title: 元素相關的建議資訊
translate: 元素和子孫節點內容是否需要本地化
sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 請求之間儲存資料。有了本地資料，就可以避免資料在瀏覽器和伺服器間不必要地來回傳遞。
sessionStorage、 localStorage 、 cookie 都是在瀏覽器端儲存的資料，其中 sessionStorage 的概念很特別，引入了一個“瀏覽器視窗”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始終存在的資料。也就是說只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後， sessionStorage 即被銷燬。同時“獨立”開啟的不同視窗，即使是同一頁面， sessionStorage 物件也是不同的
cookies會發送到伺服器端。其餘兩個不會。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制為每個域名 50 個，但 IE7 似乎也允許每個域名 50 個 cookie 。 Firefox 每個域名 cookie 限制為 50 個。 Opera 每個域名 cookie 限制為 30 個。 Firefox 和 Safari 允許 cookie 多達 4097 個位元組，包括名（ name ）、值（ value ）和等號。 Opera 許 cookie 多達 4096 個位元組，包括：名（ name ）、值（ value ）和等號。 Internet Explorer 允許 cookie 多達 4095 個位元組，包括：名（ name ）、值（ value ）和等號。
區別：
- Cookie
+ 每個域名儲存量比較小（各瀏覽器不同，大致 4K ）
+ 所有域名的儲存量有限制（各瀏覽器不同，大致 4K ）
+ 有個數限制（各瀏覽器不同）
+ 會隨請求傳送到伺服器
- LocalStorage
+ 永久儲存
+ 單個域名儲存量比較大（推薦 5MB ，各瀏覽器不同）
+ 總體數量無限制
- SessionStorage
+ 只在 Session 內有效
+ 儲存量更大（推薦沒有限制，但是實際上各瀏覽器也不同）
說說你對HTML語義化的理解?
(1)什麼是 HTML 語義化？
<基本上都是圍繞著幾個主要的標籤，像標題（ H1~H6 ）、列表（ li ）、強調（ strong em ）等等 >
??根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）便於開發者閱讀和寫出更優雅的程式碼的同時讓瀏覽器的爬蟲和機器很好地解析。
(2)為什麼要語義化？
為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構 : 為了裸奔時好看；
使用者體驗：例如title、 alt 用於解釋名詞或解釋圖片資訊、 label 標籤的活用；
有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；
方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以意義的方式來渲染網頁；
便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
(3) 語義化標籤
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> SM:用來在頁面中表示一套結構完整且獨立的內容部分
<aslde></aside> SM:主題的附屬資訊 ( 用途很廣，主要就是一個附屬內容 ) ，如果 article 裡面為一篇文章的話，那麼文章的作者以及資訊內容就是這篇文章的附屬內容了
<figure></figure>SM:媒體元素，比如一些視訊，圖片啊等等
<datalist></datalist>
SM:選項列表，與 input 元素配合使用，來定義 input 可能的值
<details></details>
SM:用於描述文件或者文件某個部分的細節 ~ 預設屬性為 open~
ps:配合 summary 一起使用
link和@import的區別?
XML/HTML程式碼
<link rel='stylesheet' rev='stylesheet' href='CSS檔案 ' type='text/css' media='all' />
XML/HTML程式碼
<style type='text/css' media='screen'>
@import url('CSS檔案 ');
</style>
兩者都是外部引用CSS的方式，但是存在一定的區別：
區別1： link 是 XHTML 標籤，除了載入 CSS 外，還可以定義 RSS 等其他事務； @import 屬於 CSS 範疇，只能載入 CSS 。
區別2： link 引用 CSS 時，在頁面載入時同時載入； @import 需要頁面網頁完全載入以後載入。
區別3： link 是 XHTML 標籤，無相容問題； @import 是在 CSS2.1 提出的，低版本的瀏覽器不支援。
區別4： ink 支援使用 Javascript 控制 DOM 去改變樣式；而 @import 不支援。
說說你對SVG理解?
SVG可縮放向量圖形（ Scalable Vector Graphics ）是基於可擴充套件標記語言（ XML ），用於描述二維向量圖形的一種圖形格式。 SVG 是 W3C('World Wide Web ConSortium' 即 ' 國際網際網路標準組織 ') 在 2000 年 8 月制定的一種新的二維向量圖形格式，也是規範中的網路向量圖形標準。 SVG 嚴格遵從 XML 語法，並用文字格式的描述性語言來描述影象內容，因此是一種和影象解析度無關的向量圖形格式。 SVG 於 2003 年 1 月 14 日成為 W3C 推薦標準。
特點：
(1)任意放縮
使用者可以任意縮放影象顯示，而不會破壞影象的清晰度、細節等。
(2)文字獨立
SVG影象中的文字獨立於影象，文字保留可編輯和可搜尋的狀態。也不會再有字型的限制，使用者系統即使沒有安裝某一字型，也會看到和他們製作時完全相同的畫面。
(3)較小檔案
總體來講，SVG檔案比那些 GIF 和 JPEG 格式的檔案要小很多，因而下載也很快。
(4)超強顯示效果
SVG影象在螢幕上總是邊緣清晰，它的清晰度適合任何螢幕解析度和列印解析度。
(5)超級顏色控制
SVG影象提供一個 1600 萬種顏色的調色盤，支援 ICC 顏色描述檔案標準、 RGB 、線 X 填充、漸變和蒙版。
(6)互動 X 和智慧化。 SVG 面臨的主要問題一個是如何和已經佔有重要市場份額的向量圖形格式 Flash 競爭的問題，另一個問題就是 SVG 的本地執行環境下的廠家支援程度。
瀏覽器支援：
Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支援 SVG 。
IE8和早期版本都需要一個外掛 - 如 Adobe SVG 瀏覽器，這是免費提供的。
HTML全域性屬性(global attribute)有哪些?
參考資料：MDN: html global attribute或者W3C HTML global-attributes accesskey:設定快捷鍵，提供快速訪問元素如aaa在windows下的firefox中按alt + shift + a可啟用元素
class:為元素設定類標識，多個類名用空格分開，CSS和javascript可通過class屬性獲取元素
contenteditable: 指定元素內容是否可編輯
contextmenu: 自定義滑鼠右鍵彈出選單內容
data-*: 為元素增加自定義屬性
dir: 設定元素文字方向
draggable: 設定元素是否可拖拽
dropzone: 設定元素拖放型別：
copy, move, link hidden: 表示一個元素是否與文件。樣式上會導致元素不顯示，但是不能用這個屬性實現樣式效果
id: 元素id，文件內唯一
lang: 元素內容的的語言
spellcheck: 是否啟動拼寫和語法檢查
style: 行內css樣式
tabindex: 設定元素可以獲得焦點，通過tab可以導航
title: 元素相關的建議資訊
translate: 元素和子孫節點內容是否需要本地化