您的位置：首页 > 百科管理 > 详情

html简易模板-在Python中使用HTML模版的教程

原创：找图网 2023-08-11 09:06:45

如何使用HTML编写邮件模版

这篇文章主要介绍了使用HTML编写简单的邮件模版,作者主张极简至上主义...可以先看文章结尾处链接中介绍的模版成品,需要的朋友可以参考下

今天,我想写一个"低技术"问题。

话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly。每周收到一封邮件,了解本周的大事。

有一天,我就在想,是不是我也能做一个这样的邮件?

然后,就发现这事不那么容易。抛开后台和编辑工作,单单是设计一个Email样板,就需要不少心思。

因为这种带格式的邮件,其实就是一张网页,正式名称叫做HTML Email。它能否正常显示,完全取决于邮件客户端。大多数的邮件客户端(比如Outlook和Gmail),会过滤HTML设置,让邮件面目全非。

我发现,编写HTML Email的窍门,就是使用15年前的网页制作方法。下面就是我整理的编写指南。

1. Doctype

目前,兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<head>

<title>HTML Email编写指南</title>

</head>

</html>使用这个Doctype,也就意味着,不能使用HTML5的语法。

2. 布局

网页的布局(layout)必须使用表格(table)。首先,放置一个最外层的大表格,用来设置背景。

<tr>

<td> Hello! </td>

</tr>

</table>

</body>表格的 border 属性等于1, 是为了方便开发。正式发布的时候,再把这个属性设为0。

在内层,放置第二个表格。用来展示内容。第二个table的宽度定为600像素,防止超过客户端的显示宽度。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>邮件内容有几个部分,就设置几行(row)。

3. 图片

图片是唯一可以引用的外部资源。其他的外部资源,比如样式表文件、字体文件、视频文件等,一概不能引用。

有些客户端会给图片链接加上边框,要去除边框。

img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}

a img {border:none;}

<img border="0" style="display:block;">需要注意的是,不少客户端默认不显示图片(比如Gmail),所以要确保即使没有图片,主要内容也能被阅读。

4. 行内样式

所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里。

另外,不要采用CSS的简写形式,有些客户端不支持。比如,不要写成下面这样:

style="font: 8px/14px Arial, sans-serif;"如果想表达

<p style="margin: 1em 0;">要写成下面这样:

<p style="margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0;">5. W3C校验和测试工具

要保证最终的代码,能够通过W3C的校验,因为某些客户端会把不合格属性剥离。还要使用测试工具(1, 2, 3),查看在不同客户端的显示结果。

发送HTML Email的时候,不要忘记MIME类型不能使用

Content-Type: text/plain;而要使用

Content-Type: Multipart/Alternative;发送工具可以考虑使用 MailChimp 和 Campaign Monitor 。

6. 模板

使用别人已经做好的模板,是一个不错的选择(这里和这里),网上还可以搜到更多。

自己开发的话,可以参考HTML Email Boilerplate和Emailology。

谁能分享给我个简单的注册登录html模板

写了下练练新手

<!doctype html>

<html>

<head>

<title>Document</title>

body{

background: salmon;

}

div{

width: 300px;

border-radius: 10px;

padding: 30px;

background: tan;

margin: 200px auto;

text-align: center;

}

p input{

height: 24px;

line-height: 24px;

border-radius: 5px;

border: none;

padding-left: 10px;

outline: none;

}

#login input{

height: 26px;

line-height: 28px;

color: #333;

font-weight: bold;

padding:0 16px;

}

#login input:hover{

color: red;

}

</style>

</head>

<body>

<div>

<form>

<p>

</p>

<p>

</p>

<p>

</p>

</form>

</div>

</body>

</html>

在Python中使用HTML模版的教程

这篇文章主要介绍了在Python中使用HTML模版的教程,HTML模版也是Python的各大框架下的一个基本功能,需要的朋友可以参考下。Web框架把我们从WSGI中拯救出来了。现在,我们只需要不断地编写函数,带上URL,就可以继续Web App的开发了。

但是,Web App不仅仅是处理逻辑,展示给用户的页面也非常重要。在函数中返回一个包含HTML的字符串,简单的页面还可以,但是,想想新浪首页的6000多行的HTML,你确信能在Python的字符串中正确地写出来么?反正我是做不到。

俗话说得好,不懂前端的Python工程师不是好的产品经理。有Web开发经验的同学都明白,Web App最复杂的部分就在HTML页面。HTML不仅要正确,还要通过CSS美化,再加上复杂的JavaScript脚本来实现各种交互和动画效果。总之,生成HTML页面的难度很大。

由于在Python代码里拼字符串是不现实的,所以,模板技术出现了。

使用模板,我们需要预先准备一个HTML文档,这个HTML文档不是普通的HTML,而是嵌入了一些变量和指令,然后,根据我们传入的数据,替换后,得到最终的HTML,发送给用户:

这就是传说中的MVC:Model-View-Controller,中文名“模型-视图-控制器”。

Python处理URL的函数就是C:Controller,Controller负责业务逻辑,比如检查用户名是否存在,取出用户信息等等;

包含变量{{ name }}的模板就是V:View,View负责显示逻辑,通过简单地替换一些变量,View最终输出的就是用户看到的HTML。

MVC中的Model在哪?Model是用来传给View的,这样View在替换变量的时候,就可以从Model中取出相应的数据。

上面的例子中,Model就是一个dict:

{ name: Michael }

只是因为Python支持关键字参数,很多Web框架允许传入关键字参数,然后,在框架内部组装出一个dict作为Model。

现在,我们把上次直接输出字符串作为HTML的例子用高端大气上档次的MVC模式改写一下:

from flask import Flask, request, render_template

app = Flask(__name__)

@(/, methods=[GET, POST])

def home():

return render_template()

@(/signin, methods=[GET])

def signin_form():

return render_template()

@(/signin, methods=[POST])

def signin():

username = [username]

password = [password]

if username==admin and password==password:

return render_template(, username=username)

return render_template(, message=Bad username or password, username=username)

if __name__ == __main__:

()

Flask通过render_template()函数来实现模板的渲染。和Web框架类似,Python的模板也有很多种。Flask默认支持的模板是jinja2,所以我们先直接安装jinja2:

$ easy_install jinja2

然后,开始编写jinja2模板:

用来显示首页的模板:

html

head

titleHome/title

/head

body

h1 style=font-style:italicHome/h1

/body

/html

用来显示登录表单的模板:

html

head

titlePlease Sign In/title

/head

body

{% if message %}

p style=color:red{{ message }}/p

{% endif %}

form action=/signin method=post

legendPlease sign in:/legend

pinput name=username placeholder=Username value={{ username }}/p

pinput name=password placeholder=Password type=password/p

pbutton type=submitSign In/button/p

/form

/body

/html

登录成功的模板:

html

head

titleWelcome, {{ username }}/title

/head

body

pWelcome, {{ username }}!/p

/body

/html

登录失败的模板呢?我们在中加了一点条件判断,把重用为登录失败的模板。

最后,一定要把模板放到正确的templates目录下,templates和在同级目录下:

启动python ,看看使用模板的页面效果:

通过MVC,我们在Python代码中处理M:Model和C:Controller,而V:View是通过模板处理的,这样,我们就成功地把Python代码和HTML代码最大限度地分离了。

使用模板的另一大好处是,模板改起来很方便,而且,改完保存后,刷新浏览器就能看到最新的效果,这对于调试HTML、CSS和JavaScript的前端工程师来说实在是太重要了。

在Jinja2模板中,我们用{{ name }}表示一个需要替换的变量。很多时候,还需要循环、条件判断等指令语句,在Jinja2中,用{% ... %}表示指令。

比如循环输出页码:

{% for i in page_list %}

a href=/page/{{ i }}{{ i }}/a

{% endfor %}

如果page_list是一个list:[1, 2, 3, 4, 5],上面的模板将输出5个超链接。

除了Jinja2,常见的模板还有:

Mako:用和${xxx}的一个模板;

Cheetah:也是用和${xxx}的一个模板;

Django:Django是一站式框架,内置一个用{% ... %}和{{ xxx }}的模板。

小结

有了MVC,我们就分离了Python代码和HTML代码。HTML代码全部放到模板里,写起来更有效率。