多数人使用 HTML 4 和betway体育app: XHTML 1 编写网页

Adobe、标准和HTML5

2012/05/16 · HTML5 · HTML5

来源:Adobe CS6

“[提供商之间的]最激烈的竞争将与标准密切相关。大部分聪明人的眼睛将紧盯着技术标准。但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭。尽管存在着如此多的风险,标准仍然点燃了无限激情”

—The Economist, 1993年2月23日

在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准。Internet已存在标准,但万维网没有。浏览器的标准化甚至还未起步。

我们现在知道,与最近5年相比,作者在1993年看到的行业和他描述的“无限激情”是一个更加稳定和友好(甚至可能和谐)的时期。

但是,作者表达的观点是,标准(尽管平凡且无趣)是将信息和通信技术(ICT)行业凝聚在一起的黏合剂。标准的关键是互操作性和用户效用——它们现在的主要功能是使复杂、异构的系统可行且可满足用户需要。标准化领域现在比以往更加复杂,这在很大程度上离不开万维网的普遍性,这既提高市场的技术复杂性,也提高用户需要和期望。

万维网基本上基于两种标准——HTML和HTTP。HTML是万维网联盟(W3C)的建议标准,HTTP由Internet工程任务组(IETF)提出。

在这两种标准中,HTML更容易在各种消息中看到,因为它在Web内容的创建上占据主导地位。它是定义网络的基本标记语言的规则。使用HTML,异构系统、供应商和产品之间可以进行互操作。HTML4(HTML5的上一版)在HTML3.2推出之后不久推出,保留了自2000年以来主要的HTML形式。正是在这个时间段(2000年以来),网络发生了显著的商业增长。

但是,与ICT行业的方方面面一样,变化发生了。用户开始期望更复杂的功能,各种工具被创建来响应用户的期望和需求。举例而言,在动画领域出现了各种替代方案,到2005年,Macromedia Flash平台成为了用户所期望的和生产商所提供的交互性事实标准(广告、品牌网站、下拉菜单等)。

在市场的不断变化之中,多家浏览器开发商对复兴和改造HTML提供了一种推动力——自上一个HTML版本发布至今已近5年,整个市场也已改变。新产品包括针对多种平台和屏幕尺寸的开源浏览器和移动浏览器,电子发布和电子媒体变得愈加重要,对视觉增强的需要已然凸显出来。

为了响应此需要,多家浏览器开发商启动了一项创建一个更新的HTML版本(称为HTML5)的工作。该工作在W3C外部启动,但最终会转移到W3C内形成更正式的标准化和知识产权保护。(W3C强制要求W3C建议中包含的所有知识产权免费。通过将规范引入W3C,创建者和他们的赞助公司可确保所有他们(以及所有其他贡献者)无法在以后声明版权或创建一个以IP为围墙的花园)。此工作已创建了最新的HTML规范修订版(HTML5)。因为网络是对我们的客户至关重要的平台,所以Adobe向W3C标准化组织同时提供了HTML5的技术资源和知识产权。

但是,因为Adobe是一家工具开发商,而不是浏览器开发商,我们必须像所有工具开发商一样采用一种不同的方法来实现HTML5。浏览器使用HTML5——也就是说,Web浏览器读取HTML文档,然后将文档组合到一个看得见或听得见的显示界面上。Adobe的主要工作是检查HTML5是否“适合工具”。对于Adobe等工具开发商而言,重要的是规范是明确和无歧义的,所有各种实现都是兼容的,减少了创建针对浏览器呈现差异提供了具体调整的HTML5内容的需要。

作为工具开发商,Adobe专注于编写HTML页面的人和这个人在创建内容时的需要,或者专注于生成HTML页面的流程(服务器、工具)。我们收到的客户和用户反馈表明,用户已认识到行业正处于一个重要的过渡期,因为正在创造“新型网络”。旧知识正在被重新审视,新创意正在经历测试。在网络上生成发布质量输出的用户,习惯于像素特定的设计的用户,必须以不同的方式进行思考。现在他们必须创建自适应且可缩放的内容。所以他们会问自己(和Adobe):您如何控制体验而不控制像素?我们没有听到太多表明该模型是错误的反馈。我们在密切关注着这样一群人,他们尝试获取新工具来执行他们实现富有创意的表达所需的操作。

理想情况下,工具会使创造工作变得更轻松;在这个不断演化的市场中,Adobe面临的一部分挑战是理解用户想从工具中得到什么。用户想要让他们专注于以更快、更轻松、更好或更廉价的方式(或者可预测地,所有上述优势)实现他们的目标的工具。作为工具开发商,Adobe必须高瞻远瞩,摆脱对W3C规范的基本支持。举例而言,性能(包括工具的性能和输出内容的质量)是许多用户的关键考虑因素。如果性能配置文件在不同设备和浏览器之间差别巨大,这可能是与缺乏功能互操作一样巨大的壁垒。随着移动访问变得更加普遍,性能成为了一个尤其重要的问题。

创建Web内容的群体已发展地非常多样性,新标准需要广泛、深入地支持这种多样性。这样做,使Adobe的客户能够拥有生成他们想要的高质量和强大的网站所需的一致性和互操作性。标准所提供的一致通信至关重要,这在它缺乏时非常明显。每个人都还记得(或应该记得)二十世纪90年代中期的Netscape-Microsoft浏览器大战。这是浏览器开发商蓄意添加不兼容竞争对手浏览器的功能的一个事例。这个时代已在一般用户和开发商的抗议中结束。所以,Adobe用户的第一个需求是在这些无处不在的浏览器之间一致的HTML5呈现,一种“编写一次,随处良好运行”模型。

但是,要实现此目标,Adobe在修改和专门化我们的Web产品以利用新功能之前,一直在等待标准的稳定化。我们在开发HTML5工具的过程,还使用了我们跨不同平台(PDF、Flash、HTML、多媒体)的广泛的工具开发经验。与此同时,Adobe的用户可能主要是内容生成者,他们并不真正关心技术规范——他们希望Adobe关注规范,然后开发出最佳的工具供他们表达自己的想法和创造力。他们的问题是,“我们如何使用不断变化的标准所带来的能力表达我们想要什么,我们如何将它们整合到工作流中?”以及,“您能够多快提供这些工具?”

用户需要和需求变得日渐复杂,尤其是在所有一切(比如视频、杂志和电视)变得数字化时。此外,交互式设备的种类比桌面和笔记本时代多得多。现在,屏幕尺寸和文本可见性,以及交互性机制在不同设备上表明应用程序和内容必须采取的形式的方式上各不相同。最近,Adobe展开了一些有趣的讨论,而杂志出版商反馈,他们希望在平板电脑和其他设备上复制他们的高质量印刷出版物。具有类似尺寸的设备类别已然出现。目前,Adobe已开始认识到布局模式可适用于不同的类别。在创建者从一种类别进入另一种时,比如从小型手持设备尺寸进入平板电脑尺寸,再到台式机时,存在一些“断点”。这些设备还有不同的交互模式。用户喜欢与设备独立地创作的想法,但也希望放大每种设备的能力。

与此同时,用户注意到,用户熟悉的丰富的印刷品还未使用HTML5。HTML5/CSS布局标准并不像他们在印刷环境中所熟悉的标准那么完善。为了响应这一区域的用户需要(以及帮助行业创建更丰富的显示效果),Adobe最近向W3C CSS工作组提议了一个CSS3区域模块。另外,由于Adobe客户群的多样性,移动创作在目前对几乎所有客户都至关重要。这已成为了他们的一个重要出路,并且这一趋势正在迅猛地增长(在智能电话和平板电脑上)。例如,Adobe的工具集被出版商用于创作杂志(使用InDesign),我们将为他们提供一种使用标准导出内容并在移动设备上显示的方式。这一切创建满足用户需要的工具紧密相关,而工具离不开稳定的标准。

Adobe用户也关注不断出现的大量规范。再一次,其中一些规范并不仅仅关系到部分客户。它们影响到我们支持什么和不支持什么。作为工具制造商,我们需要满足对有用和适用的工具的需求。我们需要理解用户需求,然后需要确定如何和何时将规范结合起来,使它们变得更强大。当处理CSS区域时,Adobe认识到您可使用它执行有趣的布局,但在与JavaScript结合时能实现更有趣的操作。

Adobe也已开始向WebKit工作做出贡献。上面已经提到,与其说HTML5规范引起了用户的兴趣,倒不如说它们能够实现和运行在HTML5上构建的代码。因此,我们在工具中使用了WebKit,向WebKit引擎贡献了我们的错误修复程序。再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。作为我们工作的一个示例,在8月中旬的WebKit提交期间,Adobe的Alexandru Chiculita被得到了如下表彰“……为浮动元素查找添加了 一种新的性能测试 ,它带来了一种优化,在查找浮动元素上带来了大约150%的性能改进。”再次说明,我们旨在通过多种方式使HTML5工具对我们的用户有用。

类似地,借助所有主流浏览器中对SVG的支持,我们注意到我们的用户现在要求Adobe恢复对在已存在多年的Adobe Illustrator中创建SVG的支持。他们还希望我们的所有产品为SVG提供更多支持。此外,来自Adobe实验室的工具Wallaby可从Flash中导出HTML,并同样利用SVG。

矢量图形是构建高保真Web平台的一个重要部分,也是Adobe在网络上实现高保真度呈现的目标的一部分:布局控制、丰富的动画和高质量排印都是缩小差距的重要元素。HTML5有望从“80%的份额”提升到为网络创建富应用程序和内容而“唯一需要的平台”。作为这一推动力量的一部分,有一种使用HTML和CSS创建动画的需要,我们正在开发工具来提供浏览器支持但工具中缺乏的HTML5功能。我们知道我们有能力提供优秀的工具——请访问Adobe Edge,查看来自Adobe的最新示例。

与此同时,我们还开发了The Expressive Web作为供HTML5和CSS开发人员使用的一种资源。因为不是所有浏览器都一致地采用了HTML5的所有功能,我们发现在主流浏览器都认可它们想要使用的大部分功能之前,表明何种功能适用于何处和兼容何种功能(在不兼容时如何做),有助于开发人员实际熟悉HTML5和它的功能,以及它将拥有的缺点。为了帮助用户,Adobe提供了Adobe BrowserLab工具,它允许用户在不同的浏览器和配置上测试Web内容。我们会呈现您的内容,并向您发回图像以显示有效和无效的功能。

在您在浏览器中实现的功能方面,桌面与移动设备之间仍然存在着差距。在设备功能集成或访问上,我们还没有达到相同的丰富程度,但这种差距正在缩小:浏览器中添加了新功能,JavaScript引擎的性能改进了不少。前途是光明的,差距终会消除,但我们还需努力。

我们的传统软件产品拥有悠久的历史,但我们正在努力改进产品来与如今互联的时间更紧密地整合。我们提供了一些试验工作来判断客户反馈,比如在Photoshop Express中,允许通过浏览器和在移动设备上管理图像。您一定会看到我们在此领域的更多成就。

Adobe的意图始终是使用户能够最大化他们的信息和内容的价值和流行。我们不断在开发使对内容的访问更轻松、更迅速、更富表现力和更有价值的工具。因为即使细微的技术更改,对开发工具以及依靠它们的设计人员和开发人员也有巨大的影响,所以Adobe选择比提供试验性呈现器的厂商更缓慢地发展。我们的客户需要摆脱试验,它们希望使用Adobe工具实现此目标。因为我们通过工具来代表我们的用户,所以我们对HTML5的全景拥有与此领域的其他许多厂商不同的独特视角。而且正因为这种不同的、基于工具的视角,我们现在专注于来自W3C的更加成熟和稳定的HTML5建议。

betway体育app 1

作者:Carl Cargill

 

英文原文:

 

赞 收藏 评论

betway体育app 2

设备兼容特性 (Class: DEVICE ACCESS)

HTML5提供了一些新的元素和属性,例如(网站导航块)和。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如和标记。

SVG vs. SVGZ

首先,我们可以在保存的对话框中选择两种潜在的SVG格式。

betway体育app 3

SVGZ是一种高度压缩(Zipped,我猜想)版本的SVG,它给出了一个更小的文件,但是把它自身的XML变成了乱码,导致我们没办法使用CSS和JavaScript来操纵矢量。

点评:多数人使用 HTML 4 和 XHTML 1 编写网页。相对较少的 HTML 狂热者了解语义 HTML 的概念、验证 HTML 结构和改进文档的可访问性。高质量的 HTML 文档是反复权衡、设计优选和讨论酝酿的结果。尽管受到诸多批评,还没有任何语言的普及性能与 HTML 比肩。多数用户满足于标准的现

可以说大部分的HTML协议在众多网络技术公司中达成共识,但在视频格式方面,世界各大互联网公司正在为具体标准进行争论,这可能影响HTML5标准的分流。纷争的两大阵营分别是Opera、火狐、Google等,另一大阵营则由苹果公司领衔。

HTML5规范开发完成时,将成为主流。

字体

SVG 文件并不仅仅可以包含矢量路径。文本对象就是一个这样的例子,它的字体(Font)选项可以让你来决定如何处理文本对象。

betway体育app 4

  • Adobe CEF: 它会使用字体提示来显示出更精致的排版。但是它并不能被所有的SVG查看器支持。
  • SVG: 被所有SVG查看器支持,但是缺乏Adobe CEF的精细。
  • 转换为轮廓: 删除所有的编辑功能,但是无论在什么查看器中查看,都保留了一样的文本。导出一个稍大的文件,作为路径需要进行说明,而不仅仅是指出都存在哪些字符。

字体选项中还包含子集化(Subsetting),这只在你没有把文本转换成轮廓是才是有关系的。

betway体育app 5

子集化在SVG文件中嵌入字符信息,可以让文件显示那些在用户的系统中没有安装的字体。嵌入整套字体(显然)会导致文件变得很大,但是你可以选择要把多少字形包含进去。

多数人使用 HTML 4 和 XHTML 1 编写网页。相对较少的 HTML 狂热者了解语义 HTML 的概念、验证 HTML 结构和改进文档的可访问性。高质量的 HTML 文档是反复权衡、设计优选和讨论酝酿的结果。尽管受到诸多批评,还没有任何语言的普及性能与 HTML 比肩。多数用户满足于标准的现状,仿佛生来就该如此一样。
但是和其他很多标准一样,HTML 也有后继者。即便现在,专家仍然在考虑 HTML 的下一版本,解决当前版本中已知的所有问题。和任何人多的地方一样,这些专家也对此项工作的未来方向持有不同意见。
关于新 HTML 版本的第一个提议来自 W3C 组织的一个工作组。这个工作组想法围绕着 XHTML 2— 这个标准延续了原来进一步净化 XHTML、回归第一版 HTML 设计理念的开发方向。
W3C 之外的一些重要的 HTML 专家 — 浏览器厂商、Web 开发人员、作者和其他有关人员 — 不同意 XHTML 2 的方向。2004 年,他们成立了一个独立的工作组,为新的 HTML 版本提出了一种新的设计方向。在 WHATWG(Web 超文本应用程序技术工作组,Web Hypertext Application Technology Working Group)的名义下,他们推出了 HTML 5 和 Web Forms 2。
数年之后,通过工作草案清楚地描述了 HTML 的另一种发展方向。2007 年 4 月,W3C 针对是否接纳 HTML 5 进入标准审核程序的提议进行了投票,(还)没有承认它是正式标准。多数人赞同。于是出现了一种有意思的情形:W3C 同时研究两种互相竞争的 HTML 和 XHTML 后继技术。从理论上说,两者都有充分的理由。从实践上说,让所有的主流浏览器支持这两种标准还要克服很多障碍。
这就是导致目前这种情况的基本事实。更有意义的是讨论两种提议之间的真正分歧。本文概括介绍了两种提议的基本要点,然后剖析两者的设计理念。 经常用到的缩写词
CSS:级联样式表
HTML:超文本标记语言
W3C:万维网联盟
XHTML:可扩展超文本标记语言 XHTML 简史
理解 XHTML 2 背后隐藏的设计理念需要了解一点历史。20 世纪 90 年代初,第一个 HTML 版本是基于标准通用标记语言(SGML)的。主要的区别在于超链接特性 — 万维网的关键基础和成功因素。和 SGML 一样,HTML 允许作者描述文档的结构,把头部和段落、有序列表、无序列表分开。在屏幕上的显示结果和浏览器有关。
随着 Web 日渐普及,HTML 用户要求控制页面的观感。浏览器厂商在 HTML 2 和 3 中推出了新的特性。网页变得难以理解,复杂的嵌套表结构成为控制页面布局的主要手段。文档的其余部分则充斥着 font 标记和 color 声明。原来的文档结构已经难以理清。
HTML 4 的出现就是为了结束这种混乱,它将表示逻辑推给了 CSS,为高级的内容定位引入了层(DIV)。和 HTML 3 相比这意味着代码编写模式上的变化。为了简化迁移的过程,通过 HTML 4 的 Transitional 版本来支持旧的 HTML 3 结构。适用于高级用户的 Strict 版本则要求将内容和表示彻底分开。
第一个 HTML 4 网站把 DIV 当作新的圣杯一样使用,页面中几乎每个需要略加修饰的元素都用上,包括(但不限于)头部。HTML style 属性是常见的描述表示细节的地方。最终从网页中消灭了泛滥成灾的表格。但内容和表示逻辑仍然混在一起。必不可少的 CSS 文件只有寥寥数行。
最近,一些知名的 Web 开发人员为 HTML 4 样式表提出了一种更巧妙的办法。在现代浏览器中,CSS 属性并没有局限于 DIV 元素。只要愿意可以为任何 HTML 元素指定样式。很多 weblog 开始谈论语义 HTML。没有完全禁止 DIV 元素,但是网页编写者开始使用最适合描述其内容的 HTML 元素。比方说,多数网站的导航菜单最好用无序列表来描述。再比如,不对段落元素使用 bigHeader 这样的类名,而改为 H1 元素,然后用 CSS 根据要求修改表示形式。
同时,W3C 提出 XHTML 1 作为符合结构良好而有效的 HTML 4 的 XML 版本。对于 XML 用户来说,这样做简化了将 XML 内容转化成网页并用已有验证程序检查转换结果的工作。XHTML 1.1 尝试将不同的问题隔离到不同的模块中。模块化方法便于针对不同的需要重用标准的不同部分,也有利于用新的功能扩展标准。
和 HTML 4 相比,XHTML 1.1 的用户甚至更多,把内容和表示分离开。但是和过去一样,一些实际问题只能使用 CSS 中技巧来解决。比如,无序列表表示的菜单结构通常包括漂亮的图片。但是,图像不大容易通过文本-语音设施读给有视觉障碍的人听。而且 Lynx 这样的文本浏览器也不能显示图像。一个复杂的 CSS 技巧可以在浏览器中隐藏文本显示图像。但是如果不同页面上的菜单不同,就很难用 CSS 指定这部分内容了。 XHTML 2 背后的设计理念
XHTML 2 背后最重要的设计理念是进一步分离内容和表示,改进 HTML 4 和 XHTML 1 残留的瑕疵。比如,为无序列表中的每项指定图像的原生支持。原来的 IMG SRC 标记换成了可用于任何元素的可选属性 SRC。修改后的 CSS 完全脱离了内容,不支持图像的设备很容易转而表示文本。
但 CSS 不是 Web 开发人员的惟一挑战。大量的时间用于服务器和 HTML 表单的交互以及存在大量 JavaScript™ 代码。表单仅限于一维的键值对。开发 JavaScript 代码工作量很大,但是在文本-语音转换设备这样的接口上毫无用处。
基于模块化的方法,XHTML 2 用 XForms 模块替换了 HTML Forms,使用适当的应用程序模型增加了对常见问题的支持。XForms 不需要一行脚本就能指定交互逻辑、验证规则和计算方法。此外,这种技术采用了丰富的 XML 结构而不是键值对,允许出现嵌套的子表单和重复的元素。除了提供一个强大的引擎外,文本-语音设备更适合改变应用程序的丰富性。
除了 XForms,还有其他一些 XHTML 有关的问题抽取为独立的规范满足其他需要 — 比如 XML Events、XFrames 和 Ruby(亚洲语言)。
随着表示的分离,编程也从标准中分离出来。onClick 之类的交互属性被 XML Events 模块代替。由于 XML Events 规范本身就是为此而设计的,它提供了一组更强大的工具来处理用户接口。
对于 XHTML 2 的创新,总结而言其基本理念就是分解不同的问题。问题不再是 HTML 的次要特性,而成为新规范的主要目的。因此,新规范最适合优化面临的问题。不过,区别对待不同的问题是出于理念而不是实践的需要。熟悉使用这套工具的聪明的开发人员可以得到需要的结果。但是当前 HTML 版本的一般用户能否创建高质量的 XHTML 文档并不好说。
XHTML 2 的目标很可能不是一般 HTML 用户。但是在好的开发人员手中,可以作为增强可访问性的不错的方法。 HTML 5 的设计理念
WHATWG 在设计 HTML 5 的时候采用了一种更符合实际的方法。没有考虑问题分解之类的抽象理念,这个工作组从当前主流浏览器的行为出发制定文档,和 W3C 规范完全不同。在上述分析的基础上,这个工作组调查了 HTML 的实际运用。
根据这些信息,工作组提出了旨在简化一般 Web 开发人员工作的方案。虽然 HTML 5 宣称源于上一 HTML 版本,但其主要目标不是纯粹性。比如,模块化文档的主要目标是方便用优化的 Web 应用程序替换。
基于此目的的模块化语言大大简化了 Web 应用程序的开发。比如,HTML 5 支持数据表格、菜单和工具栏这类交互组件。使用默认行为的描述性 HTML 元素可以避免用大量代码模拟通用 DIV 的行为。
HTML 5 规范不限于 HTML 元素和属性。它定义了编辑文档和拖放式交互这类专用的 JavaScript API。这种方法和分解问题的办法截然不同。它简化了 Web 开发人员 API 但增加了规范的大小。
HTML 5 和 HTML 4 的相似性远远超过 XHTML 2 和 XHTML 1 的相似性。迁移路径更平坦了,有经验的 HTML 4 开发人员熟悉新版本也更方便。新特性遵循相似的逻辑。特定元素的专门事件属性允许 HTML 编辑人员提供更适当的文本完成功能。
当前的 Web 应用程序和服务器的交互依赖于异步 JavaScript XML (Ajax)。HTML 5 认识到了和服务器交互的重要性,定义了多种和网络交互、分发收到的服务器事件和从其他域向文档发送消息而不会造成安全问题的方式。
HTML 5 的基本设计理念是利用 Web 开发人员需要的特性扩展 HTML 4。HTML 5 在继承 HTML 4 基本技术的同时进行了简化。为了解决 HTML V4 的不足,HTML V5 选择最简单直接的办法重新设计。 新标准的实际应用
XHTML V2 和相关模块得到了 W3C 的官方支持,相关模块成为 W3C 支持的其他 XML 规范的重要因素。不幸的是,W3C 的官方认可不能保证主流 Web 浏览器的支持。支持一般的 XHTML V2 不是问题:现代浏览器已经支持很多功能。正确地使用 XHTML V2 依赖于相关模块的可用性。在撰写本文的时候,Microsoft 是否要扩展 Windows® Internet Explorer® 以支持 XML Events 和 XForms 这些特性还不清楚。一种 Mozilla XForms 插件,包括 XML Events,已经开发了数年。该插件提高了这种技术的功能,降低了实现的难度。
HTML V5 规范的编写保持了和浏览器厂商的深入沟通,始终考虑到实现的问题。尽管该团队对 W3C 官方认可表示怀疑。FAQ 甚至没有正式回答什么时候通过正式批准的问题。不论 W3C 的态度如何,浏览器厂商似乎决定实现非正式的 HTML 5 标准。浏览器厂商赶在官方标准出炉之前已不是第一次了。 互相竞争的标准
到目前为止,HTML 5 和 XHTML 2 都还不是正式的推荐标准。将来一些细微的地方还可能变化。但它们的发展方向不会变,两者都解决了现行标准存在的一些不足。未来的浏览器如何增加对这两种新标准的支持还有待观察。当前浏览器同时支持 HTML 4 和 XHTML 1。类似地,将来的浏览器可能同时支持 HTML 5 和 XHTML 2。这两种标准都有各自的支持者。
如果对 XHTML 1.1 比 HTML 4 更关心,希望创建的文档能够支持不同的设备,可能更偏爱 XHTML 2。如果使用 XHTML 1 仅仅是因为它符合 XML 标准,而更喜欢 HTML 5 的新特性,XHTML 5(用 XML 改写的 HTML 5)也许是您的最佳选择。
HTML 5 颇受使用 HTML 4 开发交互式 Web 应用程序的开发人员的欢迎。对于使用所见即所得 文档编辑器的站点这种方法更可行。但是要具体情况具体分析,HTML 4 和 XHTML 1 很可能要并存很长时间。

这就解决了传统的一种局面——网站为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,比如,新的HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用div。

在Web页面中嵌入SVG

到目前为止,我们已经创建了一个SVG文件,并已经在浏览器中查看。现在该了解如何在Web页面中显示这个文件了。

首先,我们需要一个Web页面。不需要任何复杂的东西,一个空页面带有 .html 的文件扩展名,再用一个普通的文本编辑器保存即可。我们不需要纠结这个文件中的代码,但是如果你对HTML的基础知识有兴趣,可以看看这个,The Best Way to Learn HTML。

这是我的文件,使用Mac OS X自带的文本编辑器打开,你也可以使用其它的文本或代码编辑器。

betway体育app 6

这个文件可以在Web浏览器中打开,但是我们需要添加一些HTML“标记”的代码,以便嵌入SVG。有以下几种方法。

从性能角度来说,HTML5首先是缩减了HTML文档,使这件事情变得更简单。从用户可读性上说,原先一大堆东西对初学者来说,第一次看到这些东西是看不懂的,而HTML5的声明方式对用户来说显然更友好一些。

据IDC的调查报告统计,截至2012年5月,有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。

总结

以上就是大概的基础内容!在这个教程中我们讲解了SVG的创建,还有SVG在Web中的基本使用。

如果你还不清楚SVG是什么,而且不知道为何要使用它,我希望这个教程已经让你明白了这两个问题。这种文件格式的潜力是巨大的,并且接下来的时间里都会不断发展,归功于大家在Web以及图形这一方面的想象力还有技术魔力。

原文链接:

b 和 i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。

在测试这一漏洞的过程中,阿伯克哈迪杰哈每16秒即可向他的固态硬盘版MacBook Pro中加载1GB数据。他指出,Chrome等32位浏览器可能会在硬盘塞满前崩溃。“一些采用高明代码的网站其实已经取消了用户电脑对数据存储的限制。”阿伯克哈迪杰哈说。阿伯克哈迪杰哈已经发布一组代码来利用该漏洞,并创建了一个名为Filldisk的专用网站来凸显该漏洞的危害。

何时使用SVG?

清晰的高质量线条,并能够处理图形元素的好处是不言自明的,但是你可以在哪里利用这些优势呢?这里有一个适合使用SVG的列表:

日常的图形:如果你在使用网站上的图形,考虑一下是否可能是SVG格式。如果是的话,为什么不使用它呢?摄影是一个无法使用SVG的例子,但是对于其它的图片,可以考虑一下。

betway体育app 7

如此清晰的字体样本,何必使用模糊的位图格式呢?

图标:网站是一个充满图标的世界。它们不仅通俗易懂(如果使用得当),还缩短了用户加载界面的进程。近年来,图标经常是通过网页字体的方式应用到网站中,但它也可以作为SVG注入到页面中。大家都会喜欢非常简洁、清晰的图标的,so lovely!

betway体育app 8

我还没有完成这组图标的制作,但欢迎你下载和使用它们…

Logo:如果有什么东西是一家企业需要保持珍视的,那就是它的身份标识——Logo了。SVG提供了在网页上展示品牌的最好的方式,而且简单朴素。颜色可以精确,线条质量完美无瑕,而且同一个文件可以在网站上重复使用,但会根据情况有所改变。Perfect!

betway体育app 9

认得这个Logo吗?

装饰:我不需要向矢量艺术家们出售这个idea,是吧?

betway体育app 10

fixate.it的SVG装饰

动画:通过CSS3和JavaScript,Web动画世界的大门已经正式打开。就目前我列出的各种原因,SVG就是完美的驾车!你能想象当你鼠标滑过一个按钮时的动画吗?图标,给你直接的而且个性化的反馈了吗?完全没有极限!

betway体育app 11

Iconic网站的SVG反馈示例

这就是SVG,一种矢量格式,和Web一起发展!现在让我们看看如何使用它。

它可能会消灭Flash

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

选择一个图像

在这点上,你使用的示例矢量图形会导致一些差别,但是都是相对简单的。我使用了由“Webdings”字体免费提供的“No Pirates Allowed”的符号(我从来没有想过我会用这东西!)

字形(Glyphs)面板(文字(Type) > 字形(Glyphs)),选择“Webdings”字体,浏览一下可用的各种字符。

betway体育app 12

选中文本工具(Text Tool),点击画板,然后双击你选择的字形来使用它。

网络标准

适合人群

选项

虽然我们已经选择了嵌入对象,但是这里的最后一个选项也会影响文件的大小。

betway体育app 13

使用大致相同的方式,SVG文件(包含字体)可以保存位图图像。在图像位置(Image location)这里选择“嵌入”,让图像可以通过代码的形式包含进文件里,或者选择“链接”让图像被简单引用。这和在Illustrator中放入图像是一样的,极大地影响了最终文件的大小。

这里的最后一个复选框,可以让你保留Illustrator的编辑功能,如果有需要的话。这意味着所有的图层、滤镜效果、符号等,都将被保留。但是,如果你的SVG已经准备生成了,而且文件的大小很重要,那么就不要选中了。

注意:推荐你保存为.ai后缀的文件,方便再次编辑。

6、将被大量应用于移动应用程序和游戏;

漏洞

在Web中使用SVG

如果你不习惯直接使用Web、HTML、浏览器工作,这一整套东西,有几点事情需要考虑一下。

7、可移植性好。

许多游戏开发商都被Facebook或者Zynga推动着发展,而未来的Facebook应用生态系统是基于HTML5的,尽管在HTML 5平台开发出游戏非常困难,但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式,Facebook差不多就这么干的——基于Web应用及浏览器,但却将之打包整合进原生应用。

<img> 标签方法

首先我们使用一个<img>标签(你可能习惯于使用JPG, PNG文件等等),将文件路径放入 src="" 属性中。把这个片段粘贴到你的HTML文件中:

<img src="SVG-Test.svg" />

假设文件路径是正确的,你的HTML页面在浏览器中打开应该是这样的:

betway体育app 14

我知道这和在Web浏览器中直接打开SVG文件是一样的效果,但现在我们可以做的更好!例如,我们可以使用 width="" 属性将SVG放大:

<img src="SVG-Test.svg" width="900" />

betway体育app 15

一个漂亮的、清晰的SVG,可以无限扩展!

这个方法也许是最简单的,但是它也存在问题。有一些浏览器,出于安全考虑,会限制你能使用SVG来完成的东西(比如:JavaScript)。我们来看看其他的方法。

HTML5的新特性及认识

多设备跨平台

<object> 标签方法

使用 <object> 标签,但是你要这样指定文件路径:

<object type="image/svg+xml" data="SVG-Test.svg"></object>

结果完全相同:

betway体育app 16

对于不支持SVG的浏览器,你可以在 <object> 的内容中放置一个warning,在SVG不能加载的时候显示:

<object type="image/svg+xml" data="SVG-Test.svg">This browser sucks</object>

很多网页设计师都认为这种方法是目前在Web页面中使用SVG的最可靠、最灵活的方法。

其中包括纯粹显示效果的标记,如<font>和,它们已经被CSS取代。

可以说大部分的HTML协议在众多网络技术公司中达成共识,但在视频格式方面,世界各大互联网公司正在为具体标准进行争论,这可能影响HTML5标准的分流。纷争的两大阵营分别是Opera、火狐、Google等,另一大阵营则由苹果公司领衔。

新建文档

打开Illustrator,新建一个文档(文件(File) > 新建(New Document)),设置文件名称,把画板设置为300 x 300px

betway体育app 17

据IDC的调查报告统计,截至2012年5月,有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。

设备兼容特性 (Class: DEVICE ACCESS)

注意:我这里的示例使用的都是Adobe Illustrator CC,但是其他版本的AI也有类似的(但不完全相同的)选项和工具。

8、Html5取代Flash在移动设备的地位。

三维、图形及特效特性(Class: 3D, Graphics & Effects)

SVG配置文件

由于Web以及Web标准的持续发展不断变化,意味着SVG也是不断发展的。如下你可以看到我们在保存SVG文件时的第一个选项:SVG配置文件(SVG Profiles)。配置文件有如下这几个选项:

betway体育app 18

它们分别的意义(或多或少)如下:

  • SVG 1.0: SVG的第一个版本(2001年)
  • SVG 1.1: 和SVG 1.0基本一样,不过SVG 1.1可以被分成更进一步的子类型
  • SVG Tiny 1.1: 这是SVG 1.1的第一个子类型,对移动Web做了优化。这是一种非常简单的SVG格式,是为“高度受限的移动设备”设计的。Tiny不支持渐变、透明度、剪裁、掩蔽、标志、图案、下划线文本、贯穿线文本、垂直文本以及SVG的滤镜效果。
  • SVG Tiny 1.1+: 这是SVG Tiny 1.1的进一步发展,加入了对渐变和透明度的支持。
  • SVG Basic 1.1: 这是SVG 1.1的第二个子类型,为移动设备(如智能手机)提供了更多的功能。基本上不支持非矩形裁剪和一些SVG滤镜效果。
  • SVG Tiny 1.2: 这最初是打算作为SVG的下一套完整的规范的,但是最后却开发成了一个Tiny子类型。不要问我究竟有什么区别orz

很快,SVG 2.0就可以添加到这个列表中。这些配置的细微差别对我们来说,在很大程度上是无关紧要的。SVG能够处理各种各样的事情,但对于简单的矢量保留SVG 1.1以及图形当前的默认设置即可,在Web上的任何可能的地方显示都是没有问题的。

内容目标

1、移动优先

保存

把这个文档保存成SVG格式,去文件(File) > 存储(Save),或者文件(File) > 存储为(Save As...)。在弹出的对话框中选择一个存储位置,给它一个文件名(如果你还没命名的话),然后最重要的是,选择SVG作为存储格式。

betway体育app 19

你点击之后会弹出另一个对话框,是一些SVG的选项。

betway体育app 20

事实上,目前忽略这些选项是没有问题的,全部保持默认即可。

晚点我们会讲解一下这些选项,现在我们就先点击确定(OK)吧。

betway体育app 21

这样SVG文件就生成啦!

它将会变得很移动

用HTML5的优点主要在于,这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏,你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台,甚至可以通过封装的技术发放到App Store或Google Play上,所以它的跨平台性非常强大,这也是大多数人对HTML5有兴趣的主要原因。

将文件另存为SVG

我们将使用一个非常简单的图像,来说明SVG是干什么的。

掌握HTML5新特性

本地存储特性(Class: OFFLINE & STORAGE)

转换为轮廓

我们现在要把这个字形转换为轮廓。

注意:SVG确实支持文本对象,但是为了在根本的层面上展示东西,我们还是会选择路径。

选中字形,使用选择工具(V)(Selection Tool(V))

betway体育app 22

然后,选择文字(Type) > 创建轮廓(Create Outlines)

betway体育app 23

So good!现在我们就有一个基于路径的矢量对象了。

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

该问题的根源在于HTML5存储本地数据的方式。虽然每个浏览器都有不同的存储参数,但很多都支持用户自定义限制,且至少会在用户电脑上存储2.5MB数据。

CSS背景方法

使用CSS(与HTML结合使用的样式语法)我们也可以让SVG文件作为一个背景图像元素加载到Web页面中。

这是这个教程之外的内容了,如果你对学习CSS有兴趣的话,可以看一下这个页面,The Best Way to Learn CSS。

我们可以用一个单独的CSS文件,把它链接到我们的HTML文档,或者在我们的HTML文章中直接使用<style>标签。样式定义如下:

html { background-image: url(SVG-Test.svg); }

这种样式规则指定了我们的SVG文件会显示为我们的HTML元素的背景。

12月,万维网联盟宣布已经完成对HTML5标准以及Canvas 2D性能草案的制定,这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用HTML5,并大力宣传它的好处。此前,站长之家曾经做过一期调查,调查显示只有36.16%的站长正在学习中,另外的63.76%表示正在观望中。作为站长,你是否准备开始学习HTML5?

第四个解决方案,前面3个都是以HTML5游戏或者应用的形式为赢利点,其实任何技术形态最终都是一样,本质上都是服务于人(包含个人、企业),只要能满足需求的业务组合都是盈利的方向,例如目前催生的微信网站、HTML5营销、HTML5外包 等,都是满足现实需求的盈利方案。

为什么使用SVG?

SVG格式是由万维网联盟(W3C)开发并进行维护的。W3C是由一群努力规范网络,使得它成为一个更开放以及可访问的民间组织。

SVG对于Web来说是很棒的,尤其是现在,因为它不必考虑屏幕分辨率的问题。不论你新入手的智能手机的像素如何密集(分辨率有多高),矢量始终显示得如同刚下的雪一样清晰,而不是栅格化的图像。

文件大小对于Web来说永远是一个不可忽视的问题(没有人会愿意等一个通过移动连接缓慢地加载5Tb的图像到浏览器中),而SVG是一个简化的矢量格式。它基于XML,又删掉了很多不必要的“内容”,提供了一个相对轻量级的文件。

最后,基于这些XML的构建模块,SVG文件的内容可以被制作得同Web页面上的其他元素一样。SVG中的内容是可以被分离的,颜色可以变换,描边宽度、透明度也都可以改变,我们甚至可以使用滤镜(如高斯模糊),甚至可以通过CSS和JavaScript创建动画。

在测试这一漏洞的过程中,阿伯克哈迪杰哈每16秒即可向他的固态硬盘版MacBook Pro中加载1GB数据。他指出,Chrome等32位浏览器可能会在硬盘塞满前崩溃。“一些采用高明代码的网站其实已经取消了用户电脑对数据存储的限制。”阿伯克哈迪杰哈说。阿伯克哈迪杰哈已经发布一组代码来利用该漏洞,并创建了一个名为Filldisk的专用网站来凸显该漏洞的危害。

语义特性(Class:Semantic)

可缩放矢量图形(SVG)是早在1998年就已经有的一种矢量图像格式。它总是和Web一起发展,但是直到现在才开始赶上Web发展的步伐。如今我们已经不能否认SVG和Web的相关性,所以让我们来学习一下从Illustrator导出SVG文件到Web浏览器的基础知识。

6、Canvas 对象

HTML5在诞生之后,就树立了一个原则,那就是所有的技术必须是开放的,不准有专利限制,在这期间Opera捐献了CSS技术,而Google则提供了视频格式WebM。

Web浏览器

首先,浏览器可以非常好地处理这种文件格式。右键点击你的SVG文件,选择你的默认浏览器打开:

betway体育app 24

旧版的浏览器,比如IE8或者更早的版本,不支持SVG格式,所以就没办法在里边显示了。

betway体育app 25

关于SVG和浏览器支持的更详细的内容,可以在caniuse.com找到。

但是只要你使用的是现代浏览器,SVG文件的打开和显示都是没有任何问题的。

betway体育app 26

首先要注意的事情是,SVG文件保留了我们最初定义的尺寸。我们设定了300 x 300px的大小,画板的外边界已经确定,而海盗图标也被放在了中心。

betway体育app 27

第四个解决方案,前面3个都是以HTML5游戏或者应用的形式为赢利点,其实任何技术形态最终都是一样,本质上都是服务于人(包含个人、企业),只要能满足需求的业务组合都是盈利的方向,例如目前催生的微信网站、HTML5营销、HTML5外包 等,都是满足现实需求的盈利方案。

网页多媒体特性(Class: MULTIMEDIA)

关于SVG选项

之前我们跳过了SVG选项,因为确实没有太多关系。但是,为了全面了解,我们还是来看一下吧。

HTML5在诞生之后,就树立了一个原则,那就是所有的技术必须是开放的,不准有专利限制,在这期间Opera捐献了CSS技术,而Google则提供了视频格式WebM。**

它新并不表示它安全

内联方法

我们之前说到SVG源于XML,你过你在你的文本编辑器中打开SVG文件,你会看到如下的代码:

betway体育app 28

这么大的负载!事实上,在你最初的震惊之后,你应该是能够看懂一些的了。我们可以把这些XML代码嵌入,即把内容直接粘贴到HTML文件中。

当你对SVG XML文档的结构熟悉了之后,你就可以直接修改文件了,这有助于精简文件大小。

只要你想要,可以删除 <!DOCTYPE> 这一行,还有 <!-- Generator: Adobe Illustrator 的注释,甚至是 <?xml 的声明。

你真正需要的是一个简化的版本,只包括几个XML标签:

<svg>
    <path/>
</svg>

我们的SVG:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

    <path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743
        c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150   c0-19.533,6.914-36.213,20.743-50.042
        C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742   C213.87,113.786,220.784,130.467,220.784,150z
        M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.53   7,150,90.537c-14.693,0-27.6,4.753-38.72,14.261
        l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,   36.819c0,16.422,5.804,30.438,17.415,42.048
        c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791   l-10.199-10.112l7.778-8.643l10.804,10.717
        C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236
        c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.07   1-5.013-7.605-11.092-7.605-18.236v-15.212
            c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2   .708,0.994-5.069,2.982-7.087
            c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.5   93c7.548,5.302,11.322,12.044,11.322,20.225
        V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z
         M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z
         M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z
            M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45   -3.774,3.674-7.173,3.674
        c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z
         M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/>

</svg>

本文由必威发布于必威-前端,转载请注明出处:多数人使用 HTML 4 和betway体育app: XHTML 1 编写网页

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。