HTML5在2014年就定稿了！

课程概述

  1. 标签变化 — DTD、新增的标签、删除标签、重定义的标签
  2. 页面布局 — 新的页面布局、区别和意义
  3. 属性变化 — Input、表单属性、链接属性、其他属性

学习目标

  1. 新标签以及新属性和他们的应用
  2. 布局

DOCTYPE声明

定义和用法 — <!DOCTYPE HTML>
1、必须是HTML文档的第一行
2、html:5 ！+ 回车 （vs code）—-> 生成html5的标准形式
3、不是HTML标签

DTD — 文档类型定义

1、DTD:可定义合法的XML文档构建模块，它使用一系列的合法的元素定义文档的结构
2、在HTML中：DTD规定了标记语言的规则，这样浏览器才能正确呈现其内容
3、HTML5：不再基于SGML，所以不需要再次引用DTD
（xml：扩展标记语言）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>
  7. <body>
  9. </body>
  10. </html>

新增的标签

  1. 结构标签
  2. 多媒体标签
  3. web应用标签
  4. 其他标签

结构标签（块状元素） — 语义化标签

  1. article — 标记定义一篇文章
  2. header — 标记定义一个页面或者一个区域的头部
  3. nav — 标记定义导航链接
  4. section — 标记定义一个区域 — 用处比较大，因为网页中到处都是一个一个的区域
  5. aside — 标记定义页面内容的侧边栏
  6. hgroup — 标记定义一个文件中的一个区块的相关信息
  7. figure — 标记定义一组媒体内容以及他们的标题 — 包裹视频、音频表示一种语义
  8. figcaption — 标签定义figure元素的标题
  9. footer — 标记定义一个页面或者一个区域的底部
  10. dialog — 标记定义一个对话框(会话框)类似微信

结构标签补充

  1. header/section/aside/article/footer这五个大标签不要嵌套里面，他们作为大标签存在于外面的
  2. header/section/footer — 这三个级别最大 》 aside/article/figure/hgroup/nav相对于前面的三个标签作为内层
  3. 以上前面三个和后面的五个不能相互嵌套
  4. 紧接着 》div/figcaption这两个是一个级别的

对媒体标签 — 三类

  1. video — 标记定义一个视频
  2. audio — 标记定义一个音频内容
  3. source — 标记定义媒体资源

audio — 标记定义一个音频内容

常见属性

属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
src url 要播放的音频的url。

音频格式：mp3、ogg、wav。。。

video — 标记定义一个视频**

当前

元素支持三种视频格式：尽星使用mp4格式。

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES
从Firefox 21 版本开始
Linux 系统从 Firefox 30开始		 YES YES
Safari YES NO NO
Opera YES
从Opera25 版本开始		 YES YES

语法：

  1.         <video src="文件地址" controls="controls"></video>
  2.         <video controls="controls" width="300">
  3.             <source src="move.ogg" type="video/ogg">
  4.             <source src="move.mp4" type="video/mp4">
  5.             <!-- 您的浏览器暂不支持<video>标签播放视频 -->
  6.         </video>

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然,支持的格式是有限的。

1.视频

—常见属性

属性 值 描述
autoplay autoplay 视频就绪自动播放（谷歌浏览器需要添加muted[静音播放]来解决自动播放问题）
controls controls 向用户显示播放控件
width pixels（像素） 设置播放器宽度
height pixels（像素） 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
preload auto（预先加载视频）
none（不应加载视频）		 规定是否预加载视频（如果有了autoplay，就忽略该属性）
src url 视频url地址
poster Imgurl 加载等待的画面图片
muted muted 静音播放

Canvas标签 绘制图像 JavaScript — 标记定义图片使用

embed — 在html4中是存在的，但是备用标签，几乎不使用而且不被w3c认可，但是在html5中转正了

  1. 标记定义外部可交互的内容或者插件，比如flash动画，定义一个容器，用来嵌入外部的应用
  2. 是html5中新标签
  3. 可以插入flash动画也可以插入image图片

标签意义

多媒体标签的出现意味着多媒体的发展以及支持 不使用插件的情况下即可随机操作多媒体，极大的提高了用户体验；

状态标签 — web应用标签

  1. meter — 状态标签（实时状态显示：气压、气温）

image.png
image.png

  1. progress — 状态标签（任务状态过程：安装，加载）

image.png

浏览器兼容性

  1. meter — firefox、chrome、opera、以及safari6支持
  2. progress — ie10+、firefox、opera、chrome、以及safari6支持

web应用标签 — 列表标签

  1. datalist — 为input标记定义一个下拉列表，配合option

    兼容性：chrome、firefox、ie10以上及更高的版本；

  2. details — 标记定义元素的详细内容，配合summary

    兼容性：chrome、firefox、safari6以上及更高的版本；

web应用标签 — 注释标签 — 显示出来的注释

  1. ruby — 标记定义注释或者音标
  2. rt — 标记定义对ruby的注释内容文本
  3. rp — 告诉那些不支持ruby元素的浏览器如何去显示 — rp标签一般情况下不要放在rt标签之内

其他标签

  1. mark — 标记定义有标记的文本(黄色选中状态)

    兼容性：ie9+、firefox、chrome、opera、safari

  2. output — 标记定义一些输出类型，计算表单结果配合oninput事件

image.png

HTML5删除标签 — 分为三类

  1. 纯表现的元素 — Basefont、big、center、font、s、strike、tt、u
  2. 对可用性产生负面影响的元素 — frame、frameset、noframes
  3. 产生混肴的元素 — acronym、applet、isindex、dir

重定义标签 — 显示不变，只是表达的含义进行重新定义的标签

image.png