一、HTML
1.<dl></dl> <dt> </dt>
HTML5 将该元素进行重新定义、重新定义后的dl列表包含多个带有名字的列表项。每一项包含一条或者多条带名字的dt元素,用来表示术语,dt元素后面紧跟一个或多个dd元素,用来表示定义。在一个元素内,不允许有相同名字的dt元素,不允许有重复的术语
示例:
<!-- 用dl列表来做术语解释 -->
<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 ο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>