HTML新增功能

一、HTML4与HTML5的区别

1、取消了一些过时的 HTML4的标签

其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 CSS完全取代。

其他取消的属性:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。

2、添加了一些新的元素

比如:更加智能的表单标签:date, email, url 等;更加合理的标签:section, video, progress, nav, meter, time, aside, canvas等。

3、新的全局属性:id, tabindex, repeat

4、文件类型声明(<!DOCTYPE>)仅有一型:<!DOCTYPE HTML>。

5、新的JS API

二、新增的结构标签

section元素

表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:

HTML5中<section>……</section>;

HTML4中<div> ……</div>。

article元素

标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

HTML5:<article></article>
HTML4:<div></div>

aside元素

元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分
aside 的内容应该与 article 的内容相关。

被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等
在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

HTML5:<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容,但应与文档内容相关。</div>

header元素

标签定义 section 或 document 的页眉 主要用于页面的头部的信息介绍,也可用于板块头部。

HTML5: <header></header>
HTML4: <div></div>

footer元素

标签定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。

HTML5: <footer></footer>
HTML4: <div></div>

nav元素

标签定义导航链接的部分。

HTML5: <nav></nav>
HTML4:<ul></ul>

 

三、新增的其他元素

video元素

定义视频。像电影片段或其他视频流。例:

<video src="movie。ogg" controls="controls">video元素</video>

audio元素
定义音频。如音乐或其他音频流。例:

<audio src ="someaudio。wav">audio元素</audio>

embed元素

用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例:

<embed src="flash。swf" />

mark元素
主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。

HTML5:<mark></mark>;

progress元素

表示运行中的进程,可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。

<progress></progress>。

time元素

表示日期或时间,也可以两者同时。

rt元素
定义字符(中文注音或字符)的解释或发音。

rp元素

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

wbr元素
表示软换行。与br元素的区别:br元素表示此处必须换行;wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时),不换行,而宽度不够时主动在此处换行。

canvas元素

定义图形,比如图表和其他图像。<canvas> 元素只是图形容器(画布),必须使用脚本来绘制图形。

command元素——貌似没什么效果。是不是支持有问题

表示命令按钮,比如单选按钮、复选框或按钮。

<summary> 标签

包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。

details标签

目前只有 Chrome 支持 details 标签
用于描述文档或文档某个部分的细节 

output标签

定义不同类型的输出,比如脚本的输出。

source标签

标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。

menu标签
定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别,menu专门用于表单控件。

四、新增input标签

email
必须输入email

url
必须输入url地址

number
必须输入数值

range
必须输入一定范围内数值

Date Pickers(日期选择器)
拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间)

search
用于搜索域,域显示为常规的文本域。

color

五、废除的元素

1、能用css代替的元素

basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在css中统一编辑。

2、不再使用frame框架

frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。

4、其他被废除的元素

废除rb,使用ruby替代。

废除acronym使用abbr替代。

废除dir使用ul替代。

废除isindex使用form与input相结合的方式替代

废除listing使用pre替代

废除xmp使用code替代

废除nextid使用guids

废除plaintex使用“text/plian”(无格式正文)MIME类型替代。

原文地址:https://www.cnblogs.com/daihongyuan/p/5842739.html