首页 web前端 html教程 如何在HTML不同的页面中,共用头部与尾部? - 向婷风

如何在HTML不同的页面中,共用头部与尾部? - 向婷风

May 21, 2016 am 08:42 AM

一、asp语言和PHP语言

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

标记前面)增加如下代码:
<span style="color: #0000ff;"><span style="color: #ff00ff;">–  #include file=”head.asp”    –</span><span style="color: #0000ff;">></span> </span>
登录后复制

调用共用底部文件代码是在index.asp文件代码的结束位置(最后一个标记前面)增加如下代码:

<span style="color: #0000ff;"><span style="color: #ff00ff;">–     #include file=”foot.asp”    –</span><span style="color: #0000ff;">></span></span>
登录后复制

 

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

二、html语言
制作一个共用头部文件head.htm或一个共用底部文件foot.htm。如主页文件是index.htm,调用头部和底部文件的方法是:在主页文件代码的开始位置和结束位置分别增加下面的代码:

<span style="color: #0000ff;"><span style="color: #800000;">iframe </span><span style="color: #ff0000;">MARGINWIDTH</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">MARGINHEIGHT</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">HSPACE</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">VSPACE</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">FRAMEBORDER</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">SCROLLING</span><span style="color: #0000ff;">=no </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=”head.htm” </span><span style="color: #ff0000;">height</span><span style="color: #0000ff;">=“auto” </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="100%"</span><span style="color: #0000ff;">></span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">></span></span>
登录后复制

 

<span style="color: #0000ff;"><span style="color: #800000;">iframe </span><span style="color: #ff0000;">MARGINWIDTH</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">MARGINHEIGHT</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">HSPACE</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">VSPACE</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">FRAMEBORDER</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">SCROLLING</span><span style="color: #0000ff;">=no </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=”foot.htm” </span><span style="color: #ff0000;">height</span><span style="color: #0000ff;">="auto" </span><span style="color: #ff0000;">width</span><span style="color: #0000ff;">="100%"</span><span style="color: #0000ff;">></span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">></span></span>
登录后复制

比如下面的代码主页面:index.html

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='head.css'  </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body </span><span style="color: #0000ff;">></span><span style="color: #000000;">
//主页面index.html
</span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='miaov_head'</span><span style="color: #0000ff;">></span>
   <span style="color: #0000ff;"><span style="color: #800000;">iframe </span><span style="color: #ff0000;">MARGINWIDTH</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">MARGINHEIGHT</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">HSPACE</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">VSPACE</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">FRAMEBORDER</span><span style="color: #0000ff;">=0 </span><span style="color: #ff0000;">SCROLLING</span><span style="color: #0000ff;">=no </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="head.html"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="100%"</span><span style="color: #ff0000;">  height</span><span style="color: #0000ff;">="auto"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"></span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">>--------这里调用head.html页面,需要使用div包起来,否则样式会发生改变</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
 
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span>
登录后复制

单独存放的head.html代码如下:

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
 <span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">='head.css'  </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body </span><span style="color: #0000ff;">></span>
 <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">='miaov_head'</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.cnblogs.com/jtjds/"</span><span style="color: #0000ff;">></span>Mac<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.cnblogs.com/jtjds/"</span><span style="color: #0000ff;">></span>iPad<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.cnblogs.com/jtjds/"</span><span style="color: #0000ff;">></span>iPhone<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.cnblogs.com/jtjds/"</span><span style="color: #0000ff;">></span>Watch<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.cnblogs.com/jtjds/"</span><span style="color: #0000ff;">></span>Music<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
      <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.cnblogs.com/jtjds/"</span><span style="color: #0000ff;">></span>Contact Us<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
 
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制

css样式代码如下:

<span style="color: #000000;">*{margin:0;padding:0;}
body{background:white;position:relative;height:100%;color: #777;font-size: 13px;}
img{border:none;display:block;}
li{list-style:none;text-decoration: none;}
.miaov_head{height:36px;width:100%;margin:0 auto;background: black;margin-bottom: 0px;}
.miaov_head  img{width: 30px ;height: 30px;margin-top: 0;margin-left: 130px;}
.miaov_head  ul{float: left;width:900px;height: 36px;margin-top: 0px;color: white;position: absolute;top: 0px;margin-left: 200px;}
.miaov_head  ul li{float: left;padding-left: 80px;margin-left: 0px;color: white;list-style: none; }
.miaov_head  ul li a{color: white;font-size: 14px;text-decoration: none;}
.miaov_head input{position: absolute;top: 5px;margin-left: 1000px;width: 200px;height: 22px;}
.miaov_head a{line-height:36px;color:#777;}
.miaov_head a:hover{color:#555;}</span>
登录后复制

三、script语言--推荐这种
     制作一个共用头部文件head.js和一个共用底部文件foot.js。如主页文件是index.htm,调用头部和底部文件的方法是:在主页文件代码的开始位置和结束位置分别增加下面的代码:

   比如:head.js文件------根据上面的head.html,利用转换工具:http://tool.chinaz.com/Tools/Html_Js.aspx

   html转换为JS:

document.writeln("<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">=\"http://www.w3.org/1999/xhtml\"</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">");
document.writeln("</span><span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">=\"Content-Type\" </span><span style="color: #ff0000;">content</span><span style="color: #0000ff;">=\"text/html; </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">=utf-8\" </span><span style="color: #0000ff;">/></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln(" </span><span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=\'head.css\'  </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">=\"stylesheet\" </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">=\"text/css\" </span><span style="color: #0000ff;">/></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"><span style="color: #800000;">body </span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln(" </span><span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">=\'miaov_head\'</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("    </span><span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("      </span><span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=\"http://www.cnblogs.com/jtjds/\"</span><span style="color: #0000ff;">></span>Mac<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("      </span><span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=\"http://www.cnblogs.com/jtjds/\"</span><span style="color: #0000ff;">></span>iPad<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("      </span><span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=\"http://www.cnblogs.com/jtjds/\"</span><span style="color: #0000ff;">></span>iPhone<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("      </span><span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=\"http://www.cnblogs.com/jtjds/\"</span><span style="color: #0000ff;">></span>Watch<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("      </span><span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=\"http://www.cnblogs.com/jtjds/\"</span><span style="color: #0000ff;">></span>Music<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("      </span><span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=\"http://www.cnblogs.com/jtjds/\"</span><span style="color: #0000ff;">></span>Contact Us<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("    </span><span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln(" ");
document.writeln("</span><span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("</span><span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;">");
document.writeln("");</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
登录后复制

 以后无论在哪个页面,想调用该头部文件,直接插入head.js文件即可:下面是随便建的一个页面,//MAC.html

<span style="color: #0000ff;"><span style="color: #ff00ff;">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">html </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="Content-Type"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="text/html; charset=utf-8"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
 <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="head.js"</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">>-------------------这里调用head.js</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body </span><span style="color: #0000ff;">></span>
 
<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span>
登录后复制

四:shtml文件

   1:使用ssi技术页面生成shtml文件,只用在头部文件位置加入,然后修改的时候只要修改header.htm文件就可以了。使用shtml的好处是对搜索引擎比较友好,需要处理的文件在服务器端完成的, 不会加重访问者的浏览器负担。

五:本地合并

  即将HTML硬拆成头、尾、内容三个部分的文件,在预览或者发布之前用脚本手工合并。很久以前用过,没有后台的时候使用效果不错。

六:ajax动态拉取填充

七:web服务器(比如IIS)中设定包含

   比如我们说的SSI,文档后缀名是.shtml的就可以使用include包含。

   SSI(Server Side Include),通常称为"服务器端嵌入"或者叫"服务器端包含",是一种类似于ASP的基于服务器的网页制作技术。默认扩展名是 .stm、.shtm 和 .shtml。SSI就是在HTML文件中,可以通过注释行调用的命令或指针,SSI具有 强大的功能,只要使用一条简单的SSI命令就可以实现整个网站的内容更新,时间和日期的动态显示,以及执行shell和CGI脚本程序等复杂的功能。

八:后台模板引擎处理(字符串拼接)

九:用图片、flash等外部资源做---不推荐,比较麻烦

十:angular js里的的使用

 差不多在静态的html页面中,引入头部和尾部的文件的方法就这么多,列举了一些,其它的感兴趣的可自行钻研。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1268
29
C# 教程
1248
24
了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML:结构,CSS:样式,JavaScript:行为 HTML:结构,CSS:样式,JavaScript:行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML,CSS和JavaScript的未来:网络开发趋势 HTML,CSS和JavaScript的未来:网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML的未来:网络设计的发展和趋势 HTML的未来:网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript:比较概述 HTML与CSS vs. JavaScript:比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML:建立网页的结构 HTML:建立网页的结构 Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

HTML的角色:构建Web内容 HTML的角色:构建Web内容 Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML:是编程语言还是其他? HTML:是编程语言还是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

See all articles