zoukankan      html  css  js  c++  java
  • HTML5之元素与标签结构

    HTML5新增标签

    新增的结构元素:

    ●section:<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

    ●article:<article> 标签规定独立的自包含内容。

        一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

        <article> 元素的潜在来源:论坛帖子、报纸文章、博客条目、用户评论。

    ●aside:<aside>标签表示article标签内容之外的、与article标签内容相关的辅助信息。

         <aside>的内容可用作文章的侧栏。

    ●header:<header> 标签定义文档的页眉(介绍信息)。

    ●hgroup:<hgroup> 标签用于对网页或区段(section)的标题进行组合。

    ●footer:<footer>标签表示整个页面或页面中一个内容区块的脚注,一般来说,它包含创作者的姓名、创作日期以及创作者的联系信息。

        提示:<footer> 元素内的联系信息应该位于<address> 标签中。

    ●figure:<figure>标签规定独立的流内容(图像、图表、代码等等)。

        figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    ●figcaption:<figcaption> 标签定义 figure元素的标题(caption)。

          "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    新增的媒体元素:

    ●video:<video> 标签定义视频,比如电影片段或其他视频流。

    ●audio:<audio> 标签定义声音,比如音乐或其他音频流。

    ●enbed:<embed> 标签定义嵌入的内容,比如插件。

    新增的表单控件标签:

    ●email:必须输入email

    ●url:必须输入url地址

    ●number:必须输入数值

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

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

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

    ●color:颜色选择器。

    新增的其它:

    ●mark:<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

    ●progress:<progress> 标签标示任务的进度(进程)。ep:<progress value="22" max="100"></progress> 

    ●ruby:<ruby> 标签定义 ruby 注释(中文注音或字符)。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。

    ●wbr:Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

    ●canvas:<canvas> 标签定义图形,比如图表和其他图像。

         <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

    ●details:<details> 标签用于描述文档或文档某个部分的细节。

         目前只有 Chrome 和 Safari 6 支持 <details> 标签。

    ●datalist:<datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

         datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

         请使用 input 元素的 list 属性来绑定 datalist。

         所有主流浏览器都支持 <datalist> 标签,除了 Internet Explorer 和 Safari。

    ●keygen:<keygen> 标签规定用于表单的密钥对生成器字段。

          当提交表单时,私钥存储在本地,公钥发送到服务器。

    ●output:<output> 标签定义不同类型的输出,比如脚本的输出。

    HTML5被删除的元素:

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

    ●不再使用frame框架,HTML5不再支持,只支持iframe框架。

    ●只有部分浏览器支持的标签:applet、bgsound、blink、marquee等标签。

    ●其它被废除的标签:废除rb,使用ruby替代;

               废除acronym使用abbr替代;

               废除dir使用ul替代;

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

               废除listing使用pre替代;

               废除xmp使用code替代;

               废除nextid使用guids;

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

    HTML5全局属性

    ●data-*:使用 data-* 属性来嵌入自定义数据。

         data-* 属性用于存储页面或应用程序的私有自定义数据。

         data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

         存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。

         属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符,属性值可以是任意字符串。

    ●hidden:如果设置该属性,它规定元素仍未或不再相关。浏览器不应显示已规定 hidden 属性的元素。hidden 属性也可用于防止用户查看元素,直到匹配某些条件(比如选择了某个复选框)。然后,JavaScript 可以删除 hidden 属性,以使此元素可见。

    ●spellcheck:spellcheck 属性规定是否对元素进行拼写和语法检查。

          可以对以下内容进行拼写检查:input 元素中的文本值(非密码)、<textarea> 元素中的文本、可编辑元素中的文本。

    ●tabindex:tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时)。

          以下元素支持 tabindex 属性:<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。

    ●contenteditable:contenteditable 属性规定元素内容是否可编辑。

             如果元素未设置 contenteditable 属性,那么元素会从其父元素继承该属性。

  • 相关阅读:
    关于这个 blog
    P6499 [COCI2016-2017#2] Burza 题解
    CF1172F Nauuo and Bug 题解
    CF1479D Odd Mineral Resource 题解
    CF1442E Black, White and Grey Tree 题解
    CF1442D Sum 题解
    CF1025D Recovering BST 题解
    CF1056E Check Transcription 题解
    CF1025F Disjoint Triangles 题解
    红包算法的PHP实现
  • 原文地址:https://www.cnblogs.com/Yvette1014/p/5323102.html
Copyright © 2011-2022 走看看