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

新增的表单重写属性

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

三、新增元素按功能分类

音频/视频

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

编程

  1. embed元素:为外部应用程序(非 HTML)定义容器,比如插件。格式可以是Midi、Wav、AIFF、AU、MP、swf等。

格式

  1. bdi元素:定义文本的文本方向,使其脱离其周围文本的方向设置。

  2. mark元素:高亮显示部分文本。场景:在搜索结果中向用户高亮显示搜索关键词。

  3. meter元素:定义预定义范围内的度量。例子:磁盘用量、查询结果的相关性,等等。如果标记进度条,请使用 <progress> 标签。

  4. progress元素:定义任何类型的任务的进度。例子:显示JavaScript中消耗时间的函数的进程。

  5. rp元素:定义若浏览器不支持 ruby 元素显示的内容。

  6. rt元素:定义 ruby 注释的解释。

  7. ruby元素:定义 ruby 注释。

    <ruby>
    漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
    </ruby>
    
  8. time元素:定义日期/时间。

  9. wbr元素:如果单词太长,或者您担心浏览器会在错误的位置换行,可以定义可能的换行符。

图像

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

列表

  1. command元素:定义命令按钮。比如:单选按钮,复选按钮。只有IE9支持此标签。

标签

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

表单

  1. datalist元素:定义下拉列表。
  2. datagrid元素:表示可选数据的列表,以树形列表的形式显示。
  3. keygen元素:定义生成一对密钥。
  4. 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>

五、其他新增

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

六、废除元素

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容

  • 结构元素 section 表示页面中的一个内容区块,比如章节、页眉、页脚或页面 article 表示页面中的一块与...
    小菜鸟程序媛阅读 518评论 0 3
  • 兼容性:HTML5在老版本的浏览器上也可以正常运行 实用性:HTML5内部并没有特别复杂的功能,它只封装了那些常用...
    舌尖上的苏东坡阅读 2,509评论 0 0
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,360评论 0 0
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 1,280评论 0 10
  • 新增的元素 html5新增了一些语义化更好的标签元素 结构元素 article元素,表示页面中的一块与上下文不相关...
    机智小铛铛i阅读 535评论 0 0