HTML静态页面引用公共的头部和底部(目前亲测的几种静态页面方法)

这里不提iframe,主要因为设计网页相对比较困难,占用线程较多,速度慢,而且也不利于搜索引擎的对头尾的收录

方法一:通过load()函数,分别引入公共头部和底部文件;

header.html 顶部页面


    
        
    
    
       

头部

footer.html 底部页面


    
    
       
   
index.html 正文页面



    
    

正文部分

注意
load函数里最好不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,我这里是用域名来解决的

方法二:实现

方法三:HTML5 中的 标签

注意:
方法二和方法三必须设置宽和高,高必须固定,设置auto会出现页面显示不完整的情况。(亲测方法三会出现滚动条)。个人认为方法一在静态页面中的使用比较合适

你可能感兴趣的:(html,javascript)