html页面怎么引用通用的头部,html 如何引入一个公共的头部和底部

html 静态页面中引用外部页面没那么方便,主要方法有:

asp语言和PHP语言

首先制作一个头部文件head.asp,或者一个底部文件foot.asp。如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,

标记前面)增加如下代码:

如果是PHP文件,文件名改为 head.php即可

使用框架来实现

以前人们常常使用静态frame框架来做首尾(一般不是iframe)。现在越来越少见了。主要因为设计网页相对比较困难,而且还增加了连接数,占用线程较多,速度慢,而且也不利于搜索引擎的对头尾的收录

使用.js脚本来实现

建立一个head.js的文件,找一个html转js的网站,然后把你头部的html代码转化成js代码,并放在head.js文件里面。然后在需要调用head文件代码的地方添加

这个地方src="js/head.js"的路径是你head.js文件的路径

html转换为JS:

document.writeln(""-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");

document.writeln("");

document.writeln("

");

document.writeln("");

document.writeln("");

document.writeln("

");

document.writeln(" ");

document.writeln("");

document.writeln("

");

document.writeln("

");

document.writeln("    

  • ");

document.writeln("      

Mac");

document.writeln("      

iPhone");

document.writeln("    

");

document.writeln("

");

document.writeln(" ");

document.writeln("");

document.writeln("");

document.writeln("");

以后无论在哪个页面,想调用该头部文件,直接插入head.js文件即可

这种方式的优点是方便,便于修改。缺点是由于搜索引擎读不懂javascript文件,头部文件和尾部文件搜索引擎无法收录,而且js文件过大会加重访问者的浏览器负担,影响访问速度

Behavior的download方式

最好能有一种方法,就像asp页面包含其他页面时那样,用一小段包含语句就可以实现,不要将需要包含的内容出现在本页面内,而是分割出去到另外一个自己的页面

未完待续

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
主要包含HTML5+CSS3基础知识,各种常用标签的意义及基本用法示例。 HTML5部分具体内容包括: 语义化标签:段落标签,标签自定义文字样式,标题标签,块,标签定义头部,标签定义底部,标签定义正文区段,标签定义侧边栏区域; 效果标签:标签实现换行效果,特殊字符 实现空格效果,标签实现水平线; 列表标签:使用实现无序列表,使用实现有序列表; 使用标签添加图片,使用标签添加链接,使用table添加表格,使用thead、tbody、tfood定义表格; 表单标签:使用创建表单,文本输入框,密码输入框,数字输入框,网址输入框,邮箱输入框,创建文本域,单选框,复选框,使用select、option创建下拉菜单,提交按钮,重置按钮; CSS3部分具体内同包括: css引入方式:内联式,嵌入式,外部式,三种链接方式优先级; css选择器:标签选择器,类选择器,ID选择器,后代选择器,通用选择器,伪类选择器(给html标签的某种状态设置样式),分组选择器; 样式继承,优先级,最高层级!important; css字体样式:font-family设置字体系列,font-size设置字体大小,font-weight设置字体粗细,font-style设置字体样式,color设置字体颜色的三种形式,font的简写; css文本样式:使用text-decoration添加文本修饰,text-indent:2em添加首行缩进俩字符,line-height设置行间距,letter-spacing设置字符间距,word-spacing设置英文单词间距,text-align设置文本对齐方式; css盒模型:块级元素,内联元素,内敛块状元素,none使元素隐身,设置宽度、高度、背景色、边框、圆角,padding内边距,margin外边距; css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、相对定位、固定定位,相对定位与绝对定位组合; css弹性盒模型:flex属性,横轴排列,纵轴排列,flex占比; 行内元素水平居中设置; 定宽块状元素水平居中设置; 已知宽高实现盒子水平垂直居中; 不知宽高实现盒子水平垂直居中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值