认识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》对你有帮助,请点赞、收藏,并留下你的观点哦!