• 售前

  • 售后

热门帖子
入门百科

HTML5之HTML元素扩展(上)—新增长的元素及使用概述

[复制链接]
xj844662017 显示全部楼层 发表于 2021-10-25 19:46:49 |阅读模式 打印 上一主题 下一主题
思量我们开发一个页面的过程
1.设计页面的结构 - HTML:这个过程是使用各种HTML元素构建网页的结构。
2.设计页面的外貌 - CSS:这个过程是使用CSS去改善网页的外貌。
3.设计页面的举动 - Javascript:这个过程是给网页的元素赋予肯定的举动。
上面这些除了CSS外,HTML5在另外两个方面都差别水平的举行了扩充。这个系列是集中在第一个方面。在前面,我们已经学习了复杂的canvas和svg元素,下面的章节会总结其他HTML5增长的元素。
结构型元素HTML5中到场了全新的结构型元素,比方页眉header,页脚footer,导航nav,内容article,章节section等。寄义如下图所示:

除了这种整个页面的结构型元素,html5也到场了块级别的语义元素,比方辅助元素aside,图像元素figure,细节描述元素details等。这些元素除了更能表现页面的结构寄义外,与平常的div并没有其它的区别,仍旧需要靠CSS去展示这些元素。这里就是简单看一个小例子:

复制代码代码如下:
<html>
<head>
    <title>Dxy 博客 </title>
</head>
<body>
  <header>
    <h1><a href="http://www.cnblogs.com/dxy1982/%22%3Edxy1982 博客</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/">博客</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元素表示的是内容中用来帮助构建文档概要的语义部分。它应该包罗一个头部。它通常是最为article的部分存在(当然article作为它的部分也是可以的)。如果你想找一个用作页面目面貌器的元素或者是需要额外的样式容器,还是继续使用div吧。
2. 只在需要的时候使用header和hgroup
写不需要写的标签是毫无意义的。header和hgroup的使用场景通常如下:
• header元素表示的是一组先容性或者导航性质的辅助笔墨,常常用作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应该是“一些活动的内容,有时候会有包罗于自身的标题说明。一样平常在文档流中会作为独立的单位引用。”这正是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标签有一些属性用来控制音频的内容、何时以及如何播放等方面的情况,这些属性分别是:src(文件名)、preload(在页面加载时加载)、controls(表现控制)、loop(循环)和autoplay(主动播放)。在下面的例子中,只要页面一加载音频就开会播放,其会连续播放,所提供的控制可以让用户停止或是重新开始播放音频:

复制代码代码如下:
<audio src="MyFirstMusic.ogg" controls="controls" autoplay="autoplay" loop="loop">
    你的欣赏器不支持audio元素。
</audio>

如果欣赏器不支持该元素,则表现元素的文本信息。
如果设置了autoplay元素,则主动忽略preload属性。设置preload="auto"的话,则页面加载后载入音频。
audio元素答应指定多个source元向来兼容欣赏器的题目。source 元素可以链接差别的音频文件。欣赏器将使用第一个可识别的格式:

复制代码代码如下:
<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属性(指定一个绝对的或相对的URL)可让你找出一张图像来应付着先;muted代表静音。
video也支持使用source元素办理兼容性题目。看一个小例子:

复制代码代码如下:
<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元素还提供了一些方法、属性和事件来支持在DOM操作中控制播放的历程。比如调用元素的播放、停息、加载等方法。另有音量、播放时间等属性可以直接读取或设置。此外另有开始播放、停息、竣事的事件等可以使用。看下面的例子:

复制代码代码如下:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
  <button >Play/Pause</button>
  <button >Big</button>
  <button >Small</button>
  <button >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>

这里着实需要留意一种新的写法:上面的例子中我们是如许写音频元素的:

复制代码代码如下:
<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,所以一样平常保举只写属性名称。
这个写法题目在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>  

运行一下,你会看到一个黄颜色的雷同滚动条的东西;如果你把value改成50,你会发现指示条的颜色编程赤色了。
新增长的元素先容就是这么多了,更多的元素说明请参看W3C中的完备Tag列表。
实用参考:W3C的教程:http://www.w3schools.com/html5/default.asp
HTML5官方引导:http://dev.w3.org/html5/html-author/
相当不错的一个引导网站:http://html5doctor.com/
HTML5中文教程:http://www.html5china.com/
一个不错的前端博客:http://www.pjhome.net/default.asp?cateID=1

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作