2019-05-01 HTML5基础

HTML5相当于：HTML+css+js+api
优势：跨平台，快速迭代，降低成本，导流入口多，分发效率高
HTML5：

结构标签

块状元素（有意义的div）

解决新标签的兼容性问题

在.css文件内部加上
header,nav,section,aside,article,footer.....{
  display:block;
}

结构标签尽量避免的嵌套

  

  

!!
/
/
/
/

这五个标签的这种嵌套尽量不要出现

这三个标签级别是最高的
这几个标签级别稍逊
级别最低

多媒体标签

第一种写法：

如果是低版本的浏览器，可能不兼容HTML5的新标签，此时会显示audio内部的文字。
第二种写法：

src音频的地址

controls 音频的控件

source标签也可以放入src 如果播放失败 video会继续看下一个source标签知道兼容

兼容的格式mp3 ogg wav

mp3格式

所有浏览器都兼容

ogg格式

Chrome 火狐 欧朋 都兼容 Safari不行

wav格式

Chrome 火狐 欧朋 Safari 都兼容

js可以直接生成一个audio标签

方式：new audio()等同于html上的
欧朋和Chrome浏览器不能直接播放，需要添加事件。

loop循环播放

不存在兼容问题

width和height

这两个属性没有什么用处，只能在style里改变它的宽高

audio的API

image.png

image.png

支持的格式：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标签，知道兼容。

标记定义标签

标记定义外部的可交互的内容或插件，比如flash

这个和video相似，可以定义宽高

流行的插件videojs

属性data-setup=“{}”会使控件发生改变，更原始video不一样

多媒体标签的意义

意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。

状态标签

状态标签（实时状态显示：气压、气温）

55

//定义了最大最小

75

//不定义最小最大,按百分比

1

2

状态标签（任务过程：安装、加载）

静态的


动画

1

2有色块在框内来回动

web应用标签

列表标签

为标记一个下拉列表，配合option

image.png

image.png

image.png

标记定义一个元素的详细内容，配合summary
类似一个折叠文本

  

    树下的猫
  
  
lalalalalalalalalalalalalalalalalalalalalal

注释标签

定义注释或音标

标记定义对ruby的注释内容文本

告诉那些不支持ruby元素的浏览器如何去显示

我们来夼kuang一个话题
我们来夼(kuang一个话题

image.png

image.png

标记定义有标记的文本（黄色选中状态）

妈妈让我回家的时候买一瓶牛奶，顺路。

image.png

标记定义一些输出类型，计算表单结果配合oninput事件
oninput事件可以实时监听文本框的输入变化

  *
  =
  
 

html5布局：

image.png

布局的新意义
HTML5让很多更有意义的标签来替代原本HTML的无意义div。
1、提升了网页的质量和语义
2、节省了css对id和class的调用

HTML5的属性变化

input

email/url/number/range/Date picker/search/color/tel

email

这个属性必不可少的是要有 @和.

url

苹果手机点开url的input会出现专门的输入框：必不可少的是. / .com

tele

苹果安卓点开都是九键数字输入框

number

这个电脑端会有点变化
手机端依旧只能输入数字

Date pickers的date

手机上会出现选择日期的一个插件

Date pickers的month

手机上会出现选择月份的一个插件

Date pickers的time

当前是几点几分
苹果手机上是出现十二小时的时间，分上午和下午
安卓手机是24小时时间

Date pickers的datetime-local

手机端有可供选择的几月几号星期几几点几分

电脑端

range

滑动条，在不写min和max的时候，默认值是1-100.

可拖动的

search

在里面输入内容后，input框末尾会出现一个叉叉，点击叉叉内容清除

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"
适用范围：-text/search/url/telephone/email/password

required

required="required"
表单验证用，如果内容不能为空或者内容格式必须和type相对应
适用范围：-text/search/url/telephone/email/password/date/pickers/number/checkbox/radio/file

pattern

HTML5表单验证使用正则

novalidate和formnovalidate

HTML5表单设置了必填，提交表单的时候做到不验证
novalidate写在

标签上
formnovalidate写在标签上

enctype=” multipart/form-data”

上传文件的时候要设置发送到服务器之前对表单数据进行如何编码

链接属性

的size属性/的target属性/超链接

sizes属性

的target属性

控制整个页面所有超链接的跳转方式

的media属性

规定链接文档为何种媒体媒介

其他属性

script/ol/html/style

script

如果在
就是在加载script的同时，可以双线程的加载HTML内容，异步加载

ol

start-起始值
reversed-倒叙排列

  
html
  
html5
  
css
  
css3

前面的顺序就是从2、1、0 、-1

HTML5表单验证

radio单选

实现点击文字，选中radio，就是文字加个for
男

表单约束验证API

validaty属性

在浏览器打印某id的validaty属性

image.png

其中的setCustomValidity属性可以修改提示的文字信息

默认提示信息

标签:optional

选填

标签:required

必填

标签::after{

content:"(内容)";
}
加到标签内容后