当前位置:网站首页 / web前端 / 正文

AY H5笔记4

时间:2019年03月13日 | 作者 : aaronyang | 分类 : web前端 | 浏览: 445次 | 评论 0

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值

image.png

常用,引入css

<link href="ay.css" rel="stylesheet" type="text/css"/>

定义图标,浏览器选项卡上的左侧的图标

image.png

<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="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>

image.png

给元素加上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>

1.gif

说下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>


2.gif

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

image.png

改变拖放图标,默认浏览器拖的时候,是被拖元素的样子,现在可以设置图片了。

<!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>

image.png

这里只是简单的拖放,高级的后面讲解。



====================www.ayjs.net       杨洋    wpfui.com        ayui      ay  aaronyang=======请不要转载谢谢了。=========



推荐您阅读更多有关于“web前端,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表