1）、h標簽的使用:
要注意的是，不論任何頁面，h1標簽只能出現一次，它是當前頁面的主標題，權重最高, 所以要慎用 . 一般情況下，如果有關鍵詞的話最好是在h1里面出現.
h2是表示一個段落的標題或者副標題之類的，h2如果連接到seo方面的話，里面可以布置長尾關鍵詞。h3級別更低，可以布置更低段落或者其他。
h1標簽不要出現在h2-h6之后, h標簽是按照等級及重要性來划分，從號~h6, 所以需要h1標簽寫到最前面
H標簽在視覺表現上常常是黑體，但其語法意義與黑體完全不同，不要在頁面上濫用。
2) 、 選擇合適的標簽:
a、多用H5語意化標簽
b、是文字就用p 標簽, 標題用h1~h6, 不要都用div
c 、獲取表單元素時, 多使用form代替div :
如用div:
<div>
<input id="user-name">
<input id="password">
</div>
// 獲取時
<script>
let userName = $('#user-nam').val();
let password = $('#password').val();
</script>
為了獲取兩個表單數據查了兩次DOM. , 假如有10個, 就要查10次, 如果是20個、30 個…… 就對性能有影響了, 特別是在移動端.
如果把div換成form:
<form id="register">
<input name="user-name">
<input name="password">
</form>
// 獲取時:
<script>
let form = document.getElementById('register'),
userName = form['user-name'].value,
password = form.password.value;
</script>
d、其他小細節:
文字加粗用: b/strong(有強調的作用) , 而不用自己手動設置font-weight, 好處是: 以后更改字體只需要設置b/strong的font-family.
3) 、減少iframe數量
使用iframe要注意理解iframe的優缺點
優點
-
可以用來加載速度較慢的內容，例如廣告。
-
安全沙箱保護。瀏覽器會對iframe中的內容進行安全控制。
-
腳本可以並行下載
缺點
-
即使iframe內容為空也消耗加載時間
-
會阻止頁面加載
-
沒有語義
4) 、避免圖片和iFrame等空的Src，空Src會重新加載當前頁面，影響速度和效率。
5) 、盡量避免重設圖片大小。
重設圖片大小是指在html、CSS、JavaScript等中多次重置圖片大小，多次重設圖片大小會引發圖片的多次重繪，影響性能。
6) 、減少Dom節點 Dom節點太多影響頁面的渲染，應盡量減少Dom節點
7) 、減少阻塞
寫在HTML頭部的Js，和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部並使用Link方式引入，避免在HTML標簽中寫Style，Js放在頁面尾部或使用異步方式加載
8) 、 html標簽切勿層層嵌套，影響頁面加載
9)、條件注釋法
IE條件注釋（Conditional comments）是IE瀏覽器私有的代碼，在其它瀏覽器中被視為注釋。
<!--[if IE]>用於 IE <![endif]-->
<!--[if IE 6]>用於 IE6 <![endif]-->
<!--[if IE 7]>用於 IE7 <![endif]-->
<!--[if IE 8]>用於 IE8 <![endif]-->
<!--[if IE 9]>用於 IE9 <![endif]-->
<!--[if gt IE 6]> 用於 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用於 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用於 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用於 IE9 以下版本<![endif]-->
<!--[if !IE 8]> -->用於非 IE <!-- <![endif]-->
gt : greater than，選擇條件版本以上版本，不包含條件版本 > lt : less than，選擇條件版本以下版本，不包含條件版本 < gte : greater than or equal，選擇條件版本以上版本，包含條件版本>= lte : less than or equal，選擇條件版本以下版本，包含條件版本 <= ! : 選擇條件版本以外所有版本，無論高低
*只有IE瀏覽器認識條件注釋、其它瀏覽器會跳過
如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--[if gt IE 6]>
<style>
body{
background:lightblue;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<script type="text/javascript">
alert("您的瀏覽器Out了，請下載更新。");
</script>
<![endif]-->
</head>
<body>
<!--[if gt IE 6]>
<h2>大於IE6版本的瀏覽器</h2
<![endif]-->
</body>
</html>