doctype(?檔類型)
告知瀏覽器的解析器?什么?檔標(biāo)準(zhǔn)解析這個(gè)?檔<!DOCTYPE HTML>，不同的渲染模式會(huì)影響到瀏覽器對(duì)于 CSS 代碼甚? JavaScript 腳本的解析
- 標(biāo)準(zhǔn)模式(standards mode)：??按照 HTML 與 CSS 的定義渲染
- 怪異模式(quirks mode)模式： 會(huì)模擬更舊的瀏覽器的?為
- 近乎標(biāo)準(zhǔn)(almost standards)模式：會(huì)實(shí)施了?種表單元格尺?的怪異?為（與IE7之前的單元格布局?式?致）九串，除此之外符合標(biāo)準(zhǔn)定義
HTML語(yǔ)義化
語(yǔ)義化從html代碼來(lái)展示頁(yè)面的結(jié)構(gòu)朱监，語(yǔ)義化的優(yōu)點(diǎn)：
- 標(biāo)簽語(yǔ)義化有助于搭建良好的HTML結(jié)構(gòu)饱岸，有助于搜索引擎建立索引和爬取
- 有利于不同設(shè)備的解析闻伶，
- 有利于搭建清晰的代碼結(jié)構(gòu)，有助于團(tuán)隊(duì)開(kāi)發(fā)維護(hù)
H5新增標(biāo)簽
- ==header== 頭部钧舌、頁(yè)眉
- ==footer== 底部流椒、頁(yè)腳
- ==hgroup==
- ==nav== 導(dǎo)航區(qū)域
- ==aside== 主要內(nèi)容的附屬信息部分
- ==section== 文檔中的“節(jié)”或“段”
- ==article== 代表一個(gè)在文檔敏簿，頁(yè)面或者網(wǎng)站中自成一體的內(nèi)容
cookies，sessionStorage 和 localStorage 的區(qū)別
sessionStorage 和 localStorage
- 兩者存儲(chǔ)空間一般都在5M左右，sessionStorage在會(huì)話結(jié)束時(shí)會(huì)主動(dòng)清除惯裕，localstorage則不會(huì)温数，需手動(dòng)清除
- 兩者都有同源策略限制，跨域無(wú)法訪問(wèn)轻猖，sessionStorage有同標(biāo)簽頁(yè)限制
- 數(shù)據(jù)僅在客戶端存儲(chǔ)帆吻，不參與和服務(wù)器通信
- 都是key value形式進(jìn)行存儲(chǔ)，value必須為字符串咙边，如不是則自動(dòng)轉(zhuǎn)換成字符串猜煮，value如果是對(duì)象，需轉(zhuǎn)換成JSON字符串
- 操作方法一直败许，setItem(key, value)增/改王带、removeItem(key)刪、getItem(key)查市殷、xxxStorage.clear()清空
cookies
- 存儲(chǔ)大小為4k愕撰，一個(gè)站點(diǎn)最多20個(gè)cookies
- 會(huì)通過(guò)http請(qǐng)求參與服務(wù)端的通信
- cookie可以設(shè)定會(huì)話時(shí)間，如不設(shè)置醋寝，則默認(rèn)瀏覽器窗口關(guān)閉清除
- Cookie設(shè)置中有個(gè)HttpOnly參數(shù)搞挣，前端瀏覽器使用document.cookie是讀取不到HttpOnly類型的Cookie的
項(xiàng)目經(jīng)驗(yàn)
- 小程序跳轉(zhuǎn)到一個(gè)頁(yè)面，保存之后goback音羞，但無(wú)法傳參囱桨，可以利用本地存儲(chǔ)來(lái)處理
DOM事件
事件處理程序
- HTML事件處理程序 - 通過(guò)HTML標(biāo)簽屬性，如<p onclick='dosomethind()'></p>
- DOM0事件處理程序 - 將事件處理放入js總嗅绰，如document.getElementById("#btn").onclick = function(){...}
- DOM1事件處理成 - 采用addEventListenter綁定事件舍肠，相同方法會(huì)覆蓋
事件流機(jī)制
即元素從頁(yè)面接收事件的順序，也即事件在頁(yè)面的傳播順序
事件捕獲和事件冒泡
- addEventListener的第三個(gè)參數(shù)窘面，當(dāng)為true時(shí)翠语，捕獲，false時(shí)财边，冒泡
- ==事件捕獲==：捕獲階段事件是由上向下依次觸發(fā)
- ==冒泡階段==：冒泡階段事件是由下向上依次觸發(fā)
- 項(xiàng)目經(jīng)驗(yàn)：上傳組件上方的浮層肌括，可以利用冒泡實(shí)現(xiàn)重新上傳功能
事件對(duì)象
標(biāo)準(zhǔn)的Event對(duì)象主要有6個(gè)：
- bubbles 布爾值，表示事件是否是冒泡類型
- cancelable 布爾值酣难，表示事件是否可以取消默認(rèn)動(dòng)作
- currentTarget 當(dāng)前目標(biāo)元素们童，即添加當(dāng)前事件處理程序的元素
- target 實(shí)際目標(biāo)元素，即實(shí)際觸發(fā)事件的元素
- type 返回當(dāng)前事件的名稱
- eventPhase 事件傳播的當(dāng)前階段鲸鹦，1表示捕獲階段
currentTarget VS target
- ==target==: 在事件的目標(biāo)階段，指向被單擊的對(duì)象
- ==currentTarget==: 在事件流捕獲跷跪、目標(biāo)及冒泡階段馋嗜，只有在目標(biāo)階段，兩者相同吵瞻，指向當(dāng)前事件的活動(dòng)對(duì)象(一般為父級(jí))
標(biāo)準(zhǔn)Event對(duì)象的方法主要有以下幾個(gè)
- preventDefault 通知瀏覽器不要執(zhí)行該事件的默認(rèn)動(dòng)作葛菇，如阻止默認(rèn)跳轉(zhuǎn)甘磨、表單提交等標(biāo)簽?zāi)J(rèn)行為
2.stopPropagation 冒泡階段下，阻止事件繼續(xù)向上冒泡
事件委托
事件委托其實(shí)就是利用冒泡事件機(jī)制眯停，針對(duì)多子元素綁定事件的處理方式济舆，采用父級(jí)綁定，利用target獲取到子元素并響應(yīng)事件
優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)概述
- ==優(yōu)雅降級(jí)==是一開(kāi)始針對(duì)高版本瀏覽器構(gòu)建完整功能莺债，然后針對(duì)低版本瀏覽器進(jìn)行兼容
- ==漸進(jìn)增強(qiáng)==是一開(kāi)始針對(duì)低版本瀏覽器構(gòu)建滋觉，保證功能，然后在針對(duì)高級(jí)瀏覽器追加效果達(dá)到更好的用戶體驗(yàn)
SEO優(yōu)化(搜索引擎優(yōu)化)
- 合理設(shè)置title齐邦、description椎侠、keywords
- HTML語(yǔ)義化，如H1可以放置網(wǎng)站重點(diǎn)內(nèi)容
- meta:robots 標(biāo)簽措拇，==<meta name="robots" content="index,follow,archive">==
- canoncial 和 alternate 標(biāo)簽
- <link rel="canoncial" href="www.shop.com/goods/xxxx" /> 提升完全相同或高度相似的網(wǎng)頁(yè)的權(quán)重
- <link rel="alternate" media="only screen and (max-width: 750px)"/> 針對(duì)750px的訪問(wèn)另一個(gè)網(wǎng)址我纪，適用于移動(dòng)端跳轉(zhuǎn)
- robots.txt
- sitemap
iframe有那些缺點(diǎn)
- iframe會(huì)阻塞主頁(yè)面的onload事件
- 相同域iframe和主頁(yè)面共享http連接池，多個(gè)相同域的iframe會(huì)阻塞加載
- 解決方案：主頁(yè)面加載完再去動(dòng)態(tài)生成iframe
- iframe對(duì)seo不友好
iframe跨域通信
postMessage
quoteWindow.postmessage(data, origin, [transfer])
- quoteWindow 數(shù)據(jù)接收方丐吓，常用為父級(jí)主頁(yè)面浅悉，window.parent
- data 需要發(fā)送的數(shù)據(jù)，它將會(huì)被結(jié)構(gòu)化克隆算法序列化
- origin 表示哪些窗口可以接收券犁，*表示不受限制术健，URL地址表示只有該URL地址能接收事件
- transfer 可選參數(shù)，高級(jí)用法族操，是一串和message 同時(shí)傳遞的 Transferable 對(duì)象. 這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方苛坚，而發(fā)送一方將不再保有所有權(quán)
接收方
window.addEventListener('message',e=>{
// 有三個(gè)重要屬性
// origin 表示發(fā)送消息的窗口源
// data 表示發(fā)送消息的數(shù)據(jù)
// source 表示對(duì)發(fā)送消息窗口的引用，可以用此來(lái)向發(fā)送消息的窗口返回?cái)?shù)據(jù)
})
onload和domcontentloaded
- onload 當(dāng)頁(yè)面 DOM 結(jié)構(gòu)中的 js色难、css泼舱、圖片，以及 js 異步加載的 js枷莉、css 娇昙、圖片都加載完成之后，才會(huì)觸發(fā) load 事件
- DOMContentLoaded 事件在 html文檔加載完畢笤妙，并且 html 所引用的內(nèi)聯(lián) js冒掌、以及外鏈 js 的同步代碼都執(zhí)行完畢后觸發(fā)
- 頁(yè)面中引用的js 代碼如果有異步加載的 js、css蹲盘、圖片股毫，是會(huì)影響 load 事件觸發(fā)的。
- video召衔、audio铃诬、flash 不會(huì)影響 load 事件觸發(fā)
HTML文檔的加載與頁(yè)面的首次渲染
- 瀏覽器首選下載該地址所對(duì)應(yīng)的html頁(yè)面
- 瀏覽器解析html頁(yè)面的DOM結(jié)構(gòu)
- 開(kāi)啟下載線程對(duì)文檔中的所有資源按優(yōu)先級(jí)排序下載
- 主線程繼續(xù)解析文檔，到達(dá)head節(jié)點(diǎn)，head里的外部資源無(wú)非是外鏈樣式表和外鏈js
- 解析到body
- 只有DOM元素
- DOM數(shù)構(gòu)建完趣席，頁(yè)面首次渲染
- 有DOM元素兵志、外鏈js
- 當(dāng)解析到外鏈js的時(shí)候，該js尚未下載到本地宣肚，則js之前的DOM會(huì)被渲染到頁(yè)面上想罕，同時(shí)js會(huì)阻止后面的DOM的構(gòu)建，即后面的DOM節(jié)點(diǎn)并不會(huì)添加到文檔的DOM樹(shù)中霉涨，所以按价，js執(zhí)行完之前，我們?cè)陧?yè)面上看不到該js后面的DOM元素
- 有DOM元素嵌纲、外鏈js
- 外鏈css不會(huì)影響css后面的DOM構(gòu)建俘枫，但是會(huì)阻礙渲染，簡(jiǎn)單點(diǎn)說(shuō)逮走，外鏈css加載完之前鸠蚪，頁(yè)面還是白屏
- 有DOM元素料身、外鏈js樊破、外鏈css
- 外鏈js和外鏈css的順序會(huì)影響頁(yè)面渲染，當(dāng)body中js之前的外鏈css未加載完之前隅熙，頁(yè)面是不會(huì)被渲染
- 當(dāng)body中js之前的外鏈css加載完之后墓臭，js之前的DOM樹(shù)和css合并渲染樹(shù)蘸鲸，頁(yè)面渲染出該js之前的DOM結(jié)構(gòu)
- 文檔解析完畢，頁(yè)面渲染窿锉，但是頁(yè)面引用的所有js同步代碼執(zhí)行完畢酌摇，廚房DOMContentLoaded事件
- html文檔中的圖片資源、js代碼中有的異步加載的css嗡载、js窑多、圖片資源都加載完畢之后，load事件觸發(fā)
src和href的區(qū)別
- src 是指向外部資源的位置洼滚，指向的內(nèi)容會(huì)嵌入到文檔當(dāng)前標(biāo)簽所在的位置埂息，如css、js腳本遥巴、img等
- href 是指向網(wǎng)絡(luò)資源所在的位置(的超鏈接)千康，如<a href='xxx'></a>
img的srcset和sizes
script標(biāo)簽中defer和async的區(qū)別
- defer 瀏覽器指示腳本在文檔被解析后執(zhí)行，script被異步加載后并不會(huì)立即執(zhí)行铲掐，而是等待文檔被解析完畢后執(zhí)行
<script type="text/javascript" src="x.min.js" defer="defer"></script>- defer只適用于外聯(lián)腳本拾弃，如果script標(biāo)簽沒(méi)有指定src屬性，只是內(nèi)聯(lián)腳本摆霉，不要使用defer
- 如果有多個(gè)聲明了defer的腳本砸彬，則會(huì)按順序下載和執(zhí)行
- defer腳本會(huì)在DOMContentLoaded和load事件之前執(zhí)行
- async 同樣是異步加載腳本颠毙，區(qū)別是腳本加載完畢后立即執(zhí)行，這導(dǎo)致async屬性下的腳本是亂序的砂碉，對(duì)于script又先后依賴關(guān)系的情況，并不適用
<script type="text/javascript" src="x.min.js" async="async"></script>- 只適用于外聯(lián)腳本刻两，這一點(diǎn)和defer一致
- 如果有多個(gè)聲明了async的腳本增蹭，其下載和執(zhí)行也是異步的，不能確保彼此的先后順序
- async會(huì)在load事件之前執(zhí)行磅摹，但并不能確保與DOMContentLoaded的執(zhí)行先后順序
data-屬性
HTML的數(shù)據(jù)屬性滋迈，用于將數(shù)據(jù)存儲(chǔ)在標(biāo)準(zhǔn)的HTML元素中作為額外信息，可以通過(guò)js訪問(wèn)户誓，xxx.getAttribute("data-xxxx")
meta標(biāo)簽
name
name屬性主要用于描述網(wǎng)頁(yè)饼灿，比如網(wǎng)頁(yè)的關(guān)鍵詞、敘述等帝美，與之對(duì)應(yīng)的屬性值為content碍彭，content中的內(nèi)容是對(duì)name填入類型的具體描述，便于搜索引擎抓取悼潭。
<meta name="參數(shù)" content="具體的描述" >
| 參數(shù) | 描述 |
|---|---|
| keywords(關(guān)鍵詞) | 網(wǎng)頁(yè)關(guān)鍵詞庇忌，<meta name="keywords" content="Lxxyx,博客，文科生舰褪，前端">
|
| description(網(wǎng)站內(nèi)容的描述) | <meta name="description" content="文科生皆疹，熱愛(ài)前端與編程。目前大二占拍，這是我的前端博客"> |
| viewport(移動(dòng)端的窗口) | meta name="viewport" content="width=device-width, initial-scale=1"> |
| robots(定義搜索引擎爬蟲(chóng)的索引方式)) | robots用來(lái)告訴爬蟲(chóng)哪些頁(yè)面需要索引略就，哪些頁(yè)面不需要索引。content的參數(shù)有all,none,index,noindex,follow,nofollow晃酒。默認(rèn)是all表牢。<meta name="robots" content="none">
|
| author(作者) | <meta name="author" content="Lxxyx,80530@qq.com"> |
| copyright(版權(quán)) | <meta name="copyright" content="Lxxyx"> |
| revisit-after(搜索引擎爬蟲(chóng)重訪時(shí)間) | 如果頁(yè)面不是經(jīng)常更新，為了減輕搜索引擎爬蟲(chóng)對(duì)服務(wù)器帶來(lái)的壓力掖疮，可以設(shè)置一個(gè)爬蟲(chóng)的重訪時(shí)間初茶。<meta name="revisit-after" content="7 days" >
|
| renderer(雙核瀏覽器渲染方式) | <meta name="renderer" content="webkit">//默認(rèn)webkit內(nèi)核 <meta name="renderer" content="ie-comp"> //默認(rèn)IE兼容模式 <meta name="renderer" content="ie-stand"> //默認(rèn)IE標(biāo)準(zhǔn)模式 |
http-equiv
<meta http-equiv="參數(shù)" content="具體的描述">
- content-Type(設(shè)定網(wǎng)頁(yè)字符集)
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦
<meta charset="utf-8"> //HTML5設(shè)定網(wǎng)頁(yè)字符集的方式浊闪，推薦使用UTF-8```
- X-UA-Compatible(瀏覽器采取何種版本渲染當(dāng)前頁(yè)面)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當(dāng)前頁(yè)面
- cache-control(指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制)
- 用法1
<meta http-equiv="cache-control" content="no-cache">- no-cache: 先發(fā)送請(qǐng)求恼布，與服務(wù)器確認(rèn)該資源是否被更改，如果未被更改搁宾，則使用緩存折汞。
- no-store: 不允許緩存，每次都要去服務(wù)器上盖腿，下載完整的響應(yīng)爽待。（安全措施）
- public : 緩存所有響應(yīng)损同，但并非必須。因?yàn)閙ax-age也可以做到相同效果
- private : 只為單個(gè)用戶緩存鸟款，因此不允許任何中繼進(jìn)行緩存膏燃。（比如說(shuō)CDN就不允許緩存private的響應(yīng)）
- maxage : 表示當(dāng)前請(qǐng)求開(kāi)始，該響應(yīng)在多久內(nèi)能被緩存和重用何什，而不去服務(wù)器重新請(qǐng)求组哩。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒
- 用法2
- 用于禁止當(dāng)前頁(yè)面在移動(dòng)端瀏覽時(shí)，被百度自動(dòng)轉(zhuǎn)碼处渣。雖然百度的本意是好的伶贰，但是轉(zhuǎn)碼效果很多時(shí)候卻不盡人意。所以可以在head中加入例子中的那句話罐栈，就可以避免百度自動(dòng)轉(zhuǎn)碼了
<meta http-equiv="Cache-Control" content="no-siteapp" />
- expires(網(wǎng)頁(yè)到期時(shí)間) 用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間黍衙，過(guò)期后網(wǎng)頁(yè)必須到服務(wù)器上重新傳輸
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
- refresh(自動(dòng)刷新并指向某頁(yè)面) - 網(wǎng)頁(yè)將在設(shè)定的時(shí)間內(nèi)，自動(dòng)刷新并調(diào)向設(shè)定的網(wǎng)址
<meta http-equiv="refresh" content="2荠诬；URL=http://www.lxxyx.win/"> //意思是2秒后跳轉(zhuǎn)向我的博客
- Set-Cookie(cookie設(shè)定) - 如果網(wǎng)頁(yè)過(guò)期琅翻。那么這個(gè)網(wǎng)頁(yè)存在本地的cookies也會(huì)被自動(dòng)刪除
<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具體范例
img的srcset和sizes
H5中img有2個(gè)新屬性，srcset浅妆、sizes望迎，主要作用：
- 控制響應(yīng)式圖片，根據(jù)屏幕大小來(lái)選擇顯示不同圖片
- 根據(jù)屏幕的不同(視網(wǎng)膜屏還是普通屏)凌外，展示不同質(zhì)量的圖片辩尊，合理控制下載資源
srcset
- 格式一：圖片源地址 空格 圖片像素寬度[, 圖片源地址 空格 圖片像素寬度, ...]，如
srcset="1.jpg 580w, 2.png 618w"
千萬(wàn)注意：描述圖片的像素寬度是用'w'單位康辑，且一定要是圖片的真實(shí)像素寬度摄欲，如果私自改動(dòng)，那么會(huì)影響瀏覽器對(duì)圖片的選擇疮薇！
表示圖片1.jpg的像素寬度為580px胸墙，圖片2.png的像素寬度為618px，兩個(gè)圖片源之間用逗號(hào)隔開(kāi)
- 格式二：圖片源地址 空格 屏幕像素密度[, 圖片源地址 空格 屏幕像素密度, ...]按咒，如
srcset="1.jpg 1x, 2.png 2x"
表示圖片1.jpg為DPR為1時(shí)下顯示的圖片迟隅；2.png為DPR為2時(shí)顯示的圖片，如果沒(méi)有更大的DPR設(shè)置的圖片源励七，那么當(dāng)大于當(dāng)前設(shè)置的DPR最高值時(shí)智袭，會(huì)采用當(dāng)前設(shè)置的最大DPR的圖片源。如這里如果屏幕DPR為3掠抬，那么還是會(huì)用2.png吼野。
sizes
只有當(dāng)設(shè)置了srcset，且單位為w時(shí)两波，sizes的設(shè)置才會(huì)起效瞳步。
srcset中設(shè)置的圖片像素寬度（'w'的值）闷哆，組成了相應(yīng)的半開(kāi)半閉區(qū)間(a, b]。 圖片的顯示寬度（sizes規(guī)定的值）看落在哪個(gè)區(qū)間內(nèi)单起，取區(qū)間中最大值對(duì)應(yīng)的圖片抱怔。若沒(méi)有最大值（如∞），則取上個(gè)區(qū)間最大值嘀倒。
<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w", sizes="300px">
上面設(shè)置圖片要顯示成300px（sizes里的值）野蝇，在srcset里的幾個(gè)臨界值中形成了(0, 229px]、(229px, 618px]括儒、(618px, 1000px]、(1000px, ∞]锐想。300px落在了(229px, 618px]中帮寻，取最大值618，因此最終選擇的圖片就是2.png
sizes的語(yǔ)法結(jié)構(gòu)：
[媒體查詢 空格 ]圖片顯示寬度[, [媒體查詢 空格 ]圖片顯示寬], ..., 其余條件寬度值]
sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px"
在屏幕小于等于500px情況下赠摇，圖片顯示成400px寬固逗；在屏幕小于等于900px情況下，圖片顯示成700px寬藕帜；其余情況顯示成1200px寬烫罩。
sizes里的媒體查詢條件順序是很重要的，只要滿足了越靠前的某個(gè)條件洽故，那么后面的條件會(huì)被忽略的
如果sizes屬性沒(méi)有值贝攒，或者在有媒體條件下，其余條件寬度沒(méi)有設(shè)值时甚，那么默認(rèn)是100vw
DPR的影響
<img src="4.jpg" srcset="3.jpg 229w,2.png 618w" sizes="(max-width: 600px) 114px">
srcset里的'w'符號(hào)隘弊，是代表的是圖像的寬度像素，是個(gè)物理像素荒适；sizes里的114px是表示邏輯像素梨熙！在DPR不為1時(shí)，要轉(zhuǎn)化一下像素值才能去區(qū)間里比較刀诬，套用上述規(guī)則咽扇，如在DPR=2時(shí)，把114px轉(zhuǎn)化為物理像素陕壹，即114px * 2 = 228px质欲，用228px去(0, 229px]、(229px, 618px]帐要、(618px, ∞]里做比較把敞，落在了(0, 229px]中，取229px對(duì)應(yīng)的3.jpg
哪?個(gè)標(biāo)簽?zāi)芷鸬礁鷖rcset相似作?
<picture>元素通過(guò)包含零或多個(gè)<source>元素和?個(gè)<img>元素來(lái)為不同的顯示/設(shè)備場(chǎng)景提供圖像版本榨惠。瀏覽器會(huì)選擇最匹配的?<source>元素奋早，如果沒(méi)有匹配的盛霎，就選擇<img>元素的src屬性中的URL。然后耽装，所選圖像呈現(xiàn)在<img>元素占據(jù)的空間中
<picture>
<source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
html5和html4區(qū)別
-
內(nèi)容類型不變
- HTML5的文件擴(kuò)展符（html或.htm）與內(nèi)容類型（text/html）保持不變愤炸。
DOCTYPE聲明變化
HTML4中需要指明是HTML的哪個(gè)版本，HTML5不需要掉奄，只使用<!DOCTYPE html>即可规个。-
指定字符編碼變化
- HTML4：<meta http-equiv=?content-type″ content=?text/html; charset=UTF-8″>
- HTML5:<meta charset=?UTF-8″>
-
可以省略元素的標(biāo)記
- HTML5中很多元素標(biāo)記可以省略
-
具有boolean值的屬性調(diào)整
- 不指定屬性值、屬性名設(shè)定為屬性值姓建、字符串設(shè)為空時(shí)表示屬性值為true
- 不寫該屬性表示屬性值為false
-
新增的結(jié)構(gòu)元素
- section诞仓、artucle、aside速兔、header墅拭、hgroup、footer涣狗、nav谍婉、figure
-
新增的其他元素
- video、audio镀钓、canvas
-
新增的input元素的類型
- email穗熬、url、number丁溅、range唤蔗、DatePickers
