您的位置：首页 > 其它

2016年4月7日 - 2016年4月9日笔记

2016-04-09 15:25 375 查看

一、HTML

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

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

示例：



<article>

<h1>article 元素</h1>

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

<aside>

<h2>术语解释</h2>

<dl>

<dt><dfn>RSS</dfn></dt>

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

<dt> <dfn>博客</dfn></dt>

<dd>博客。。。</dd>

</dl>

</aside>

</article>

2.datetime元素

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

3 pubdate 元素

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

4 address

<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 id = "formtest" action = "serve.jsp">
<input type = "submit" name = "s1" value = "v1" formaction = "s1.jsp"> 提交到s1<br\>
<input type = "submit" name = "s2" value = "v2" formaction = "s1.jsp"> 提交到s2<br\>
<input type = "submit" name = "s3" value = "v3" formaction = "s1.jsp"> 提交到s3<br\>
<input type = "submit">
</form>

formmethod属性

6.placeholder 属性

提示

用法：

<input type ="text" placeholder ="input me"/>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航