HTML5新特性（新元素和新属性）

一、新增结构性元素

名称	描述
section	定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一般用于成节的内容，会在文档流中开始一个新的节。
article	特殊的section标签，它比section具有更明确的语义，代表一个独立的、完整的相关内容块，可独立于其他页面内容使用。
nav	导航链接的部分。
aside	装载非正文的内容，内容应该与附近的内容相关。可用作文章的侧栏。删除不会影响到正文内容所要传达的信息。
footer	定义文档或节的页脚，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等。联系信息应该位于address标签中。
header	定义文档的页眉，通常是一些引导和介绍的信息。位置不局限于页面头部。
figure	定义媒介内容的分组，以及它们的标题(figcaption)。一般用作文档中插图的图像。

hgroup元素：代表一个段的标题，用于解决子标题排版的问题。该元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。

二、新增input元素的属性

名称	描述	值
autocomplete	规定是否使用输入字段的自动完成功能。如：下次填入时自动填充用户上次输入的内容。	on/off
autofocus	规定输入字段在页面加载时是否获得焦点。	autofocus
form	规定输入字段所属的一个或多个表单。	formname
height/width	定义input字段的高度/宽度，只适用于 type="image"。	pixels%
max/min	规定输入字段的最大值/最小值。	number
pattern	规定输入字段的值的模式或格式。	regexp_pattern
placeholder	帮助用户填写输入字段的提示。	text
required	指示输出字段的值是必需的。	required
step	规定输入字的合法数字间隔。	number
type	email：email地址，提交表单自动验证。
	url：输入url地址这类特殊文本的文本框。
	number：提供输入数值的文本框。
	range：提供输入包含一定范围内数字的文本框。显示为滚动条。
	date：日期检出类型。	date、month、week、time、datetime
	search：用于输入搜索关键词的文本框。
	tel：专门输入电话号码的文本框。
	color：专门用于设置颜色的文本框。
list	引用包含输入字段的预定义选项的 datalist 。	datalist-id
multiple	允许一个以上的值。	multiple

新增的表单重写属性

formaction元素：覆盖表单的action属性，规定当表单提交时处理输入控件的文件URL。
formmethod元素：覆盖表单的method属性，
formnovalidate元素：覆盖表单的novalidate属性。使用该属性，提交表单时不进行验证。
formtarget元素：覆盖表单target属性。

三、新增元素按功能分类

音频/视频

video元素：定义视频，比如电影片段或其他视频流。
audio元素：定义音频，比如音乐或其他音频流。
source元素：为媒介元素（ <video> 和 <audio>）定义媒介资源。
track元素：为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

编程

embed元素：为外部应用程序（非 HTML）定义容器，比如插件。格式可以是Midi、Wav、AIFF、AU、MP、swf等。

格式

bdi元素：定义文本的文本方向，使其脱离其周围文本的方向设置。
mark元素：高亮显示部分文本。场景：在搜索结果中向用户高亮显示搜索关键词。
meter元素：定义预定义范围内的度量。例子：磁盘用量、查询结果的相关性，等等。如果标记进度条，请使用 <progress> 标签。
progress元素：定义任何类型的任务的进度。例子：显示JavaScript中消耗时间的函数的进程。
rp元素：定义若浏览器不支持 ruby 元素显示的内容。
rt元素：定义 ruby 注释的解释。

扫描二维码关注公众号，回复： 5241369 查看本文章

ruby元素：定义 ruby 注释。

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

time元素：定义日期/时间。
wbr元素：如果单词太长，或者您担心浏览器会在错误的位置换行，可以定义可能的换行符。

图像

canvas：定义图形。元素本身没有行为，只提供一块画布，但它把一个绘图API展现给客户端javascript，使脚本能够把想绘制的东西绘制到这块画布上。
figcaption元素：定义 figure 元素的标题。
figure元素：定义媒介内容的分组，以及它们的标题。

列表

command元素：定义命令按钮。比如：单选按钮，复选按钮。只有IE9支持此标签。

标签

header元素：定义 section 或 page 的页眉。
footer元素：定义 section 或 page 的页脚。
section元素：定义 section。
article元素：定义文章。
aside元素：定义页面内容之外的内容。
details元素：表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示出细节信息，summary元素应该details元素的第一个元素。
dialog元素：定义对话框或窗口。目前只有 Chrome 和 Safari 6 支持该标签。
summary元素：为 <details> 元素定义可见的标题。

表单

datalist元素：定义下拉列表。
datagrid元素：表示可选数据的列表，以树形列表的形式显示。
keygen元素：定义生成一对密钥。
output元素：定义输出的一些类型。比如：脚本输出。

四、结构demo

<header>
  <h1></h1>
  <p><em>learn to code.</em></p>
</header>

<nav>
  <h3>navigate this site</h3> 
  <ul>
    <li><a href=“”>首页</a></li>
    <li><a href=“”>个人中心</a></li>
    <li><a href=“”>登录</a></li>
  </ul>
</nav>

<article>
  <section class=“article-heading”>
    <h3>title</h3>
    <span>by zhuyue</span>
  </section>

  <section class=“article-body”>
    <p>...</p>
    <p>...</p>
    <aside>
      <h4>That’s how my first in wed design</h4>//顺带一提
      <p>…</p>
    </aside>
  </section>
  <section class=“article-footer”>
    <div class=“further-reading”>
      <h4>If you like this article,you’ll like</h4>
      <nav>
        <h3>navigate this site</h3> 
        <ul>
          <li><a href=“”>首页</a></li>
          <li><a href=“”>个人中心</a></li>
          <li><a href=“”>登录</a></li>
        </ul>
      </nav>
    </div>
    <footer>posted in<strong>Coding</strong></footer>
    <div>Post on<time datetime=“23-1-2019”>2019.1.23</time></div>
  </section>
</article>
<aside>
  <h4>more about this site</h4>
  <p>…</p>
</aside>

<footer>
  <p>&copy; 2019 - zy</p>
</footer>

五、其他新增

data自定义属性
全局属性：

属性	描述
accesskey	规定激活元素的快捷键。Windows下是Alt+一个字母按键
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。（新增）
contextmenu	上下文菜单在用户点击元素时显示。尚未被浏览器支持（新增）
data-*	用于存储页面或应用程序的私有定制数据。（新增）
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。（新增）
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。（新增）
hidden	规定元素仍未或不再相关。（新增）
id	规定元素的唯一 id。
lang	规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。（新增）
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。（新增）

样式继承：

与元素外观相关的默认继承
与布局相关的默认不被继承
不被继承的可用inherit强制继承

六、废除元素

纯表现的元素： basefont、big、center、font等
对可用性产生负面影响的元素： frame、frameset、noframes

HTML5新特性（新元素和新属性）

一、新增结构性元素

二、新增input元素的属性

三、新增元素按功能分类

四、结构demo

五、其他新增

六、废除元素

猜你喜欢