HTML5新元素汇总及其已经不支持的元素

原创   2019-01-08 12:45  阅读 45 次 评论 0 条

自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如:图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等。

HTML5 新的语义和结构元素

HTML5 提供的新元素可以创建更好的页面结构。HTML5 添加了很多语义元素如下所示:

标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。

使用HTML5新元素实现的页面布局

使用 HTML5 新元素实现的网页结构,这是一个非常典型的博客首页页面布局:头部、尾部、水平导航栏、侧边栏导航以及内容。

HTML5 图像【<canvas> <svg>】

标签 描述
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API。
<svg> 定义使用 SVG 的图像绘制。

新多媒介元素

标签 描述
<audio> 定义声音或音乐内容。
<embed> 定义外部应用程序的容器(比如插件)。
<source> 定义多媒体资源 <video> 和 <audio> 的来源。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
<video> 定义视频或影片内容。

新的表单元素

标签 描述
<datalist> 定义输入控件的预定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段(用于表单)。
<output> 定义不同类型的计算结果。比如脚本的输出。

新的输入类型与属性

新的输入类型 新的输入属性
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

HTML5 - 新的属性语法

HTML5 允许四种不同的属性语法。

该例演示 <input> 标签中使用的不同语法:

标签 描述
Empty <input type="text" value="John Doe" disabled>
Unquoted <input type="text" value=John>
Double-quoted <input type="text" value="John Doe">
Single-quoted <input type="text" value='John Doe'>

在 HTML5 中,根据属性所需,可能会使用所有这四种语法。

HTML5 已移除元素

以下的 HTML 4.01 元素在 HTML5 中已经被删除:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

使用 HTML5 新元素模仿博客首页布局的实例

通过简单的页面布局的例子,来展示上述 HTML5 新标签的使用方法。

<!DOCTYPE html> <!-- HTML5的文档声明 -->
<html lang="en-US">
<head>
<meta charset="utf-8"> <!-- 声明编码 -->
<link rel="stylesheet" href="style.css" type="text/css">
<title>网页布局结构</title>
</head>
 
<body>
  <h2>body</h2>
  <header id="page_header">
    <h1>Header 标签定义页面或区段的头部</h1>
    <nav>
      <ul>
        <li><a href="#">导航区域</a></li>
        <li><a href="#">导航的重要性</a></li>
        <li><a href="#">对于一个网页至关重要</a></li>
        <li><a href="#">快速方便的</a></li>
        <li><a href="#">导航是留住访客所必须的</a></li>         
      </ul>
    </nav>
  </header>
  <section id="posts">
    <h2>Section 元素将页面的逻辑区域或内容合理归类,合理布局。可以包含多个 article 标签</h2>
    <article class="post">
      <h2>article 定义正文或一篇完整的内容</h2>
      <header>
        <h2>Article Header</h2>
      </header>
      <aside>
        <h2>Aside 定义补充或相关内容</h2>
      </aside>
      <ul>
      <li>aside 标签实现旁白,侧边栏则由 section 实现。</li>
      <li>aside 是为主内容添的附加信息,入引言,图片等</li>
      <li>aside 一般加在 article 中使用</li></ul>
      <footer>
        <h2>Article Footer</h2>
      </footer>
    </article>
    <article class="post">
      <h2>article</h2>
      <header>
        <h2>Article Header</h2>
      </header>
      <aside>
        <h2>Article Aside</h2>        
      </aside>
      <p>Without you?I'd be a soul without a purpose. </p>
      <footer>
        <h2>Article Footer</h2>
      </footer>
    </article>
  </section>
 
  <section id="sidebar">
    <h2>Section</h2>
    <header>
      <h2>Sidebar Header</h2>
    </header>
    <nav>
      <h3>侧边栏,不是旁白!看做是右面的一个区域,包含链接,用section和nav实现即可。</h3>
      <ul>
        <li><a href="#">April 2012</a></li>
        <li><a href="#">March 2012</a></li>
        <li><a href="#">February 2012</a></li>
        <li><a href="#">January 2012</a></li>
      </ul>
    </nav>
  </section>
 
  <footer id="page_footer">
    <h2>Footer 标签定义页面或区段的尾部</h2>
  </footer>
 
</body>
</html>

对 HTML5 新标签CSS的属性定义。命名为:style.css

@charset "utf-8";
/* CSS Document */
body { /*整个页面的属性设定*/
    background-color: #CCCCCC; /*背景色*/
    font-family: Geneva, sans-serif; /*可用字体*/
    margin: 10px auto; /*页边空白*/
    max-width: 800px;
    border: solid; /*边缘立体*/
    border-color: #FFFFFF; /*边缘颜色*/
}
 
h2 { /*设定整个body内的h2的共同属性*/
    text-align: center; /*文本居中*/
}
 
header { /*整个body页面的header适用*/
    background-color: #F47D31;
    color: #FFFFFF;
    text-align: center;
}
 
article { /*整个body页面的article适用*/
    background-color: #eee;
}
 
p { /*整个body页面的p适用*/
    color: #F36;
}
 
nav,article,aside { /*共同属性*/
    margin: 10px;
    padding: 10px;
    display: block;
}
 
header#page_header nav { /*header#page_header nav的属性*/
    list-style: none;
    margin: 0;
    padding: 0;
}
 
header#page_header nav ul li { /*header#page_header nav ul li属性*/
    padding: 0;
    margin: 0 20px 0 0;
    display: inline;
}
 
section#posts { /*#posts 的section属性*/
    display: block;
    float: left;
    width: 70%;
    height: auto;
    background-color: #F69;
}
 
section#posts article footer { /*section#posts article footer属性*/
    background-color: #039;
    clear: both;
    height: 50px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}
 
section#posts aside { /*section#posts aside属性*/
    background-color: #069;
    display: block;
    float: right;
    width: 35%;
    margin-left: 5%;
    font-size: 20px;
    line-height: 40px;
}
 
section#sidebar { /*section#sidebar属性*/
    background-color: #eee;
    display: block;
    float: right;
    width: 25%;
    height: auto;
    background-color: #699;
    margin-right: 15px;
}
 
footer#page_footer { /*footer#page_footer属性*/
    display: block;
    clear: both;
    width: 100%;
    margin-top: 15px;
    display: block;
    color: #FFFFFF;
    text-align: center;
    background-color: #06C;
}

本文地址:http://www.aszhi.com/jishu/html5/79.html
版权声明:本文为原创文章,版权归 爱思智前端 所有,欢迎分享本文,转载请保留出处!
NEXT:已经是最新一篇了

发表评论


表情