【HTML5学习】Html5与Html4区别 (二)

Micah2015年08月16日 22:26 分类 : Web前端  > HTML
阅读: 1811

分享到微信朋友圈

1、新增的结构元素 在HTML 5中,新增了以下与结构相关的元素: section 元素 section 元素表示页面中的一个内容区块,比如章节、页眉、页脚或者页面中的其他部分。它可以和h1、h2、h3、h4、h5、h6等元素结合起来使用,标示文档结构。

新增的元素和废除的元素

 【HTML5学习】Html5与Html4的区别 (二)

HTML 5中,新增了以下与结构相关的元素:

  • section 元素

section 元素表示页面中的一个内容区块,比如章节、页眉、页脚或者页面中的其他部分。它可以和h1、h2、h3、h4、h5、h6等元素结合起来使用,标示文档结构。

HTML 5中的代码:


<section>.....</section>


  • article 元素


article 元素表示页面中的一块与上下文不相关的独立内容,比如博客中或者新闻中的一篇文章。

HTML 5中的代码:


<article>.....</article>


  • aside 元素


aside元素表示article元素之外的,与article内容相关的辅助信息。

HTML 5中的代码:

<aside>.....</aside>


  • header 元素


header 元素表示页面中一个内容块,或整个页面的标题。

HTML 5中的代码:

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


  • hgroup 元素


hgroup 元素用于整个页面或页面中一个内容区块的标题进行组合。

HTML 5中的代码:

<hgroup>.....</hgroup>


  • footer 元素

footer 元素表示整个页面的底部,一般包含网站的信息,版权等信息。

HTML 5中的代码:

<footer>.....</footer>
  • nav 元素

nav 元素表示页面中导航链接的部分

HTML 5中的代码:

<nav>...</nav> 相当于 HTML 4 中的<ul>...</ul>
  • figure 元素

figure 元素表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

HTML 5中的代码:

<figure>
<figcaption>IT技术整理</figcaption>
	<p>IT技术整理 - 齐学习、共分享、同进步:www.ittidy.com</p>
</figure>

HTML 4中的代码:

<dl>
<h1>IT技术整理</h1>
	<p>IT技术整理 - 齐学习、共分享、同进步:www.ittidy.com</p>
</dl>

2、新增的其他元素

 

除了结构元素外,还有其他的元素。

  • video 元素

video 元素是定义视频,比如电影片段或者其他视频流。

HTML 5中的代码:

<video  src=”movie.flv” controls=”controls”>video</video>

HTML 4中的代码:

<object type=”video/ogg” data=”movie.ogv”>
	<param name=”src” value=”movie.ogv”>
</object>
  • audio 元素

audio 元素定义音频,比如音乐或其他音频流。

HTML 5中的代码:

<audio src=”someaudio.wav”>audio元素</audio>

HTML 4中的代码

<object type=”application/ogg” data=”someaudio.wav”>
	<param name=”src” value=”someaudio.wav”>
</object>
  • embed 元素

embed 元素用来插入各种多媒体,格式可以为Midi,Wav,AIFF,AU,MP3等。

HTML 5中的代码:

<embed  src=”embed.wav” />

HTML 4中的代码:

<object data=”flash.swf” type=”application/x-shockwave-flash”></object>
  • mark 元素

mark 元素主要用来视觉上向用户呈现那些需要突出显示或者高亮显示的文字,mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索的关键词。

HTML 5中的代码

<mark>...</mark> 类似于HTML 4中的代码:<span></span>
  • progress 元素

progress 元素表示运行中的进程,可以用它来显示javaScript 中的耗费时间函数的进程。

HTML 5中的代码:

<meter>...</meter>
  • time 元素

time 元素是用来表示时间或日期的,也可以同时表示两者。

HTML 5中的代码:

<time>...</time>
  • ruby 元素

ruby 元素表示ruby注释(中文注音或字符)

HTML 5中的代码:

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
  • rt 元素

rt 元素表示字符(中文注音或字符)的解释或者发音。

HTML 5中的代码:

<ruby>漢 <rt>ㄏㄢˋ</rt></ruby>
  • rp 元素

rp 元素在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。

HTML 5中的代码:

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
  • wbr 元素

wbr 元素表示软换行,wbr br 的区别是 br属于硬换行就是在此处必须换行,而wbr属于软换行就是当浏览器的窗口或者父级元素足够宽时(不进行换行),当宽度不够时会主要进行换行。war 元素对于字符型作用比较大,对于中文似乎作用不大。

HTML 5中的代码:

<p>To learn H5,you can<war> learn with<war> ittidy.</p>
  • canvas 元素

canvas 元素表时图形,比如图表或者其他图像,此元素本身不提供行为,它只是提供一块画布,但它把一个绘图API展现给JavaScript ,以使脚本能够把想绘制的东西绘制到这块画布上。

HTML 5中的代码:

<canvas id=”mycanvas” width=”200” height=”200” ></canvas>

HTML 4中的代码:

<object data=”inc/hdr.svg” type=”image/svg+xml” width=”200” height=”200”> </object>
  • command 元素

command 元素表时命令按钮,比如单选按钮、复选框或按钮。

HTML 5中的代码:

<command onclick=”cut()” lable=”cut”>
  • details 元素

details 元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary 元素提供标题或者图例。标题是可见的,用户点击标题时,会显示细节信息。summary 元素是details元素的第一个子元素。

HTML 5中的代码:

<details>
	<summary>HTML 5</summary>
	This document is HTML 5.
</details>
  • datalist 元素

datalist 元素表示可选数据的列表,与input 元素配合使用,可以制作出输入值的下拉列表。

HTML 5中的代码:

<datalist>...<datalist>
  • datagrid 元素

datagrid 元素表示可选数据的列表,它以树形列表的形式来显示。

HTML 5中的代码:

<datagrid>...</datagrid>
  • keygen 元素

keygen 元素表示生成秘钥。

HTML 5中的代码:

<keygen>
  • output 元素

output 元素表示不同类型的输出,比如脚本输出。

HTML 5中的代码:

<output>...</output> 相当于HTML 4中 <span>...</span>
  • source 元素

source 元素为媒介元素(比如<video><audio>),定义媒介资源。

HTML 5中的代码:

<source> 相当于 HTML 4中<param>
  • menu 元素

menu 元素表示菜单列表,当希望列出表单控件时使用该标签。

HTML 5中的代码:

<menu>
	<li><input type=”checkbox”/ >red</li>
<li><input type=”checkbox”/ >greed</li>
</menu>

3新增的input元素的类型

 

HTML 5新增了很多input 元素的类型:

  • email

email 类型表示必须输入E-mail地址的文本输入框。

  • url

url 类型表示必须输入URL地址的文本输入框。

  • number

number 类型表示必须输入数值的文本输入框。

  • range

range 类型表示必须输入一定范围内数字值的文本输入框。

  • Date Pickers

HTML 5拥有多个可供选取得日期和时间的新型输入文本框。

    date —— 选取日、月、年

    month —— 选取月、年

    week —— 选取周和年

    time —— 选取时间(小时和分钟)

    datetime —— 选取时间、日、月、年(UTC时间)

datetime-local ——选取时间、日、月、年(本地时间)

 

4、废除的元素

由于很多原因,HTML 5中废除了很多元素:

  • 能使用CSS代替的元素

对于basefontbigcenterfontsstrikettu这些元素,由于它们的功能都是纯粹为画面展示服务的,而HTML 5中提倡把画面展示性功能放在CSS样式表中统一编辑,所以将这些元素废除了,并使用编辑CSS、添加CSS样式表的方式进行替代。

  • 不再使用frame框架

对于frameset元素、frame元素与noframes元素,由于frame对于页面可用性存在负面影响,在HTML 5中已不在支持frame框架,只支持iframe框架,或者由服务器创建的多个单页面组成的复合型页面,以上三个元素全部废除。

  • 只有部分浏览器支持的元素

对于appletbgsoundblinkmarquee 等元素,由于只有部分浏览器支持这些元素,特别是 bgsound marquee 元素只有 IE 浏览器支持,所以HTML 5中废除。

其中applet元素可以由embed元素或者object元素替代,bgsound元素可由audio元素替代,marquee可由javaScript 编程替代。

  • 其他废除元素

#  废除 rb 元素,使用ruby元素替代

#  废除 acronym 元素,使用abbr元素替代

#  废除 dir 元素,使用ul元素替代

#  废除 isindex 元素,使用form元素与input元素相结合替代

#  废除 listing 元素,使用pre元素替代

#  废除 xmp 元素,使用code元素替代

#  废除 nextid 元素,使用GUIDS元素替代

#  废除 plaintext 元素,使用text/plain MINI类型替代

 




Micah
IT技术整理

精彩评论:0

还可以输入250个字 评论

评论成功

评论失败

 

微信公众号

微博