HTML5新增常用属性

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

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)

时间: 09-12

HTML5新增常用属性的相关文章

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

HTML5 增加了几个文档字符集属性. document.charset : 表示文档的实际使用的字符集. document.defaultCharset: 表示默认的字符集,跟浏览器以及操作系统设置有关. 如果文档没有使用默认字符集,那么 document.charset 与 document.defaultCharset 可能不同. 设置文档字符集: 但可以通过<meta>元素.响应头部或直接设置charset 属性修改这个值.来看三个例子. <meta http-equiv=&qu

HTML5新增的属性与元素

1.form属性 html5为表单控件新增了form属性,用于定义该表单控件所属表单,该属性的值应该是它所属表单的id 2.formaction属性 这是一个十分实用的属性,如果页面中有一个表单,表单中有两个以上的提交按钮,但程序需要不同的按钮提交到不同的action. 3.formxxx属性 formxxx属性是与formaction极为相似的属性包括 formenctype 可以让按钮动态地改变表单的enctype属性 formmethod可以让按钮动态地设置表单以post或get form

HTML5新增的属性与元素(二)

1.功能丰富的input元素 color:让<input.../>元素生成一个颜色选择器 date:让<input.../>元素生成一个时间选择器 time:让<input.../>元素生成一个时间选择器 datetime:让<input.../>元素生成一个UTC日期.时间选择器 datetime-local:让<input.../>元素生成一个本地日期.时间选择器 week:让<input.../>元素生成一个供用户选择第几周的文

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

HTML5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 新增的属性 1.表单相关的属性 对input(type=text).select.textarea与button指定autofocus属性.它以指定属性的方式让元素在画面打开时自动获得焦点. 对input(type=text).textarea指定placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容. 对input.output.select.textarea.button与fieldset指定form

html5新增及废除属性

html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定autofocus属性.它以指定属性的方式让元素在页面加载后自动获得焦点.一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效. 这个属性对登录页面很有用,可提升用户体验,有时登录页面就一个用户名,密码,页面加载后用户要手动定位到输入框,才能输入,有了autofocus,页面打开即

HTML5新增Canvas标签及对应属性、API详解(基础一)

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性

今天正式开始学习html5了,相比html以前的版本,html5新增了好多功能,属性,使我们做出来的界面更加的绚丽,而且使用起来超级简单,这篇文章先来说说html增加的那些input类型和属性. html5新增的input类型有:email,url,number,range,date pickers,datalist,telephone,search,color email:提交时会自动验证输入的内容是否满足格式 邮箱 :<input type="email" name=&quo

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML5新增的form属性简介——张鑫旭

一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交的时候,会直接忽略不是其子元素的控件.但是,实际情况下,由于页面设计与实现的特殊性,会存在有些表单之外的元素也需要一并提交的情况,这时候,传统的表单功能就显得有些捉襟见肘了. HTML5中新增form属性就是为更好地处理这个问题才出现的.其作用,个人感觉,有点类似于label标签的for属性. 二.更好的实现