HTML5新增常用属性
一、 代码名称语义化的好处
1、能让搜索引擎更好的收录
2、对于特殊设备如盲人设备好解析
二、article和section的区别
article(文章):独立且能被外部引用
section(章节、段落):不独立,不能被外部引用
三、 css3常用的新增属性
可以下拉的输入框 datalist
2、图片加载figure
3.音频audio
不支持播放
autoplay:准备就绪后播放 controls:音频控件
4、css2布局分为盒模型、可视化模型
其中盒模型包括:块级、BFC(块级元素格式化上下文)、IFC(行内元素格式化上下文)、 常规流、浮动、定位
四、拖拽
ondragstart 拖拽开始
ondrag 拖拽中
ondragend 拖拽结束
ondragenter 进入投放区
ondragover 投放区移动
ondragleave离开投放区
ondrop 投放区投放
ondragover(投放区移动)会阻止ondrop(投放区投放), 解决阻止方法:e.preventDefault()
要ondrop起作用,也要ondragover运行起来。 为了不在2个区域重叠发生事件,要设置阻止事件冒泡(e.stopPropagation)
js思路: 1、获取元素块最初的位置;获取鼠标在页面上的位置;获取元素位置; 2、获取鼠标移动后的位置; 3、将新的鼠标位置减旧的鼠标位置,得到它们的距离 4、将鼠标移动后的距离加上元素的原位置得到新的位置 5、获取元素块在鼠标弹起时的位置;获取投块区的位置
五、画布
1.获取画布:
var cs = document.getElementById("cs");
2、获取画笔:
var context = cs.getContext("2d");
画布种类
1.矩形
context.fillRect(上,下,宽,高);
2.有阴影的图形
模糊值为5个像素
context.shadowBlur="5"
阴影颜色为黑色
context.shadowColor="black"
3.有渐变的图形
创建一个渐变图形
context.createLinearGradient(上,下,宽,高)
设置颜色
linearGradient.addColorStop(0,"red")
linearGradient.addColorStop(1,"white")
填充颜色
context.fillstyle=LinearGradient
4.圆形
context.arc(150,1130,27,0,2*Math.PI);
度数:
360°=π
π/180乘以度数
5.贝塞尔曲线(分二次和三次)
function drawBezier(){
设置线条颜色
context.strokestyle="black";
移动鼠标位置
context.Moveto=(200,100);
二次
context.quadratic(urveTo(250,250【控制点】,200,550【结束点】))
context.quadratic(urveTo(450,250,250【控制点】,300,200,550【结束点】))
}
6.作用
设置线宽:lineWidth
线条:stroke()
填充颜色:context.fillstyle="red"
填充线条颜色:context.strokestyle="red"
放大:context.scale()
在开头加context.save();最尾加context.restore();不会影响其它元素
重置,开始新路径:context.beginPath();
获得图片中心原点:context.translate(x,y)
HTML5新增常用属性的更多相关文章
- HTML5新增的属性
关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...
- HTML5 新增通用属性
一:HTML5保留的常用元素 7. 表格相关元素.表格在html里还算重要的了. <table> :用于表格定义. cellpadding: 单元格内容和单元格边框距离 ...
- HTML5新增的属性和废除的属性
HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...
- 全栈JavaScript之路(十七)HTML5 新增字符集属性
HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...
- HTML5新增标签属性
----- 新类型表单 - email 自动校验输入的是不否是email 邮箱:<input type="email" name="user_email" ...
- HTML5 video常用属性
一.视频video常用标签方法 <!-- controls 控制条,播放暂停等 controlslist 控制不允许全屏 不允许下载等 poster 封面 autoplay 自动播放 muted ...
- HTML5新增常用标签
1.header 标签定义文档的页眉(介绍信息). <body> <article> <header> <h1>What Does WWF Do?< ...
- html5新增全局属性
data-* 如:data-type,data-role等 hidden <div hidden></div> 隐藏该div spellcheck <textarea ...
- HTML中的meta标签常用属性及其作用总结
文章同步到github 以前没怎么太注意过meta标签的作用,只是简单了解一些常用属性,现在结合个人了解的进行记录与总结: 元数据 首先需要了解一下元数据(metadata)元素的概念,用来构建HTM ...
随机推荐
- MySQL错误码
MySQL运行异常时,查看服务日志可看到error number,该错误码为系统调用出错码,具体如下. errno.00 is: Success 成功 errno.01 is: Operatio ...
- react-native获取设备信息组件(react-native-device-info)
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-acquisition-device-infor ...
- MBA 拓展训练总结
1. 拓展训练,大家绑腿跑 沟通时间极短, 规则制定不完善, 对方'王者队'沟通很好, 女队练习的同时, 男队边观看边练习, 效率很高, 由于之前王者输的比较多, 总结很多, 所以执行力也占优了, 我 ...
- GMA Round 1 离心率
传送门 离心率 P是椭圆$\frac{x^2}{a^2}+\frac{y^2}{b^2}=1$上一点,F1.F2为椭圆左右焦点.△PF1F2内心为M,直线PM与x轴相交于点N,NF1:NF2=4:3. ...
- __http原理__01__通信流程_消息格式
本文转自 菜鸟教程 一.HTTP协议(HyperText Transfer Protocol,超文本传输协议) 是因特网上应用最为广泛的一种网络传输协议, 是用于从万维网(WWW:World Wi ...
- react_app 项目开发 (2)_axios_pubsub-js
生产环境打包并运行 yarn run build 会src代码进行打包处理,在内存中生成打包文件 将打包文件保存至内存 yarn global add serve serve -s build 将 b ...
- react_app 项目开发 (6)_后台服务器端-node
后台服务器端 负责处理前台应用提交的请求,并向前台返回 json 数据 前台应用 负责 展现数据与用户交互 发 ajax 请求与后台应用交互 yarn add axios /src/api/ajax. ...
- kafka安装与测试
基于linux-Centos7.0环境先进行测试学习 Producer即生产者,向Kafka集群发送消息,在发送消息之前,会对消息进行分类,即Topic, Topic即主题,通过对消息指定主题可以将消 ...
- POJ 1324 Holedox Moving (状压BFS)
POJ 1324 Holedox Moving (状压BFS) Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 18091 Acc ...
- iview select filterable属性使用下拉小bug
今天做项目时候在iview 原生自带的select中设置filterable,下拉时候可进行查询,但是发现选中载打开模态框每次都绑定上一次的值,解决方案就是在关闭弹框时候将this.$refs.sto ...