前端学习Day19

【前端学习Day19】HTML5基础
一、兼容问题
支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的 遨游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹 浏览器等国产浏览器同样具备支持HTML5的能力。
二、语法
1.内容类型(ContentType)
HTML5的文件扩展符与内容类型保持不变,仍然为".html"或".htm"
2.DOCTYPE声明
不区分大小写
3.指定字符集编码
前端学习Day19
文章图片

4.可省略标记的元素
不允许写结束标记的元素:br、col、embed、hr、img、input、、link、meta
5.可以省略结束标记的元素
li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
6.可以省略全部标记的元素:html、head、body、colgroup、tbody
7.属性值可以使用双引号,也可以使用单引号。
三、语义化结构标签
在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。
section 更偏于划分区域。(网页的外围结构…更类似与div)
article 更偏向于内容的展示
aside 侧边栏(在一旁的)
header 网页头部或者是内容块头部
footer 网页的顶部或者内容快的底部
nav 导航区域。
figure 代表一个独立的区域
figcaption figure区域的标题
main 主体区域(IE不兼容)
hgroup 标题组
mark 高亮显示文本
time 用来处理时间
dialog 类似于对话框
四、HTML5多媒体标签
1.视频
前端学习Day19
文章图片

属性:autoplay 自动播放
controls 播放控件
loop 循环播放
muted 静音状态
poster 当视频没有加载或者没有播放的时候显示的封面图
2.音频
前端学习Day19
文章图片

属性: autoplay 自动播放
controls 播放控件
loop 循环播放
muted 静音状态
3.定义媒介资源
前端学习Day19
文章图片

type属性 -> 定义媒介类型
video里面 type属性的定义:video/ogg,video/mp4,video/webm
audio里面 type属性的定义:audio/ogg,audio/mpeg
五、H5新增表单内容
1.H5新增的type的类型
前端学习Day19
文章图片

2.H5新增的表单属性 max="" min=""

    推荐阅读