网站的权重，搜索引擎优化，语义化

网站的权重决定了自然排名，搜索引擎优化的是权重，语义化是搜索引擎优化的一部分

        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级绑定事件)、事件委托

函数缓存