一：html規範： 檔案以<!doctype>首行頂格開始，宣告charset
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>NEC：更好的CSS方案</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon" href="img/touchicon.png"/>
</head>
<body>
</body>
</html>
複製程式碼結構順序與視覺設計保持一致，如果便於搜尋引擎抓取可將重要內容在html結構順序上提前，除了表現具有明顯表格形式的資料，不選table佈局 結構，表現，行為三者分離，避免內聯，使用link引入css,放在head中 使用script引入js檔案，放在底部。 保持良好的樹形結構
<body>
<!-- 側欄內容區 -->
<div class="m-side">
<div class="side">
<div class="sidein">
<!-- 熱門標籤 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">熱門標籤</h3> </div>
...
</div>
<!-- 最熱TOP5 -->
<div class="sideblk">
<div class="m-hd3"><h3 class="tit">最熱TOP5</h3> <a href="#" class="s-fc02 f-fr">更多»</a></div>
...
</div>
</div>
</div>
</div>
<!-- /側欄內容區 -->
</body>
複製程式碼在大的模組之間用空行隔開，使模組更清晰。每一個塊級元素都另起一行，每一行都使用Tab縮排對齊（head和body的子元素不需要縮排）。刪除冗餘的行尾的空格。 減少標籤的巢狀，類名越少越好， 結構多時要有 開始註釋：（文案兩頭空格）。 和結束註釋：（文案前加“/”符號，類似標籤的閉合）。 嚴格的巢狀 儘可能以最嚴格的xhtml strict標準來巢狀，比如內聯元素不能包含塊級元素等等。 正確閉合標籤且必須閉合。 嚴格的屬性 屬性和值全部小寫，每個屬性都必須有一個值，每個值必須加雙引號。 沒有值的屬性必須使用自己的名稱做為值（checked、disabled、readonly、selected）。 可以省略style標籤和script標籤的type屬性。 標籤 語義 巢狀常見錯誤 常用屬性（加粗的為不可缺少的或建議的） 常用的標籤:
<a></a> 超連結/錨 a不可巢狀a href,name,title,rel,target
<br /> 換行
<button></button> 按鈕 不可巢狀表單元素 type,disabled
<dd></dd> 定義列表中的定義（描述內容） 只能以dl為父容器，對應一個dt
<del></del> 文字刪除
<div></div> 塊級容器
<dl></dl> 定義列表 只能巢狀dt和dd
<dt></dt> 定義列表中的定義術語 只能以dl為父容器，對應多個dd
<em></em> 強調文字
<form></form> 表單 action,target,method,name
<h1></h1> 標題 從h1到h6，不可巢狀塊級元素
<iframe></iframe> 內嵌一個網頁 frameborder,width,height,src,scrolling,name
<img /> 影象 alt,src,width,height
<input /> 各種表單控制元件 type,name,value,checked,disabled,maxlength,readonly,accesskey
<label></label> 標籤為input元素定義標註 for
<li></li> 列表項 只能以ul或ol為父容器
<link /> 引用樣式或icon 不可巢狀任何元素 type,rel,href
<meta /> 文件資訊 只用於head content,http-equiv,name
<ol></ol> 有序列表 只能巢狀li
<option></option> select中的一個選項 僅用於select value,selected,disabled
<p></p> 段落 不能巢狀塊級元素
<script></script> 引用指令碼 不可巢狀任何元素 type,src
<select></select> 列表框或下拉框 只能巢狀option或optgroup name,disabled,multiple
<span></span> 內聯容器
<strong></strong> 強調文字
<style></style> 引用樣式 不可巢狀任何元素 type,media
<sub></sub> 下標
<sup></sup> 上標
<table></table> 表格 只可巢狀表格元素 width,align,background,cellpadding,cellspacing,summary,border
<tbody></tbody> 表格主體 只用於table
<td></td> 表格中的單元格 只用於tr colspan,rowspan
<textarea></textarea> 多行文字輸入控制元件 name,accesskey,disabled,readonly,rows,cols
<tfoot></tfoot> 表格表尾 只用於table
<th></th> 表格中的標題單元格 只用於tr colspan,rowspan
<thead></thead> 表格表頭 只用於table
<title></title> 文件標題 只用於head
<tr></tr> 表格行 巢狀於table或thead、tbody、tfoot
<ul></ul> 無序列表 只能巢狀li
複製程式碼html應該使內容語義化： 內容型別決定使用的語義標籤， 加強“資源型”內容的可訪問性和可用性 在資源型的內容上加入描述文案，比如給img新增alt屬性，在audio內加入文案和連結。 加強“不可見”內容的可訪問性 背景圖上的文字應該同時寫在html中，並使用css使其不可見，有利於搜尋引擎抓取你的內容，也可以在css失效的情況下看到內容。 使用實體： 常用HTML字元實體（建議使用實體）： 字元 名稱 實體名 實體數
" 雙引號 " "
& &符 & &
< 左尖括號（小於號） < <
> 右尖括號（大於號） > >
空格  
  中文全形空格 　
常用特殊字元實體（不建議使用實體）：
字元 名稱 實體名 實體數
¥ 元 ¥ ¥
¦ 斷豎線 ¦ ¦
© 版權 © ©
® 註冊商標R ® ®
™ 商標TM ™ ™
· 間隔符 · ·
« 左雙尖括號 « «
» 右雙尖括號 » »
° 度 ° °
× 乘 × ×
÷ 除 ÷ ÷
‰ 千分比 ‰ ‰
複製程式碼避免css衝突或被覆蓋，使用行內樣式
<div style="width:100px;height:100px;"></div>
複製程式碼避免盒模型錯誤，doctype的不確定性，doctype影響最大的就是盒模型的解析，將盒模型拆分開來寫，我們將原本要定義在某個div上的height和padding分別寫到這個div和他的父元素或子元素上，
<div style="height:100px;padding:20px 0;"></div>
<div style="padding:20px 0;"><div style="height:100px;"></div></div>
複製程式碼<!DOCTYPE html>
複製程式碼這個文件生命是一個html5的檔案，這個檔案的標籤是符合html5規範的， 前端優化：1：靜態資源，製作雪碧圖，減少請求返回的資料量，壓縮HTML，CSS，JS檔案，小圖示用iconfont代替。 2頁面渲染速度優化：css放在頂端，優先渲染，js放在底部避免阻塞，服務端如果用node的話，使用compress可開啟壓縮， var express = require('express'); var compress = require('compression'); var app = express(); app.use(compress()); vue框架特點：1：mvvm:雙向資料繫結，2：元件化：在vue中所有的都是元件化，3模組化：。 應用：可以用在webapp，spa(單頁面應用) 面試：h5新特性：語義化更好的內容元素，article,footer,header,nav,section,,表單控制元件：calendar,date,time,email,url,search,video,audio, 資料儲存：本地離線儲存資料localstorage長期儲存資料，瀏覽器關閉後不丟失，sessionStorage:儲存的資料，瀏覽器關閉後自動刪除 7,8號 vue元件的封裝，元件懶載入，打包優化 https:是瀏覽器和伺服器建立的加密通道，處理網路中的應用層， 元件懶載入原理：配置webpack,按需引入 模組化將複雜系統分解成單一可管理，解耦成可替換模組，模組之間互不影響，可維護性高 require與import的區別 require是amd規範，import是nodejs規範