HTML5相当于：HTML+css+js+api
优势：跨平台，快速迭代，降低成本，导流入口多，分发效率高
HTML5：<!DOCTYPE html>
结构标签
块状元素（有意义的div）
解决新标签的兼容性问题
在.css文件内部加上
header,nav,section,aside,article,footer.....{
display:block;
}
结构标签尽量避免的嵌套
<header>
<header>
</header>
</header>
!!<header>/<section>/<aside>/<article>/<footer>
这五个标签的这种嵌套尽量不要出现
<header><section><footer>这三个标签级别是最高的
<aside><article><figure><hgroup><nav>这几个标签级别稍逊
<div><figcaption>级别最低
多媒体标签
<audio>标记定义音频内容
第一种写法：
<audio src=" " autoplay="autoplay" loop="-1" controls="controls">
您的浏览器不支持</audio>
如果是低版本的浏览器，可能不兼容HTML5的新标签，此时会显示audio内部的文字。
第二种写法：
<audio autoplay="autoplay" >
<source src=" " type="audio/mpeg">
</source>
</audio>
src音频的地址
controls 音频的控件
source标签也可以放入src 如果播放失败 video会继续看下一个source标签知道兼容
兼容的格式mp3 ogg wav
mp3格式
所有浏览器都兼容
ogg格式
Chrome 火狐 欧朋 都兼容 Safari不行
wav格式
Chrome 火狐 欧朋 Safari 都兼容
js可以直接生成一个audio标签
方式：new audio()等同于html上的<audio ></audio>
欧朋和Chrome浏览器不能直接播放，需要添加事件。
loop循环播放
不存在兼容问题
width和height
这两个属性没有什么用处，只能在style里改变它的宽高
audio的API
image.png
image.png
<video>标记定义一个视频
<video autoplay="autoplay" width="1024" height="768">
<source src=" " type="video/mp4">
</source>
</video>
支持的格式：mp4，webm，ogv
src-视频连接
controls-视频控制器
兼容问题：ie8（包括）以下不支持video标签，ie9支持video标签，只支持mp4。
width-视频宽度
height-视频高度（width和height同时用的话，视频比例不会改变，但是播放器会被拉伸。）
autoplay-视频自动播放，但是Chrome下不会自动播放。
loop-在视频结束的时候，会自动重复播放
poster-视频封面的图片，第一次加载没有播放之前显示的图片。
muted-静音
API
play（）控制video标签，让其播放。但是在Chrome下不允许带声音的自动播放。
window.onclick=function(){
videoNode.play();
}
pause（）控制video标签，让其暂停
可以脱离播放器去控制播放和暂停了
duration（）返回当前视频长度
默认是以秒显示长度，这边是让他们用分:秒显示
setTimeout(function(){
var min = parseInt(videoNode.duration/60);
var sec = parseInt(videoNode.duration%60);
console.log(min+":"+sec);
},100)
currentTime（）设置或返回当前视频的长度
可用来控制快进，给当前时间加上几秒。
src（）设置/返回当前视频的来源
volume（）设置/返回当前视频的音量
取值范围是0~1，百分比的形式
controls（）设置视频是否显示控件
取值是true和false
muted（）设置视频是否静音
在js上设置muted不会出现在video标签上
networkState（）返回视频的当前网络状态
值是0-未初始化。。1-视频已选取资源，但是未使用网络。。2-浏览器正在下载视频资源
。。3-未找到视频资源（在一开始的情况下，因为video，不会立即找到资源，所以也会出现3这个状态码）
currentSrc返回当前音视频的url
必须是在音视频可以加载播放时候并且不能复制
ended返回音视频播放是否结束
loop设置或返回视频是否应在该结束时重新播放
playbackRate设置或返回视频播放的速度
快进时用
readyState属性返回视频的当前就绪状态
timeupdate当目前的播放位置已更改时
监听到视频目前的播放状态，如果播放时就会自动函数内容。
seeked当用户已移动/跳跃到视频中的新位置时
触发事件：当用户对视频的进度条并且已经完成操作时的会触发的事件。
seeking当用户开始移动/跳跃到视频中的新位置时
触发事件：用户开始拖动进度条就会触发
volumechange当音量已更改时
RequestFullScreen全屏
触发事件：必须在用户事件内调用
如果是火狐浏览器：mozRequestFullScreen 大的s
google的Chrome浏览器：webkitRequestFullscreen 小的s
load从新加载视频资源
相当于重新让播放器刷新一下
canplay视频已经准备好开始播放
没刷新页面会重新加载
source标记定义媒体资源
source标签也可以放入src，可以解决一部分兼容性问题，如果播放失败，video标签可以从该source标签跳到下一个source标签，知道兼容。
<canvas>标记定义标签
<embed>标记定义外部的可交互的内容或插件，比如flash
这个和video相似，可以定义宽高
流行的插件videojs
属性data-setup=“{}”会使控件发生改变，更原始video不一样
多媒体标签的意义
意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。
状态标签
<meta>状态标签（实时状态显示：气压、气温）
<meta value="当前值 " min="最小值" max="最大值" low="最低值" high="最高值" optimum="最好的值">
55
</meta>
//定义了最大最小
<meta value="0.75" >
75
</meta>
//不定义最小最大,按百分比
1
2
<progress>状态标签（任务过程：安装、加载）
<progress value="30" max="100">
静态的
</progress>
<progress max="100">
动画
</progress>
1
2有色块在框内来回动
web应用标签
列表标签
<datalist>
为<input>标记一个下拉列表，配合option
<input type="" placeholder="请选择您喜欢的手机品牌" list="phonelist" name="">
<datalist id="phonelist">
<option value="iPhone">iPhone</option>
<option value="iP">iP</option>
<option value="iPh">iPh</option>
<option value="iPho">iPho</option>
</datalist>
image.png
image.png
image.png
<details>
标记定义一个元素的详细内容，配合summary
类似一个折叠文本
<details>
<summary>
树下的猫
</summary>
<p>lalalalalalalalalalalalalalalalalalalalalal</p>
</details>
注释标签
<ruby>
定义注释或音标
<rt>
标记定义对ruby的注释内容文本
<rp>
告诉那些不支持ruby元素的浏览器如何去显示
<p>我们来<ruby>夼<rt>kuang</rt></ruby>一个话题</p>
<p>我们来<ruby>夼<rp>(</rp><rt>kuang</rt><rp></rp></ruby>一个话题</p>
image.png
image.png
<mark>
标记定义有标记的文本（黄色选中状态）
<p>妈妈让我回家的时候买一瓶<mark>牛奶</mark>，顺路。</p>
image.png
<oninput>
标记定义一些输出类型，计算表单结果配合oninput事件
oninput事件可以实时监听文本框的输入变化
<form oninput="totalPrice.value=parseInt(price,value)*parseInt(number.value)">
<input type="text" id="price" value="5000">*
<input type="number" id="number" value="1">=
<output name="totalPrice" for="price number"> </output>
</form>
html5布局：
image.png
布局的新意义
HTML5让很多更有意义的标签来替代原本HTML的无意义div。
1、提升了网页的质量和语义
2、节省了css对id和class的调用
HTML5的属性变化
input
email/url/number/range/Date picker/search/color/tel
<input type="email" name="email">
这个属性必不可少的是要有 @和.
url
<input type="url" name="url">
苹果手机点开url的input会出现专门的输入框：必不可少的是. / .com
tele
<input type="tele" name="tele">
苹果安卓点开都是九键数字输入框
number
<input type="number" name="number" >
这个电脑端会有点变化
手机端依旧只能输入数字
Date pickers的date
<input type="date" name="date">
手机上会出现选择日期的一个插件
Date pickers的month
<input type="month" name="month">
手机上会出现选择月份的一个插件
Date pickers的time
<input type="time" name="time">
当前是几点几分
苹果手机上是出现十二小时的时间，分上午和下午
安卓手机是24小时时间
Date pickers的datetime-local
<input type="datetime-local" name="datetime-local">
手机端有可供选择的几月几号星期几几点几分
电脑端
range
<input type="range" name="range" min="1" max="10">
滑动条，在不写min和max的时候，默认值是1-100.
可拖动的
search
<input type="search" name="search">
在里面输入内容后，input框末尾会出现一个叉叉，点击叉叉内容清除
color
<input type="color" name="color">
默认是黑色，点击后悔和出现调色板，可以自己选择颜色
image.png
表单属性
autocomplete/autofocus/multiple/placeholder/required
autocomplete
历史记录一样的东西，可以用于form和input
autocomplete="on"这次在input上写的内容，关闭网页再打开后，点击input下边会显示以前输入过的记录。
autocomplete="off"不显示记录
autofocus
打开网页光标所在位置，适用于所有input标签
写法就是autofocus=“autofocus”
multiple
适用于input的email和file
可以多选
placeholder
提示框的意思,写法placeholder="placeholder"
适用范围：<input>-text/search/url/telephone/email/password
required
required="required"
表单验证用，如果内容不能为空或者内容格式必须和type相对应
适用范围：<input>-text/search/url/telephone/email/password/date/pickers/number/checkbox/radio/file
pattern
HTML5表单验证使用正则
novalidate和formnovalidate
HTML5表单设置了必填，提交表单的时候做到不验证
novalidate写在<form>标签上
formnovalidate写在<input>标签上
enctype=” multipart/form-data”
上传文件的时候要设置发送到服务器之前对表单数据进行如何编码
链接属性
<link>的size属性/<base>的target属性/超链接<a>
sizes属性
<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">
<base>的target属性
控制整个页面所有超链接的跳转方式
<a>的media属性
规定链接文档为何种媒体媒介
其他属性
script/ol/html/style
script
如果在<script async="async"></script>
就是在加载script的同时，可以双线程的加载HTML内容，异步加载
ol
start-起始值
reversed-倒叙排列
<ol start="2" reversed="reversed" >
<li>html</li>
<li>html5</li>
<li>css</li>
<li>css3</li>
</ol>
前面的顺序就是从2、1、0 、-1
HTML5表单验证
radio单选
实现点击文字，选中radio，就是文字加个for
<input type="radio" id="man"><label for="man">男</label>
表单约束验证API
validaty属性
在浏览器打印某id的validaty属性
image.png
其中的setCustomValidity属性可以修改提示的文字信息
默认提示信息
标签:optional
选填
标签:required
必填
标签::after{
content:"(内容)";
}
加到标签内容后
网友评论