html模板代码(html 模板)
如何复用HTML模板代码，比如头部尾部等相同代码的部分，具体怎么做
HTML复用，不需要任何模板就可以复用相同的内容
条件：控制页面布局显示就可以完成
示例：
主页
!DOCTYPE html
html
head
meta charset='utf-8' /
titleHTML调试/title
script type='text/javascript' src='js/jquery-1.8.0.min.js'/script
script src='js/zui.min.js' type='text/javascript' charset='utf-8'/script
script src='js/jquery-barcode.js' type='text/javascript' charset='utf-8'/script
link rel='stylesheet' type='text/css' href='css/zui.css' /
style type='text/css'
#container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: auto;
font-family: '宋体';
}
/style
/head
body
div id='container'
!--复用页面容器1--
div style="position: absolute;left: 0px;top: 0px;height: 70px;width: 100%;border-bottom: 1px solid #F1F1F1;"
iframe align="center" width="100%" height="70px" src="html/page_header.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"/iframe
/div
div id="contents" style="position: absolute;left: 0px;top: 70px;width: 100px;"
!--不相同内容容器--
/div
!--复用页面容器2--
div style="position: absolute;left: 0px;top: 585px;height: 70px;width: 100%;border-top: 1px solid #F1F1F1;"
iframe align="center" width="100%" height="70px" src="html/page_footer.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"/iframe
/div
/div
/body
/html
复用页面1
!DOCTYPE html
html
head
meta charset="UTF-8"
script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"/script
link rel="stylesheet" href="../css/bootstrap.min.css" /
title复用头部/title
/head
body
div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;"
复用头部
/div
/body
/html
复用页面2
!DOCTYPE html
html
head
meta charset="UTF-8"
script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"/script
link rel="stylesheet" href="../css/bootstrap.min.css" /
title复用底部/title
/head
body
div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;"
复用底部
/div
/body
/html
项目结构
实现结果：
html模板
1、ASP文件中的代码
pencat=rs.Fields.Item("m_content").Value
pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath "\" fname))
fout.WriteLine pencat
fout.close
2、如下给出要生成的网页模板：
html
head
meta http-equiv=""Content-Language"" content=""zh-cn""
meta http-equiv=""Content-Type"" content=""text/html; charset=gb2312""
meta name=""GENERATOR"" content=""Microsoft FrontPage 4.0""
meta name=""ProgId"" content=""FrontPage.Editor.Document""
title/title
/head
body topmargin=""0"" leftmargin=""0""
table border=""0"" width=""760"" height=""100%"" background=""background.jpg""
tr
td width=""752"" height=""10"" colspan=""3""
p align=""center""t_title
/td
/tr
tr
td width=""752"" height=""18"" colspan=""3""
div align=""center""
/div
div align=""center""
font size=""2""
作者：/fontfont color=""#990000""t_author/font
font size=""2""
加入时间：/fontfont color=""#990000""t_date/font
/div
/td
/tr
tr
td width=""15%"" height=""100%"" valign=""top""
/td
td width=""70%"" height=""100%"" valign=""top""
t_content
/td
td width=""15%"" height=""100%"" valign=""top""
/td
/tr
/table
/body
/html
3、解释
（1）pencat=rs.Fields.Item("m_content").Value
pencat为一个字符串变量。
rs.Fields.Item("m_content").Value就是如上2、网页模板的全部HTML字符
（2）pencat=replace(pencat,"t_title",n_title)
pencat=replace(pencat,"t_author",n_author)
pencat=replace(pencat,"t_content",n_content)
以上三句就是将字符串中的字串替换成为你所需要的内容，即ASP中动态获得的内容。
（3）Set fso = Server.CreateObject("Scripting.FileSystemObject")
Set fout = fso.CreateTextFile(server.mappath(fpath "\" fname))
fout.WriteLine pencat
fout.close
以上为将刚刚组合所得的网页代码写入文件的过程。第一句定义fso文件，第二句创建输出流文件，其中fpath为你想要存储的文件的路径，fname为文件名；后两句是将字符串写入文件和关闭输出流文件。
vs2015如何运行html爱心代码啊
vs2015运行html爱心代码方法。
1、建立相应文件夹，打开VS软件，新建空白html5模板。
2、开始写爱心的代码（html5+css）。
3、制作图形需要用到四个基础图形（也就是四个块），一个大的正方形（为主块），在大的正方形里面建立三个小正方形（前两个正方形需要将其修改为圆形）。
4、写让爱心动起来的JavaScript代码。
5、在浏览器上执行代码，就可以得到一颗会跳动的爱心。
商品描述模板HTML代码，高分！
太大的 发不上来...
发一部分给你吧.
htmlhead
!--eBay V3- msxml 4.0 XXXXXXXXXXXXXXXXXXXXXXXXXX--
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"meta name="description" content="eBay: Find BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE in the Home Garden , Yard, Garden Outdoor Living , Patio Garden Furniture , Hammocks category on eBay."meta name="keywords" content="BRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE, Home Garden, Yard, Garden Outdoor Living, Patio Garden Furniture, Hammocks"titleBRAND NEW COLORFUL SQUARES HAMMOCK HAMMOCKS SALE - eBay (item 140261481011 end time Aug-26-08 22:00:49 PDT)/title!--srcId: ViewItem--meta http-equiv="Pragma" content="no-cache"meta name="Arg1" content="uu.rpn276"script!--
var iframeApproved = true;var nodefaultcss = true;
//--/scriptscript language="javascript" src="" /scriptstyle type="text/css"!--
.ebay{font-family:Arial,Helvetica,sans-serif;}
.ebay{font-family:Arial,Helvetica,sans-serif;}
.ebay .standard,.ebay p,.ebay td,.ebay div,.ebay span,.ebay ul,.ebay ol,.ebay dl{font-size:x-small;font-family:Arial}
.ebay .standard1{font-size:x-small;font-family:Arial;}
.ebay a:active,.ebay a:link,.ebay a:visited{color:#0000CC;}
.ebay a:visited{color:#990099;}
.ebay pre{font-family:"Courier New",Courier,monospace;font-size:x-small;}
.ebay h1,.ebay .pagetitle{font-size:medium;font-weight:bold;}
.ebay h1,.ebay .itemTitle{font-family:Arial,Helvetica,sans-serif;font-size:medium;font-weight:bold;margin-bottom:2px;}
.ebay h2,.ebay .sectiontitle{font-size:small;font-weight:bold;}
.ebay .givingBarSectiontitle{font-size:small;font-weight:bold; color:#999999;}
.ebay .givingBarSectionSubTitle{font-family:verdana;font-size:10px;color:#999999;}
.ebay h2,.ebay .itemSpecifics{font-family:Arial,Helvetica,sans-serif;font-size:x-small;font-weight:bold;margin-bottom:0px;}
htmlbody .ebay .itemSpecifics{font-size:small !important}
.ebay h3,.ebay th,.ebay .standardtitle{font-weight:bold;}
.ebay .emphasized{color:#009900;font-weight:bold;}
.ebay .error{color:#FF0000;}
.ebay .help{color:#666666;}
.ebay .pipe{color:#9999FF;}
.ebay .button,.ebay .navigation{font-family:Verdana;font-size:xx-small;}
.ebay .textbox{font-family:Verdana;font-size:xx-small;color:#000000;}
.ebay .textboxhelp{font-family:Verdana;font-size:xx-small;color:#666666;}
.ebay .nomargin{margin:0px;}
.ebay .cssMessage{display:none;}
.ebay .optInLayer{color:#999999; text-align:right; border:1px solid #CCCCCC; padding:5px 5px 5px;}
.ebay .hrthick{ text-align: right; width: 100%; height: 2px; border: solid #9999CC 1px; background: #9999CC}
.ebay .hrthin{ text-align: right; width: 100%; height: 2px; border: solid #DCDCFE 1px; background: #DCDCFE}
.ebay .hrwhite{ text-align: right; width: 100%; height: 2px; background: #ffffff; border: 1px solid #ffffff;}
.ebay .hrgray{ text-align: right; width: 100%; height: 1px; background: #bbbbbb; border: 1px solid #bbbbbb;}
.ebay .titleRow{ border-top:2px solid #9999cc; border-bottom:2px solid #9999cc; margin-top:4px;}
.ebay .titleColumn{border-top:1px solid #9999cc; background-color:#eeeef8}
.ebay .borderLeft{border-left:1px solid #9999cc; background-color:#eeeef8}
.ebay .borderRight{border-right:1px solid #9999cc; background-color:#eeeef8}
.ebay .borderBottom{border-bottom:1px solid #9999cc; background-color:#eeeef8}
.ebay .borderLeftBottom{border-bottom:1px solid #9999cc; border-left:1px solid #9999cc; background-color:#eeeef8}
.ebay .borderRightBottom{border-bottom:1px solid #9999cc; border-right:1px solid #9999cc; background-color:#eeeef8}
.RetroStyle2 {font: Terminal;font-family: Terminal;color: #00FF00;background-color: #000000;font-size: 22px;}
.BasicStyle {font: Tahoma;font-family: Tahoma;color: #5F8F8F;background-color: Black;font-size: 20px;}
.titlePadding {padding-top:4px;padding-bottom:4px}
.ebay .shipFootNote{font-family:verdana;font-size:10px;color:#999999; padding-bottom:20px;}
.ebay .shipFootNote1{font-family:verdana;font-size:10px;color:#999999; padding:0 15px 20px 15px;}
.ebay .grayOut{font-family:arial;font-size: 13px;color:#cccccc;}
.ebay .grayText{font-family:arial;font-size: 13px;color:#999999;}
.ebay .insuranceText{ font-family:arial; font-size: 10px; color:#999999;}
.ebay .titlePurchase{color:#515151;}
.ebay .shipPadding { padding-top:5px; padding-bottom:5px;}
.ebay .shipPadding1 { padding:20px 15px 10px 15px;}
.ebay .shipHeaderFont { font-family:arial; font-size: 13px; padding-bottom:4px;}
.ebay .shipSecFont{ font-family:arial; font-size: 13px; padding-left:4px;}
.ebay .indentation{ padding-left:8px;}
.ebay .LessIndentation{ padding-left:4px;}
.ebay .extraIndentation{padding-left:12px;}
.ebay .ViShipSecBorder{border-bottom:0px solid #cccccc;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-top:0px; padding:0px;}
.ebay .ViShipSecHeaderBorder{border-width: 1px; border-color: #cccccc; border-style: solid; padding:8px;}
.ebay .ViShipSecTdBorder{border-bottom:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;border-top:0px solid #e5e5e5; padding:5px;font-family:arial; font-size: 13px; text-align:left;}
.ebay .ViShipSecThBorder{border-bottom:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;border-top:0px; padding:5px;font-family:arial; font-size: 13px; text-align:left;}
.ebay .ViShipSecTdRightBorder{border-bottom:1px solid #e5e5e5;border-left:1px solid #e5e5e5;border-right:0px solid #e5e5e5;border-top:0px solid #e5e5e5; padding:5px;font-family:arial; font-size: 13px; text-align:left;}
.ebay .ViShipSecTdLeftBorder{border-bottom:1px solid #e5e5e5;border-left:0px solid #e5e5e5;border-right:1px solid #e5e5e5;border-top:0px solid #e5e5e5; padding:5px;font-family:arial; font-size: 13px; text-align:left;}
.ebay .ViMessageSecHeaderBorder{border-width: 1px; border-color: #cccccc; border-style: solid;}
.refreshlinkText{font-family:Verdana;font-size:xx-small;color:#FFFFFF;padding-left:3px;padding-right:4px;}
#divrefresh a:active{font-family:Verdana;font-size:xx-small;text-decoration:underline;color:#FFFFFF;}
#divrefresh a:visited{font-family:Verdana;font-size:xx-small;text-decoration:none;color:#FFFFFF;}
#divrefresh a:link{font-family:Verdana;font-size:xx-small;text-decoration:none;color:#FFFFFF;}
#divrefresh a:hover{font-family:Verdana;font-size:xx-small;text-decoration:underline;color:#FFFFFF;}
.greyboldsmall{font:bold small Arial, Helvetica, sans-serif;color:#666666;}
.overlay {background:transparent;position:absolute;}
.overlay .contentbox {width:100%;position: relative;}
.overlay .contentbox .content { padding:5px; border:1px solid #666;background: #fff;border-width: 0 1px;}
.overlay .contentbox *, .overlay .shadowbox * {position:relative;}
.overlay .shadowbox {width:100%;position:absolute;top:7px;left: 7px;opacity:.15;filter: "alpha(opacity=15)";-moz-opacity:0.15;}
.overlay .shadowbox .content {background: #000;padding:10px;}
.overlay .contentbox .n { border-top:1px solid #666;margin: 0 5px;background: #fff;}
.overlay .contentbox .s { border-bottom:1px solid #666; margin: 0 5px;background: #fff;position:relative;}
.overlay .shadowbox .n, .overlay .shadowbox .s {margin: 0 5px;background: #000; }
.cn, .scn {margin:0;padding:0;height:5px;display:block;font-size:0;line-height:0%;}
.cn {background: transparent url() no-repeat;}
.scn {background: transparent url() no-repeat;}
.overlay .n .cn .cn, .overlay .n .scn .scn { background-position:0 0;width:5px;margin-left: -5px;}
.overlay .n .cn, .overlay .n .scn { background-position:100% -20px; margin-right: -5px;}
.overlay .s .cn, .overlay .s .scn { background-position:100% -30px; margin-right: -5px;}
.overlay .s .cn .cn, .overlay .s .scn .scn { background-position:0 -10px;width:5px;margin-left: -5px;}
.overlayPos {position:absolute;margin-left:190px;_margin-left:-80px;margin-top:-15px;_margin-top:-2px;}
.arrowTL, .arrowTR, .arrowBL, .arrowBR {background:transparent url() no-repeat; width:22px; height:25px; position:absolute}
.arrowTL {top:12px; left:-21px; background-position:0px 0px}
.arrowTR {top:12px; right:-21px; background-position:100% -30px}
.arrowBL {bottom:12px; left:-21px; background-position:0px -60px}
.arrowBR {bottom:12px; right:-21px; background-position:100% -90px}
html网页模板代码
。。。。
border-width: 0px;
边的宽度为0
border-style
边的类型
vertical-align: top
垂直居上
Python大神教你300行代码搞定HTML模板渲染「附源码」
模板语言由HTML代码和逻辑控制代码组成，此处 @PHP 。通过模板语言可以快速的生成预想的HTML页面。应该算是后端渲染不可缺少的组成部分。
通过使用学习 tornado 、 bottle 的模板语言，我也效仿着实现可以独立使用的模板渲染的代码模块，模板语法来自 tornado 和 bottle 的语法。可以用来做一些简单的事情 网页渲染 ， 邮件内容生成 等HTML显示方面。以下就是简单的语法使用介绍。
1. 变量。使用 {{ }} 包裹起来，里面的变量为Python传入。模板渲染时会将传入的变量转换成字符串并填入对应位置。
2. 转义。默认传入的数据都会进行HTML转义，可以使用 {% raw value %} 来将value的内容按原始字符串输出。
3. 条件控制。支持Python的 if，elif，else 。条件代码需要放在 {% %} 内部，并且在条件结束后需要额外增加 {% end %} ，用于标识条件控制语句块范围。
4. 循环控制。支持Python的 for 和 while 。与条件控制一样也需要放在 {% %} 内部，并且结束处需要额外增加 {% end %} ，用于标识循环控制语句块的范围。
这个模板语言模块是在 Python2.7 上面开发使用的，如果要在 Python3+ 上使用需要对 str 和 bytes 进行一些处理即可，由于没有引用任何其他模块，可以很好地独立使用。
原文链接：