语义相关元素
<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