zoukankan      html  css  js  c++  java
  • 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类型替代。

  • 相关阅读:
    MongoDB慢查询性能分析
    redis的LRU算法(二)
    Skynet服务热点火焰图分析
    内存爆灯
    时区问题
    与机器共生
    bug狩猎
    Lesson Learned
    下划线引起的血案
    Intel的CPU漏洞:Spectre
  • 原文地址:https://www.cnblogs.com/daihongyuan/p/5842739.html
Copyright © 2011-2022 走看看