HTML5入门

阿才哥 發表於 2019-7-30 12:19:00

<ul style="color: rgba(205, 91, 69, 1); font-size: 13px">
<li>HTML5的初步认识</li>
<li></li>
</ul>
<h2 style="background-color: rgba(205, 91, 69, 1); border-radius: 5px"> 一、HTML5的初步认识</h2>
关于html5的一些历史可以通过这篇博客了解：https://www.cnblogs.com/fly_dragon/archive/2012/05/22/2513716.html
<h4>1.为HTML5建立的一些规则：</h4>
<ul style="color: rgba(205, 91, 69, 1); font-size: 13px">
<li>新特性应该基于HTML、CSS、DOM以及JavaScript</li>
<li>减少对外部插件的需求（比如flash）</li>
<li>更优秀的错误处理</li>
<li>更多取代脚本的标记</li>
<li>HTML5应该独立于设备</li>
<li>开发进程应对公众透明</li>
</ul>
<h4>2.HTML5新特性</h4>
<ul style="color: rgba(205, 91, 69, 1); font-size: 13px">
<li>用于绘画的canvas元素svg</li>
<li>用于媒介回放的video和audio元素</li>
<li>对本地离线存储的更好的支持：localStorage、sessionStorage</li>
<li>新的特殊内容元素，比如article、footer、header、nav、section</li>
<li>新的表单控件，比如calendar、date、time、email、url、search（）</li>
<li>input type = text button file radio checkbox（html）</li>
</ul>
新的的特殊内容元素：article、footer、header、nav、section本质上与div没什么区别，只是为了更加方便的阅读代码而产生的语义化标签：(article与section的区别一个相当于div一个相当于p)
<div class="cnblogs_code">
<pre><header>头部、首部标签</header>
<nav>导航</nav>
<article>文章（div）</article>
<section>章节(p)</section>
<footer>底部</footer></pre>
</div>
在HTML5中还允许自定义标签，自定义的标签属于行级元素，类似span。
<div class="cnblogs_code">
<pre><student></student></pre>
</div>
<h4>2.HTML5新属性</h4>
<ul style="color: rgba(205, 91, 69, 1); font-size: 13px">
<li>Contenteditable用户能否修改页面上的内容</li>
<li>Draggable支持拖放</li>
<li>Hidden隐藏</li>
<li>Contextmenu为元素设定快捷菜单（目前无浏览器支持contextmenu属性）</li>
<li>data-val自定义属性</li>
</ul>
 2.1contenteditable的属性值为boolean类型，当值为true表示当前元素内容可以编辑，默认为false不能编辑：
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div contenteditable="true">这个div可以编辑：</div>
</pre>
</div>
 实现效果：
<img src="https://img2018.cnblogs.com/blog/1309608/201907/1309608-20190729163037618-317631189.gif">
以下是基于contenteditable属性实现的富文本编辑器的代码：
<div class="cnblogs_code"><img id="code_img_closed_1fa3d9a9-3f11-41ee-a204-9ba2396adefb" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_1fa3d9a9-3f11-41ee-a204-9ba2396adefb" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_1fa3d9a9-3f11-41ee-a204-9ba2396adefb" class="cnblogs_code_hide">
<pre>1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <title>富文本编辑器【Rich Text Editor】</title>
7 <link rel="stylesheet" href="">
8 <script type="text/javascript">
9 var oDoc,sDefTxt;
 10 function initDoc(){
 11 oDoc = document.getElementById("textBox");
 12 sDefTxt = oDoc.innerHTML;
 13 if(document.compForm.switchMode.checked){
 14 setDocMode(true);
 15 }
 16 }
 17 function formatDoc(sCmd, sValue){
 18 if(validateMode()){
 19 document.execCommand(sCmd, false, sValue);
 20 oDoc.focus();
 21 }
 22 }
 23 function validateMode(){
 24 if(!document.compForm.switchMode.checked){
 25 return true;
 26 }
 27 alert("Uncheck\"Show Html\".");
 28 oDoc.focus();
 29 return false;
 30 }
 31 function setDocMode(bToSource){
 32 var oContent;
 33 if(bToSource){
 34 oContent = document.createTextNode(oDoc.innerHTML);
 35 oDoc.innerHTML = "";
 36 var oPre = document.createElement("pre");
 37 oDoc.contentEditable = false;
 38 oPre.id = "sourceText";
 39 oPre.contentEditable = true;
 40 oPre.appendChild(oContent);
 41 oDoc.appendChild(oPre);
 42 document.execCommand("defaultParagraphSeparator", false, "div");
 43 }else{
 44 if(document.all){
 45 oDoc.innerHTML = oDoc.innerText;
 46 }else{
 47 oContent = document.createRange();
 48 oContent.selectNodeContents(oDoc.firstChild);
 49 oDoc.innerHTML = oContent.toString();
 50 }
 51 oDoc.contentEditable = true;
 52 }
 53 oDoc.focus();
 54 }
 55 function printDoc(){
 56 if(!validateMode()){
 57 return ;
 58 }
 59 var oPrntWin = windowl.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
 60 oPrntWin.document.open();
 61 oPrntWin.document.write("<!doctype html><html><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
 62 oPrntWin.document.close();
 63 }
 64 </script>
 65 <style type="text/css">
 66 .intLink {
 67 cursor: pointer;
 68 }
 69 img.intLink {
 70 border: 0;
 71 }
 72 #toolBar1 select {
 73 font-size:10px;
 74 }
 75 #textBox {
 76 width: 540px;
 77 height: 200px;
 78 border: 1px #000000 solid;
 79 padding: 12px;
 80 overflow: scroll;
 81 }
 82 #textBox #sourceText {
 83 padding: 0;
 84 margin: 0;
 85 min-width: 498px;
 86 min-height: 200px;
 87 }
 88 #editMode label {
 89 cursor: pointer;
 90 }
 91 </style>
 92 </head>
 93 <body onload="initDoc();">
 94 <form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
 95 <input type="hidden" name="myDoc">
 96 <div id="toolBar1">
 97 <select onchange="formatDoc('formatblock',this.value);this.selectedIndex=0;">
 98 <option selected>- formatting -</option>
 99 <option value="h1">Title 1 &lt;h1&gt;</option>
100 <option value="h2">Title 2 &lt;h2&gt;</option>
101 <option value="h3">Title 3 &lt;h3&gt;</option>
102 <option value="h4">Title 4 &lt;h4&gt;</option>
103 <option value="h5">Title 5 &lt;h5&gt;</option>
104 <option value="h6">Subtitle &lt;h6&gt;</option>
105 <option value="p">Paragraph &lt;p&gt;</option>
106 <option value="pre">Preformatted &lt;pre&gt;</option>
107 </select>
108 <select onchange="formatDoc('fontname',this.value);this.selectedIndex=0;">
109 <option class="heading" selected>- font -</option>
110 <option>Arial</option>
111 <option>Arial Black</option>
112 <option>Courier New</option>
113 <option>Times New Roman</option>
114 </select>
115 <select onchange="formatDoc('fontsize',this.value);this.selectedIndex=0;">
116 <option class="heading" selected>- size -</option>
117 <option value="1">Very small</option>
118 <option value="2">A bit small</option>
119 <option value="3">Normal</option>
120 <option value="4">Medium-large</option>
121 <option value="5">Big</option>
122 <option value="6">Very big</option>
123 <option value="7">Maximum</option>
124 </select>
125 <select onchange="formatDoc('forecolor',this.value);this.selectedIndex=0;">
126 <option class="heading" selected>- color -</option>
127 <option value="red">Red</option>
128 <option value="blue">Blue</option>
129 <option value="green">Green</option>
130 <option value="black">Black</option>
131 </select>
132 <select onchange="formatDoc('backcolor',this.value);this.selectedIndex=0;">
133 <option class="heading" selected>- background -</option>
134 <option value="red">Red</option>
135 <option value="green">Green</option>
136 <option value="black">Black</option>
137 </select>
138 <div id="toolBar2">
139 <img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///////////////////yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7" />
140 <img class="intLink" title="Print" onclick="printDoc();" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC">
141 <img class="intLink" title="Undo" onclick="formatDoc('undo');" src="data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs=" />
142 <img class="intLink" title="Redo" onclick="formatDoc('redo');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw==" />
143 <img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg==">
144 <img class="intLink" title="Bold" onclick="formatDoc('bold');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs=" />
145 <img class="intLink" title="Italic" onclick="formatDoc('italic');" src="data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw==" />
146 <img class="intLink" title="Underline" onclick="formatDoc('underline');" src="data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7" />
147 <img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw==" />
148 <img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7" />
149 <img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw==" />
150 <img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///////yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs=" />
151 <img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///////yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw==" />
152 <img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///////////////////////////////////yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7" />
153 <img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs=" />
154 <img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///////////////////////////////yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw==" />
155 <img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///////////////////////yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7" />
156 <img class="intLink" title="Cut" onclick="formatDoc('cut');" src="data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///////////////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw==" />
157 <img class="intLink" title="Copy" onclick="formatDoc('copy');" src="data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///////////////yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw==" />
158 <img class="intLink" title="Paste" onclick="formatDoc('paste');" src="data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///////////////////////////////////////////////yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs=" />
159 </div>
160 <div id="textBox" contenteditable="true">Lorem ipsum</div>
161 <input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label>
162 <input type="submit" value="Send" />
163 </form>
164 </body>
165 </html></pre>
</div>
富文本编辑器代码</div>
2.2关于Draggable属性实现元素拖拽：
<h4>　　2.2.1属性：draggable: auto | true | false</h4>
<h4>　　2.2.2拖拽事件：</h4>
<ul style="color: rgba(205, 91, 69, 1); font-size: 13px">
<li>dragstart 在元素开始被拖动时触发</li>
<li>dragend 在拖动操作完成时触发</li>
<li>drag 在元素被拖动时触发</li>
</ul>
<h4>　　2.2.3释放区域事件：</h4>
<ul style="color: rgba(205, 91, 69, 1); font-size: 13px">
<li>dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发</li>
<li>dragover 当被拖动元素在释放区内移动时触发</li>
<li>dragleave 当被拖动元素没有放下就离开释放区时触发</li>
<li>drop 当被拖动元素在释放区里放下时触发</li>
</ul>
<div class="cnblogs_code"><img id="code_img_closed_034695a4-d459-4ae3-8456-44c170fe3b4c" class="code_img_closed lazyload" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif"><img id="code_img_opened_034695a4-d459-4ae3-8456-44c170fe3b4c" class="code_img_opened lazyload" style="display: none" alt="" data-src="http://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif">
<div id="cnblogs_code_open_034695a4-d459-4ae3-8456-44c170fe3b4c" class="cnblogs_code_hide">
<pre> 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>菜鸟教程(runoob.com)</title>
 6 <style>
 7 .droptarget {
 8 float: left;
 9 width: 100px;
10 height: 35px;
11 margin: 15px;
12 padding: 10px;
13 border: 1px solid #aaaaaa;
14 }
15 </style>
16 </head>
17 <body>
18
19 在两个矩形框中来回拖动 p 元素:
20 <div class="droptarget">
21 拖动我!
22 </div>
23 <div class="droptarget"></div>
24 注意：Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的浏览器不支持 drag 事件。
25 
26 <script>
27 /* 拖动时触发*/
28 document.addEventListener("dragstart", function(event) {
29 //dataTransfer.setData()方法设置数据类型和拖动的数据
30 console.log(event.dataTransfer);
31 event.dataTransfer.setData("Text", event.target.id);
32 // 拖动 p 元素时输出一些文本
33 document.getElementById("demo").innerHTML = "开始拖动 p 元素.";
34 //修改拖动元素的透明度
35 event.target.style.opacity = "0.4";
36 });
37 //在拖动p元素的同时,改变输出文本的颜色
38 document.addEventListener("drag", function(event) {
39 document.getElementById("demo").style.color = "red";
40 });
41 // 当拖完p元素输出一些文本元素和重置透明度
42 document.addEventListener("dragend", function(event) {
43 document.getElementById("demo").innerHTML = "完成 p 元素的拖动";
44 event.target.style.opacity = "1";
45 });
46 /* 拖动完成后触发 */
47 // 当p元素完成拖动进入droptarget,改变div的边框样式
48 document.addEventListener("dragenter", function(event) {
49 if ( event.target.className == "droptarget" ) {
50 event.target.style.border = "3px dotted red";
51 }
52 });
53 // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
54 document.addEventListener("dragover", function(event) {
55 event.preventDefault();
56 });
57 // 当可拖放的p元素离开droptarget，重置div的边框样式
58 document.addEventListener("dragleave", function(event) {
59 if ( event.target.className == "droptarget" ) {
60 event.target.style.border = "";
61 }
62 });
63 /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
64 复位输出文本的颜色和DIV的边框颜色
65 利用dataTransfer.getData()方法获得拖放数据
66 拖拖的数据元素id(“drag1”)
67 拖拽元素附加到drop元素*/
68 document.addEventListener("drop", function(event) {
69 event.preventDefault();
70 if ( event.target.className == "droptarget" ) {
71 document.getElementById("demo").style.color = "";
72 event.target.style.border = "";
73 var data = event.dataTransfer.getData("Text");
74 event.target.appendChild(document.getElementById(data));
75 }
76 });
77 </script>
78
79 </body>
80 </html></pre>
</div>
来自一个手册得完整示例</div>
　　》》示例链接：https://www.runoob.com/try/try.php?filename=tryjsref_ondrag_all
2.3Hidden实现的元素隐藏本质上就是基于display的样式属性none实现的，这个隐藏的元素依然存在于文档结构中，只是display属性被设置为none了而已。
2.4自定义属性：
<div class="cnblogs_code">
<pre><div data-val="demo"></div>
document.getElementsByTagName('div').getAttribute('data-val');//demo</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
——生命自会找到蓬勃之路。 
来源：https://www.cnblogs.com/ZheOneAndOnly/p/11264585.html

頁: [1]

琼殿技术论坛's Archiver

HTML5入门