随笔分类 -  html5

HTML5中的拖放
摘要：1.实现拖放的步骤 ①将对象的属性设置为可拖放，即draggable=“true” ②编写有关拖放事件的处理函数。 2.使用dataTransfer对象 dataTransfer对象是事件对象的一个属性，用于从被拖拽元素向放置目标传递字符串格式的数据。因为是事件对象的属性，在拖放事件的事件处理程序中 阅读全文
posted @ 2017-01-08 17:03 sunli0205 阅读(314) 评论(0) 推荐(0)
HTML5中File
摘要：一 File对象与FileList对象 当将input元素的type类型设置为file时，web页面上会显示一个选择文本按钮和一个文本显示框，单击文件按钮可以选择一个文件，文本显示框中会显示选中的文件名称。 input元素设置multiple属性，可以选择多个文件，文本显示框中会显示选中了几个文件。 阅读全文
posted @ 2017-01-08 14:21 sunli0205 阅读(2125) 评论(0) 推荐(0)
html5中新增的form表单属性
摘要：html5中新增两个表单属性，分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能。启用该功能后，当用户在自动完成域开始输 阅读全文
posted @ 2017-01-06 11:24 sunli0205 阅读(12355) 评论(0) 推荐(2)
FORM
摘要：一 .新增的input输入属性 1.email类型 在表单提交E-mail地址时，无效的输入会生成很多无效数据，对后期的数据检索造成一定的影响。所以在表单提交之前，需要对输入的E-mail地址进行有效性进行验证。早期的实现方式都是通过正则表达式和JavaScript进行验证，HTML5中，使用ema 阅读全文
posted @ 2017-01-05 17:10 sunli0205 阅读(215) 评论(0) 推荐(0)
html5中画布和SVG的比较
摘要：SVG是基于XML的图形语言，在DOM解析中其每个元素都是可以用的，这样就可以为SCG元素附加JavaScript事件处理器，实现更加丰富的效果。 在SVG中，每个被绘制的图形均被视为对象，如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。 Canvas通过JavaScript来绘制二维图形 阅读全文
posted @ 2017-01-04 22:23 sunli0205 阅读(239) 评论(0) 推荐(0)
HTML中的SVG
摘要：HTML5中的SVG是Scalable Vector Graphic的简称，是一种用来绘制矢量图的HTML5标签，由万维网联盟定制，是一个基于可扩展标记语言，用于绘制二维可缩放矢量图形。 是一种使用XML描述二维图形的语音，允许三种类型的图形对象：矢量图形、图像和文本。 1.绘制一个圆 2.绘制简单 阅读全文
posted @ 2017-01-04 22:12 sunli0205 阅读(951) 评论(0) 推荐(1)
Canvas绘制时钟
摘要：①首先在HTML的body标签中添加一个canvas标签，用于绘制时钟。 ②在JavaScript中通过getElementById函数得到Canvas对象，并创建画笔。 ③定义三个变量，slen表示秒针，mlen表示分钟，hlen表示时针，并分别赋值。 ④开始绘制图形，设置填充色，以坐标点（200 阅读全文
posted @ 2017-01-04 09:56 sunli0205 阅读(346) 评论(0) 推荐(0)
用Canvas实现动画效果
摘要：1.清除Canvas的内容 clearRect(x,y,width,height)函数用于清除图像中指定矩形区域的内容 显示： 2.创建动画 步骤1：指定坐标点（100,100）为圆心，绘制半径为0的圆； 步骤2：间隔10秒后，清除之前绘制的图形； 步骤3：再次以坐标点（100,100）为圆心，绘制 阅读全文
posted @ 2017-01-03 20:26 sunli0205 阅读(1609) 评论(0) 推荐(0)
绘制文字
摘要：1.控制文本的字体、大小和样式 2.控制文本的颜色 两种方式：一通过fillStyle函数设置文本的填充颜色，另一种是通过createLinearGradient函数为文字填充渐变色： 3.描绘文本的边缘 使用strokeText函数代替fillText函数，同时要用strokeStyle属性替代f 阅读全文
posted @ 2017-01-03 13:54 sunli0205 阅读(207) 评论(0) 推荐(0)
html5图像组合
摘要：一 图像组合 1.绘制阴影 在绘制阴影效果时，需要使用Canvas的多个属性配合完成 shadowBlur设置阴影的迷糊级数 shadowOffsetX设置形状与阴影的水平距离 shadowOffsetY设置形状与阴影的垂直距离 shadowColor设置阴影的颜色 显示： shadowOffset 阅读全文
posted @ 2017-01-02 20:56 sunli0205 阅读(419) 评论(0) 推荐(0)
Canvas绘制渐变
摘要：1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient（x0,y0,x1,y1）,坐标点（x0,y0）是起点 ，（x1,y1）是终点 创建一个渐变色 定义渐变色颜色 设置Canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形 一个线性渐变的 阅读全文
posted @ 2017-01-02 16:44 sunli0205 阅读(7819) 评论(0) 推荐(0)
Canvas绘制图形
摘要：1.Canvas绘制一个蓝色的矩形 显示 2.绘制基本的直线 ①绘制直线 显示： ② 绘制二次曲线： 是直线锥面的两腔被一平面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或者相交直线，当控制点不经过圆锥顶点时，曲线可能是圆、锥圆、双曲线或 阅读全文
posted @ 2017-01-01 13:32 sunli0205 阅读(267) 评论(0) 推荐(0)
HTML5视频播放
摘要：1.检测浏览器是否支持html5视频播放 2.视频里面的标签 1. autoplay 自动播放视频文件 2.preload 预加载。提供三个可供选择的值：none表示不进行预加载；metadata表示仅加载元数据，即音频文件的大小、第一帧、播放列表和持续时间等；auto表示预加载全部音频文件 3.p 阅读全文
posted @ 2016-12-31 10:56 sunli0205 阅读(328) 评论(0) 推荐(0)
html5中新增非主体结构元素
摘要：1.header元素 定义HTML文档的页眉，是一种具有引导和导航作用的结构元素 显示结果： 2.hgroup元素 用于对header元素标题及其子标题进行分组。属于header元素时，我们通常会嵌入一个heading元素 显示 3.footer元素 定义元素的脚本，这个元素可以是article元素 阅读全文
posted @ 2016-12-30 17:50 sunli0205 阅读(269) 评论(0) 推荐(0)
html5新增的主体结构元素
摘要：1. article 主体结构元素 通常是一篇文章、一个页面、一个独立完整的内容模块一般会带个标题，并放在 header 标签中，article 元素可以互相嵌套，使用频率极高，强调独立性，多注意下与 header 标签的使用 2. section section元素定义文档中的节，比如章节、页眉、 阅读全文
posted @ 2016-12-30 17:20 sunli0205 阅读(900) 评论(0) 推荐(0)
html5中常见的全局属性
摘要：1.contentEditable属性 1、功能说明 （1）功能：允许用户编辑元素中的内容 （2）说明：是一个布尔值，false是不能编辑，true为可编辑 该元素还隐藏一个inherit状态 也是一个布尔值 。如果不指定，则由该元素继承的父级元素来决定 2、分析实例 （1）contentedita 阅读全文
posted @ 2016-12-29 17:38 sunli0205 阅读(422) 评论(0) 推荐(0)
html5新增元素
摘要：一 与结构有关的元素 主体结构标签 1.article元素（嵌套使用） 页面中的一个独立的内容 2.section元素（分段） 页面中一个内容区块 3.nav元素 页面中导航链接部分 4.aside元素 页面上<article>元素之外的，但是与<article>相关的辅助信息 非主体结构标签 <h 阅读全文
posted @ 2016-12-29 15:38 sunli0205 阅读(278) 评论(0) 推荐(0)