HTML5个人学习简介

HTML5

什么是HTML5?

HTML5是HTML标准的最新版本，它有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 HTML5。

HTML5的新特性

• 用于绘画的canvas标签
• 用于媒介回放的video和audio元素
• 新的本地离线储存的更好支持
• 新的特殊内容元素
如：article，footer，header，nav，section。。
• 新的表单控件
如：calendar，date，time，email，url，search。。

HTML5的改进

• 新元素
• 新属性
• 完全支持css3
• Video和Audio
• 2D/3D制图
• 本地存储
• 本地SQL数据

DTD:
1、可以定义合法的XML文档建构模块 它使用一系列的合法的元素来定义文档的结构
2、DTD中规定了标记语言的规则，这样浏览器才能够争取的显示内容
3、HTML5不属于SGML 所以不需要引用DTD

新增的标签

1、结构标签
2、多媒体标签
3、Web应用标签
4、其他标签

结构标签 – 有意义的DIV

• article 标记定义了一篇文章
• header 标记定义一个页面或者区域的头部
• nav标记定义导航链接
• section标记定义一个区域 – 用处比较大，因为网页中到处都是一个一个区域
• aside 标记定义页面内容部分的侧边栏
• hgroup标记定义一个文件中一个区域相关的信息
• figure标记定义一组媒体内容以及他们的标题 – mp4 ogg
• figcaption标签定义figure元素的标题
• footer标记定义一个区域的底部
• dialog 标记定义一个对话框（会话框） 类似微信

补充的规则：

1、header/section/aside/article/footer 作为大标签存在
2、Header/section/footer(级别最大) > aside/article/figure/hgroup/nav(作为内层)

多媒体标签：

1、Video 定义一个视频
2、Audio 定义音频内容
3、Source 定义媒体资源
(1) 视频的话需要添加视频资源
(2) 音频的话添加音频资源

音频属性：
• Autoplay 自动播放
• Controls 控件播放
• Loop -1 loop 无限循环
• Src 资源路径

视频属性：
• Autoplay 自动播放
• Controls 显示控件
• Height 设置播放器的高度
• Weight 设置播放器的宽度
• Loop 循环播放 值：-1 loop
• Src 资源路径
• Preload 预备播放 但是如果出现了autoplay 自动忽略

Canvas标签 绘制图像 JavaScript

embed 定义外部的可交互的内容或者插件 比如flash
定义和使用说明：定义了一个容器，用来嵌入外部应用或者互动程序！

标签意义：

多媒体标签的出现意味着多媒体发展能够在不使用插件的情况下可以操作多媒体文件，能够极大的提升客户体验。

状态标签 – Web应用标签

Meter 状态标签（实时状态显示） 气温，气压 定义度量衡 磁盘使用情况 查询结果
Progress 状态标签（任务过程：安装，下载）

Meter属性：
• High 界定为高的范围
• Low 低的范围
• Max 范围内的最大值
• Min 最小值
• Optimum 最优值
• Value 实际值

Progress 定义运行中的进度（进程）
可以使用progress显示JavaScript中耗费时间的函数的进度

兼容性：
Meter firefox chrome opera sifari6
Progress IE10+ firefox chrome opera sifari6

列表标签 下拉列表 select

H5 新增的列表：
1、datalist 为input标签定义一个下拉列表 配合option使用
2、Details 定义一个元素的详细内容，配合summary

兼容性：
3、datalist chrome firefox ie10+
4、Details chrome safari6 firefox

注释标签：
1、ruby标签 – 定义注释和音标
2、rt标签 – 定义对ruby的注释内容文本
3、rp标签 – 告诉那些不支持ruby标签的浏览器如何去显示
(1) Rp标签不要放在rt标签之内

其他标签;
1、mark标签 – 当以有标记的文本（黄色选中的状态）
2、Output标签 – 定义一些输出类型，计算表单的结果 配合oninput事件

兼容性：
1、mark ie9+ firefox chrome safari opera
2、Output ie9+ firefox chrome safari opera
Type range 表示范围 0~100
Type number 表示数值型
以上就是常用的新增加的标签

补充：

H5删除的标签： 分为三类：
1、纯表现的元素：Basefont big center font s strike tt u
2、对可用性产生负面影响的元素：frame framest noframes
3、产生混肴的标签：acronym applet isindex dir

显示不变，只是表达的含义上进行重新定义的标签
1、b 粗体 代表内联标签 没有传递重要的意思
2、i 斜体 代表内联标签 没有传递重要的意思
3、dd 可以和details figure 一起使用 dialog有可以用 定义包含文本
4、dt 可以和details figure 一起使用 dialog有可以用 汇总细节
5、hr 不仅表示水平线 还可以表示主题结束
6、menu 重新定义用户界面的菜单，配合conmand或者menuitem使用
7、samll 小字体 打印注释 法律条款
8、strong 表示重要性 而不是强调符号