内容简介：script包含js脚本。style包含css样式link用于链接图标、css样式文件等各种外部资源。title标题
H5头部信息，meta信息
head元素可以包含
script包含js脚本。style包含css样式
link用于链接图标、css样式文件等各种外部资源。
title标题
base用于指定该页面中所有链接的基准路径
meta定义元数据
noscript，用于向禁用了js脚本或不支持js脚本的浏览器显示提示信息
link的额外属性
href链接资源url，hreflang：链接资源的语言
media支持哪些设备
rel文档与所链接的资源的关系
sizes图标大小。仅当rel为icon时候生效
type，指定MIME类型
MDEIA的值
screen计算机屏幕（默认）。
tty电传打字机以及类似的使用等宽字符网格的媒介。
tv电视机类型设备（低分辨率、有限的滚屏能力）。
projection放映机。
handheld手持设备（小屏幕、有限带宽）。
print 打印预览模式/打印页面。
braille盲人点字法反馈设备。
aural语音合成器。
all适用于所有设备。
rel值
常用，引入css
<link href="ay.css" rel="stylesheet" type="text/css"/>
定义图标,浏览器选项卡上的左侧的图标
<link href="app.ico" rel="shortcut icon" type="image/x-icon"/>
预先加载资源
<link href="b.html" rel="prefetch" type="text/html"/>
base的属性
href所有链接基准路径
target：类似超链接a的target值
<base target="_blank" href=" " _src="http://www.wpfui.com"/>" rel="nofollow,noindex" target="_blank">http://www.wpfui.com"/>
如果此时页面中有超链接，地址是 product.html,那么单击时候地址是 http://www.wpfui.com/product.html 地址，并且使用_blank方式打开链接
meta的属性
定义一些键值对
http-equiv:指定元信息的名称，具有特殊意义。告诉浏览器一些信息，然后正确处理网页内容
name：键的名称
content:值
charset：字符集
一般网页会指定如下，方便搜索引擎采集你的网站的信息
<meta name="author" content="AY"/>
<meta name="website" content="http://www.ayjs.net"/>
<meta name="copyright" content="2019个人博客 ayjs.net"/>
<meta name="Keywords" content="AY博客，wpfui"/>
charset一般值为utf-8
http-equiv值为
1.expires网页过期时间。过期了，必须从服务器上下载。
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"/>
时间必须是GMT格式,也可以是数字，代表秒数，60就是60秒过后过期
2、Pragma(cache模式)
说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
用法：
＜meta http-equiv="Pragma" content="no-cache"＞
注意：这样设定，访问者将无法脱机浏览。
3、Refresh(刷新)
说明：自动刷新并指向新页面。
用法：
＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞
注意：其中的2是指停留2秒钟后自动刷新到URL网址。
4、Set-Cookie(cookie设定)
说明：如果网页过期，那么存盘的cookie将被删除。
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞
注意：必须使用GMT的时间格式。
5、Window-target(显示窗口的设定)
说明：强制页面在当前窗口以独立页面显示。
用法：
Html代码 收藏代码
＜meta http-equiv="Window-target" content="_top"＞
注意：用来防止别人在框架里调用自己的页面。
6、content-type(显示字符集的设定)
说明：设定页面使用的字符集。
用法：
＜meta http-equiv="content-type" content="text/html; charset=gb2312"＞
7、Pics-label(网页等级评定)
用法：
<meta http-equiv="Pics-label" contect="">
说明：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。
8、Page_Enter、Page_Exit
设定进入页面时的特殊效果
<meta http-equiv="Page-Enter" contect="revealTrans(duration=1.0,transtion= 12)">
设定离开页面时的特殊效果
<meta http-equiv="Page-Exit" contect="revealTrans(duration=1.0,transtion= 12)">
不要纠结这里，基本从网上找到，粘贴就行了。
H5的拖放
默认浏览器就可以拖了
<body>
<a href="http://www.wpfui.com">人才代码行行出，公司不用wpf。我拿青春学技术，公司不用wpf。</a>
<img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY2013年照片" />
</body>
给元素加上draggable="true"表示可以拖动，但是不携带数据的。增加ondragstart事件
<body>
<!--<a href="http://www.wpfui.com">人才代码行行出，公司不用wpf。我拿青春学技术，公司不用wpf。</a>
<img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY2013年照片" />-->
<div id="source" style="width:80px;height:80px;border:1px solid black;background:#b6ff00;" draggable="true">
人才代码行行出，公司不用wpf。我拿青春学技术，公司不用wpf。
</div>
<script type="text/javascript">
var source = document.getElementById("source");
source.ondragstart = function(evt) {
evt.dataTransfer.setData("text","测试AY");
}
</script>
</body>
接收“放”操作
事件7个
对于被拖的
ondragstart拖动开始触发，ondrag拖动过程不断触发 ondragend拖动结束触发
对于被放的
ondragenter拖入了，ondragover拖入不断触发，ondragleave从拖入的地方离开，ondrop放到被拖的地方时候触发
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<!--<a href="http://www.wpfui.com">人才代码行行出，公司不用wpf。我拿青春学技术，公司不用wpf。</a>
<img src="http://www.wpfui.com/abl/o_3.jpg" alt="AY2013年照片" />-->
<div id="source" style="width:80px;height:80px;border:1px solid black;background:#b6ff00;" draggable="true">
人才代码行行出，公司不用wpf。我拿青春学技术，公司不用wpf。
</div>
<script type="text/javascript">
var source = document.getElementById("source");
source.ondragstart = function(evt) {
evt.dataTransfer.setData("text","测试AY");
}
document.ondragover = function (evt) {
//取消默认行为
return false;
}
document.ondrop = function (evt) {
source.style.position = "absolute";
source.style.left = evt.pageX + "px";
source.style.top = evt.pageY + "px";
return false;
}
</script>
</body>
</html>
说下DataTransfer对象
包含的属性和方法如下：
dataTransfer.dropEffect：none,copy,link,move四个值之一。设置或者返回拖放目标上允许发生的拖放行为
dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖放行为。值为：none/copy/copyLink/copyMove/link/linkMove/move/all/uninitialized
dataTransfer.items:返回DataTransferItems对象，表示拖动的数据
dataTransfer.setDragImage(element,x,y),设置拖放操作的自定义图标。element是图标，后面是图标的位置
dataTransfer.addElement(element)添加自定义图标
dataTransfer.types:返回一个DOMStringList对象，包含了存入dataTransfer中数据所有类型
dataTransfer.getData(format)获取对象中format格式的数据。
setData(format,data)设置数据
clearData([format])清除数据，不指定format，表示清除所有。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
<style type="text/css">
div > div {
display: inline-block;
padding: 10px;
background-color: #aaa;
margin: 3px;
}
</style>
</head>
<body>
<div style="width:600px;border:1px solid #000000">
<h2>选妃，拖到后宫去</h2>
<div draggable="true" ondragstart="xf(event);">貂蝉</div>
<div draggable="true" ondragstart="xf(event);">王昭君</div>
<div draggable="true" ondragstart="xf(event);">杨玉环</div>
<div draggable="true" ondragstart="xf(event);">王羲之</div>
</div>
<div id="hougong" style="width:200px;height:260px;border:1px solid #000000;float:left">
<h2 ondragleave="return false;">后宫洞房花烛</h2>
</div>
<div id="lenggong" style="width:200px;height:260px;border:1px solid #0094ff;float:left">
<h2 ondragleave="return false;">冷宫</h2>
</div>
<div></div>
<script type="text/javascript">
var hougong = document.getElementById("hougong");
var lenggong = document.getElementById("lenggong");
var xf = function (evt) {
evt.dataTransfer.setData("text/plain", "<hougong>" + evt.target.innerHTML);
}
hougong.ondrop = function (evt) {
evt.preventDefault();
var text = evt.dataTransfer.getData("text/plain");
if (text.indexOf("<hougong>") == 0) {
var newEle = document.createElement("div");
newEle.id = new Date().getUTCMilliseconds();
newEle.innerHTML = text.substring(9);
newEle.draggable = "true";
newEle.ondragstart = function (evt) {
evt.dataTransfer.setData("text/plain", "<lenggong>" + newEle.id);
}
hougong.appendChild(newEle);
}
}
lenggong.ondrop = function (evt) {
var text = evt.dataTransfer.getData("text/plain");
if (text.indexOf("<lenggong>") == 0) {
var hg = document.getElementById(text.substring(10));
hougong.removeChild(hg);
}
}
document.ondragover = function (evt) {
return false;
}
document.ondrop = function (evt) {
return false;
}
</script>
</body>
</html>
start时候设置数据，drop时候 获得数据判断，处理。
拖放行为
通过设置effectAllowed和dropEffect控制
在ondragstart设置effectAllowed，在（被放入的目标上的）ondragover事件里设置dropEffect属性。
如果dropEffect设置的拖放行为不再effectAllowed设置的多个拖放行为之内，拖放操作会失败。
如果effectAllowed设置为none，则不允许拖动
如果dropEffect为none，则不能放入该元素
如果effectAllowed为all或者不设置，则dropEffect可以为任何值
如果effectAllowed制定了，例如move，copy等，dropEffect的属性值比如是这几个值开头的属性值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<div id="source" draggable="true" style="width:80px;height:60px;border:1px solid #000">
AY
</div>
<script type="text/javascript">
var source = document.getElementById("source");
source.ondragstart = function (evt) {
var dt = evt.dataTransfer;
dt.effectAllowed = 'link';
dt.setData("text/plain","www.wpfui.com");
}
document.ondragover = function (evt) {
return false;
}
document.ondrop = function (evt) {
return false;
}
</script>
</body>
</html>
开始拖动的时候，鼠标外观为link
改变拖放图标,默认浏览器拖的时候，是被拖元素的样子，现在可以设置图片了。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>标题</title>
</head>
<body>
<div id="source" draggable="true" style="width:80px;height:60px;border:1px solid #000">
AY
</div>
<script type="text/javascript">
var source = document.getElementById("source");
//source.ondragstart = function (evt) {
// var dt = evt.dataTransfer;
// dt.effectAllowed = 'link';
// dt.setData("text/plain","www.wpfui.com");
//}
var img = document.createElement("img");
img.src = "https://www.baidu.com/favicon.ico";
source.ondragstart = function (evt) {
var dt = evt.dataTransfer;
dt.setDragImage(img,0,0);
dt.setData("text/plain", "www.wpfui.com");
}
document.ondragover = function (evt) {
return false;
}
document.ondrop = function (evt) {
return false;
}
</script>
</body>
</html>
这里只是简单的拖放，高级的后面讲解。
====================www.ayjs.net 杨洋 wpfui.com ayui ay aaronyang=======请不要转载谢谢了。=========
推荐您阅读更多有关于“web前端，”的文章
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 【每日笔记】【Go学习笔记】2019-01-04 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-02 Codis笔记
- 【每日笔记】【Go学习笔记】2019-01-07 Codis笔记
- vue笔记3，计算笔记
- Mysql Java 驱动代码阅读笔记及 JDBC 规范笔记
- 【每日笔记】【Go学习笔记】2019-01-16 go网络编程
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Foundations of PEAR
Good, Nathan A./ Kent, Allan / Springer-Verlag New York Inc / 2006-11 / $ 50.84
PEAR, the PHP Extension and Application Repository, is a bountiful resource for any PHP developer. Within its confines lie the tools that you need to do your job more quickly and efficiently. You need......一起来看看 《Foundations of PEAR》 这本书的介绍吧!
