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

全新改进的HTML5表单创建

正规网赌平台,2011/07/24 · HTML5 · 2
评论
·
HTML5

经历了12年之久,万维网的核心语言(HTML或超文本标记语言)终于迎来了HTML5主要修订版本。虽然万众期待的版本仍处于测试阶段并且没有宣布正式推出的日期,HTML5的网页设计师和程序员已经就有关最新功能展开了热烈讨论。

根据W3C,HTML5新特性的目的是在改善嵌入诸如视频的多媒体支持,提供更好的用户体验和更简单的编程。虽然HTML4中已经取得了巨大成
功,(甚至被认为最成功的标记格式已经发布)在互联网世界的每个人都耐心等待,浏览器更新时得到最新的HTML版本。随着时间推移,人们都很纳闷,还等什
么呢?事实上HTML5已经被很多浏览器支持,比如Safari, Chrome, FireFox,
Opera, 以及其他主流浏览器。即使是IE9也准备好了支持新的HTML5。
HTML5的好处是,它是向后兼容的,因而,如果你乐于更新你的网站,现在你就可以。只是有几个浏览器不完全兼容HTML5。

正规网赌平台 1

升级到HTML5是相当容易的,因为它与HTML4兼容。事实上,我们没有理由摒弃HTML4的所有,因为HTML5只是一个简单的增加一堆新而酷的功能
添加到HTML4核心语言。升级(如果你是这样认为)到HTML5是非常简单的。你所需要做的的是修改你的DOCTYPE。这种新的更新有助于让事情变得
简单,而在HTML4中有你可以使用不同的文档类型,使得这一点更加棘手。你现在就可以更新你所有的网站,它们不会崩溃,因为所有HTML4的标签在
HTML5还是100%支持的。

HTML5的表单定义了十几个新的输入类型和特性,这些新增元素可以让程序员可以过个好日子。

输入框占位符

我觉得这是HTML5新特性中我最爱的。所有开发人员都使用JavaScript和jQuery做输入框占位符,而在HTML5中,开发人员可以非常容易
的显示一个占位符。什么是占位符?占位符就是出现在输入框的提示文本,当你点击输入栏位,它就自动消失。你可以把用户应该输入的文本样例在文本框提示出
来。一个例子,如果你有一个电话号码输入框,你可以设置占位符(XXX)XXX –
XXXX,点击它们时就会消失。我相信你已经看过很多。

正规网赌平台 2

支持情况如下(本人开发过Android,是支持的——译者注)

IE FF  Safari  Chrome  Opera  iphone Android

–  3.7+   4+    4+    11+   4+      –

自动焦点事件

目前HTML4要做到自动焦点的方式是使用JavaScript把焦点放在一个表单的第一个输入字段。HTML5只要加载一个网页,网页自动将焦点移到特
定的输入框,和JavaScript一样。区别是什么?由于现在只是一个HTML标记,用户可以很容易地在他们的浏览器禁用此属性。并非所有浏览器都支持
自动对焦功能,但浏览器不只是简单地忽略该属性。如果你想所有浏览器都行得通,只需添加新的HTML5自动对焦属性,然后检测浏览器是否支持自动对焦。如
果可以就不必使用自动对焦的脚本,如果没有的话,就要添加自动对焦的脚本。

支持情况

FF  IE  Safari  Chrome  Opera  iphone Android

–    4+   4+     3+    10+     –     –

HTML 新定义13个输入类型

电子邮件

我要说的第一个输入框是电子邮件地址。那些不支持新类型的旧版浏览器也只是把它们看作一个文本框,99%的用户不会注意到这个变化,直到他们提交表单(此
时会有表单验证)。iPhone的用户应该知道在那些邮件地址的输入框,当输入@和a的时候会出现一个简单容易的键盘。如果你用过iPhone,你懂的。

正规网赌平台 3

网址

再说说网址输入框。如果需要输入网址,期望输入的就像http://www.mazingtech.com
。现在在网址类型输入框会出现像iPhone里面一样的一个可变化的虚拟键盘用户可以很方便输入斜线和.com。同样的,在提交表单之前用户对这些毫不知情。
数字

在过去要得到匹配的数字,你不得不使用jquery这样的脚本来帮助验证输入。HTML5增加了数字类型。还增加了一些额外的属性(可选):

Min:指定输入框可接受的最小输入数字。Max:你猜对了,就是允许输入的最大数字。
Step:属性输入域合法的间隔 ,默认是1.

正规网赌平台 4

如上图,只允许输入数字(大多数情况下不会注意到这些,直到提交的时候提示错误),只有0,2,4合法(6不合法因为step是10,合法的是0,10,20…——译者注)。

Numbers as a Slider 数字滑动条

我觉得这个真酷。HTML5允许你使用一个新的类型叫range,输入框变成一个滑动条。你的网站表单可以使用滑动条了,这很酷吧。它的属性标记和数字类型一样,只是把类型设置type=’number’改成type=’range’。

正规网赌平台 5

日历表

迄今为止最好的新增元素,名为date和datetime的日期选择器类型(还有其他额外的date/time类型,如时间,星期,月份,以及本地日
历)。 很多JavaScript框架如jQuery
UI和YIU已经具备了这些控件,但增加一个日历选择器还是挺烦人的。
HTML5定义一个新的本地日期选择器,不必包括使用页面上的脚本。截至目前,Opera是一个唯一完全支持此功能的,对于其他浏览器,你可以做一个备用
脚本以备该浏览器不支持。不过,最终,所有的浏览器都会更新的。

搜索

HTML5增加了搜索输入框类型。这没什么,但对一些用户来说是很好的变化。它可以简单的把输入框自动圆边,当你开始输入时,它右边会有一个小X。目前并不是所有的浏览器支持。

正规网赌平台 6

颜色

HTML5还定义类型的颜色,它可以让你选择一种颜色,返回hexademical值。Opera11是唯一支持这种类型的浏览器。不过应该不会有很多人使用这个类型,所以不支持也不是什么大问题。

表单验证

上面我们谈到有关这些新的输入类型,如电子邮件,日期,数量等HTML5新元素中,最令人兴奋的新特性莫过于表单验证。大多数开发人员都做了表单验证,无
论是客户端或服务器端(我们两个都做!)。也许HTML5的表单验证器可能无法取代你的服务器端验证,但它肯定能最终取代你的客户端验证。
JavaScript验证的问题是,用户很容易绕过它,可以很容易绕过它只需禁用JavaScript。现在HTML5,你不用有此担心。下面是
Chrome12的一个例子。所有的浏览器和操作系统对于错误有不同的显示方式,不过这是一个例子,让你看清错误可能发生的样子。

所有的错误都是HTML5原生提示的,并没有使用JavaScript。

IE    FF   Safari   Chrome   Opera   Iphone    Andriod

–    4+    5+     10+    9+      –      -

必需字段

HTML5的表单验证并不仅仅局限于验证字段的类型,它还允许调用一个新的额外的标记,required。这个新属性允许开发人员验证输入框是否填写,无需使用JavaScript。

正规网赌平台 7

每个开发人员都知道这些更新对缩短开发周期和增强的用户体验都是至关重要。一旦所有的浏览器接受了HTML5,新一代的网站将超过任何人的期望。

那么你有了它。你可以HTML5中找到一个快速入门指南。如果你可以理解这篇文章的任何东西,请记住,HTML5不是什么可怕的麻烦。它将大大有助于开发者,而只要你有准备所有HTML4网站已经可以升级了!

原文:webdesignledger.com  编译:ArSui

赞 1 收藏 2
评论

正规网赌平台 8

一、新的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说的

<!DOCTYPE html>

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

四、脚本(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>

十七、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>

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

  1. 我们技术上不需要来设置type属性,但是,如果我们不这样做,浏览器不得不自己去寻找类型。节省一些带宽,还是你自己声明下吧。
  2. 不是所有的浏览器理解HTML5视频。在资源元素的下面,我们可以提供一个下载链接,或嵌入视频的Flash版本代替。这取决于你。
  3. controls和preload属性就会在下面提及。
  4. 有方法可以让所有的浏览器支持video标签,具体参见我前面的“让所有浏览器支持HTML5
    video视频标签
    ”一文。

三、<small>重新定义

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

small元素专指“小字”。

二十二、mark元素(Mark Element )

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

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

九、本地存储(Local Storage)

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

//zxx:原视频默认展示的是YouTube视频,不FQ看不了,所以,这里展示来自另外一个网站的video。建议全屏观看,以看清其中的HTML与JavaScript代码

//zxx:根据视频内容,我自己做了个demo,关于本地存储的。

您可以狠狠地点击这里:HTML5本地存储Demo

IE8浏览器已经支持了本地存储,如下截图所示:

正规网赌平台 9

尽管显然不支持所有的浏览器,我们可以在Internet Explorer8时,Safari
4和Firefox
3.5下期待此工作方式。请注意,为了弥补旧的浏览器将无法识别本地存储,你应该先测试,以确定window.localStorage是否存在。

正规网赌平台 10

十二、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]-->

二十、正则表达式

你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的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属性,则提交表单时,如果文本框中的内容不符合其正则表达式,文本框会高亮显示。如下图所示。

正规网赌平台 11

您可以狠狠地点击这里:HTML5正则表达式Demo

//zxx:我自己小测了下,貌似目前只在Chrome下有效(win系统)

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

如果您对正则表达式概念模糊了,可以参见这里

二十三、什么时候使用div

我们有些人开始质问到底何时该使用div。现在我们可以使用header, article,
section,和footer,还有机会使用div…吗?当然可以。

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

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

二十四、什么可以开始立即使用

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

//zxx:YouTuBe视频,需要FQ

Subscribe to our YouTube page to watch all of the video
tutorials!

二、图形元素(The Figure Element )

看看下面给图片添加的标示:

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

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

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

十、语义的Header和Footer

那些过往的日子:

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

div嘛,很自然的,没有语义化的结构——即使在应用了id后。现在,通过HTML5,我们可以使用<header>和<footer>元素。以上的代码可以替换成:

<header>
    ...
</header>  <footer>
    ...
</footer>

它完全适合您有多个页眉和页脚的项目。

尽量不要混淆”header”和”footer”这些元素。他们只是指他们的容器。因此,将博客底部的,例如,元信息放在footer元素内部是说得通的。这同样也适用于header。

十八、视频预载(Preload Videos)

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

<video preload>

正规网赌平台 12

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

二十七、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浏览器下有上佳的效果:

正规网赌平台 13

如果您现在使用的是较新版本的Opera浏览器,您可以狠狠地点击这里:HTML5结果输出框demo

此元素也可以接受一个属性,它反映了输出相关元素的名称,类似label工作原理。

七、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属性被指定的时候。而且,它不支持占位符属性,这个我们将会在后面学到。底线是不依赖于这种形式的验证…但你仍然可以使用它!

相关文章