开采者须知

2019-11-21 22:54 来源:未知

开荒者须知 HTML5 的16个新特征

2012/02/22 · HTML5 · HTML5

土耳其共和国(The Republic of Turkey卡塔尔语最早的文章:15-html5-new-features-you-must-know,翻译:CSDN

HTML5想必我们都很熟知了,因为太多的媒体在评论这一本领。可是,你能正确地表露HTML5拉动了哪些新特点吗?本文化总同盟结了HTML5带来的15项你一定要明白的新特征。

手拉手来看下:1.新的文书档案类型  (New Doctype)


最近游人如织网页还在动用XHTML 1.0 何况要在首先行像那样
声称文书档案类型:

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

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

在HTML5中,下边这种注解方式将失效。下边是HTML5中的证明形式:

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

2.脚本和链接没有必要type  (No More Types for Scripts and Links)

在HTML4或XHTML中,你必要用上边包车型大巴几行代码来给你的网页增多CSS和JavaScript文件。

XHTML

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

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

而在HTML第55中学,你不再需求钦定项目属性。因而,代码能够简化如下:

XHTML

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

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

3.语义Header和Footer (The Semantic Header and Footer)

在HTML4或XHTML中,你须求用下边包车型大巴代码来声称“Header”和“Footer”。

XHTML

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

1
2
3
4
5
6
7
<div id="header">
...
</div>
..........
<div id="footer">
...
</div>

在HTML5中,有五个能够代表上述注解的因素,那足以使代码更简短。

XHTML

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

1
2
3
4
5
6
<header>
...
</header>
<footer>
...
</footer>

4.Hgroup

在HTML第55中学,有相当多新引进的因素,hgroup便是此中之大器晚成。要是小编的网址名下边跟随一个子标题,我得以用<h1>和<h2>标签来分别定义。但是,这种概念尚无认证这两个之间的涉嫌。何况,h2标签的施用会带来更加的多难点,比方该页面上还应该有任何题指标时候。

在HTML5中,我们得以用hgroup成分来将它们分组,那样就不会潜移暗化文件的总纲。

XHTML

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

1
2
3
4
5
6
<header>
<hgroup>
  <h1> Recall Fan Page </h1>
  <h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

5.标记元素 (马克 Element)

您能够把它当作高亮标签。被这几个标签修饰的字符串应当和客户眼下的行进有关。举个例子说,当自家在某博客中搜索“Open your Mind”时,笔者得以接收部分JavaScript将现身的短语用<mark>修饰一下。

XHTML

<h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

1
2
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

6.图形元素 (Figure Element)

在HTML4或XHTML中,上面包车型地铁那么些代码被用来修饰图片的注脚。

XHTML

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

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

唯独,上述代码未有将文字和图表内在联系起来。因而,HTML5引进了<figure>元素。当和<figcaption>结合起来后,大家得以语义化地将注释和相应的图纸联系起来。

XHTML

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

1
2
3
4
5
6
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
  <p>This is an image of something interesting. </p>
</figcaption>
</figure>

7.双重定义<small> (Small Element redefined)

在HTML4或XHTML中,<small>成分已经存在。但是,却尚未什么准确利用这一成分的完好表明。在HTML5中,<small>被用来定义小字。试想下你网址尾部的版权状态,遵照对此因素新的HTML5概念,<small>能够精确地讲授这几个音信。

8.占位符 (Placeholder)

在HTML4或XHTML中,你须要用JavaScript来给文本框增添占位符。举个例子,你能够提前安装好一些音信,当顾客开首输入时,文本框中的文字就熄灭。

而在HTML第55中学,新的“placeholder”就简化了这一个难点。

9.必要属性 (Required Attribute)

HTML5中的新属性“required”钦赐了某少年老成输入是还是不是必得。有二种艺术注解那风度翩翩属性。

XHTML

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

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

当文本框被钦赐必须时,如若空白的话表格就不能够交付。上边是三个什么行使的例证。

XHTML

<form method="post" action=""> <label for="someInput"> Your Name: </label> <input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required> <button type="submit">Go</button> </form>

1
2
3
4
5
<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>

在上头十二分例子中,借使输入内容空且表格被提交,输入框将被高亮显示。

10.Autofocus 属性 (Autofocus Attribute)

相符,HTML5的减轻方案排除了对JavaScript的要求。如若二个一定的输入相应是“接受”或聚集,暗许境况下,大家以往能够使用电动聚集属性。

XHTML

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

1
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

11.Audio 支持 (Audio Support)

当前我们需求借助第三方插件来渲染音频。然则在HTML5中,<audio>成分被推荐来了。

XHTML

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

1
2
3
4
5
<audio autoplay="autoplay" controls="controls">
     <source src="file.ogg" />
     <source src="file.mp3" />
     <a href="file.mp3">Download this file.</a>
</audio>

当使用<audio>成分时请记得包罗三种音频格式。FireFox想要.ogg格式的文书,而Webkit浏览器则须要.DVD格式的。和过去同等,IE是不辅助的,且Opera 10及以下版本只援救.wav格式。

12.Video 支持 (Video Support)

HTML5中不但有<audio>成分,并且还会有<video>。然则,和<audio>相像,HTML5中并不曾点名录像解码器,它留给了浏览器来支配。即使Safari和Internet Explorer9能够协助H.264格式的录像,Firefox和Opera是坚持开源西奥ra 和Vorbis格式。因而,钦赐HTML5的摄像时,你必须提供那三种格式。

XHTML

<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
2
3
4
5
<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>

13.摄像预载 (Preload attribute in Videos element)

当客户访谈页面时那风流洒脱性质使得录制可以预载。为了促成这一个职能,能够在<video>成分中增多preload=”preload”也许只是preload。

XHTML

<video preload>

1
<video preload>

14.来得调节条 (Display Controls)

假如你采用过地点的每多少个关乎的本事点,你或然早就注意到,使用方面包车型大巴代码,摄像仅仅展现的是张图纸,未有调整条。为了渲染出播放调控条,大家亟须在video成分内钦点controls属性。

XHTML

<video preload controls>

1
<video preload controls>

15.正式表达式 (Regular Expressions)

在HTML4或XHTML中,你必要用某些正式表明式来证实特定的文书。而HTML5中新的pattern属性让我们能够在标签处直接插入叁个职业表明式。

XHTML

<form action="" method="post"> <label for="username">Create a Username: </label> <input type="text" name="username" id="username" placeholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required> <button type="submit">Go </button> </form>

1
2
3
4
5
6
7
8
9
10
11
<form action="" method="post">
<label for="username">Create a Username: </label>
    <input type="text"
    name="username"
    id="username"
    placeholder="4 <> 10"
    pattern="[A-Za-z]{4,10}"
    autofocus
    required>
<button type="submit">Go </button>
</form>

结论

实在,还也可能有比非常多新因素和特征,上边提到的只是一些本人认为网址开辟中常用的,剩下的就由您们自个儿去探寻啦。

 

赞 1 收藏 评论

图片 1

无数人都在座谈HTML5的新特色,上边作者归纳的介绍下:

1.新的文书档案类型(New Doctype)

一时众多网页还在利用XHTML 1.0还要要在首先行像那样声明文书档案类型:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<";

在HTML5中,上边那种证明方式将失效。下边是HTML5中的申明格局:

<!DOCTYPE html>

2.脚本和链接无需type  (No More Types for Scripts and Links)

在HTML4或XHTML中,你必要用上面包车型大巴几行代码来给你的网页增添CSS和JavaScript文件。

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

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

而在HTML5中,你不再要求钦赐项目属性。由此,代码能够简化如下:

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

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

3.语义Header和Footer (The Semantic Header and Footer)

在HTML4或XHTML中,你必要用下边包车型地铁代码来声称"Header"和"Footer"。

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

.........

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

在HTML5中,有八个能够替代上述注脚的因素,这能够使代码更简短。

<header>...</header>

<footer>...</footer>

4.Hgroup

在HTML第55中学,有为数不菲新引进的要素,hgroup正是内部之大器晚成。若是作者的网址名下边跟随五个子标题,小编能够用<h1>和<h2>标签来分别定义。然则,h2标签的应用会拉动越来越多难题,比方该页面上还会有任何标题标时候。

在HTML5中,大家能够用hgroup成分来将它们分组,那样就不会潜移暗化文件的总纲。

<header>

    <hgroup>

        <h1>Recall Fan Page</h1>

        <h2>Only for people who want the memory of a lifetime.</h2>

    </hgroup>

</header>

5.标识成分 (马克 Element)

您可以把它充当高亮标签。被那么些标签修饰的字符串应当和客户近年来的行路有关。举例说,当本身在某博客中搜索“Open your Mind”时,我得以使用部分JavaScript将现身的短语用<mark>修饰一下。

<h3>Search Results</h3>

<p>They were interrupted, just after Quato said,<mark>"Open your Mind".</mark>.</p>

6.图形元素 (Figure Element)

在HTML4或XHTML中,上边包车型大巴那几个代码被用来修饰图片的评释。

<img src="image" alt="About image" />

<p> Image of Mars.</p>

但是,上述代码未有将文字和图纸内在联系起来。因而,HTML5引进了<figure>成分。当和<figcaption>结合起来后,我们能够语义化地将注释和呼应的图纸联系起来。

<figure><img src="image" alt="About image" />

<figcaption>

<p>This is an image of something interesting.</p>

</figcaption>

</figure>

7.再一次定义 <small>(Small Element redefined)

在HTML4或XHTML中,<small>成分已经存在。可是,却并未有何样科学运用那生机勃勃因素的完整表达。在HTML5中,<small>被用来定义小字。试想下您网站底部的版权状态,依据对此因素新的HTML5概念,<small>可以准确地讲授这么些新闻。

8.占位符 (Placeholder)

在HTML4或XHTML中,你要求用JavaScript来给文本框增加占位符。举个例子,你能够提前设置好一些信息,当客商伊始输入时,文本框中的文字就消亡。

而在HTML5中,新的“placeholder”就简化了这些主题材料。

9.供给属性 (Required Attribute)

HTML5中的新属性“required”钦点了某生龙活虎输入是或不是必得。有二种艺术注解那豆蔻年华品质。

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

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

当文本框被钦赐必需时,假若空白的话表格就不可能交到。下边是多少个怎么行使的事例。

<form method="post" action="">

<label for="someInput">Your Name:</label>

<input type="text" id="someInput" name="someInput" placeholder="Douglas">

<button type="submit">Go</button>

</form>

在上边十分例子中,假使输入内容空且表格被交给,输入框将被高亮展现。

10.Autofocus属性 (Autofocus Attribute)

同样,HTML5的消除方案清除了对JavaScript的内需。尽管三个特定的输入相应是“接纳”或集中,暗中认可景况下,大家几日前得以接受自动聚集属性。

11.Audio支持 (Audio Support)

当下大家要求依赖第三方插件来渲染音频。然则在HTML5中,成分被推荐来了。

当使用要素时请记得包涵二种音频格式。Fire福克斯想要.ogg格式的公文,而Webkit浏览器则要求.VCD格式的。和现在相通,IE是不援助的,且Opera 10及以下版本只帮助.wav格式。

12.Video支持 (Video Support)

HTML5中不独有有<audio>成分,何况还或然有<video>。可是,和<audio>相符,HTML5中并从未点名录像解码器,它留下了浏览器来支配。固然Safari和Internet Explorer9能够扶植H.264格式的录像,Firefox和Opera是贯彻始终开源西奥ra和Vorbis格式。因而,钦赐HTML5的录制时,你必得提供那二种格式。

13.摄像预载 (Preload attribute in Videos element)

当客商访问页面时这生龙活虎属性使得录制可以预载。为了兑现那些功用,能够在<video>成分中增进preload="preload"大概只是preload。

<video preload>

14.展现调控条 (Display Controls)

若是你使用过地方的每多个涉嫌的技能点,你恐怕曾经注意到,使用方面包车型大巴代码,录制仅仅展现的是张图纸,未有调节条。为了渲染出播放调控条,大家必需在video成分内内定controls属性。

15.规范表明式 (Regular Expressions)

在HTML4或XHTML中,你供给用部分正式表明式来评释特定的文书。而HTML5中新的pattern属性让我们可以在标签处直接插入八个标准表明式。

<form action="" method="post">

<label for="username">Create a Username:</label>

<input type="text" name="username" id="username" palceholder="4 <> 10" pattern="[A-Za-z]{4,10}" autofocus required>

<button type="submit">Go</button>

</form>

TAG标签:
版权声明:本文由金沙澳门唯一官网发布于前端开发,转载请注明出处:开采者须知