HTML5 for Web Designers部分翻译(含中英文)

第一次翻译技术类文章,翻译不好别介意~

 

【原文来自:HTML5 for Web Designers

翻译:武良呈(alex451373766@gmail.com)】

 

 

KEEPING IT REAL

保证HTML5规范的合理和实用


 

The creation of HTML5 has been driven by an ongoing internal tension. On the one hand, the specification needs to be powerful enough to support the creation of web applications. On the other hand, HTML5 needs to support existing content, even if most existing content is a complete mess. If the specification strays too far in one direction, it will suffer the same fate as XHTML 2. But if it goes too far in the other direction, the specification will enshrine <font> tags and tables for layout because, after all, that’s what a huge number of web pages are built with. It’s a delicate balancing act that requires a pragmatic, levelheaded approach.

 

HTML5的创建是由其自身压力驱动的。一方面,规范必须强大到足以支持Web应用程序的创建。另一方面,HTML5的需要支持现有的内容,即使大多数现有的内容槽糕的一塌糊涂。如果规范偏离太远,它将为XHTML2遭受同样的命运。但如果规范在另一个方向走得太深,同样也会有失偏颇,例如大量网站采用的<font>标签的存在和不合理地用表格进行布局。而要保证这两方面的微妙平衡,需要一个务实,冷静和理性的方法去实践。


 

GIVE IT TO ME STRAIGHT,DOCTYPE

Doctype,用最直接的方式展现给我


 

A Document Type Declaration, or doctype for short, has traditionally been used to specify which particular flavor of markup a document is written in.

 

文档类型声明,或简称DOCTYPE,传统上一直用于指定和声明某文档所使用的编写规则

 

The doctype for HTML 4.01 looks like this:

 

HTML 4.01的DOCTYPE的基本书写方式如下:

<!DOCTYPE HTML PUBLIC »

"-//W3C//DTD HTML 4.01//EN" »

"http://www.w3.org/TR/html4/strict.dtd">

Here’s the doctype for XHTML 1.0:

<!DOCTYPE html PUBLIC »

"-//W3C//DTD XHTML 1.0 Strict //EN" »

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

They’re not very human-readable, but, in their own way, they are simply saying “this document is written in HTML 4.01,” or “this document is written in XHTML 1.0.” You might expect the doctype declaring “this document is written in HTML5” would have the number five in it somewhere. It doesn’t. The doctype for HTML5 looks like this: 

 

这种写法的可读性不高,而这些仅仅是用来声明:"这是按照HTML4.01规范写的"或"这是按照XHTML1.0规范写的"。你可能期望DOCTYPE这样声明:this document is written in HTML5”。而实际上HTML5的DOCTYPE是这样的:

 

<!DOCTYPE html>

 

It’s so short that even I can memorize it.

 

这简单到我都能记住!

 

But surely this is madness! Without a version number in the doctype, how will we specify future versions of HTML?

 

但是,这肯定是太疯狂了!如果没有一个版本号的doctype,我们将如何指定的HTML的未来版本? 

 

When I first saw the doctype for HTML5, I thought it was the height of arrogance. I asked myself, “Do they really believe that this will be the final markup specification ever written?”

 

当我第一次看到了HTML5的的doctype这样声明会不会过于自信?我问自己:"难道他们真的相信这将是他们写的最后一个标记规范?" 

 

It seemed to be a textbook case of Year Zero thinking.

 

这似乎最新思维方式的经典案例。

 

In fact, though, the doctype for HTML5 is very pragmatic. Because HTML5 needs to support existing content, the doctype could be applied to an existing HTML 4.01 or XHTML 1.0 document. Any future versions of HTML will also need to support the existing content in HTML5, so the very concept of applying version numbers to markup documents is flawed.

 

事实上,HTML5DOCTYPE非常简约务实。由于HTML5需要支持的现有内容,HTML5文档类型可用于现有的HTMLXHTML1.0文档4.01。 HTML的任何未来版本也将支持现有内容,因此用应用版本号来标记也就多余了。 

 

The truth is that doctypes aren’t even important. Let’s say you serve up a document with a doctype for HTML 4.01. If that document includes an element from another specification, such as HTML 3.2 or HTML5, a browser will still render that part of the document. Browsers support features, not Doctypes.

 

而且,文档类型甚至不是重要的。比方说,你的文档声明为HTML4.01。如果该文档中仍包括来自其他如HTML3.2HTML5内容规范或者元素,浏览器将仍然呈现该文档的那些部分。这是浏览器的支持特点,而与文档类型基本无关。 

 

Document Type Declarations were intended for validators, not browsers. The only time that a browser pays any attention to a doctype is when it is performing “doctype switching”— a clever little hack that switches rendering between quirks mode and standards mode depending on the presence of a decent doctype.

 

文档类型声明的目的是程序验证,而不是为了浏览器。浏览器唯一一次关注DOCTYPE是当它正在执行DOCTYPE切换(根据doctype切换标准和模式)“之时。

 

The minimum information required to ensure that a browser renders using standards mode is the HTML5 doctype. In fact, that’s the only reason to include the doctype at all. An HTML document written without the HTML5 doctype can still be valid HTML5.

 

HTML5DOCTYPE提供了最少信息量,以保证保证浏览器用标准方式渲染文档。事实上,这也是DOCTYPE存在的唯一理由。一个没有DOCTYPE的HTML文档依旧可以正常显示。


 

KEEPING IT SIMPLE

保证HTML5的简单


 

The doctype isn’t the only thing that has been simplified in HTML5.

 

HTML5简化的不仅仅是doctype声明标签。

 

If you want to specify the character encoding of a markup document, the best way is to ensure that your server sends the correct Content-Type header. If you want to be doubly certain, you can also specify the character set using a <meta> tag. Here’s the meta declaration for a document written in HTML 4.01:

 

如果你想指定一个文档的字符编码,最好的办法是要确保你向服务器发送正确的Content - Type。如果你加倍仔细,也可以用<meta>标记指定使用的字符集。下面是在HTML4.01元的书面文件声明:

 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 

Here’s the much more memorable way of doing the same thing in HTML5:

 

而HTML5的方式就简单好记的多了:

 

<meta charset="UTF-8">

 

As with the doctype, this simplified character encoding contains the minimum number of characters needed to be interpreted by browsers.

 

这是浏览器能识别接受的最简约的字符集声明了

 

The <script> tag is another place that can afford to shed some fat. It’s common practice to add a type attribute with a value of “text/javascript” to script elements:

 

<script>标签是另一个例子。这是常见的做法是添加javascript实例: 

 

<script type="text/javascript" src="file.js"></script>

 

Browsers don’t need that attribute. They will assume that the script is written in JavaScript, the most popular scripting language on the web (let’s be honest: the only scripting language on the web):

 

浏览器不需要这些属性。HTML5假定文档脚本语言就是JavaScript(网上最流行的脚本语言),说实话,这确实是唯一的Web脚本语言

 

<script src="file.js"></script>

 

Likewise, you don’t need to specify a type value of “text/css” every time you link 

to a CSS file:

 

而在文档中添加CSS文件的标签同样也瘦了一大圈,下面以前版本的标签:

 

<link rel="stylesheet" type="text/css" href="file.css">

 

You can simply write:

 

而你可以这样简写:

 

<link rel="stylesheet" href="file.css">

 

以下展示部分源码,需要完整版的请下载文件 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> *{margin:0;padding:0;list-style:none} body{background:#ccc;} .wrap{margin:100px auto;width:900px;height:300px;box-shadow:0 0 4px #434343;background:#fff;padding:20px;border-radius:10px;} .wrap .language{position:relative;width:100px;height:30px;padding:0 30px;margin:20px;text-align:center;line-height:30px;border:1px solid #434343;cursor:pointer;} .wrap .language .languages{position:absolute;top:30px;left:-1px;width:354px;height:auto;border:1px solid #434343;display:none;background:#fff;color:#fff;line-height:40px} .wrap .language .languages ul li{float:left;width:78px;height:40px;margin:4px; border:1px dashed #ccc;background:#368;} .wrap .input, .wrap .show{width:430px;height:150px;float:left;background:#fff; color:#000;margin:10px;box-shadow:0 0 4px #222;line-height:40px;font-size:20px;text-indent:10px;color:#333;font-family:'微软雅黑';} .wrap .input textarea{z-index:3;height:100%;width:400px;border:0;resize:none;outline:0;color:#333;font-family:'微软雅黑';margin:0;padding:0;line-height:40px;font-size:20px;text-indent:10px;} .wrap span.btn{width:140px;height:30px;float:right;margin:10px;line-height:30px;text-align:center;background:#368;box-shadow:0 0 4px #ccc;border-radius:5px;color:#fff;cursor:pointer;} </style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值