HTML雜貨鋪

時間  2019-12-19
標籤 html 貨鋪 欄目 HTML 简体版
原文   原文鏈接

一：HTML文檔的基本結構

HTML的基本結構包括四個HTML元素，分別是DOCTYPE，html,head和body,任何文檔都須要這四個元素javascript

<!DOCTYPE html> //文檔類型聲明，有助於肯定瀏覽器的渲染模式
<html> //根元素，HTML部分的開始
	<head> //包含文檔的元數據
	</head>
	<body>//包含文檔的內容
	</body>
</html>
複製代碼

二：HTML5的新特性：

  (1):語義化的Web,讓人和計算機更容易理解
  (2):削弱對第三方插件的依賴，以往播放音頻或視頻須要藉助Flash,如今HTML5已支持多媒體。
  (3):更豐富的應用，涵蓋各方面。包括如下幾種：
      1):新增繪圖元素canvas,可直接操做圖片，製做遊戲和動態廣告特效等
      2):擴展JavaScript API,例如Web存儲，地理定位，拖放，操縱歷史瀏覽記錄和讀取文件等
      3):建立離線Web程序，解決無網絡時沒法使用Web應用的狀況
      4):引入WebWorkers規範，解決Web應用愈來愈複雜的計算
 (4):引入多種類型的新元素，例如構建文檔的元素article,figure,header等，標識文本的元素mark,wbr等
css

三：HTML和HTML5的區別有哪些？

答案：HTML和HTML5主要有一下區別：
(1):舊版的HTML比較依賴瀏覽器的插件，例如Flash等
(2):因爲HTML5再也不基於SGML，因此文檔聲明類型(DOCTYPE)只有一種
(3):HTML5消除了過期或者冗餘的元素，例如font,center
(4):HTML5新增了許多語義化的元素(例如article,header等)和新功能(例如video,canvas等)提供了更好的平臺支持
(5):HTML5制定了新的全局屬性和元素屬性，全局屬性有draggable,contenteditable等，元素屬性有accept,placeholder
html

DOCTYPE用於聲明文檔類型和DTD(Document Type Definition)規範，確保不一樣瀏覽器以相同的方式解析文檔，以及執行相同的渲染方式。DTD就是文檔定義類型，一種標記符的語法規則，保重SGML和XML文檔格式的合法性
故屬於HTML5的DTD爲：<!DOCTYPE html>java

四：HTML與XHTML的區別

(1):XHTML中的元素要合理嵌套<p><span></span></p>這個就是不合理的嵌套
(2):XHTML中元素名稱是區分大小的，且元素名稱和屬性要小寫，DIV和div是不一樣的
(3):XHTML中全部的元素都是須要結束標籤的，空元素能夠用一個標籤表示，可是要用 "/>"來結束，沒有結束標籤是會報錯的
(4):XHTML中能夠混合各類XML應用，例如MathML(數學標記語言)，SVG(可縮放的矢量圖形)
(5): XHTML中，註釋標籤<!-- -->中的內容會被省略
(6): XHTML文檔內的CDATA中的內容能夠被執行，CDATA的做用是防止XML解析到非法字符(例如<,&等)就中斷
(7): 在XHTML1.0中，不推薦使用a,applet,form,frame,iframe,img,map等，可是若是加了也不會報錯
(8): 在HTML中用腳本讀取的HTML標籤名和屬性名會以大寫形式返回，而XHTML1.0則是小寫
(9): 在XHTML文檔中，元素的屬性值須要引號包裹起來，而且禁止屬性簡化。
(10): 在XHTML中，有些特殊字符必須被替換爲實體引用，例如將"<"替換爲"&lt;"
如下元素的寫法哪些不符合XHTML1.0的規範（）
A:<P>打開文本框</p>
B:<buton name="add">提交</button>
C:<a href="javascript:;">跳轉首頁</a>
D:<p>電腦<b><i>必須</b></i>重啓</p>
jquery

五：語義化

你是如何理解HTML語義化的
(1):HTML5中的語義化就是讓元素，屬性或屬性值有含義，更準確的標記特定類型的內容。
(2):對元素語義化的目的是爲了讓元素的語義和呈現分離，元素只負責文檔內容的結構與含義，而CSS樣式控制內容的呈現，像b元素，沒有語義但能將字體變粗，這類元素就違背了語義化的目的，它是會被捨棄的
語義化的優點有如下三點：
(1):良好的語義使得HTML文檔結構清晰，佈局合理，主體突出，可讀性更強
(2):促進無障礙訪問，下降信息污染，幫助殘障人士的輔助設備(如屏幕閱讀器等)識別元素含義，作出正確反饋
(3):改善搜索引擎優化(SEO),通過語義化的HTML能提供豐富的上下文信息和內容的含義，讓爬蟲能更容易地分析內容，區分類型以及對內容進行索引。
HTML實體的應用場景有哪些？
若是要在HTML文檔中顯示特殊字符(例如"<"，">"等 )，那麼就可使用HTML實體。HTML實體還能預防XSS(跨站腳本攻擊)攻擊。XSS一般會將腳本嗲嗎注入到HTML文檔中，再解析執行。但使用HTML實體後，就可讓相關代碼只打印，而不執行。web

六：微格式

微格式是一種數據結構化技術，經過添加屬性(class或rel)和元數據(link元素)的方式來實現Web的語義化，讓內容適合人類閱讀，也容易被計算機處理
rel屬性：rel屬性用來描述兩個文檔之間或者文檔和資源之間的關係，link和a元素都有這個屬性，代碼解釋：
算法

<link rel="stylesheet" href="styles/style.css"/>//定義外部樣式
<link rel="apple-touch-icon" href="app-touch-icon.png" />//用於關聯iOS的桌面快捷圖標
a元素的rel屬性表示一種連接關係，下面的代碼表示將會連接到做者的信息
<a href="info.html" rel="author">M</a>
複製代碼

七：元素分類

1：基本類型:虛元素，原始文本元素，可轉義的原始文本元素，外部元素和普通元素
2：盒類型分類:分爲塊級元素和行內元素
3：功能分類
chrome

八：屬性分類：

1：全局屬性：所有元素都能使用的屬性
   1):HTML4原有的全局屬性：accesskey,class,dir,hidden,id,lang,style,tabindex,title;
   2):HTML5新增的全局屬性：contenteditable,contextmenu,draggable,dropzone,spellcheck;
   3):ARIA屬性，即無障礙網頁應用屬性，也是一種全局屬性
   4):事件屬性(event attribute),都是以 "on"爲前綴，例如onclick,onmousedown
   5):自定義屬性(data-attribute),一般以 "data-"爲前綴
2：局部屬性：本身運用再某些特定元素的屬性，例如form的action屬性，textarea的row屬性
canvas

布爾屬性：當未設值時，只需將屬性名寫在開始標籤；當設置了值時，這個值不能是true或者false，只能是 "checked"或控制。若是要取消選中，那麼只能將這個屬性從標籤中移除，而不能設置爲false.跨域

九：什麼是Shadow DOM（影子中的DOM）?

Shadow Dom是瀏覽器的一種功能，可以自動的添加子元素，例如audio元素在網頁中能使用進度條，音量控制等功能，而這些元素都是由瀏覽器自動生成的
<audio controls src="test.wav"</audio>
元素屬性的src和href的區別在哪裏？
二者的功能不一樣。href可以創建一條通道，將當前文檔和定義的資源連接起來。src是將定義的資源嵌入到固然文檔中。
img元素中的title和alt屬性有何區別
title是全局屬性，提供額外的提示信息，當鼠標滑動到該元素時，顯示定義的提示。link和style元素中的title比較特殊，表示樣式表的名稱；alt是局部屬性，只能用在img,input等元素中，提供在圖片未載入或者加載失敗時的替代文本。注意，只有當input元素的type屬性未image時才能使用alt屬性

十：應用CSS樣式：

內聯樣式： <p color="red">我好累哦</p> 內嵌樣式：

<style>
  p{
      color:red;
  }
</style>
複製代碼

注意：style元素除了擁有全局屬性外，還擁有四個特殊的屬性：type,media,title,scoped。其中scoped是布爾屬性，用來定義樣式的應用範圍，若是該屬性存在，那麼樣式只能應用於其父輩元素。
外部樣式：外部樣式可用link元素引用

方式 權重 HTTP請求 重用範圍 文檔大小 僞類與僞元素
內聯樣式 最高 無 不可重用 增長 不可定義
內嵌樣式 同外聯樣式 無 當前頁面 增長 可定義
外聯樣式 同內嵌樣式 有 整個項目 保持 可定義

十一：嵌入JavaScript

方式 內容和行爲 HTTP請求 重用範圍 文檔大小 特色
內聯腳本 耦合 無 當前文檔 增長 將內聯腳本放在外部樣式表以後，會延遲其餘資源的下載
外部腳本 分離 有 整個項目 保持 容易維護，高複用，可用defer或async屬性解決頁面阻塞問題
元素屬性 耦合 無 不可重用 增長 兩種定義方式：分別是事件屬性和在連接屬性使用特殊僞協議和URL。不但能製做可執行的JavaScript的瀏覽器書籤，還能用a元素模擬按鈕的效果

HTML解析遇到script元素，會先執行腳本，再回覆文檔的解析和渲染，默認狀況下腳本的執行是同步和阻塞的，所以不少時候都會推薦將腳本放置在緊鄰</body>的位置
爲了解決阻塞的問題，script元素新增了兩個布爾屬性，分別是延遲(defer)和異步(async)

<script src="scripts/jquery.js" defer></script>
<script src="scripts/jquery.js" async></script>
複製代碼
屬性 做用 執行順序 做用內聯腳本
defer 延遲腳本執行，直到文檔解析完成 有序 否
async 儘快執行腳本，不會阻塞文檔解析 無序 否

async屬性後的運行機制：HTML文檔的解析和外部腳本的下載是同時進行的，但腳本下載完成後就會開始執行，執行完腳本纔會繼續解析文檔
defer屬性後的運行機制：HTML文檔的解析和外部腳本的下載是同時進行的，但只有當文檔解析完成後，纔會開始執行腳本
元素屬性：
1：事件屬性：事件屬性都是以on爲前綴的
2：特殊協議："javascript:;"    "javascript:void(0);"

十二：meta元素：

每一個meta元素只能有一個用途，若是想要多種用途，就須要添加多個meta元素
meta元素總共有四個屬性：charset,name,http-equiv和content
可是若是你要使用meta屬性，charset,name,http-equiv這三個屬性中必須定義其中一個，但不能同時出現。且若是定義了name或http-equiv,那麼必須定義content屬性，且content屬性不能單獨出現 -----------"你懂沒懂我不知道，但反正我是懂了"
charset:可用於表示HTML文檔中的內容所用的字符編碼（推薦使用UTF-8）

<meta charset="UTF-8"/>
<meta charset="utf-8"/>兩者等價
複製代碼

name:表示文檔級元數據
關鍵字：viewport
主要用於移動設備，可設置瀏覽器中的視口（視口就是不包括瀏覽器外殼（如標籤頁，書籤欄，調試工具等），也就是文檔內容的可視區域）。
http-equiv:用於模擬HTTP的首部，每一個http-equiv屬性值一樣對應特定的content屬性值。在http-equiv屬性中包含三個關鍵字，分別是content-type(已經不推薦使用),default-style.refresh
關鍵字:refresh
指定一個以秒爲單位的時間間隔，執行重載或重定向。若是是重載只需定義描秒數，若是是重定向，須要定義秒數和URL

十三：meta元素能夠定義文檔的哪些元數據呢？

分爲四類；
1):聲明HTML文檔內容所用的字符編碼；
2):完善文檔描述信息，讓搜索引擎更容易解析索引
3):適配移動設備，使頁面在各類尺寸的屏幕中顯示正確
4):指定首選樣式，執行重載或重定向

十四：超連接<a></a>：相關屬性將逐個講解

href:用於定義資源的URL，href的三種狀況：
1):缺省---不在a元素中聲明href屬性時，該元素僅做爲佔位符，失去默認外觀和默認效果等
2):URL
3):錨點---是一種特殊連接，等定位到HTML文檔中的某個特定位置，推薦用id屬性來設置錨點
target:用於指定在何處顯示連接的資源

關鍵字 描述
_self 當前窗口，也是target的默認值
_blank 新窗口
_parent 父窗口，沒有父窗口同_self
_top 頂層窗口，若是已是頂層窗口，與_self相同

其餘屬性

屬性 描述
download H5 新增，與href組合使用，兼容性差
hreflang 連接資源所使用的語言，僅僅是提示，沒有特殊功能

a元素除了能夠用於導航外，還有其餘什麼功能呢？
href屬性中的URL能夠是瀏覽器支持的任何協議，由於有這個特色，a元素能夠用於手機撥號，發送短信，發送郵件等功能。發送短信是，可將內容做爲參數直接帶過去；發送郵件時，可將收件人，發件人，主題和內容最爲參數直接帶過去

十五：圖像---img

屬性 描述
src 必須存在的屬性，圖像的URL
alt 當圖像未正確替換的時候，可用這個屬性定義的文字替換顯示
crossorigin 幫助canvas元素可以使用第三方站點的圖像，並且不會污染畫布
usemap 讓圖像關聯區分響應圖

關於畫布污染：所謂的畫布污染就是指不能再使用畫布的toDataURL(),getImageData()等方法。 代碼演示：

<img id="cross" src="http://www.pwstrick.com/avatar.jpg"crossorigin="anonymous"/>
<script>
    window.onload = function(){
        var canvas = document.creatElement("canvas"),
         ctx=canvas.getContext("2d"),
         img=document.getElementById("cross");
        ctx.drawImage(img,0,0);
        //圖像不啓用跨域將不能執行該方法，會拋出安全錯誤
        canvas.toDataURL();
</script>
複製代碼

分區響應圖
將map元素和area元素組合使用時，可建立分區響應圖。這個沒遇到過，有這個需求的時候我再補充吧
插圖元素
HTML5中新增長了兩個與圖像有關的語義化元素：figure和figcaption.這兩個元素都屬於內容分組，二者結合在一塊兒，可用於插入圖像，以及對圖像的描述。代碼演示：

<figure>
   <img src="img/ater.jpg" />
   <figcaption>略略略，2019/10/18</figcaption>
</figure>
複製代碼

十六：嵌入在HTML文檔中的圖像格式有哪些，都有些什麼特色？

格式 透明 壓縮 動畫 顏色數 瀏覽器兼容性 特色
GIF 支持，但不是alpha透明 無損 支持 8位 所有支持 簡單動畫，顏色少，有鋸齒
PNG alpha透明 無損 不支持 8位和24位 IE6不支持 壓縮比高，色彩好，除了動畫，其他方面可替代GIF
JPEG 不支持 有損 不支持 24位 所有支持 存儲照片或顏色豐富的複雜圖像
APNG alpha透明 有損 支持 8位和24位 部分支持 PNG格式的擴展，可替代GIF
WEBP alpha透明 無損和有損 支持 24位 部分支持（chrome,Opera） 更優的圖像數據壓縮算法

十七：用戶數據收集

input元素可根據type屬性的值分爲文本，日期，數值和按鈕等類型
文本：
文本類型的type屬性包括;hidden,text,password,以及HTML5新增的tel,email,search和url,總共七個關鍵字，具體功能如圖所示：

關鍵字 功能
hidden 隱藏元素，可存儲不讓用戶看見和編輯的數據
text 只能輸入單行文本，而且文本中的換行符會自動移除
tel 可輸入電話號碼格式的文本，沒有強制執行特定的驗證機制（電話號碼的規則太多了）
password 遮蓋單行文本，密碼，你懂吧
email 郵箱文本，可驗證
search 搜索字符串的單行文本，無特殊功能，也不會關聯搜索引擎
url 超連接，可是也只檢查協議，不檢查後面的

注意：
tel類型的input元素在移動端可彈出數字鍵，用戶不用切換鍵盤
search類型的input元素在chorme中，會增長一個取消圖標
list屬性用於關聯數據列表，即datalist元素，可用於自動提示
HTML5中有一個新增的全局屬性dir，dir屬性用於規定元素中內容的方向，默認值ltr表示從左向右，rtl表示從右向左

<input type="text" dor="ltr"/>
複製代碼

text和search類型的input元素還有一個比較特別的dirname屬性.定義dirname爲direction，以下所示，GET方式提交表單的時候，就會多一對參數名和數據（也就說說dirname中的direction等同於dir中的ltr）

<input type="text" dir="ltr" dirname="direction"/>
複製代碼

十八：日期與數值

日期類型的type屬性值包括date，datelime-local,month,time,week
這幾種類型的input都擁有相同的屬性，這些屬性中min和max能夠設定一段日期區間，起始日期和截止日期
例如：<input type="data" min="2010/10/10" man="2012/12/12"
數值：規範數值的輸入，既能夠減小後臺驗證，也能夠提高操控效率

十九：按鈕和其餘類

按鈕類型的type屬性值有image,button,submit和reset.其中image類型的按鈕比較特殊，不但擁有圖像相關的屬性，還擁有了HTML5新增的提交相關的6個屬性。

HTML5新增的屬性 表單的屬性
formaction action
formenctype enctype
formmethod method
formtarget target
formnovalidate novalidate
type值 功能
checkbox 選擇是與否的複選框，可選中多個選項
radio 選擇是與否的單選框，只能選中一個選項
color 指定顏色，讀取的顏色用十六進制標記法標記
file 將選擇的文件上傳到服務器中

注：file類型的input元素新增了一個布爾屬性multiple，可選擇多個文件一塊兒上傳。代碼演示：<input type="file" multiple>

二十：給表單控件分組

可用HTML5新增的fieldset元素，將邏輯關聯的表單控件(inout,select)等組織在一塊兒，分別編組，再用legend元素對編的組提供相關說明。

<fieldset>
   <legend>帳戶信息</legend>
   <section>
    <label for="nick">暱稱</label>
    <inout type="text" id="nick"/>
  </section>
  <section>
    <label for="mobile">手機</label>
    <inout type="tel" id="mobile"/>
  </section>
</fieldset>
複製代碼

二十一：元素的布爾屬性disabled和readonly的區別在哪裏？

所謂的元素操做是指讀取，寫入等操做，Tab導航是否能用Tab鍵定位該元素。
用表格的方式對disabled和readonly進行對比

屬性 元素外觀 元素操做 獲取焦點 Tab導航 表單提交 元素支持
disabled 修改 否 否 否 沒有發送數據 input,textarea,option,select和button等元素
readonly 維持 是 是 是 會發送數據 input和textarea

二十二：表格元素

表格元素通常用於呈現二維數據。過去表格還曾被用於頁面佈局，可是如今已經不用了，由於這是一種不規範的開發方式

元素 含義 元素 含義
table 表格 colgroup 表格的一組列
caption 表格的主題 col 表格的一列
thead 表格的表頭 th 表頭的單元格
tbody 表格的主體 td 表格的單元格
tfoot 表格的表腳 tr 表格的行

二十三：元素屬性：

1：表格屬性：HTML5廢棄了table元素的冗餘屬性，還廢棄了控制樣式的屬性。推薦使用CSS來替代
例如align屬性表示表格在文檔中的對齊方式，可使用CSS屬性margin來替代
cellpadding屬性用於指定單元格內邊距，可用css屬性padding替代
cellspacing表示單元格之間的間隙，可用CSS屬性border-spacing替代
2：單元格屬性
單元格元素都有headers屬性,經過定義一個或多個th元素的id屬性來關聯表頭，有助於設備對錶格的處理。還有兩個特殊的屬性：colspan和rowspan.colspan屬性可合併列，rowspan可合併行。

二十四：請列舉表格佈局的弊端

1):可訪問性差。表格佈局中的內容從左到右和從上到下的讀取並不老是有意義，而且還缺少依賴關係。
2):難以實現響應式，一般可用媒體查詢對不一樣設備呈現適合的界面，但表格佈局須要用單元格嵌套表格，而單元格之間的合併要用元素的colspan和rowspan屬性，不能用CSS屬性簡單的設置
3):可維護性差，表格佈局須要使用大量的元素屬性，而且表格之間須要相互嵌套，這使得代碼難以閱讀，特別是若是不縮進，標籤沒有層次感。
4):不夠語義化，表格佈局會用到大量的單元格，
5):加載速度慢，嵌套的表越多，文檔就變得越臃腫，不但會加長網絡傳輸時間，並且會增長渲染時間

二十五：iframe

經過iframe元素能在一個文檔中嵌入另外一個文檔。且這兩個文檔之間是相互獨立的，彼此的JavaScript和CSS都不會影響對方。
iframe屬性
1：seamless:seamless的中文意思是無縫這個布爾屬性可讓jframe元素中引用的文檔成爲父文黨的一部分，是的父文檔中的CSS可以影響子文檔的樣式。兼容性特別差，幾乎沒有瀏覽器支持
2：阻塞父窗口的load時間
3：將script元素放置在iframe以前，會阻塞iframe中資源的請求
4：製造點擊劫持（ClickJacking）,將一個不可見的iframe或包含用戶感興趣內容的iframe覆蓋在文檔的某個位置，誘使用戶點擊iframe中的內容。

二十六：多媒體

HTML5支持直接經過多媒體元素就能在瀏覽器中播放視頻或音頻，不用再依賴Flash插件。
使用多媒體元素的優點：
(1):支持移動設備，可爲智能手機，平板電腦或其餘移動設備提供豐富的觀看體驗
(2):易於定製效果，使用傳統的CSS就能爲多媒體元素設計個性化的視覺體驗
(3):輕鬆實現響應式設計，能在不一樣媒體渲染合適的樣式，呈現最優的界面
(4):語義化的元素，可提供明確的含義，提高文檔的可訪問性。

多媒體元素video
video專門用來播放視頻，這是HTML5中新增的視頻元素

屬性 描述
autoplay 布爾屬性，指定視頻在頁面載入後就能自動播放
preload 是否預先載入視頻，有3個可選關鍵字：none,metadata和auto
controls 布爾屬性，顯示播放控件
loop 布爾屬性，循環播放視頻
muted 布爾屬性，將視頻靜音
poster 指定視頻的封面照
src 視頻的URL地址
widht 視頻寬度，單位像素
height 視頻高度，單位像素

注意：
1):雖然CSS能控制video的寬高，可是video中嵌入的視頻爲了避免變形，會按比例顯示。
2):視頻文件：視頻文件中包含視頻，音頻，字幕和配置等信息，這些內容須要按照必定的規則組織起來，這些規則叫作容器格式。因爲原始視頻和音頻比較巨大，因此須要先用視頻編解碼器和音頻編解碼器壓縮，而後存儲起來，使用的時候在解壓縮
爲了能在各類主流瀏覽器中播放視頻，能夠用source元素指定多個格式，瀏覽器會沿着順序找可以播放的視頻文件

<video>
   <source src="video/a.webm" type="video/webm"/>
   <source src="video/a.ogv" type="video/ogg"/>
   <source src="video/a.mp4" type="video/mp4"/>
   <p>當前瀏覽器不支持HTML5視頻元素</p>
</video>
複製代碼

多媒體元素audio audio專門用來播放音頻

<video>
   <source src="video/a.mp3" type="video/mp3"/>
   <source src="video/a.ogg" type="video/ogg"/>
   <source src="video/a.wav" type="video/wav"/>
   <p>當前瀏覽器不支持HTML5視頻元素</p>
</video>
複製代碼

二十八：除了video和audio元素，HTML5還支持哪些其餘的多媒體元素呢？

HTML5還支持embed和track元素。
embed元素用於嵌入外部資源，例如SVG矢量圖，應用程序或插件等。
track元素是audio和video的子元素，爲多媒體文件添加輔助文本信息，例如字幕，屏幕閱讀器說明和主題等

二十九：繪圖

經過Canvas和SVG兩種圖形技術可讓開發人員基於Web標準，建立圖形相關的交互網站或應用程序。雖然Canvas和SVG都能繪製圖形，但Canvas是基於位圖的圖像，而SVG是基於矢量的圖形
位圖圖像與矢量圖像
位圖圖像：特色是色彩變化豐富，經常使用於數碼照片，頁面效果圖。缺點是無限放大後會看到像素塊，圖像會失真
矢量圖像：與位圖相比，色彩更加簡單，不是很逼真。可是不管是放大仍是縮小或旋轉都不會丟失細節，也不會影響清晰度。

三十：元素canvas

canvas是HTML5新增的元素，該元素建立一個固定大小的畫布，在畫布中能夠繪製要展現的內容。
特色及功能：
1):只能經過JavaScritp腳原本繪製圖形，例如矩形，圓等。
2):若是要爲圖形設置CSS樣式，文本或動畫，那麼也要經過JavaScript來實現
3):canvas元素有很強的圖像操做能力，不但能實現圖像合成與裁剪，還能實現濾鏡的一些效果。
4):每次修改內容，須要將整個畫布從新渲染一次
5):若是在畫布中繪製一個按鈕，不能直接爲這個按鈕添加DOM事件
6):可經過定義canvas元素的內容和ARIA屬性，讓它更具語義化，從而幫助設備瞭解此元素存在的意義和做用
代碼實現：

<canvas id="btnCanvas" role="button" aria-label="嘟嘟嘟嘟" width="200"height="100">
<p>這是一個按鈕，用來啓動</p>
</canvas>
<script> var canvas = document.getElementById("btnCanvas"), ctx = canvas.getContext("2d"); ctx.fillStyle="#007ab9";//矩形背景色 ctx.fillRect(0,0,canvas.width,canvas.height);//繪製矩形 ctx.font="40px serif";//字體設置 ctx.fillstyle="#FFF"//字體顏色 ctx.fillText("dududu",20,60)//繪製文本 </script>
複製代碼

三十一：SVG

與Canvas只能用JavaScript繪圖不一樣，SVG提供了各類類型的元素，包括形狀，文本，漸變，動畫濾鏡等，而且能夠爲每一個元素附加DOM事件，還能用CSS控制他們的樣式，雖然只能使用部分CSS屬性。SVG也能夠插入圖像，執行裁剪，遮罩，旋轉等功能。不過SVG不能像canvas那樣，將處理過的圖形進行輸出。在Canvas中有個toDataURL()方法，能夠將畫布中的內容編碼成字符串形式。

三十二canvas元素用屬性和用CSS設置寬高有什麼區別？

答：可將canvas簡單理解爲兩部分：容器和畫布。css控制的是容器的尺寸，而屬性控制的是畫布的尺寸。繪圖都是在畫布上進行，畫布默認寬高分別爲：300px 150px.以上面的例子爲例，用屬性定義寬高改成用CSS定義寬高。

<canvas width="200" height="100"></canvas>
<canvas style="width:200px;height="100px"></canvas> 複製代碼

因爲畫布的默認尺寸比容器的尺寸大，所以將畫布塞入容器後，能讓畫布內容的清晰度變高，執行代碼後的結果有差別。因爲清晰度變高，所以畫布中的文字變小，而且偏移距離也會作出改變。

Web存儲分爲本地存儲和會話存儲。能夠簡單的把他們看做改進版的Cookie。Web存儲彌補了Cookie的諸多不足

三十二：Cookie

當用戶訪問網站的時候，會發起大量請求，大部分是基於HTTP協議的HTTP請求，而HTTP協議是無狀態的(每一個請求都是獨立的，先後沒有聯繫) 當你每訪問一遍須要後臺驗證的頁面時就得登陸驗證一遍，這樣很麻煩，cookie的出現，解決了這個問題。可是隨着交互的複雜度愈來愈高，Cookie的範圍也就愈來愈有限，許多缺陷也就暴露出來了。例如：
1):Cookie能夠指定過時時間，利用這個特色，能夠將登陸的用戶名和密碼等存儲到Cookie中，下次登錄能夠省去從新登錄。可是若是網站訪問量巨大，就會很影響帶寬。
2):Cookie不適合存儲一些隱私或敏感信息（密碼什麼的），Cookie在網絡中傳遞很容易被劫持，劫持後可僞造請求，執行一些危險操做。CSRF(跨站點請求僞造)就是經過劫持Cookie的方式來進行攻擊的
3):Cookie的大小被瀏覽器限制在4KB左右，只能存儲簡單的信息，不能應對複雜的存儲需求。 若是你們不太理解的話，能夠想象一下，當你填了一份巨長居多的表單，可是啪斷網了，或者叮手賤把瀏覽器不當心關了，填了半個小時的表就這樣沒了Cookie也很難過啊，Cookie說：「我無法啊，你懂的吧，我只是個Cookie，我無法應對這樣複雜的存儲需求」

三十三：Web存儲

Web存儲擁有更大的存儲容量，通常在2.5~10M之間，它不會做爲請求報文中的額外信息傳遞給服務器，所以比較容易實現網頁或應用的離線化。兩種Web存儲使用的時候略有不一樣。
(1):本地存儲永遠不會過時，即便瀏覽器關閉，還會存在，同源的本地存儲能夠共享。
(2):會話存儲只能應用於頁面會話期間，當關閉頁面瀏覽器的時候，會話存儲中的數據就會自動清除。
經過JavaScript中的全局屬性localStorage和sessionStorage，可分別訪問本地存儲和會話存儲。用代碼來展現二者之間的區別。

localStorage.setItem("local","local data");//設置本地存儲
sessionStorage.setItem("session","session data")//設置會話存儲
複製代碼

而後在另外一張頁面child.html中輸出存儲的數據

var local=localStorage.getItem("local")//獲取本地存儲
    session=sessionStorage.getItem("session");//獲取會話存儲
console.log(local);
console.log(session);
複製代碼

userdata userdata是一種持久化存儲方式，即便關了瀏覽器也不會清楚這些數據，但能夠設置失效日期。與上面兩種實現方式不一樣，userData將數據寄存在HTML元素中。

三十四：用什麼方法能夠防止Cookie被盜取

獅吼羣魔蕩
答：Cookie是先由瀏覽器向服務器發起請求，再由服務器響應後回傳Set-Cookie首部(此時可設置HttpOnly屬性)向客戶端瀏覽器寫入Cookie。在給Cookie設置HttpOnly屬性後，就可以禁止頁面的JavaScript訪問這個Cookie,從而避免被盜取。

完結

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程