2016年4月7日
阿新 • • 發佈：2019-01-31
一、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元素，當允許放置多個其他元素 示例：
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元素，當允許放置多個其他元素 示例：
figurealt屬性 如果圖片不能顯示，則顯示alt裡內容 11 span 內建標籤 12innerHTML 屬性 innerHTML屬性設定或者返回表格行的開始和結束標籤之間的HTML 13 檢查瀏覽器是否對FileReader介面提供支援> <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>
if12: FileRader 介面方法 方法名 引數 描述 readAsBinaryString file 將檔案讀取為二進位制碼 readAsText file,[encoding] 將檔案讀取為文字 readAsUrl file 將檔案讀取為DataURL abort （none） 中斷讀取操作 13 .拖放 示例：(typeof FileReader == "undefined") { result.innerHTML = "<p>抱歉， 您的瀏覽器不支援FIleReader</p>"; file.setAttribute("disabled","disabled"); }
<!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>