翻译-你必须知道的28个HTML5特征、窍门和技术

时间 2019-12-04

标签翻译必须知道 html5 html 特征窍门技术栏目 HTML5 繁體版

原文原文链接

原文地址： http://net…html5-features-tips-and-techniques…/
原文做者： Jeffrey Way
翻译小编：张鑫旭

//zxx:如下为翻译全文，本着语言生动和本土化之原则，内容有编辑javascript

注意：每周有那么几回，此列表会更新一些新的窍门，最终，本文会成为超级有用的资源。
//zxx:丑话说在前头，我可没功夫更新，因此，即便到您女儿出嫁那天，本文仍是28项内容css

前端的发展如此之迅猛，一不留神，大侠你可能就会被远远地甩在后面了。若是你不想被HTML5的改变/更新搅得不知所措的话，能够把本文的内容做为必须了解的热身课程。html

1、新的Doctype

//zxx:”doctype”中文意思指“文档类型”

仍在使用麻烦的，不可能记得住的XHTML文档类型？前端

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

若是是，为何还在用呢？使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的html5

<!DOCTYPE html>

我就琢磨着，为了HTML5搞个这厮代码，您可能会对这段代码究竟靠不靠谱表示怀疑。不用担忧，现在这是可行的，只有老的浏览器须要一个特定的 doctype（文档类型）。浏览器若是不知道doctype，就会很简单的以标准模式对包含的标签进行渲染。因此，妹妹你大胆的向前冲，把当心谨慎都抛到九霄云外，去拥抱新的HTML5文档类型吧。java

2、图形元素(The Figure Element )

看看下面给图片添加的标示：react

<img src="path/to/image" alt="About image" /><p>Image of Mars. </p>

文字裹在p标签里，与img标签各行其道，很难让人联想到这就是标题。HTML5经过采用<figure>元素对此进行了改正。当合<figcaption>元素组合使用时，咱们就能够语义化地联想到这就是图片相对应的标题web

<figure>
    <img src="path/to/image" alt="About image" />
    <figcaption>
        <p>This is an image of something interesting. </p>
    </figcaption>
</figure>

3、<small>从新定义

还在不久前，<small>元素被用来建立靠近logo且相关的副标题。这是个颇有用的表现元素，可是，如今，这种用法可能就不正确了。<small>元素已经被从新定义了，指小字，于是更具可用性。试想下你网站底部的版权状态，根据对此元素新的HTML5定义，<small>能够正确地包裹这些信息。ajax

small元素专指“小字”。正则表达式

4、脚本(scripts)和连接(links)无需type

您可能如今仍在给link和script标签增长type属性。

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

这已是老黄花菜，非必需品了。这意味着，这些标签都各自指向样式表和脚本。所以，咱们能够把type属性一块儿干掉。

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

5、引号仍是不要引号

…这确实是个问题。记住，HTML5不是XHTML，要是你不肯意，你没有必要非得用引号标记包裹你的属性，没有必要非得闭合元素。换句话说，只要你本身以为舒服，就没有什么对错之分。对于我本身来讲就是如此。

<p class=myClass id=someId> Start the reactor.

对此取舍你还得本身拿主意。若是你更倾向于结构化的文档，就算天塌下来，也要把引号紧紧拽在怀里。

6、内容可编辑

最新的浏览器有个很赞的新属性能够应用到元素上，叫作contenteditable。顾名思意，就是容许用户编辑元素内容包含的任意文本，包括子元素。相似的用途还有不少，像是简单的待办事项清单应用程序，可大大利用其本地存储的优点。

<ul contenteditable="true">
    <li>悼念遇难香港同胞 </li>
    <li>深圳特区30周年</li>
    <li>伊春空难</li>
</ul>

或者，根据前面所学到的一些技巧，咱们能够把它写成：

<ul contenteditable=true>

您能够狠狠地点击这里：HTML5内容可编辑demo

7、Email输入(Inputs)

若是咱们给表单输入框应用名为”email”的type属性，咱们能够命令浏览器只容许符合有效的电子邮件地址结构的字符串。没错，内置表单验证即将到来，因为一些显而易见的缘由，咱们还不能100%依赖内置验证，较旧的浏览器不认识这个”email”型，它们会简单地退回到普通文本框。

<form action="" method="get">
    <label for="email">邮箱:</label><input id="email" name="email" type="email" />
    <button type="submit">肯定</button>
</form>

您能够狠狠地点击这里：HTML5邮箱内置验证demo

//zxx:经我小测了下，貌似仅在Chrome浏览器下有效果(xp系统)，当输入内容不是合法邮箱格式，点击“肯定”按钮是没有反应的；当输入为合法邮箱，点击“肯定”按钮才会提交刷新页面。

目前而言，咱们不能依赖浏览器验证，客户端/服务器验证仍是必须的。

还应当指出，当谈到哪些元素和属性支持和不支持时，当前全部的浏览器都有点靠不住的。例如，Opera彷佛支持电子邮件验证，但仅在name属性被指定的时候。并且，它不支持占位符属性，这个咱们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可使用它！

8、占位符(Placeholders)

//zxx:此处内容非直译，有删改

Placeholders什么意思呢，就是文本框/文本域空间默认会有个文字提示，得到焦点时，此提示文字消失；失去焦点时若是内容为空，提示文字又出现。以下图所示：

这些表单控件里面显示的些提示性的文字就是占位符。按照以往的作法，咱们须要使用一点JavaScript代码实现占位符效果，例如我以前的“文本框/域文字提示自动显示隐藏jQuery小插件”一文所展现的。固然，你须要设定一个初始的默认的value值，而后根据输入内容进行判断，从而决定文本框值的改变与否。若是您使用占位符(placeholders)属性，一切就轻松了。

<label for="email">邮箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />

根据个人测试，目前仅webkit核心的浏览器支持placeholders属性，像是Chrome5，Safari4，结果以下所示：

您能够狠狠地点击这里：HTML5占位符Demo

9、本地存储(Local Storage)

多亏了本地存储(非正式的HTML5，本着方便概括的目的)，咱们可让高级浏览器记住咱们的编辑后的内容，即便浏览器被关掉或是页面刷新。

//zxx:根据视频内容，我本身作了个demo，关于本地存储的。

您能够狠狠地点击这里：HTML5本地存储Demo

IE8浏览器已经支持了本地存储，以下截图所示：

尽管显然不支持全部的浏览器，咱们能够在Internet Explorer8时，Safari 4和Firefox 3.5下期待此工做方式。请注意，为了弥补旧的浏览器将没法识别本地存储，你应该先测试，以肯定window.localStorage是否存在。

10、语义的Header和Footer

那些过往的日子：

<div id="header">
	...
</div>

<div id="footer">
	...
</div>

div嘛，很天然的，没有语义化的结构——即便在应用了id后。如今，经过HTML5，咱们可使用<header>和<footer>元素。以上的代码能够替换成：

<header>
	...
</header>

<footer>
	...
</footer>

它彻底适合您有多个页眉和页脚的项目。

尽可能不要混淆”header”和”footer”这些元素。他们只是指他们的容器。所以，将博客底部的，例如，元信息放在footer元素内部是说得通的。这一样也适用于header。

11、更多HTML5表单特征(More HTML5 Form Features )

经过下面视频学习更多有用的HTML5表单特征：

12、IE和HTML5(Internet Explorer and HTML5)

不幸的是，讨厌的IE浏览器须要动点小手术才能理解新的HTML5元素。

全部元素，默认的，都有个inline的display

为了确保全部新的HTML5元素能以block水平的元素正确地渲染，有必要对其作以下定义：

header, footer, article, section, nav, menu, hgroup {
    display: block;
}

不幸的是，IE仍旧忽略这些样式，由于它不知道这些标签从哪里来的，比如是header元素。幸运的是，有一个简单的解决办法：

document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

奇怪的是，这段代码彷佛触发IE浏览器。为了更简单将此应用到每一个新的应用过程当中，雷米夏普(Remy Sharp)建立了一个脚本，一般称为HTML5 shiv。该脚本一样修复了些显示问题。

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

十3、文档某一部分的信息(hgroup)

想象一下，在个人网站的标题，我有个人站点的名称，随后当即由一个副标题。虽然咱们可使用一个<h1>和<h2>标签，为其分别创造标记，可是依旧没有（由于HTML4）一个简单的方法来语义上说明了二者之间的关系。此外，一个h2标记的使用提出了更多的问题，在层次结构上，当涉及到其余网页上显示的标题时。经过使用不影响文档的大纲流hgroup元素，咱们能够将这些标题组合在一块儿。

<header>
    <hgroup>
        <h1> Recall Fan Page </h1>
        <h2> Only for people who want the memory of a lifetime. </h2>
    </hgroup>
</header>

十4、必要的属性(Required Attribute )

表单容许新的必要属性，用来指定是否须要特殊的input。这取决于你的代码偏好，你能够如下面两种方式之一申明此属性。

<input type="text" name="someInput" required>

或者，使用更结构化的方法：

<input type="text" name="someInput" required="required">

两种方法都行。有了这个代码，而且浏览器支持此属性，若是“someInput”文本框是空白，则表单不会被提交。下面是一个简单的例子，咱们还将添加占位符属性，由于没有理由不这样作。

<form action="" method="get">
    <label for="name">姓名:</label>
    <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />
    <button type="submit">提交</button>
</form>

您能够狠狠地点击这里：HTML5必要属性Demo

若是input里面内容是空白，则表单提交的时候，文本框会高亮显示。//zxx:貌似仅在Chrome浏览器下有点小效果

十5、Autofocus属性

一样，HTML5的解决方案消除了对JavaScript的须要。若是一个特定的输入应该是“选择”，或有重点的，默认状况下，咱们如今能够利用自动获取焦点属性。

<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>

有趣的是，虽然我我的更倾向于喜欢XHTML的方法（用引号，等等），写做“autofocus=autofocus”让人感到有点怪。所以，咱们将坚持使用单一关键字的方法。

十6、Audio支持

咱们无需再依赖第三方插件区渲染音频。HTML5提供了<audio>元素，嗯，至少，最终，咱们将没必要担忧这些插件。就目前，只有最近期的的浏览器提供HTML5音频支持。在这个时候，它仍然是一个很好的作法提供一些向后兼容的形式。

<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

Mozilla和WebKit的尚未彻底相处，当涉及到音频格式， Firefox会但愿看到一个.ogg文件，而WebKit的浏览器支持.mp3扩展。这意味着，至少在如今，你应该建立两个版本的音频。

当Safari加载页面时，它不会认可.ogg格式，会跳过它并移动到的MP3版本，所以。请注意IE，每往常同样，不支持这些格式，Opera 10和以及如下版本只能使用.wav文件。

十7、Video支持

与<audio>元素很相似，在新的浏览器中也存在Video！事实上，就在最近，YouTube宣告了新的HTML5视频嵌入，固然，是为支持此功能浏览器。由于HTML5的规范没有指定特定的视频编解码器，它留给了浏览器来决定。虽然Safari和Internet Explorer9能够预期支持H.264格式的视频（其中Flash播放器能够播放），Firefox和Opera是坚持开源Theora 和Vorbis格式。所以，当显示HTML5的视频，您必须提供这两种格式。

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

不管是”ogg”格式仍是”mp4″格式的视频Chrome浏览器都能正确编码

还有一个值得注意的一些事情：

咱们技术上不须要来设置type属性，可是，若是咱们不这样作，浏览器不得不本身去寻找类型。节省一些带宽，仍是你本身声明下吧。
不是全部的浏览器理解HTML5视频。在资源元素的下面，咱们能够提供一个下载连接，或嵌入视频的Flash版本代替。这取决于你。
controls和preload属性就会在下面说起。
有方法可让全部的浏览器支持video标签，具体参见我前面的“让全部浏览器支持HTML5 video视频标签”一文。

十8、视频预载(Preload Videos)

预载属性不彻底是你想的那个样子，虽然，你应该先决定是否要在浏览器预装的视频。是否有必要？或许吧。若是访问者访问一个专门展现了一个视频的页面，你必定要预载的视频，节约参观者等待的一部分时间。影片能够经过设置 preload=”preload”或是简单地添加preload进行预载。我更喜欢后者的解决方案，它少了一点多余的东西。

<video preload>

十9、显示控制条

若是你使用过上面的每个提到的技术点，你可能已经注意到，使用上面的代码，视频仅仅显示的是张图片，没有控制条。为了渲染出播放控制条，咱们必须在video元素内指定controls属性。

<video preload controls>

请注意，不一样浏览器渲染出来的进度条的模样都是不同的。

二10、正则表达式

你发现本身多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，咱们能够在标签处直接插入一个正则表达式。

<form action="" method="get">
    <label for="username">姓名:</label>
    <input id="username" name="username" type="text" placeholder="4-10个英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus />
    <button type="submit">提交</button>
</form>

若是你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。若是浏览器支持pattern属性，则提交表单时，若是文本框中的内容不符合其正则表达式，文本框会高亮显示。以下图所示。

您能够狠狠地点击这里：HTML5正则表达式Demo

//zxx:我本身小测了下，貌似目前只在Chrome下有效(win系统)

注意到，咱们已经开始组合使用这些很棒的属性。

若是您对正则表达式概念模糊了，能够参见这里。

二11、属性支持检测

若是咱们没有方法检测浏览器是否支持这些属性，这些就不能称之为好的属性。恩，不错的观点，事实上咱们是有几种方法的，这里咱们讨论2个。第一个是利用优秀的Modernizr库，或者，咱们能够建立和分析这些元素，以肯定浏览器的能力。例如，在咱们前面的例子，若是咱们要肯定浏览器是否能使用pattern的属性，咱们能够添加一小段JavaScript到咱们的页面上：

alert( 'pattern' in document.createElement('input') ); // boolean

事实上，这是一种肯定浏览器兼容的经常使用方法。jQuery库了利用这种伎俩。在上面，咱们建立了一个新的input元素，并肯定了里面的pattern属性浏览器是否定得。若是是，浏览器则支持此功能。不然，固然就不支持了。

<script>
if (!'pattern' in document.createElement('input') ) {
    // do client/server side validation }
</script>

谨记此方法依赖于JavaScript。

二12、mark元素(Mark Element )

试想<mark>元素做为高亮。此标签包裹的字符串应该与用户当前的行动相关联。例如，我在一些博客上搜索“北川景子”，我就可使用一些JavaScript将当前的每一个结果字符串用mark标签包裹。

<h3> 搜索结果 </h3>
<p> 我很喜欢《零秒出手》里面那个拉小提琴的女孩，原来她叫作 <mark>北川景子</mark>。 </p>

二十3、何时使用div

咱们有些人开始质问到底什么时候该使用div。如今咱们可使用header, article, section, 和footer，还有机会使用div…吗？固然能够。

div应该用在没有更好的元素的时候。

例如，若是你发现你须要包裹一段代码块在对内容定位处理的包装单元内。不过若是你是包裹一个博客文章，或者，多是，底部的连接列表，则需考虑分别使用<article>和<nav>元素，由于其更具语义。

二十4、什么能够开始当即使用

一直谈论到如今的HTML5要到2022年才能所有完成，许多人彻底忽视它，这是个巨大的错误。事实上，有少许的HTML5的功能，咱们能够在咱们全部的项目中使用！更简单，更干净的代码老是一件好事。在今天的视频快速展现的技巧中，我将告诉你一些可用的选项。

二十5、哪些不是HTML5(What is Not HTML5)

那些仅凭本身的假设形象将JavaScript变少的过渡被所有归为HTML5的人是能够理解的，嘿，甚至苹果无心中推进这一想法。对于非开发人员，谁管这个呢，它是一个简单的方法适用于现代网页标准。不过，对于咱们来讲，尽管它可能只是语义，重要的是要准确理解什么不是HTML5。

SVG:不是HTML5，至少5岁了。
CSS3:不是HTML5，它是…CSS。
Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：经过HTML 5，您应该可以使Web应用程序可肯定您的位置，并为您提供更多的相关信息。
Client Storage(客户端存储):非HTML5，虽然说有一点切合，但被排除在规范以外，缘由在于，担心其做为一个总体，会变得过于复杂。它如今有本身的规范。
Web Sockets:不是HTML5，一样的，有着本身的一套准则。

无论你需求有多大的区别，全部这些技术能够归为现代网络堆栈。事实上，很多这些分支规范的管理着仍是同一人。

二十6、data属性(The Data Attribute)

咱们如今能够很正式地让全部的HTML元素支持自定义属性。然而，之前，咱们可能会这样：

<h1 id=someId customAttribute=value> 小样，胆儿挺肥的呢 </h1>

…校验器会小题大作！可是如今，只要咱们以”data”为前缀定义咱们的自定义属性，盗版属性立马变成正牌的了。若是你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。

HTML片断

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div>

检索自定义属性的价值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value

此属性还能够用在CSS中，例以下面这个有些傻里傻气的CSS文字改变的例子：

CSS代码： .data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}

HTML代码： <a class="data_custom" data-hover-response="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>

若是你的浏览器支持after伪类，以及content的attr属性，则能够看到相似下面的效果(IE8不同)：

要查看上图所示的效果，您能够狠狠地点击这里：CSS与HTML5自定义属性demo

还有，content属性实际上是一个很是强大的属性，因为低版本的IE不支持，因此此属性还没有流行，关于content内容生成技术，能够参见我以前的“CSS content内容生成技术以及应用”这篇文章。

二十7、Output元素

正如你可能预料到的，output元素被用来显示部分计算，例如，若是你想显示一个鼠标的位置，或者是一系列数字的总和坐标，这个数据应被插入到output元素中。

举个简单的例子，当提交按钮被按下，咱们用JavaScript将两个数字相加值插入到空的output中。

<form action="" method="get">
    <p>
        10 + 5 = <output name="sum"></output>
    </p>
    <button type="submit">计算</button>
</form>

(function() {
    var f = document.forms[0];

    if ( typeof f['sum'] !== 'undefined' ) {
        f.addEventListener('submit', function(e) {
            f['sum'].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert('你的浏览器还没有准备好！');
    }
})();

本身测试了下，貌似如今只有在Opera浏览器下有上佳的效果：

若是您如今使用的是较新版本的Opera浏览器，您能够狠狠地点击这里：HTML5结果输出框demo

此元素也能够接受一个属性，它反映了输出相关元素的名称，相似label工做原理。

二十8、使用区域input建立滑块(Create Sliders with the Range Input)

HTML5引进了range类型的input。

<input type="range">

最值得注意的是，它能够接收 min, max, step, 和value 属性，等等。虽然如今彷佛只有Opera浏览器充分支持这种输入类型，可是当咱们能够实际使用时，这将是美妙无比的！

参见下面的快速演示：

第一步：标签

首先，建立标签

<form method="post">
    <h4>音量控制</h4>
    <input type="range" name="range" min="0" max="10" step="1" value="" />
    <output name="result">  </output>
</form>

第二步：CSS

下面，咱们要使用一点点的样式。咱们将使用:before和:after去告知用户咱们制定的最大值和最小值。

input { font-size: 14px; font-weight: bold;  }

input[type=range]:before { content: attr(min); padding-right: 5px; }
input[type=range]:after { content: attr(max); padding-left: 5px;}

output {
    display: block;
    font-size: 5.5em;
    font-weight: bold;
}

第三步：JavaScript

最后，咱们

检测咱们的浏览器是否定识range input，若是不，显示提示。
当用户移动滑块的时候，动态改变output的值。
监听，当用户离开滑块，插入值，同时本地存储。
而后，下次用户刷新页面的时候，选择的区域和值会自动地设置成他们最后一次选择。

(function() {
    var f = document.forms[0],
        range = f['range'],
        result = f['result'],
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 

    // 检测浏览器是不是足够酷     // 识别range input.     var o = document.createElement('input');
    o.type = 'range';
    if ( o.type === 'text' ) alert('很差意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');

    // 设置初始值     // 不管是否本地存储了，都设置值为5     range.value = cachedRangeValue;
    result.value = cachedRangeValue;

    // 当用户选择了个值，更新本地存储     range.addEventListener("mouseup", function() {
        alert("你选择的值是：" + range.value + ". 我如今正在用本地存储保存此值。在现代浏览器上刷新并检测。");
        localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其余什么地方。");
    }, false);

    // 滑动时显示选择的值     range.addEventListener("change", function() {
        result.value = range.value;
    }, false);

})();

您能够狠狠地点击这里：HTML5 range input炫酷效果demo

个人电脑是xp系统，默认主题，在滑块松开后Opera下的效果以下图所示，酷吧：

感谢您的阅读！咱们已经讨论了不少，但可能只是触及到HTML5的皮毛，全当抛砖引玉，但愿能对您的学习有所帮助！

//zxx:以上是翻译/编辑的所有内容，内容已经够多了，我就很少说什么了。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[ http://www.zhangxinxu.com]