HTML知识点

HTML知识点

在Email中防御性地选用HTML5和CSS三的指南

2015/04/20 · CSS,
HTML5 · 1
评论 ·
Email

本文由 伯乐在线 –
fzr
翻译,黄利民
校稿。未经许可,禁止转发!
英文出处:litmus.com。欢迎参与翻译组。

“在Email中不可能采用HTML5或CSS叁”。

由于它们“有限”的援助,那已化作邮件设计行业的一个广大共同的认识。然则,我们今后能够说它是1个完全荒唐的传教。

固然帮衬还不是不行通用的,但为数不少主流电邮客户端已经足以帮助HTML伍和CSS3了。实际上,电中国人民邮政总局体市集的10分之5都辅助HTML伍和CSS。前中国共产党第五次全国代表大会电邮客户端中也有三家开头协理它们了。对于特定顾客,可协理的始末只怕会更加多。

不过,这些还不能援救这几个高档功用的客户端会怎么着啊?你的邮件在这么的订阅者的信箱中该怎么显示?当那些关系到邮箱,就归纳为一个:为订阅者提供卓越的心得。然则,那也不代表你的邮件必须在每一家客户端中都体现的平等——只要求让你的有着订阅者都能易得易取。

自个儿喜爱的两位邮件设计师——乔恩athan Kim 和 Brian
Graves——就丰裕强调应用分歧的主意实现:防御性邮件设计和渐进式增强。

防御性邮箱设计

大约两年前, Jonathan
Kim在大家的 Mobile
Master 作品展上提议了“Pushing the Limits of
Email”的定义。在讲话中,Jonathan发明了贰个新词来评释当前的电邮设计意况,即防御性邮件设计。

他解释说,由于有的信箱客户端对CSS的支撑有限,使得邮件设计者们陷入了破旧的布置性情形。他发起邮件设计者们事先为那3个支持网络渲染引擎的客户端设计,进而推进邮件设计行业发展。

渐进式增强

以此类推,在201肆年的信箱设计大会上,DEG的UI设计师,
Brian
Graves,,建议了“赢得在每种显示器上规划的作战”。他的言语的要紧在于渐进式增强,关于在支撑的条件上提供高档效能。他也强调了优雅降级的显要。优雅降级意味着,固然订阅者的邮箱客户端不能够援救某项特定功效,你也要能为她们提供愉悦的用户体验。

对得到Brian的完整展示感兴趣?幻灯片和拍照今后都有提供了。

自动楼梯就是实际生活中三个渐进式增强和古雅降级的通盘例子。已过世正剧艺人Mitch
Hedberg开玩笑说,“自动扶梯永远不会出故障:因为它能够只是1个梯子。你应有永远也不会看到‘自动扶梯权且故障’的品牌,只是‘自动扶梯临时为阶梯’,不便于方便。”不论环境怎么,自动扶梯都能保持和谐的职能。

为HTML伍和CSS三落实渐进式增强

动用渐进式增强是化解邮件设计的最得力情势。我们都驾驭的是,在邮箱中使用传统的HTML5和CSS3会在区别客户端之间引起广大渲染难题。向后的包容特性外不1样——壹些HTML和CSS有深厚的向后包容性而任何的却并从未。对此,不相同的客户端应用了分化选取。使用规范的HTML伍和CSS3索要越多的测试,而且会影响开发速度。所以,到底哪些才是在邮箱中完毕渐进式增强的最佳措施?

在电邮中动用HTML5和CSS三不必太不方便。它不要求在好奇的信箱客户端上浪费大批量年华排除故障(说的正是Outlook邮箱)。它所急需做的正是用二个万分的框架来相当慢执行HTML伍和CSS3而不用烦恼和顾虑爆发渲染难点。而且,万分幸运的是,大家有那么的框架。

上面正是邮件设计者们和开发者们提供的一行首要的代码:

XHTML

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

其一媒体询问只针对协理WebKit的信箱客户端——对HTML五和CSS三有疑虑的帮衬度。这一个媒体询问允许你使用现代技术例如HTML5录像、CSS三卡通、web字体以及更加多。

其一措施也将现代邮件客户端和旧式客户端的信箱开发分为两部分。你能够在选择Safari或Chrome浏览器为永葆WebKit的客户端测试开发现代技术的同时,使用Firefox为旧式浏览器提供诸如外观之类的骨干经验。

那样消除电邮开发难题得以将愈来愈多的成色控制进程转移到浏览器方面而不是电邮客户端。那给予邮件设计者以越来越多的权位,控制力,和自信去付出3个能在富有邮箱客户端之间优雅渲染的电邮。

下载那么些Litmus测试结果,呈现了就媒体询问对WebKit的协助。值得注意的是,Gmail——既是3个web邮箱客户端,也是1个移动App——并不援救媒体询问,所以那么些测试对那二个显示屏截图无效。

你也能够针对Gecko(Firefox)渲染那么些媒体询问:

XHTML

@-moz-document url-prefix() { /* Insert styles here */ }

1
2
3
@-moz-document url-prefix() {
  /* Insert styles here */
}

很少有客户端采纳Gecko(Firefox)作为渲染引擎,那也是干吗最棒就扶助WebKit的邮箱提供您的增强版。可是,使用媒体询问为WebKit渲染引擎添加相同的遵守就大致的多了,对Thunderbird之类的客户端而言。

除此而外那个艺术,还有此外在电邮中实现HTML五和CSS三的章程吗?有。但大家相信这么些方法是开发的最高效的艺术——也是最安全的。它减弱了为十分邮箱客户端支付外观之类需求的工作量,而且集中于依照浏览器的测试。

总括:渐进式增强的建议

打听你的受众

订阅者在哪个地方打开你的邮件?他们会选拔对HTML和CSS支持的很好的如一加和AppleMail之类的客户端吗?你能够动用Litmus’
Email
Analytics测试工具检验出订阅者中最风靡的邮箱App。

遵照所获取的音信,你能够操纵是不是渐进式增强会对你的办事有救助。例如,倘使您的受众中多方面施用WebKit,能够很好的帮忙高级成效,那么或然尝试立异性的技能,比如HTML伍录像,会是3个没有错的想法!

创制3个核补中开胃验

用对HTML和CSS支持有限的邮箱App——如Outlook和Gmail,在你为别的客户端优化邮件此前,为订阅者建立二个基直指方验。渐进式增强不应该让其余用户产生次优体验。

尽量优化

假使您早就确立多少个骨干经验,就开首为其余用户优化体验。你能够运用CSS三,摄像,交互,可缩放向量图形(SVG),以及web字体。记住,尽管是对HTML和CSS帮衬的可比好的Email客户端也有它们各自的奇异之处,仍旧供给测试哪些才是实用的。

实战:邮件中的渐进增强例子

作者们先看看1些在邮件中选拔渐进式增强的开创性例子。为了呈现对那个邮件的优化,你不可能不采用二个如Chrome或Safari一样以WebKit为引力的浏览器。

201肆邮件设计大会以HTML伍摄像为背景的邮件

为了播报2014邮件设计大会,咱俩决定认真地以HTML5录像为背景完毕渐进式增强。尽管那种专项技能只可以在Apple邮箱和Outlook
201壹(Mac版)上干活,但那二种客户端达到接收特定邮件的用户十分之四左右。

View the full email here

对此不援助摄像的电邮客户端,HTML伍录像仅仅只是退化为一俞露态背景图片。大家的结果却是让人愕然的——而且回报也是惊心动魄的!

B&Q 交互式旋转圆盘邮件

那年中最酷的邮件之1是B&Q的交互式旋转圆盘邮件。对于WebKit客户端,该邮件包括了三个筋斗热点,供用户点击查看不相同的1对。

View the full email here

任何邮件中最让人印象深切的有的,可能是它为非WebKit邮箱使用的备用方案——贰个美观的团团转木马网格布局,未有藏匿也尚无复制任何内容!

澳门新萄京8522 1

您能够在 Firefox 或 Internet Explorer 浏览器中开拓该邮件查看备用设计。

Litmus Builder(邮件开发工具)交互之旅邮件

为了引进大家的新邮件代码编辑器,Litmus
Builder,在那封邮件中展现了大气的可点击交互。同样,该技能也不得不在Apple邮箱和Outlook
201壹(Mac版)中劳作,而那多少个却占了大家的消费者的多头。(注:邮件需求显示屏至少800像素宽才能浏览。)

该展览仅仅只是退化为一个静态背景图片,而且会调用接口跳转到登录页面。那邮件取得了赫赫的中标,其制品在最早先的几天里扩张了重重的用户。

View the full email here

想尝尝一下 Litmus Builder?注册后
,你就能够起来运用HTML5和CSS三测试你的邮件!

3个翻新邮件设计框架

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Insert styles
here */ }

1
2
3
@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Insert styles here */
}

以此红娘查询为邮件设计师提供了多少个简练的换代框架。大家得以为有着现代信箱客户端的那一大片段订阅者提供更加好的体验。

最棒的守卫正是攻击。以往该是进攻的时候了。在邮件设计中央银行使这些红娘查询开头更新,推动邮件前进。

为了订阅者去品味。为了大家的行当,为了
对邮件的怜爱。

业已急不可待想看看大家会联手建立出什么样了。

假设你用的是那种艺术——也许支付你自个儿的更加尖端的本子——在你的邮件中,恐怕1旦你对这种办法有别的的疑团,请在底下的褒贬中贴出,只怕用越来越好的点子,去Litmus社区!

发觉你的受众 + 测试你的布署

对于可以起首采纳高级技术像HTML五和CSS三来带动邮件发展,是还是不是觉得很震撼?确认保障识别出订阅者们最心爱的信箱应用软件,然后测试你新设计的邮件。

通过邮件分析,你能够精晓订阅者日常在哪儿打开邮件,那样您就能够集中精力在渐进式增强(以及优雅降级!)上了。

测试设计也是付出进度中拾分关键的一步。在二十五个以上邮箱客户端和应用软件之间的包容性测试,能够确定保障订阅者们无论用什么邮箱打开邮件都能日常获得你的邮件。

 

赞 收藏 1
评论

二、怎么样精晓 HTML 语义化

基于内容的结构化(内容语义化),采取非常的价签(代码语义化)便于开发者阅读和写出更优雅的代码,同时让浏览器的爬虫和机器很好地分析、读懂内容。一言以蔽之是让代码更有利于领会,更加精简,脱离了CSS仍可以够看懂页面。

语义化的利益:

  1. 清晰的页面结构:去掉或样式丢失的时候,也能让页面显示清晰的组织,增强页面的可读性。
  2. 帮衬越多的装置:显示屏阅读器(若是访客有视障)会完全根据你的号子来“读”你的网页。
    倘若您利用的含语义的标志,显示器阅读器会依据你的竹签来判定网页的内容,而不是一个字母三个字母的拼写出来。
  3. 有利于SEO:和寻找引擎建立优质关系,有助于爬虫抓取更加多的卓有作用新闻,搜索引擎的爬虫也借助于标记来分明上下文和种种显要字的权重。
  4. 便宜团队开发和保证:在协会中大家都依据同3个正式,能够减小过多差别化的事物,方便开发和爱护,进步支付功能,甚至实现模块化开发。

工具推荐

  • 询问邮件客户端所支撑样式属性的网址
    campaignmonitor

  • Gmail 的 Email Template 插件
    Gmail™ Email
    Templates

  • CSS Inliner
    putsmail

  • Email Boilerplate
    Email
    Boilerplate


  二、Gecko内核(代表:Mozilla Firefox)

有关小编:fzr

澳门新萄京8522 2

微博:@fzr-fzr)
个人主页 ·
作者的篇章 ·
26

澳门新萄京8522 3

四、有何常见的meta标签

标签 含义
<meta charset="utf-8"> 声明文档使用的字符编码
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> 声明文档兼容模式,指示IE以目前可用的最高模式显示内容
<meta name="keywords" content="your tags"> 定义针对搜索引擎的关键词
<meta name="description" content="不超过850个字符"> 页面描述,告诉搜索引擎你的站点的主要内容
<meta name="author" content="你的姓名"> 定义网页作者
<meta name="revised" content="David, 2008/8/8/" /> > 定义页面的最新版本
<meta http-equiv="refresh" content="5"/> 5秒刷新一次页面
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> 用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="pragma" content="no-cache"> 禁用缓存
<meta http-equiv="set-cookie" content="Mon, 12 May 2001 00:20:00 GMT"> cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也必须使用GMT时间格式。
<meta name="robots" content="index,follow" /> 搜索引擎索引方式

<meta name=”robots” content=”index,follow” />
all:文件将被寻找,且页面上的链接可以被询问;
none:文件将不被寻找,且页面上的链接不可能被询问;
index:文件将被搜寻;
follow:页面上的链接能够被询问;
noindex:文件将不被搜寻;
nofollow:页面上的链接不得以被询问。

前言

在进展 HTML Email Boilerplate
开发时境遇的最普遍的难题正是样式渲染和财富引进难点,那一个题材的暴发往往是各大主流邮件客户端(手提式有线电电话机、桌面或是网页版)对体制援助或许能源引入的限制。


  Gecko排版引擎提供了1个丰硕的程序界面以供与网络相关的应用程序使用,例如网页浏览器、HTML编辑器、客户端/服务器等。即使早期的显要对象是Mozilla的衍生产品,如Netscape和Mozilla
Firefox,不过以后已有不少别的软件利用那些排版引擎。其它Gecko也是1个跨平台内核,能够在Windows、BSD、Linux和Mac
OS X中应用。

八、列出广大的标签,并简短介绍这一个标签用在哪些处境

标签 场景
head head标签是页面的“头部”, 一般来说,只有6个标签能放在<head>标签内:<title>、<meta>、<link>、<style>、<script>、<base>
body body标签是页面的“身体”
h1~h6标签 设置不同的标题
p标签 使用p标签来标记一段文字
换行
<div> 主要用来为HTML文档内大块的内容提供结构和背景
ul 无序列表
ol 有序列表
<form> 设置一个表单
img 设置一个图像
a 连接

HTML5_CSS3_媒体询问

参考资料

XHTML™ 1.0
Say Hello to the HTML Email
Boilerplate
What You Should Know About HTML
Email
A Guide to CSS Inlining in
Emai

  一、Trident内核(代表:Internet Explorer)

7、常见的浏览器有啥?什么内核?

澳门新萄京8522 4

目录

  • 模板开发
  • 工具推荐
  • 参考资料

  三、WebKit内核(代表:Safari、Chrome)

伍、文书档案表明的成效,严酷格局和混合方式指什么?<!doctype html>的作用?

网页的DOCTYPE阐明的意义
DOCTYPE是document
type(文书档案类型)的简写,在Web设计使得来验证你用的XHTML或然HTML是怎么版本。要确立符合标准的网页,DOCTYPE申明是少不了的基本点组成都部队分;除非你的XHTML明显了一个正确的DOCTYPE,不然你的标识和CSS都不会收效。
在HTML中 doctype 有三个基本点目标:

  • 对文书档案实行中用验证
  • 澳门新萄京8522,决定浏览器的显示形式

Doctype可申明三种DTD类型,分别表示严苛版本、过渡版本以及基于框架的 HTML
文书档案。
当浏览器厂商开始创立与正统卓越的浏览器时,他们盼望确认保障向后包容性。为了贯彻那一点,他们创制了二种表现情势:行业内部形式和交集情势

  • 从严方式的排版和 JS 运作情势是以该浏览器协助的万丈标准运维;
  • 在混合格局中,页面以壹种比较宽松的向后相当的情势展示,模拟老式浏览器的行事以制止老站点不可能工作。

方式触发

  • 浏览器依据DOCTYPE是还是不是存在以及利用的哪类DTD来选取要运用的表现格局。假诺XHTML、HTML
    四.0一文书档案包蕴格局总体的DOCTYPE,那么它1般以正规化情势表现。
  • 涵盖过渡DTD和U帕杰罗I的DOCTYPE也致使页面以规范方式表现,但是有对接DTD而并未有U奥德赛I会导致页面以混合形式表现。
  • DOCTYPE不存在或款式不科学会招致HTML和XHTML文档以混合格局表现。

html5既然未有DTD,也就不曾严峻方式与宽松形式的分别,html伍有相对宽松的语法,完毕时,已经竭尽大的落到实处了向后分外。

模板开发

先是,简明扼要提炼多少个邮件模板开发时的关心点:

一. CSS 成分的蝇头协理
部分邮件客户端不扶助 <style> in <head> 或 <style> in
<link>;
2. 外部引入的能源只可以是图表,不得以是 stylesheets, fonts 和 vedio

三. 平时选取 table 进行页面布局

  • doctype
    有1些邮件客户端( Gmail 和 Hotmail )会移除
    doctype,当然超越二分之一会保留你的 doctype,使用 XHTML一.0 的 doctype
    包容性最佳以及并发最少开发者意想之外的情状;
    XHTML 1.0 的 doctype 代码如下:

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Virtual Library</title>
  </head>
  <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>
<!-- origin from XHTML 1.0 -->
  • layout
    撰写页面包车型客车开发银行日常是通过 HTML
    成分实行页面内容布局,但是大家不可能自由的利用部分常用的要素,比如
    HTML五 的 <canvas><audio><vedio>的包容性就极差;

澳门新萄京8522 5

HTML5 support for email clients

别的,由于部分客户端对 CSS 的部分布局样式的扶助较差,比如 position
float 等,导致常用的 float + position的布局方法失效;

澳门新萄京8522 6

CSS support for email clients

由此,HTML Email Boilerplate 常用的通用布局方法是使用 tables

澳门新萄京8522 7

table support for email clients

通过嵌套的 table 能够完毕复杂的布局;

  <table>
    <tr>
      <td width="50%"> 33.33% </td>
      <td width="25%"> 33.33% </td>
      <td width="25%"> 33.33% </td>
    </tr>
    <tr>
      <td colspan="3"> 100% </td>
    </tr>
  </table>

澳门新萄京8522 8

table-layout-01

作者1从头选择 table 布局,犯了二个不当,在此分享一番:

  <table>
    <tr>
      <td width="33.33%"> 33.33% </td>
      <td width="33.33%"> 33.33% </td>
      <td width="33.33%"> 33.33% </td>
    </tr>
    <tr>
      <td width="100%"> 100% </td>
    </tr>
  </table>

本意是想将第 2 个 tr
的增长幅度充满一行,结果上边代码导致出现意外的布局。

澳门新萄京8522 9

table-layout-02

据此在为种种 td 的宽度实行百分比赋值时,假使某壹行的 td
唯有三个时,常常设置 tdcolspan 属性去完结,colspan="x"的 x
值依据表格某行最多的 td 去确定。

另1种相比统1的设置属性的措施是:

  <table>
    <tr>
      <td colspan="100%"> 50% </td>
    </tr>
    <tr>
      <td colspan="33.33%"> 33.33% </td>
      <td colspan="33.33"> 33.33% </td>
      <td colspan="34%"> 33.33% </td> <!-- 这里的 colspan 的值需要 hack 一下,才能保持布局一致性 -->
    </tr>
    <tr>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
      <td colspan="25%"> 25% </td>
    </tr>
    <tr>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
      <td colspan="20%"> 20% </td>
    </tr>
  </table>

澳门新萄京8522 10

table-layout-03

【code link

  • style

澳门新萄京8522 11

style method injection of email clients

上航海用教室呈现 Gmail 不补助样式表通过 <head><link> 的法子引进HTML,为了保持对 Gmail 的包容性,由此 HTML Email Boilerplate
的付出平常使用 inline style 的方法。
理所当然,大家得以先将样式 <head> ,然后在经过壹些 CSS Inliner 工具,如
putsmailPutsMail
直接嵌入 HTML 元素中。

HTML Email Boilerplate
开发首要的注意事项正是以上几点,当然提到差异浏览器的成分样式处理不等同的难题,大家得以行使第一方写好的
Email-Boilerplate去消除上述难点。


  四、Presto内核(代表:Opera)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图