2016年4月7日 - 2016年4月9日笔记-CSDN博客

本文链接：https://blog.csdn.net/u012730092/article/details/51105375

一、HTML

1.<dl></dl> <dt> </dt>

HTML5 将该元素进行重新定义、重新定义后的dl列表包含多个带有名字的列表项。每一项包含一条或者多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或多个dd元素，用来表示定义。在一个元素内，不允许有相同名字的dt元素，不允许有重复的术语

示例：

<h1>article 元素</h1>

<p>一块独立的内容。</p>

<aside>

<dl>

<dd>RSS 也叫聚和RRS</dd>

</dl>

</aside>

</article>

2.datetime元素

属性中日期与时间之间要用“T”文字分隔，“T”表示时间

3 pubdate 元素

time元素代表文章（article元素内容）或整个网页的发布日期

4 address

<a href="http://www.baidu.com">baidu1</a>

<a href="http://www.baidu.com">baidu2</a>

<a href="http://www.baidu.com">baidu3</a>

</address>

5 formaction

HTML5 可以给所有的提交的按钮，诸如<input type = "submit>等等增加不同的formaction属性，使得点击不同的按钮，可以将表单提交到不同的页面。

示例：

</form>

formmethod属性

6.placeholder 属性

提示

用法：

7.autofocus 属性

给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点

8require 属性

在提交时，如果元素中内容为空，则不允许提交，同时在浏览器中显示信息提交文字

9output元素

没用

10.figure元素

一个figure元素内最多只允许放置一个figcaption元素，当允许放置多个其他元素

示例：

figure>
    <img src="Chrysanthemum.jpg"  alt="菊花" width="100" height="100">
    <img src="Chrysanthemum.jpg"  alt="菊花" width="100" height="100">
    <img src="Chrysanthemum.jpg"  alt="菊花" width="100" height="100">
    <figcaption>菊花</figcaption>
</figure>

alt属性如果图片不能显示，则显示alt里内容

11 span

内置标签

12innerHTML 属性

innerHTML属性设置或者返回表格行的开始和结束标签之间的HTML

13 检查浏览器是否对FileReader接口提供支持

   if(typeof FileReader == "undefined")
{
    result.innerHTML = "<p>抱歉， 您的浏览器不支持FIleReader</p>";
    file.setAttribute("disabled","disabled");
}

12: FileRader 接口方法

方法名参数描述

readAsBinaryString file 将文件读取为二进制码

readAsText file,[encoding] 将文件读取为文本

readAsUrl file 将文件读取为DataURL

abort （none）中断读取操作

13 .拖放

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" >
        function init()
        {
            var source = document.getElementById("dragme");
            var dest = document.getElementById("text");

//            (1) 拖放开始
            source.addEventListener("dragstart",function(ev){
//                向dataTransfer对象追加对象
                var dt = ev.dataTransfer;
                dt.effectAllowed = "all";
//               （2） 拖动元素为dt.setData("text/plain",this.id);
                dt.setData("text/plain","你好");
            },false);

//            (3) dragend: 拖放结束
            dest.addEventListener('dragend', function (ev) {
//               不执行默认处理(拒绝被拖放)
                ev.preventDefault();
            },false);
//              (4) drop：被拖放
            dest.addEventListener("drop", function (ev) {
//                从DataTransfer对象那里取得数据
                var dt = ev.dataTransfer;
                var text = dt.getData("text/plain");
                dest.textContent += text;
//                (5) 不执行默认处理(拒绝被拖放)
                ev.preventDefault();
//                停止事件传播
                ev.stopPropagation();
            },false);
        }
//        (6)设置页面属性，不执行默认处理(拒绝被拖放)
        document.ondragover = function (e) {
            e.preventDefault();
        }
        document.ondrop = function (e) {
            e.preventDefault();
        }
    </script>
</head>
<body οnlοad="init()">
<h1>简单拖放示例</h1>
<!--把draggable 属性设为true-->
<div id="dragme"  draggable="true" style="width: 200px; border: 1px solid gray;">
    请拖放
</div>
<div id="text" style="width: 200px; height: 200px;border: 1px solid gray;"></div>
</body>
</html>