如何在HTML不同的页面中，共用头部与尾部？ - 向婷风-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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 までご連絡ください。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

HTMLでリストを作成するにはどうすればよいですか？May 06, 2025 am 12:01 AM

toreatealistinhtml、useforunorderedlistsandfororderedlists：1）forunorderedlists、wrapitemsinanduseforeachitem、renderingasabulletedlist.2）

HTMLアクション：Webサイト構造の例May 05, 2025 am 12:03 AM

HTMLは、明確な構造のWebサイトを構築するために使用されます。 1）Webサイト構造などのタグを使用し、定義します。 2）例は、ブログとeコマースのウェブサイトの構造を示しています。 3）誤ったラベルネスティングなどの一般的な間違いを避けてください。 4）HTTP要求を削減し、セマンティックタグを使用してパフォーマンスを最適化します。

HTMLページに画像を挿入するにはどうすればよいですか？May 04, 2025 am 12:02 AM

to inertanimageintoanhtmlpage、usethetagwithsrcandaltattributes.1）usealttextforaccessibilityandseo.2）emplencesrcsetForresponsiveimages.3）applylazyloadingwithloading = "lazy" tooptimizeperformance.4）

HTMLの目的：Webブラウザがコンテンツを表示できるようにするMay 03, 2025 am 12:03 AM

HTMLの中心的な目的は、ブラウザがWebコンテンツを理解して表示できるようにすることです。 1。HTMLは、タグなどのタグを介してWebページの構造とコンテンツを定義します。 3.HTMLは、ユーザーの相互作用をサポートするフォーム要素を提供します。 4. HTMLコードの最適化は、HTTP要求の削減やHTMLの圧縮など、Webページのパフォーマンスを改善できます。

Web開発にとってHTMLタグが重要なのはなぜですか？May 02, 2025 am 12:03 AM

htmltagsareSterenceforwebdevelovementasyStheStructureanhandhancewebpages.1）theydefineLayout、semantics、and-interactivity.2）semanticagsimprovecessibility.3）opeusofusofagscanoptimizeperformanceandensurecross-brows-compativeation。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

メモ帳++7.3.1

使いやすく無料のコードエディター

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。