认识html5
1.HTML5由W3C和WHAT组织机构共同研发出来的,于正式发布。
2.HTML5成为了新一代网页开发标准。
3.HTML5新特性（面试）
1）增加了audio和video 音频播放，抛弃了Flash
2）新增了canvas 画布（绘画，制作动画（如小游戏开发等））
3） 地理定位
4）增加了 离线缓存
5）硬件加速
6）增加了Web Socket (全双工通信)
7）增加了本地存储
8）新增了一些语义化标签
HTML5的优势&不足
网页布局标签
header :页首
nav :导航栏
aside ：侧边栏
main ：主体
section ：区块
article ：文章
footer：页尾
语义化标签
实例：
mark 高亮显示 行级标签
details(描述) 和summary(摘要）：一般用于名词解释或用于封装一个区块等
meter：定义度量衡 属性：value/min/max
progress 进度条
dialog 对话框 （× 对应 转义字符 x）
figure :用于对元素进行组合，一般用来组合一张图的标题、图片
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>dialog {position: relative;}dialog span {position: absolute;right: 5px;top: 5px;cursor: pointer;}figure {width: 200px;text-align: center;}figure img {width: 100%;}</style></head><body><!-- mark高亮显示（显示背景为黄色） --><p>蔡强天下无敌，是14<mark>最强</mark>的魔王。</p><!-- details(描述) 和summary(摘要）：一般用于名词解释或用于封装一个区块等 --><details><summary> 大前端开发包括 </summary><h2>大前端开发包括：</h2><ul><li>内容1</li><li>内容2</li><li>内容3</li><li>内容4</li><li>内容5</li></ul></details><!-- meter：定义度量衡 --><meter value="100" min="80" max="120"></meter>公里/小时<!-- progress 进度条 --><p>任务完成度</p><progress value="80" max="100" min="0"></progress>80%<!-- 5.dialog 对话框 --><dialog open="Open"><span>×</span><h2>我爱你</h2><ul><li>一万年</li><li>一万年</li><li>一万年</li><li>一万年</li></ul></dialog><!-- 6) figure :用于对元素进行组合，一般用来组合一张图的标题、图片 --><figure><h4>银行log</h4><img src="../第五天/第五天作业/img/bank_logo2.png" alt="图片"><p>赚钱贷款</p></figure></body></html>
HTML多媒体
audio1）放音乐或者音频。IE9以下版本不支持。
2）支持的格式： .mp3/.ogg/.wav
3） 属性：Src：文件路径autoplay：自动播放loop：循环controls: 控制条muted:静音preload:预加载（当使用autoplay时,preload自动失效）
2.video加载视频 ,IE9以下不支持1)支持的格式.mp4/.ogg/.webm
2)属性Src：文件路径autoplay：自动播放loop：循环controls: 控制条muted:静音preload:预加载（当使用autoplay时,preload自动失效）width: 视频宽度height:视频高度poster:视频封面
3.embed嵌入内容或者加载插件。属性：src：文件路径width:宽度height:高度type:类型
实例：注意替换音频
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><audio src="resource/你曾是少年.mp3" controls muted></audio><br /><video src="resource/明日之后.mp4" width="800px" height="500px" controls poster="../第三天/img/bg1.jpg"> </video><!-- 加载插件 --><embed src="run.swf" type=""></body></html>
4 . canvas
画布。是一个容器元素。
注意：
a.单独使用canvas没有什么意义，它必须结合javascript使用。
它的具体的功能体现是通过javascript体现的。
b.canvas的宽度最好不要通过css实现，而是直接使用标签属性width和height实现。
更详细的例子在h-build里面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><!-- 画布 --><canvas width="500px" height="500px" style="background-color: yellow; "></canvas></body><script>//DOm操作，用来直接获取canvas这个标签元素（第一个）var canvas = document.getElementsByTagName('canvas')[0];// 绘制2d图var ctx = canvas.getContext('2d');//设置填充色ctx.fillStyle = '#F0F';ctx.fillRect(0, 0, 200, 100) //绘制矩形</script></html>
5.HTML5常用的属性
1）contendEditable
将标签转换为可编辑状态。可用于所有标签。取值 false 和 true
2）hidden
对元素进行隐藏。一般用来传值或当某个条件成立，执行内容显示。默认值为 hidden
3）data-*
用于储存页面或应用程序的私有自定义数据。一般用于传值。
4)multiple
多选。规定输入域种可以选择多个内容.用于表单组件.file/select
5)required
约束表单在提交前必须输入值。
6.表单组件
1）color: 可以选择颜色
2）email : 规定输入框为电子邮件
3）tel : 规定输入为电话号码 （貌似没有格式检验）
4）url 规定输入一个网址
5）number ： 规定输入数字，一般设置max，min，step（步长一次加的距离）
6）range ：一个范围条，可以输入负数，value，max,min
7）search: 输入框后面会有一个x
8）date :可选择日期，会出现一个日历
9）datetime：日期时间
10）datetime-local : 本地日期时间
11）year
12）month
13) day
14）week
7.表单属性
1）formaction : 修改action数据 提交的敌方
2）formenctype: 修改表单请求的类型
3）formmethod :修改数据提交方法。
4）form：设置表单元素属于哪个表单
先设置一个表单id，当表单元素不属于这个表单范围内时候，利用form=“id” 设置表单属于哪个表单
5）novalidate : 不验证（取消验证） 例如type=“email” 时候有验证，设置novalidate后无验证。
常用的提交方法 有 post 和 get 两种
他们的区别如下：
1）get是以字节为单位提交，只接受ASCII码，而post是以字符为单位提交。
2）get是明文方式，提交的数据会显示在地址栏中，一般不用来传输一些敏感数据，因为传输的数据暴露在外面了。而post的是密文提交方式
3）get在浏览器中回退是无害的，而post会再次提交请求
4）get会被浏览器主动缓存，而post不会，除非手动设置
5）get和post在传输字节数上一般没有限制，个别浏览器会有，可以理解为get不超过2k，而post不超过2M
8.input属性
1）autocomplete: 自动完成
用来帮主用户输入，每一次输入的内容，浏览器是否保存输入的值。以备将来使用。值有on/off，默认为on。
为了保护敏感数据（如用户账号、密码等），避免本地浏览器对它们不安全存储，一般需要关闭。
2）autofocus :自动获焦。
3）step:步长
4）multiple:多选
5）pattern：输入提示
6）placeholder:输入提示
7）required :必须输入
如果觉得《Web前端学习路线笔记（六）html5》对你有帮助，请点赞、收藏，并留下你的观点哦！
