HTML5新增标签：

欢迎关注我的github: https://github.com/godkun/blog

##概要
1. HTML5 简介： （HTML5 是目前-2017年来说，是最新的一代HTML标准）

2. HTML5 一些新的规则：
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记（新增了一些语义化的标签：在HTML4当中，很明显的一个形象就是用DIV来进行任何的布局。）
HTML5 应该独立于设备（对于各个移动设备说来，也是完美兼容的）
开发进程应对公众透明。

3. 新特性：
HTML5 中的一些有趣的新特性：
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
用于媒介回放的 video 和 audio 元素
用于绘画的 canvas 元素
对本地离线存储的更好的支持（我们讲JS的时候，会讲到技能点）

4. 兼容性情况： 针对浏览器的支持（除了IE6/IE7/IE8/IE9以为，其他的大部分主流的浏览器都是完美兼容的）

5：HTML5新增标签（常用的）
如何去理解标签：
（1）基本语境（语义化），用在场景是什么？
（2）默认样式、是否块/行内元素、是否是闭合元素。

header 页眉（网页（部分区域）的头部顶部导航区域等等），闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

nav 导航链接部分；闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟 DIV标签，可以说是完全一样的特性。

section 标签定义网页中的区域（部分）。比如章节、页眉、页脚或文档中的其他部分。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

footer 页脚（网页（部分区域）的底部|版权区域等等），闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

article 内容是引用其他地方的。一个区域中的，另外一部分内容；闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性

aside 跟 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的辅助区域；（最常见的京东的右侧的工具栏）

hgroup 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。如果文章中只有一个标题，则不使用hgroup。
**闭合标签；**块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

figure 对多个元素进行组合。通常与figcaption联合使用。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上跟DIV标签，可以说是完全一样的特性；figcaption 定义figure元素组的标题，必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

audio 播放声音文件，比如音乐或其它音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签；行内元素；默认的宽:controls的宽度300px；高:controls的高度32px；autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。preload preload 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src url 要播放的音频的 URL。

video 播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。闭合标签；行内元素；默认的宽：300px 高：150px。autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。height 设置视频播放器的高度。loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。src 要播放的视频的 URL。width 设置视频播放器的宽度。

source为媒介元素（比如 video 和 audio）指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式。非闭合标签，只有开始标签，没有结束标签。source 行内元素，默认无宽度和高度。media 定义媒介资源的类型，供浏览器决定是否下载。src 媒介的 URL。type 定义播放器在音频流中的什么位置开始播放。默认，音频从开头播放。

canvas定义图形，比如图表和其他图像。
闭合标签；行内元素；默认情况下，canvas创建的画布宽：300px;高：150px;

datalist 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
闭合标签；行内元素；默认无宽度和高度。

embed 定义嵌入的内容，比如插件。用来插入各种多媒体，格式可以是MIDI、MP3等。
非闭合标签，只有开始标签，没有结束标签。行内元素；默认的宽：300px；高：150px。

time 定义日期或时间，或者两者。闭合标签；行内元素，默认情况下，宽：内容的宽度；高：内容的高度；

address 为文档或 section 定义联系信息，比如：电子邮箱、地址、电话、QQ、微信号等。
闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；

map定义客户端的图像映射。图像映射是带有可点击区域的图像。
闭合标签；行内元素；默认情况下，无宽度和高度；

area area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
闭合标签，行内元素；只有结束标签，没有开始标签。默认情况下，无宽度和高度；

mark定义页面中需要突出显示或高亮显示的内容，通常在引用原文时，使用此元素，目的就是引起当前用户的注意。闭合标签；行内元素；默认情况下，宽：内容的宽度；高：内容的高度；

details 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。(备注信息)，块元素
；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；
但是有一个动态的效果，点击可以显示(展开)内容，再点击可以隐藏(收起)内容；

1-12 的标签一定要好好掌握；多媒体（音乐、视频、图形）是结合 js 来做项目的。

支持HTML5浏览器默认的标签样式：

article, aside, footer, header, hgroup, main, nav, section {
display: block;
}

HTML5新增标签最有用的总结相关推荐

HTML5移动开发的基础与技巧（一）HTML5新增标签及应用场景
HTML5移动开发 HTML5的发展 HTML5 是 W3C 与 WHATWG 合作的结果.WHATWG为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScr ...
html5 支持php标签吗,HTML5新增标签使用方法
HTML5提供了一些新的元素和属性,例如nav(网站导航块)和footer.这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如au ...
十二、HTML5新增标签特性详解（audio、video、input）
HTML5 第一天一.什么是 HTML5 HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML 两个概念: 是一个新 ...
前端基础8：HTML5新增标签及CSS3新属性 viewport 动画
HTML5新增标签标签名描述 header 头部 section 区分大模块 nav 导航 footer 尾部 article 文章 aside 侧边栏 audio 音频 video 视频 fig ...
HTML5新增标签有哪些你知道吗？
html5新增标签 <article>标签定义外部的内容. 比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. HTM ...
HTML5新增标签以及扩展属性
HTML5新增标签以及属性 1. form表单可以和里面的内容分离 <form id=login action=login.php method=post ></form> & ...
HTML5新增标签及废除标签整理
HTML5新增标签及废除标签整理(有些很偏就没有列出) 1>新增的标签 1>section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面的其他部分,其实就像div,比div更具 ...
HTML5科普知识：细数HTML5新增标签
html5将成为 HTML.XHTML 以及 HTML DOM 的新标准.html 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. html5 仍处于完善之中.然而,大部分 ...
html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来 ...

HTML5新增标签最有用的总结

HTML5新增标签：

HTML5新增标签最有用的总结相关推荐

最新文章

热门文章