AY H5笔记4

栏目: 编程工具 · 发布时间: 5年前

内容简介：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值

AY H5笔记4

常用，引入css

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

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

AY H5笔记4

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

AY H5笔记4

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

AY H5笔记4

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

AY H5笔记4

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

AY H5笔记4

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

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

AY H5笔记4

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

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

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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
编程匠艺

编程匠艺

Pete Goodliffe / 韩江、陈玉 / 电子工业出版社 / 2011-11 / 85.00元

如果你可以编写出合格的代码，但是想更进一步、创作出组织良好而且易于理解的代码，并希望成为一名真正的编程专家或提高现有的职业技能，那么Pete Goodliffe编写的这本本书都会为你给出答案。本书的内容涵盖编程的各个要素，如代码风格、变量命名、错误处理和安全性等。此外，本书还对一些更广泛的编程问题进行了探讨，如有效的团队合作、开发过程和文档编写，等等。本书各章的末尾均提供一些思考问题，这些问题回顾......一起来看看 《编程匠艺》 这本书的介绍吧!

码农工具
JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2024 码农网 粤ICP备17054400号-3