网站的权重决定了自然排名,搜索引擎优化的是权重,语义化是搜索引擎优化的一部分
1.代码风格,良好的缩进
2.合理的标签嵌套
(1)行内元素不允许包含块状元素
(2)p、h1-6 可包含行内元素,和文本信息,但不要包含块元素
(3) dl元素只允许包含dd 、dt ,不要包含块元素
(4)不建议form包含input元素
3.合理的标签语义
4.页面的title 以及 meta 标签
5.h1 - h6 对应各级标题
6.img加alt 以及 title
css相关
用中划线
css显示顺序 显示属性 display float position等
自身属性 width background等
文本属性 fontsize lineheight text-align等
js相关:
驼峰命名法
等号左右加空格等规范
伪元素
:after 和 :before 不用添加新标签,就可以添加内容
图片预加载: loading... 加载中 提高用户体验
例如
let arrImg = []
arrImg.push('图片1路径')
arrImg.push('图片2路径')
arrImg.push('图片3路径')
arrImg.push('图片4路径')
arrImg.push('图片5路径')
let demo = document.querySelector('#demo')
let nowNum = 0 //记录当前是第几张
for(let i=0;i<arrImg.length;i++){
nowNum += 1
let newImg = new Image()
newImg.onload = frunction(){
newImg.src = arrImg[i]
demo.innerHTML = nowNum/arrImg.length
}
}
这样就告诉给了用户,当前加载到哪儿了
按需加载(图片懒加载)
<div class="act">
<img src="" alt="" data-src="D:\桌面\jz.png">
</div>
<button>dianji</button>
let btn = document.querySelectorAll('button')
let box = document.querySelector('.act')
btn[0].onclick = function(){
box.children[0].src = box.children[0].dataset.src
console.log(box.children[0].dataset.src)
}
当发送Ajax请求的时候,也可使用懒加载来请求数据
对dom的值进行缓存、事件绑定(使用dom2级绑定事件)、事件委托
函数缓存