概要
h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。
- h5新增的标签
新增元素 | 说明 |
---|---|
video | 表示一段视频并提供播放的用户界面 |
audio | 表示音频 |
canvas | 表示位图区域 |
source | 为video和audio提供数据源 |
track | 为video和audio指定字母 |
svg | 定义矢量图 |
code | 代码段 |
figure | 和文档有关的图例 |
figcaption | 图例的说明 |
main | |
time | 日期和时间值 |
mark | 高亮的引用文字 |
datalist | 提供给其他控件的预定义选项 |
keygen | 秘钥对生成器控件 |
output | 计算值 |
progress | 进度条 |
menu | 菜单 |
embed | 嵌入的外部资源 |
menuitem | 用户可点击的菜单项 |
menu | 菜单 |
template | |
section | |
nav | |
aside | |
article | |
footer | |
header |
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 来做项目的。