一、 代码名称语义化的好处

1、能让搜索引擎更好的收录

2、对于特殊设备如盲人设备好解析

二、article和section的区别

article(文章):独立且能被外部引用

section(章节、段落):不独立,不能被外部引用

三、 css3常用的新增属性

  1. 可以下拉的输入框 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新增常用属性的更多相关文章

  1. HTML5新增的属性

    关于html5新增的属性: HTML5现在已经不是SGML的子集,主要是增加了关于图像,位置,存储,多任务等功能. 绘画CANVAS; 用于播放媒体的video和audio元素: 本地离线存储loca ...

  2. HTML5 新增通用属性

    一:HTML5保留的常用元素 7. 表格相关元素.表格在html里还算重要的了.   <table>  :用于表格定义.    cellpadding: 单元格内容和单元格边框距离    ...

  3. HTML5新增的属性和废除的属性

    HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofoc ...

  4. 全栈JavaScript之路(十七)HTML5 新增字符集属性

    HTML5 添加�了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设 ...

  5. HTML5新增标签属性

    ----- 新类型表单 - email 自动校验输入的是不否是email 邮箱:<input type="email" name="user_email" ...

  6. HTML5 video常用属性

    一.视频video常用标签方法 <!-- controls 控制条,播放暂停等 controlslist 控制不允许全屏 不允许下载等 poster 封面 autoplay 自动播放 muted ...

  7. HTML5新增常用标签

    1.header 标签定义文档的页眉(介绍信息). <body> <article> <header> <h1>What Does WWF Do?< ...

  8. html5新增全局属性

    data-* 如:data-type,data-role等 hidden  <div hidden></div> 隐藏该div spellcheck <textarea ...

  9. HTML中的meta标签常用属性及其作用总结

    文章同步到github 以前没怎么太注意过meta标签的作用,只是简单了解一些常用属性,现在结合个人了解的进行记录与总结: 元数据 首先需要了解一下元数据(metadata)元素的概念,用来构建HTM ...

随机推荐

  1. MySQL错误码

    MySQL运行异常时,查看服务日志可看到error number,该错误码为系统调用出错码,具体如下. errno.00 is: Success    成功 errno.01 is: Operatio ...

  2. 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 ...

  3. MBA 拓展训练总结

    1. 拓展训练,大家绑腿跑 沟通时间极短, 规则制定不完善, 对方'王者队'沟通很好, 女队练习的同时, 男队边观看边练习, 效率很高, 由于之前王者输的比较多, 总结很多, 所以执行力也占优了, 我 ...

  4. 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. ...

  5. __http原理__01__通信流程_消息格式

    本文转自  菜鸟教程  一.HTTP协议(HyperText Transfer Protocol,超文本传输协议) 是因特网上应用最为广泛的一种网络传输协议, 是用于从万维网(WWW:World Wi ...

  6. react_app 项目开发 (2)_axios_pubsub-js

    生产环境打包并运行 yarn run build 会src代码进行打包处理,在内存中生成打包文件 将打包文件保存至内存 yarn global add serve serve -s build 将 b ...

  7. react_app 项目开发 (6)_后台服务器端-node

    后台服务器端 负责处理前台应用提交的请求,并向前台返回 json 数据 前台应用 负责 展现数据与用户交互 发 ajax 请求与后台应用交互 yarn add axios /src/api/ajax. ...

  8. kafka安装与测试

    基于linux-Centos7.0环境先进行测试学习 Producer即生产者,向Kafka集群发送消息,在发送消息之前,会对消息进行分类,即Topic, Topic即主题,通过对消息指定主题可以将消 ...

  9. POJ 1324 Holedox Moving (状压BFS)

    POJ 1324 Holedox Moving (状压BFS) Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 18091 Acc ...

  10. iview select filterable属性使用下拉小bug

    今天做项目时候在iview 原生自带的select中设置filterable,下拉时候可进行查询,但是发现选中载打开模态框每次都绑定上一次的值,解决方案就是在关闭弹框时候将this.$refs.sto ...