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>