[html5] 学习笔记- html拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置,在HTML5中,拖放是标准的一部分,任何元素都能够拖放. 1.html5拖放:(drag和drop)是HTML5标准的组成部分拖动开始:ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据设置拖动数据:setData():设置被拖数据的数据类型和值放入位置:ondragover:事件规定在何处放置被拖动的数据放置:ondrop:当放置被拖动数据时,会发生drop事件下例是将网页上的图片,拖放到网页上的指…

html5学习笔记一

HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> 您的浏览器不支持video标签.(提供不支持video元素的浏览器显示) </video> 这个标签有的属性: controls:向用户显示该控件,比如播放.暂停.音量按钮 height,width定义高宽 autoplay:如果出现该属性,则视频在就绪后马上播放 loop:如果出现该属性,完成…

Html5学习笔记1 元素标签属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<…

HTML5学习笔记之表格标签

HTML5学习笔记之表格标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔记之音视频标签一.表格标签 1.作用: 以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 2.格式: table定义表格 tr定义行 td定义单元格 3.表格中的属性 border: 默认情况下表格的边框宽度为0看不到, 通过border属性给表格…

HTML5学习笔记拖放

拖放(Drag和drop)是html5标准的组成部分拖放是一种常见的特性,即抓取对象以后拖到另一个位置在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放首先,为了使元素可拖动,把draggable属性设置为true, <img draggable="true"> 拖动什么 -ondrapstart和setData() 然后,规定当元素被拖动时,会发生什么. 在上面的例子中,ondragstart属性调用了一个函数,drag(event),它规定了…

HTML5 学习笔记（一）——HTML5概要与新增标签

目录一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2.缺点 1.6.HTML5效果展示 1.7.HTML5学习与开发工具 1.7.1.基础要求 1.7.2.开发工具 1.8.HTML5语法规则与文档声明 1.8.1.语法规则 1.8.2.文档声明 1.8.2.文档声明二.废弃的标签三.新增的标签 3.1.新增的结构标签 3.2.新增加其它元素 3…

HTML5 学习笔记--------》HTML5概要与新增标签！

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTM…

HTML5学习笔记（一）：HTML简介

Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 HTML也分为多个版本,为了让浏览器可以确切的知道当前文档使用的HTML版本,就需要添加一个DOCTYPE的标记,目前主要使用的有下面3种版本: HTML 5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD…

CSS3秘笈第三版涵盖HTML5学习笔记6~8章

第二部分----CSS实用技术第6章,文本格式化指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往下搜寻,直到找到备用字体. 若字体名称中包含多个单词,则必须用双引号将它们括起来 font-family:"Times New Roman",Times,serif; sans-serif字体 sans-serif字体看起来干净而简洁,所以常被用于标题.sans-serif字体包括Aria…

CSS3秘笈第三版涵盖HTML5学习笔记1~5章

第一部分----CSS基础知识第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中的章节一样 <aside>标签包含与其周边的内容相关的内容,如纸质杂志上的侧边栏一样 <footer>标签包含通常放在网页底部的一些信息,如版权声明.法律信息.一些网站的导航链接,等等 <nav>标签用来包含重要的导航链接 <figure>标签用于说明图让IE…

Html5学习笔记(1)

1.figure\figcaption||detail\summary||mark学习笔记效果图代码为: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <figure> <img src="0fb2bcd14fd7aa2d7b046fe…

[html5] 学习笔记-表单新增的元素与属性（续）

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. <body> <script> function setValue(){ var label = docume…

HTML5学习笔记（四）：H5中表单新增元素及改良

方便布局表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test" action="test.php" method="get"> <input form="test" type="text" name="name"/> </form>…

HTML5学习笔记之History API

这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的体会"h5"能够做什么,以及在实际项目中如何去合理的运用达到使用自如,完美驾驭O(∩_∩)O~ 先出一道题目:以下不是HTML5新增的API是 http://hovertree.com/tiku/bjaf/pic2kvcg.htm 一,开篇分析好了,废话不多说,直接进入今天的主题,今天主要讲的是“History API”及在单页应用中的作用,并且会引入一个实际的例子做为讲解的原型…

HTML5学习笔记

参考资料:http://www.runoob.com/html/html-tutorial.html 1.html5声明.将此html文档标记为html5文档 <!DOCTYPE html> 2.html5定义了8个新的块级元素,要让旧版本的浏览器正确显示这些元素,可以设置 CSS 的 display 属性值为 block; header, section, footer, aside, nav, main, article, figure { display: block; } header…

html5学习笔记6-- canvas

绘制普通直线,先看效果图: 实现代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function drawGraph(id) { var canvas=document.getElementById(id); var context=canvas…

HTML5学习总结-09 拖放和手机触屏事件

一拖放拖放(Drag 和 drop)是 HTML5 标准的组成部分.拖放是一种常见的特性,即抓取对象以后拖到另一个位置.在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 课程参考 http://www.w3school.com.cn/html5/html_5_draganddrop.asp 二手机触屏事件 1 触屏事件 touchstart 当手指触摸到屏幕时触发touchmove 手指在屏幕上移动时触发touchend 手指离开屏幕时触发touchenter 当触点进入某个…

HTML5 学习笔记 1

1.音频.视频 <!DOCTYPE HTML> <html> <body> <audio controls="controls"> <source src="/i/song.ogg" type="audio/ogg"> <source src="/i/song.mp3" type="audio/mpeg"> Your browser d…

HTML5学习笔记五：html5表单

表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素指定form属性,属性值为相应表单的id,该元素就属于指定表单了:只有Opera 10支持. 1.2 placeholder属性:文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字:Safari 4,chrome3,firefox4 1.3 autofocus属性:打开页面时,有该属性的控…

HTML5学习笔记<六>: HTML5框架, 背景和实体

HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架每个frameset定义一系列行或列 rows/cols的值规定了每行或每列占据屏幕的面积 3. 常用标签: noresize: 固定框架大小 cols: 列 rows: 行框架集标签已经被弃用, 在这里做一个大致的了解打开netBeans, 创建一个FrameDemo的项目, 创建4个HTML文件 index.html fram…

HTML5学习笔记<一>: 认识H5

什么是 HTML5? HTML5 将成为 HTML.XHTML 以及 HTML DOM 的新标准. HTML 的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. HTML5 新规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 Flash) 更优秀的错误处理更多取代脚本的标记 HTML5 应该独立于设备开发进程应对公众透明新特…

html5学习笔记——基础

一:Canvas <canvas> 标签只是图形容器,图形的绘制需要用JS来定义. 1:绘制与填充 stroke():绘制,空心. fillXX():填充,实心. 2:绘制线条 var c=document.getElementById("myCanvas"); //获取画布 var ctx=c.getContext("2d"); //创建上下文 ctx.moveTo(0,0); //移动画笔到起点 ctx.lineTo(200,100);//准备画线到…

HTML5学习笔记简明版（8）：新增的全局属性

contenteditable属性不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域. 用户能够改变元素的内容以及操作标记.比如: <p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> 该属于有3种值可选:true, false和空字符,空字符代表true. 而对<iframe id="editor"></iframe>框架页面能够通过…

HTML5学习笔记（二十四）：DOM扩展

DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API 我们知道,在JS获取一个元素时一般通过id查找(使用getElementById方法),或者通过标签查找(使用getelementsByTagName方法),在实际使用中,我们更希望可以通过类似CSS选择器的方式来查找到需要的元素,JS的选择符API就可以满足我们的需求. querySelector…

HTML5学习笔记（二十一）：BOM

BOM(Browser Object Model) 是指浏览器对象模型. 由于最初JavaScript就是设计在浏览器中执行的脚本语言,所以BOM是浏览器提供给JavaScript操作自身的接口. window BOM的核心对象是window对象,window对象表示一个浏览器的一个页面窗口对象. 同时window对象也是ECMAScript定义的Global对象,即网页中定义的全局属性或者全局方法最终都是定义到该对象上,同时提供JS的Global的方法如parseInt方法. 全局作用域定义…

HTML5学习笔记（十九）：Lambda和Promise

Lambda 在ES6的标准中称为Arrow Function(箭头函数).下面是一个简单的箭头函数: x => x * x 上面的定义和下面的代码定义效果一样: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... }和return: x => { if (x > 0) { return…

HTML5学习笔记（二）：HTML基础学习之二

表单表单用来传递用户数据,多用来与后端进行数据交互. 前端: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web学习</title> </head> <body> <form action="http://localhost/test.php" me…

Html5学习3（拖放、Video（视频）、Input类型(color、datetime、email、month 、number 、range 、search、Tel、time、url、week )）

1.Html拖放 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} <…

HTML5学习笔记简明版（5）：input的type超级类型

HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type hidden 随意字符 text 单行文本 search 单行文本 tel 单行文本 url 绝对地址 email 一个或多个email地址 password 单行文本 datetime 带有时区的时间 date 无时区的年月日时间 month 无时区的年月 week 无时区的周数 time 无时…

HTML5学习笔记1 HTML5 新元素

自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能.比如,图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等. <canvas>新元素标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 在silverlight中也有这个元素,这个元素在SL中作容…

【[html5] 学习笔记- html拖放】的更多相关文章