的十六个新特点

开辟者须知 HTML5 的十四个新特点

2012/02/22 · HTML5 ·
HTML5

藏语原来的小说: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>

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

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

在HTML5中,有广大新引入的成分,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来给文本框增添占位符。比方,你能够提前设置好有的音讯,当顾客在此以前输入时,文本框中的文字就藏形匿影。

而在HTML5中,新的“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)

当下大家必要依靠第三方插件来渲染音频。可是在HTML第55中学,<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浏览器则需求.mp5格式的。和过去同等,IE是不扶持的,且Opera 10及以下版本只扶助.wav格式。

12.Video 支持 (Video
Support)

HTML5中不但有<audio>元素,何况还会有<video>。但是,和<audio>相像,HTML5中并从未点名录像解码器,它留下了浏览器来支配。固然Safari和Internet Explorer9能够支撑H.264格式的摄像,Firefox和Opera是贯彻始终开源Theora 和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

在HTML5中,有过多新引进的要素,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>可以正确地批注那一个消息。

发表评论

电子邮件地址不会被公开。 必填项已用*标注