模板语言由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 进行一些处理即可，由于没有引用任何其他模块，可以很好地独立使用。
原文链接：
http://www.cnblogs.com/jeffxun/p/15585073.html
HTML复用，不需要任何模板就可以复用相同的内容
条件：控制页面布局显示就可以完成
示例：
主页
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML调试</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: absoluteleft: 0pxtop: 0pxheight: 70pxwidth: 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: absoluteleft: 0pxtop: 70pxwidth: 100px">
<!--不相同内容容器-->
</div>
<!--复用页面容器2-->
<div style="position: absoluteleft: 0pxtop: 585pxheight: 70pxwidth: 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: absoluteleft: 0pxtop: 0pxheight: 70pxwidth:100%background: #ff0font-size: 30pxtext-align: centerline-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: absoluteleft: 0pxtop: 0pxheight: 70pxwidth:100%background: #ff0font-size: 30pxtext-align: centerline-height: 70px">
复用底部
</div>
</body>
</html>
项目结构
实现结果：
。。。。
border-width: 0px
边的宽度为0
border-style
边的类型
vertical-align: top
垂直居上
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）