html5

最新推荐文章于 2024-11-07 10:38:40 发布

starNewwu

最新推荐文章于 2024-11-07 10:38:40 发布

阅读量224

点赞数

分类专栏：前端基础文章标签： html

本文链接：https://blog.csdn.net/starNewwu/article/details/106975089

版权

9 篇文章 0 订阅

订阅专栏

HTML5

HTML超文本标记语言的第五次重大修改版本
支持的浏览器：所有的主流浏览器（Chrome Firefox Safari 。。。） IE9及以上(IE9有选择的支持 Ie10以上完全支持) IE8及以下不支持
改变了用户与文档的交互模式 :多媒体 video audio canvas
增加了新特性：语义特性本地存储特性网页多媒体二维三维特效(过渡动画)
相对于h4
- 进步：抛弃了一些不合理不常用的标记和属性
- 新增了一些标记和属性：表单
- 代码更加简洁

placeholder：提示文本提示占位

autofocus：自动获得焦点

autocomplete：自动提示功能值：on打开 off关闭必须有name属性并且成功提交过一次

multiple 选择多个

form:指定表单id，在该id表单提交时将当前表单元素也一并提交

datalist：创建列表里面有option option可以是单标签
- 属性：value值 lable提示信息/辅助值如果input输入框的type是url 则value值必须加上http://
- id属性与input的list属性建立关联
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bNGEoxh0-1593178299744)(I:\前端笔记\image\h5c3\1.png)]
keygen：加密
output：显示输出信息
progress：进度条
- 属性：max ：表示0到max之间的值 value 默认值
meter：度量器：衡量当前进度值
- high:规定的较高的值
  - low:规定的较低的值
  - max/min最值
  - value 当前度量值

oninput：监听当前指定元素内容的改变只要内容改变（增删）就会触发
oninvalid：当验证不通过时触发（改变默认提示信息）
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BCyvAaXJ-1593178299748)(I:\前端笔记\image\h5c3\2.png)]

document.querySlector(‘选择器’).classList.add(‘类选择器’);

document.querySlector(‘选择器’).classList.remove(‘类选择器’);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9m8sHfGO-1593178299751)(I:\前端笔记\image\h5c3\4.png)]

自定义属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3YFzfjIc-1593178299752)(I:\前端笔记\image\h5c3\5.png)]

ononline

onoffline

在h5中想要拖拽元素就必须为元素添加draggable=“true” 图片和超链默认可以拖拽不用加
应用于被拖拽元素的事件
- ondrag 拖拽过程持续触发
- ondragstart 拖拽开始时触发
- ondragend 拖拽结束时触发
- ondragleave 离开拖拽时触发
应用于目标元素的事件
- ondragenter 进入目标时触发
- ondragover 停留目标时持续触发
- ondrop 在目标元素松开鼠标时触发（浏览器会默认阻止这个事件需要在ondragover里阻止默认事件具体为event.preventDefault()）
- ondragleave 离开目标元素时触发
注意：尽量不要使用过多的全局变量减少内存的浪费
- 可以用event的dataTransfer属性来存储和获取变量

navigator.getlocation.getCurrentposition(shoPositon,showError,{});

定位成功调用方法：coords坐标
- position.coords.latitude 纬度
- position.coords.longitude 经度
- position.coords.accuracy 精度
- position.coords.altitude 海拔高度
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hmcnmyAc-1593178299753)(I:\前端笔记\image\h5c3\9.png)]
定位失败之后的回调：见下图
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LHDkvI4s-1593178299754)(I:\前端笔记\image\h5c3\8.png)]