课程概述
- 标签变化 – DTD、新增的标签、删除标签、重定义的标签
- 页面布局 – 新的页面布局、区别和意义
- 属性变化 – Input、表单属性、链接属性、其他属性
DOCTYPE声明
定义和用法 –
- 必须是HTML文档的第一行
- html:5按下tab键 / !+ctrl+e —> 生成html5的标准形式
- 不是HTML标签
DTD – 文档类型定义
- DTD:可定义合法的XML文档构建模块,它使用一系列的合法的元素定义文档的结构
- 在HTML中:DTD规定了标记语言的规则,这样浏览器才能正确呈现其内容
- HTML5:不再基于SGML,所以不需要再次引用DTD
(xml:扩展标记语言)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
新增的标签
- 结构标签
- 多媒体标签
- web应用标签
- 其他标签
结构标签(块状元素) – 有意义的DIV
- article – 标记定义一篇文章
- header – 标记定义一个页面或者一个区域的头部
- nav – 标记定义导航链接
- section – 标记定义一个区域 – 用处比较大,因为网页中到处都是一个一个的区域
- aside – 标记定义页面内容的侧边栏
- hgroup – 标记定义一个文件中的一个区块的相关信息
- figure – 标记定义一组媒体内容以及他们的标题 – 包裹视频、音频表示一种语义
- figcaption – 标签定义figure元素的标题
- footer – 标记定义一个页面或者一个区域的底部
- dialog – 标记定义一个对话框(会话框)类似微信
结构标签补充
- header/section/aside/article/footer这五个大标签不要嵌套里面,他们作为大标签存在于外面的
- header/section/footer – 这三个级别最大 aside/article/figure/hgroup/nav相对于前面的三个标签作为内层
- 以上前面三个和后面的五个不能相互嵌套
- 紧接着 div/figcaption这两个是一个级别的
对媒体标签 – 三类
- video – 标记定义一个视频
- audio – 标记定义一个音频内容
- source – 标记定义媒体资源
audio – 标记定义一个音频内容
音频格式:mp3、ogg、wav…
音频属性:
- Autoplay 自动播放
- Controls 控件播放
- Loop -1 loop 无限循环
- Src 资源路径
video – 标记定义一个视频
视频属性:
- Autoplay 自动播放
- Controls 显示控件
- Height 设置播放器的高度
- Weight 设置播放器的宽度
- Loop 循环播放 值:-1 loop
- Src 资源路径
- Preload 预备播放 但是如果出现了autoplay 自动忽略
Canvas标签
绘制图像 JavaScript – 标记定义图片使用
embed
在html4中是存在的,但是备用标签,几乎不使用而且不被w3c认可,但是在html5中转正了
- 标记定义外部可交互的内容或者插件,比如flash动画,定义一个容器,用来嵌入外部的应用
- 是html5中新标签
- 可以插入flash动画也可以插入image图片
标签意义
多媒体标签的出现意味着多媒体的发展以及支持 不使用插件的情况下即可随机操作多媒体,极大的提高了用户体验。