HTML笔记二,HTML中的常用元素与属性(2)

语义相关元素

<mark>:用于显示关注的内容,通常用黄色显示

<time>:显示被标注内容是日期,时间等信息

两个特殊功能的元素

<meter>:用于表示一个已知最大最小值的计数仪器

value:指定计数仪器的当前值

min:指定计数仪器的最小值

max:指定计数仪器的最大值

low:指定计数仪器指定范围的最小值

high:指定计数仪器指定范围的最大值

optimum:指定计数仪器有效范围的最佳值

<progress>:用于表示一个进度条

max:指定进度条完成时的值

value:指定进度条当前完成的进度值

HTML5的头部和元信息

<head>:定义html文档头,可以包含以下子元素

<script>:用于包含JavaScript脚本

<style>:用于定义内部CSS样式

<link>:用于连接外部CSS样式等资源

<title>:用于定义文档标题

<base>:用于指定该页面中所有的连接的基准连接,重点属性:href:指定所有连接的基准连接,target:指定连接默认在哪个窗口打开

<meta>:用于定义HTML页面的元数据,重点属性:http-equiv:指定元信息名称,向网页传回一些有用信息;name:指定元信息名称;content:指定元信息的值。其中,http-equiv支持以下的值:Expires指定网页的过期时间;Pragma指定禁止浏览器从本地磁盘缓存中调阅该页内容,无法脱机访问该页内容;Refresh:指定浏览器多长时间后进行自动刷新指定页面;Set-Cookie:设置cookie,如果网页过期则客户端上的cookie也将删除;Content-Type:设置该页面的内容类型和所用的字符集。

拖放API

拖:

<img>默认可拖动,<a>中设置了href则可以拖

普通元素的draggable属性设置为true就可以拖

放:

为document的ondragover事件设置监听器,在监听器中,取消document对拖动事件的默认行为。

然后再对document的ondrop事件设置 source.style中的position,left,top属性进行设置,来改变”source"的位置实现自由拖放

DataTransfer对象dataTransfer属性有以下方法:

dataTransfer.dropEffect设置或返回拖放目标上允许发生的拖放行为,只允许none,copy,link,move四个值

dataTransfer.effectAllowed被拖动元素允许发生的拖动行为,允许none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized值

dataTransfer.items表示拖动数据

dataTransfer.setDragImage(element, x, y)设置拖动对象的自定义图标

dataTransfer.addElement(element)添加自定义图标

dataTransfer.types返回一个DOMStringList对象,包括了存入dataTransfer中数据的所有类型

dataTransfer.getData(format)获取DataTransfer对象中format格式的数据

dataTransfer.setData(format,data)将data数据设置为format格式

dataTransfer.clearData([fromat])清除DataTransfer对象中format格式的数据;如果忽略了format则会清空数据

(此处中,进行拖动图标的代码测试未成功。“将div拖入收藏夹div,可以在收藏夹中生成一个新的div,将div拖入旁边图像内,可以移除此div”未成功。)

拖放行为

通过设置DataTransfer对象中:

effectAllowed设置为none,不允许拖动该元素

dropEffect设置为none,则被拖动的元素不能放在本元素内

effectAllowed设置为all或者不设置,则dropEffect可以设置为任何属性值

如果effectAllowed指定了特定的拖放行为,如move,copy,等,则dropEffect只能是这些的子集。

setDragImage

时间: 2024-10-13 10:30:58

HTML笔记二,HTML中的常用元素与属性(2)的相关文章

疯狂html5讲义(二):HTML5简的常用元素与属性(二):html5新增的通用属性

1.contentEditable属性 true时可直接编辑html元素里面的内容,且具有"可继承"的特点. 编辑后不要刷新页面,否则编辑的内容会丢失,可以通过该元素的innerHtml属性来获取编辑后的内容. 2.designMode属性 此属性相当于一个全局的contentEditable属性 3.hidden属性 可以替代css中的display,hidden=true相当于display:none 4.spellcheck属性 针对于input.textarea等元素,可以对用

疯狂html5讲义(二):HTML5简的常用元素与属性(一):html5保留的常用元素

html5删除了少量的元素与属性:主要删除了文档样式相关的各种元素与属性,比如<font>.width等,html5规范推荐使用css样式单来控制html文档样式. 1.基本元素 <html>.<head>.<title>.<body>.<style>.<h1>到<h6>.<p>.<br>.<hr>(定义水平线).<div>.<span>~~~ <

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

第二篇 HTML 常用元素及属性值

常用元素及属性值 先和同学了解下,一部分常用的元素,区别以及属性,常用在哪里. 标签是由左右尖括号抱起来的,由开始标签开始,再由结束标签结束,里面内容则是元素,比如:<div></div> <p></p>  还有一些特殊的,称为"空元素",它没有结束标签,它的结束标签就是在开始标签后面结束,比如:<img src="图片地址" alt="提示" /> 那么我们就先来了解,元素,它分为两种

常用元素的属性/方法 attr / val / html /text

常用元素的属性/方法 得到一个元素的高度, $("#myid").height() 得到一个元素的位置, $("#myid").offset() 返回的是一个offset对象, 如果取元素位置的top, 则$("#myid").offset().top,?取left则$("#myid").offset().left 得到一个元素的innerHTML, $("#myid").html() 得到一个元素的inn

HTML学习笔记——常用元素及其属性(二)

一.HTML表单 -- form标签 -- 与浏览者交互 1.form 标签 -- 代表HTML表单 form标签是成对出现的,以<form>开始,以</form>结束 属性. common -- 公共属性 action -- 浏览者输入的数据被传送到的地方,比如一个PHP页面(dreamdu.php) action语法: url(网址)/页面?表达式1&表达式2&表达式3&... 表达式语法: 参数名称=参数值 示例: http://www.dreamdu

HTML常用元素和属性(二)

4:使用a元素添加超链接和锚点 <href>指定超链接连接到另外一个资源 <hreflang>指定超链接所连接的文档所使用的语言 <target>指定使用框架集中哪个框架装载另一个资源,属性值可以有_self(自己),_blank(新窗口),_top(顶层框架),_parent(父框架) <download>让用户下载目标链接所指向的资源,而不是直接打开该目标 <type>指定文档的MIME类型 <media>指定目标URL所引用的媒

html——常用元素与属性

html5是由标签组成的标记语言,本篇就介绍HTML5的部分标签 html5保留的常用标签 <!--  -->    定义HTML注释 <html>    HTML5文档的根元素 <head>    定义HTML文档的头部页面元素 <title>    定义HTML5的页面标题 <body>    定义HTML5文档的页面主体部分 <style>    该元素用于引入样式定义 <h1>到<h6>    定义标题

HTML常用元素和属性(一)

1:基础元素 <!--..-->定义注释 <html>根元素 <head>页面头部分 <title>页面标题 <body>主题部分,属性可以指定id,class,style,onload,onunload,onclick,ondblclick,onmousedown,onmouseup,onmouseover,onmousemove,onmouseout,onkeypress,onkeydown,onkeyup等 <h1>到<h