Python大神教你300行代码搞定HTML模板渲染「附源码」

2023-02-19 00:06:02html-css013

Python大神教你300行代码搞定HTML模板渲染「附源码」,第1张

模板语言由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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

body{

font-size:12px

background:#FFFFFF url(http://www.gzsp.com/zh-cn/images/bks.gif)

}

input{ background:#FFFFFF}

textarea{ background:#FFFFFF}

select{ background:#FFFFFF}

.STYLE1 {color: #FF0000}

/*================================提交按钮==========================*/

.buttonArea{ text-align:rightpadding:0 10px 0 10px}

.btn_mouseout

{

width:80pxheight:40px

border: #ffffff 1px solid

padding:1px

font-size: 12px

cursor: pointer

color: #666

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#BECCDA)

}

.btn_mouseover

{

width:80pxheight:40px

border: #ffffff 1px solid

padding: 1px

font-size: 12px

cursor: pointer

color: #f60

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA)

}

.btn_mousedown

{

width:80pxheight:40px

border: #dfe6ef 1px solid

padding: 1px

font-size: 12px

cursor: pointer

color: #f60

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5)

}

.btn_mouseup

{

width:80pxheight:40px

border:#ffffff 1px solid

padding: 1px

font-size: 12px

cursor: pointer

color:#f60

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5)

}

-->

</style>

<!--

/****************

js制作阿蒙

*****************/

var itemArray = new Array("xm","sfzhm","xm2","hj","tel","xzz","byyx","by_year","xm222","textarea","jyzk")//把需要输入的输入框id放到这个数组里

var labelArray = new Array("用户名","身份证号码","出生日期","户籍","联系电话","住址","毕业院校","毕业时间","所学专业","计算机水平","受教育情况")//把对应的输入框名字放在这里

function funsubmit(){

var len = itemArray.length

for(i=0i<leni++){

if(eval("document.all."+itemArray[i]+".value") == ""){

alert(labelArray[i]+" 不能为空！")

eval("document.all."+itemArray[i]+".focus()")

eval("document.all."+itemArray[i]+".style.backgroundColor='#FFECEC'")

return false

}

function blank(obj){

if(obj.value.length != 0){

obj.style.backgroundColor=""

}

//-->

</script>

</head>

<body>

<div align="center"><strong>请填写你的简历</strong>（注意星号项目必须填写）

</div>

<tr>

</tr>

</table>

<tbody>

<tr>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

<option

selected="selected">群众</option>

</select> </td>

<font

color="#ff0000">*</font></td>

</tr>

<tr>

</select></td>

</tr>

<tr>

</tr>

<tr>

<option

selected="selected">汉族</option>

</select> </td>

</tr>

<tr>

<td colspan="3"><input onPropertyChange="blank(this)" class="alcatel" maxlength="70" size="70"

name="xzz" />

</tr>

</tbody>

</table>

<table width="690"

border="1" align="center" cellpadding="0" cellspacing="0" bordercolorlight="#D1D1D1" bordercolordark="#ffffff" bgcolor="#FFFFFF" class="f12">

<tbody>

<tr>

<td width="225" bordercolorlight="#D1D1D1" bordercolordark="#ffffff" class="f12"><input onPropertyChange="blank(this)" class="alcatel" maxlength="15"

size="15" name="by_year" />

</tr>

<tr>

<td class="f12" align="middle" bgcolor="#ebebeb"

bordercolorlight="#D1D1D1" bordercolordark="#ffffff">所学专业</td>

<td class="f12" align="middle" bgcolor="#ebebeb"

bordercolorlight="#D1D1D1" bordercolordark="#ffffff">最高学历</td>

</select></td>

</tr>

<tr>

<td class="f12" bordercolorlight="#D1D1D1" bordercolordark="#ffffff"><select class="alcatel"

name="yysp">

<option

selected="selected">四级</option>

</select> </td>

</tr>

<tr>

算<br />

机<br />

水<br />

平<br />

特<br />

长</td>

</tr>

</tbody>

</table>

<table width="690"

border="1" align="center" cellspacing="0" bordercolorlight="#D1D1D1" bordercolordark="#ffffff" bgcolor="#ffffff" class="f12">

<tbody>

<tr>

<td align="middle" width="70"

rowspan="2">受<br />

教<br />

育<br />

及<br />

培<br />

训<br />

状<br />

况</td>

<td colspan="5"><span

lang="en-us" xml:lang="en-us">学校名称专业年月至年月取得文凭/资格证书</span></td>

</tr>

<tr>

</tr>

</tbody>

</table>

<table width="690"

border="1" align="center" cellspacing="0" bordercolorlight="#D1D1D1" bordercolordark="#ffffff" bgcolor="#ffffff" class="f12">

<tbody>

<tr>

<td width="70"

rowspan="2" align="middle" bgcolor="#FFFFF7">工<br />

作<br />

经<br />

历<br />

摘<br />

要</td>

<td colspan="5" bgcolor="#FFFFF7">年月至年月在何单位、部门何职位、职责离职原因</td>

</tr>

<tr>

</tr>

</tbody>

</table>

<table width="690"

border="1" align="center" cellspacing="0" bordercolorlight="#D1D1D1" bordercolordark="#ffffff" bgcolor="#ffffff" class="f12">

<tbody>

<tr>

我<br />

评<br />

价<br /></td>

</tr>

</tbody>

</table>

<table width="690"

border="1" align="center" cellspacing="0" bordercolorlight="#D1D1D1" bordercolordark="#ffffff" bgcolor="#ffffff" class="f12">

<tbody>

<tr>

你理想<br />

的工作</td>

</tr>

</tbody>

</table>

<table width="690"

border="1" align="center" cellspacing="0" bordercolorlight="#D1D1D1" bordercolordark="#ffffff" bgcolor="#ffffff" class="f12">

<tbody>

<tr>

你理想<br />

的公司</td>

</tr>

</tbody>

</table>

<table width="690"

border="1" align="center" cellpadding="0" cellspacing="0" bordercolordark="#ffffff" bgcolor="#FFFFFF" class="f12">

<tbody>

<tr>

<td align="middle" width="90" bgcolor="#ebebeb" height="24">欲从事职位一</td>

<td align="middle" width="100" bgcolor="#ebebeb">欲从事职位二</td>

</tr>

<tr>

元</td>

</tr>

</tbody>

</table>

<tr>

<td>

<input onPropertyChange="blank(this)" class="btn_mouseout"

onmouseover="this.className='btn_mouseover'"

onmouseout="this.className='btn_mouseout'"

onmousedown="this.className='btn_mousedown'"

onmouseup="this.className='btn_mouseup'"

onfocus="if(this.blur)this.blur()" type="submit" value="提交" name="Submit">

</div>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

要是想改的话就去下一个Adobe Dreamweaver 软件，这个是专业编写网页的软件，不过建议你去w3cschool这个网站去学一下html和css，要不然改不明白的

要是想把这个网站上传到网上，可以通过网址访问的话，就去万网买个空间域名，然后用ftp上传到服务器上，通过域名访问你的网站。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：快手小黄车下单,卖家能在电脑查看订单吗

# 下一篇：JS 动态修改CSS 样式方法全局

推荐阅读

热门文章

最新发布

标签列表

Python大神教你300行代码搞定HTML模板渲染「附源码」

给您推荐相同类型的内容：