HTML5之HTML元素拓展(上)—新提升的元素及应用简述

日期:2021-02-26 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

考虑到大家开发设计1个网页页面的全过程
1.设计方案网页页面的构造 - HTML:这个全过程是应用各种各样HTML元素搭建网页页面的构造。
2.设计方案网页页面的外型 - CSS:这个全过程是应用CSS去改进网页页面的外型。
3.设计方案网页页面的个人行为 - Javascript:这个全过程是给网页页面的元素授予1定的个人行为。
上面这些除CSS外,HTML5在此外两个层面都不一样水平的开展了扩充。这个系列是集中化在第1个层面。在前面,大家早已学习培训了繁杂的canvas和svg元素,下面的章节会总结别的HTML5提升的元素。

构造型元素
HTML5中添加了全新升级的构造型元素,比如页眉header,页脚footer,导航栏nav,內容article,章节section等。含意以下图所示:

除这类全部网页页面的构造型元素,html5也添加了块级別的词义元素,比如輔助元素aside,图象元素figure,细节叙述元素details等。这些元素除更能显示信息网页页面的合理布局含意外,与一般的div并沒有其它的差别,依然必须靠CSS去展现这些元素。这里便是简易看1个小事例:

拷贝编码
编码以下:

<html>
<head>
<title>Dxy blog </title>
</head>
<body>
<header>
<h1><a href="http://www.cnblogs.com/dxy1982/%22%3Edxy1982 blog</a></h1>
</header>
<section>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章内容1</a></h2>
<p>简介</p>
</article>
<article>
<h2><a href="http://www.cnblogs.com/dxy1982/">文章内容2</a></h2>
<p>简介</p>
</article>
<nav>
<a href="http://www.cnblogs.com/dxy1982/">blog</a>
</nav>
</section>
<nav>
<ul>
<li><h2>信息内容</h2>
<ul>
<li><a href="http://www.cnblogs.com/dxy1982/">政策</a></li>
<li><a href="http://www.cnblogs.com/dxy1982/">目录</a></li>
</ul></li>
<li><h2>文章内容</h2>
<ul>
<li><a href='/blog/2007/04/'>1月份</a></li>
<li><a href='/blog/2007/03/'>2月份</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2012 dxy1982</p>
</footer>
</body>
</html>

尽管这些元素应用起来都较为简易,但還是必须留意几点
1. 不必应用section做为div的取代品
section其实不是款式器皿。section元素表明的是內容选用来协助搭建文本文档概述的词义一部分。它应当包括1个头顶部。它一般是最为article的一部分存在(自然article做为它的一部分也是能够的)。假如你想找1个用作网页页面器皿的元素或是必须附加的款式器皿,還是再次应用div吧。
2. 只在必须的情况下应用header和hgroup
写不必须写的标识是没什么实际意义的。header和hgroup的应用情景一般以下:
 • header元素表明的是1组详细介绍性或导航栏特性的輔助文本,常常用作section的头顶部。
 • 当头顶部有多层构造时,例如有子头顶部,副题目,各种各样标志文本等,应用hgroup将h1-h6元素组成起来做为section的头顶部。
这里假如header或hgroup仅有极少数头顶部元素,比不上就去掉这2个鸡肋标识吧,比如:

拷贝编码
编码以下:

<article>
  <header>
    <h1>My best blog post</h1>
  </header>
  <!-- Article content -->
</article>

立即改动成:

拷贝编码
编码以下:

<article>
  <h1>My best blog post</h1>
  <!-- Article content -->
</article>

一样的道理:

拷贝编码
编码以下:

<header>
  <hgroup>
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

立即改为:

拷贝编码
编码以下:

<header>
<h1>My best blog post</h1>
<p>by Rich Clark</p>
</header>

3. 不必乱用nav
nav元素表明网页页面中连接到别的网页页面或本网页页面别的一部分的区块;包括导航栏连接的区块。
可是并不是全部网页页面上的连接都必须放在nav元素中——这个元素原意是用作关键的导航栏区块。举个实际的事例,在footer中常常会有诸多的连接,例如服务条款,首页,版权申明页这些。footer元素本身早已足以应对这些状况,尽管nav元素还可以用在这里,但一般大家觉得是无须要的。
4. 不必乱用figure
figure应当是“1些流动性的內容,有时会有包括于本身的题目表明。1般在文本文档流中会做为单独的模块引入。”这更是figure的最好可用情景——它能够从主內容页挪动到sidebar中,而不危害文本文档流。figure只应当被引入在文本文档中,或被section元素紧紧围绕。
  假如纯碎只是以便展现的图(例如logo),也不在文本文档别的地区引入,也沒有挪动部位的必须,那就肯定不必应用figure。
5. 不必应用无须要的type特性
在HTML5中,script和style元素已不必须type特性。自然写上并沒有甚么难题,只但是从最好实践活动的角度,是不必须写的。

声频元素
audio元素用于标志响声內容,例如说歌曲或是任何的别的声频流。该元素适用的文件格式以下表所示:

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   MP3 √     √ √ Wav   √ √   √

audio标识有1些特性用来操纵声频的內容、什么时候和怎样播发等层面的状况,这些特性各自是:src(文档名)、preload(在网页页面载入时载入)、controls(显示信息操纵)、loop(循环系统)和autoplay(全自动播发)。在下面的事例中,要是网页页面1载入声频就开会播发,其会不断播发,所出示的操纵可让客户终止或是再次刚开始播发声频:

拷贝编码
编码以下:

<audio src="MyFirstMusic.ogg" controls="controls" autoplay="autoplay" loop="loop">
你的访问器不适用audio元素。
</audio>

假如访问器不适用该元素,则显示信息元素的文字信息内容。
假如设定了autoplay元素,则全自动忽视preload特性。设定preload="auto"的话,则网页页面载入后加载声频。
audio元素容许特定好几个source元向来适配访问器的难题。source 元素能够连接不一样的声频文档。访问器将应用第1个可鉴别的文件格式:

拷贝编码
编码以下:

<audio>
<source src="song.ogg" type="audio/ogg">
<source src="song.wma" type="audio/x-ms-wma">
<source src="song.mp3" type="audio/mpeg">
你的访问器不适用audio元素。
</audio>

视頻元素
video元素容许你播发视頻片断或是流化视觉效果新闻媒体。该元素适用的文件格式以下表所示:

文件格式 IE Firefox Opera Chrome Safari Ogg No 3.5+ 10.5+ 5.0+ No MPEG 4 9.0+ No No 5.0+ 3.0+ WebM No 4.0+ 10.6+ 6.0+ No

它有着audio元素全部的特性,此外再再加:muted(静音)、poster(等候照片)、width和height。最终两个意思无需说了。当视頻正在载入或是视頻处在彻底沒有载入的状况中时,poster特性(特定1个肯定的或相对性的URL)可以让你找出1张图象来应对着先;muted意味着静音。

video也适用运用source元素处理适配性难题。看1个小事例:

拷贝编码
编码以下:

<video width="320" height="240" controls="controls" poster="/images/screen.gif">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
你的访问器不适用video元素。
</video>

假如想不播发视頻的响声,则设定muted="muted"便可。
除此之外,video元素还出示了1些方式、特性和恶性事件来适用在DOM实际操作中操纵播发的过程。例如启用元素的播发、中止、载入等方式。也有声音、播发時间等特性能够立即载入或设定。另外也有刚开始播发、中止、完毕的恶性事件等可使用。看下面的事例:

拷贝编码
编码以下:

<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>


<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
你的访问器不适用video元素。
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
</body>
</html>

这里实际上必须留意1种新的写法:上面的事例中大家是这样写声频元素的:

拷贝编码
编码以下:

<audio src="MyFirstMusic.ogg" controls="controls" autoplay="autoplay" loop="loop">
你的访问器不适用audio元素。
</audio>

实际上,在html5中引进了许多项controls,autoplay,loop这类布尔运算特性,这些特性你像上面这类写是没难题的,可是强烈推荐的写法是下面这类:

拷贝编码
编码以下:

<audio src="MyFirstMusic.ogg" controls autoplay loop>
你的访问器不适用audio元素。
</audio>

由于访问器遇到这些特性就表明这些特性打开了,也便是说假如你写上这些特性,并强行设定为false,实际效果還是等同于于true,因此1般强烈推荐只写特性名字。
这个写法难题在form中也是存在的,许多form和input的新特性全是布尔运算特性,都应当应用强烈推荐的写法。

标示衡量的元素
下面这些元素其实不是每一个访问器都适用,可是基础上在Chrome上还能够能够看到实际效果的。
进度条元素
应用这个元素显示信息免费下载的进度条,仅有value和max两个特性,十分简易。Chrome和FireFox都适用了。

拷贝编码
编码以下:

<p>免费下载进度:
<progress value="1534602" max="4603807">33%</progress>
</p>

衡量元素
应用这个元素能够显示信息给定的值在规范范畴类的标示图示,不一样范畴内的值会显示信息不一样的色调。一些网站就选用这个物品显示信息客户确当前工作经验值。当访问器不适用这个元素的情况下,会立即显示信息元素正中间的文字。现阶段Chrome早已适用了。

拷贝编码
编码以下:

<p>你的分数是:
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

运作1下,你会看到1个黄色调的相近翻转条的物品;假如你把value改为50,你会发现标示条的色调程序编写鲜红色了。

新提升的元素详细介绍便是这么多了,更多的元素表明请参看W3C中的详细Tag目录。

好用参照:
W3C的实例教程:http://www.w3schools.com/html5/default.asp
HTML5官方具体指导:http://dev.w3.org/html5/html-author/
非常非常好的1个具体指导网站:http://html5doctor.com/
HTML5汉语实例教程:http://www.html5china.com/
1个非常好的前端开发blog:http://www.pjhome.net/default.asp?cateID=1