|
项目
|
个人理解
|
|
figure/figcaption
|
据说表示页面独立内容，移除后无影响，暂无发现用处..
|
|
details
|
该标签有点意思，用于替代js中，元素收起展开功能。
最新ff都不支持……个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；
|
|
mark
|
高亮显示，当真语义化
|
|
progress
|
屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！
|
|
改良ol
|
老夫就没有用过这个主。。。
|
|
……
|
Projet
|
Compréhension personnelle
|
figure/figlégende
|
On dit qu'il représente le contenu indépendant de la page. Il n'aura aucun impact après sa suppression. Aucune utilisation n'a encore été trouvée..
|
détails
|
Cette balise est un peu intéressante. Elle est utilisée pour remplacer la fonction de réduction et d'expansion des éléments dans js.
Le dernier ff ne le supporte pas... Personnellement, puisque cette balise est fournie, des attributs doivent être fournis pour indiquer l'expansion vers le haut et vers le bas ou vers la gauche et la droite ;
|
marque
|
Mis en valeur, véritablement sémantique
|
progrès
|
Diamants, vous pouvez dire adieu aux images gif, et plus besoin d'utiliser des divs pour simuler des pourcentages. Une barre de progression cohérente avec la zone Windows apparaît, et le téléchargement de fichiers asynchrone est plus parfait !
|
Amélioré ol
|
Je n'ai jamais utilisé ce master. . .
|
……
Les éléments ci-dessus sont des éléments superflus et il n'est pas nécessaire d'entrer dans les détails. Ensuite, l'étoile de cet article apparaîtra :
API de fichiers
FileList et objet fichier :
En HTML4, la balise file ne vous permet de sélectionner qu'un seul fichier, mais en HTML5, après avoir défini l'attribut multiple sur la balise file, vous pouvez sélectionner plusieurs fichiers ! ! !
Après la sélection, l'objet filelist sera formé ici, qui est une liste d'objets composés de fichiers. En termes simples, il s'agit d'un tableau de fichiers.
L'objet fichier a 2 attributs, name représente le nom du fichier (hors chemin) et lastModifiedDate représente l'heure de la dernière modification
En fait, lorsque nous exploitons des fichiers en HTML4, nous pouvons obtenir de nombreux attributs locaux, tels que la taille du fichier, mais le maléfique IE ne le prend pas en charge, et cela s'est amélioré après IE9.
Donc, si le client vous demande de télécharger un fichier trop volumineux, veuillez abandonner. . .
Objet Blob
représente les données brutes binaires et fournit une méthode slice pour accéder aux données brutes internes en octets ; la taille représente la longueur en octets de l'objet blob, le type représente son type MIME, et si le type est inconnu, une chaîne vide est renvoyée.
Allez, faites une expérience simple :
À propos du fichier </title> ;<br /> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript"> <br> $ (document).ready(function () {<br> $('#wl').click(function () {<br> var f = $('#file')[0];<br> <br> var s = '';<br> <br> });<br> });<br> </script><br> </head><br> <body><br> <input type="file" id="file" multiple /><br> <button id="wl"><br> Téléchargement de fichier</button><br> </body><br> </html><br> </div>
<br>
<p>Après avoir sélectionné l'image dans ff, soumettez-la, définissez un point d'arrêt et jetez un œil : </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535523.jpg"></p>
<p>Le protagoniste du fichier apparaît, c'est lui, sortons ses attributs pour voir : </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535524.jpg"></p>
<p>Il y a vraiment de tout ! Cependant, vous pouvez faire beaucoup de choses avec cette propriété. . . Jetons un coup d'œil à ie7 et 8 : </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535525.jpg"></p>
<p>Chers téléspectateurs, je n'ai pas du tout cet attribut, donc tout est polyvalent. . . </p>
<p><strong>Au fait, je pense qu'il est très pénible de déboguer le navigateur IE. Avez-vous de bons plug-ins de développement IE, comme le firebug de ff ou le propre plug-in de Google ? ? </strong></p>
<p> </p>
<p><strong>Interface FIleReader</strong> </p>
<p>L'interface du lecteur de fichiers peut lire des fichiers en mémoire. Grâce à cela, nous pouvons prévisualiser les images confortablement, mais son utilité va au-delà. </p>
<p><strong>Quatre méthodes de lecture de fichiers : </strong></p>
<p>readAsBinaryString lit le fichier sous forme de code binaire - nous transmettons généralement les données au backend </p> ;
<p>readAsText lit le fichier sous forme de texte - lit le contenu du texte </p>
<p>readAsURL lit le fichier sous forme de DataURL - généralement un petit fichier, une image ou du HTML </p> ;
<p>l'abandon interrompt la lecture, car le fichier est trop volumineux et le temps d'attente est très long</p>
<p> </p>
<p><strong>Événement d'interface du lecteur de fichiers : </strong></p>
<p>déclencheur d'interruption de lecture lors de l'abandon </p>
<p>une erreur se déclenche en cas d'échec de la lecture </p>
<p>onloadstart se déclenche lorsque la lecture commence </p>
<p>onprogress est en cours de chargement</p>
<p>le chargement est déclenché lorsque la lecture est réussie </p>
<p>onloadend est déclenché une fois la lecture terminée, quel que soit le succès ou l'échec </p> ;
<p>Parler sans pratique ne suffit pas, faisons une petite expérience ici : <br><br></p>
<div class="msgheader">
<div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode5'));"><u>Copiez le code</u></span></div>Le code est comme suit :<div class="msgborder" id="phpcode5">
<br> Je suis une petite expérience <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title>< ;/title><br> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/javascript "><br> $(document).ready(function () {<br> var bt = $('#wl');<br> var file = $('#file');<br> var type = $('#type');<br> var result = $('#result');<br> <br> var func = {};<br> func.readAsDataURL = function (file) {<br> //Vérifiez s'il s'agit d'une image<br> if (!/image/w /.test(file.type)) {<br> alert('non-image format');<br> return false;<br> ><br> var reader = new FileReader();<br> reader.readAsDataURL(file);<br> reader.onload = function (e) {<br> result.html('<img src="' this .result ' "/>');<br> }<br> }<br> <br> func.readAsBinaryString = function (file) {<br> <br> var reader = new FileReader();<br> reader.readAsBinaryString (fichier);<br> reader.onload = function (e) {<br> result.html(this.result);<br> }<br> }<br> <br> func.readAsText = function (fichier) {<br> <br> var reader = new FileReader();<br> reader.readAsText(file);<br> reader.onload = function (e) {<br> result.html(this.result );<br> }<br> }<br> <br> bt.click(function () {<br> if (func[type.val()] && typeof func[type.val()] == ' function') {<br> func[type.val()](file[0].files[0]);<br> }<br> });<br> <br> });<br> < ;/script> ;<br> </head><br> <body><br> <div id="result"><br> </div><br> <input type="file " id= "fichier" multiple /><br> <select id="type"><br> <option value="readAsDataURL">readAsDataURL</option><br> <option value=" readAsBinaryString"> ;readAsBinaryString</option><br> <option value="readAsText">readAsText</option><br> </select><br> <button id="wl"><br> Lire le fichier</button><br> <br> </body><br> </html><br> </div>
<br>
<p>Utilisez le dernier navigateur pour l'essayer ! </p>
<p>Portons un autre jugement et regardons l'ordre d'exécution des événements : </p>
<p> reader.onload = function (e) {<br> alerte('en cours');<br> reader.onerror = reader.onloadstart = function (e) {<br> alert('onloadstart'); >
<br><br>Application spécifique ici : <br><br><br><br>
<br><br><br><br><br></p>Copier le code<p><strong><br>Le code est le suivant :<img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535526.jpg"><div class="msgborder" id="phpcode6">
<br> 简单图片上传 <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title>
Drag En fait, avant de mettre l'API, j'ai également écrit un plug-in glisser-déposer en utilisant jquery. .
Quelques choses que j'ai rencontrées au travail [fenêtre pop-up] [glisser-déposer] [téléchargement de fichiers asynchrone]
Mais l'intégration en HTML5 est certainement meilleure ! ! ! Jetons un coup d'œil à ce genre de choses maintenant. . . Et sa puissance ne consiste pas seulement à glisser dans le navigateur, ce qui est incroyable (faites glisser l'image pour la télécharger)
En HTML5, les images et les liens peuvent être glissés et déposés par défaut. Les autres éléments doivent être définis sur draggable="true" pour être glissés et déposés. Sans plus tarder, je vais l'essayer tout de suite.
拖放的例子
< /title><br> <br> </head><br> <body><br> <div id="dragme" draggable="true" style=" largeur : 200 px ; bordure : 1 px gris uni ; ">请拖放</div><br> <div id="text" style=" largeur : 200 px ; hauteur : 200 px ; bordure : 1 px gris uni ;"></div><br> <script type="text/javascript"><br> document.ondragover = fonction (e) {<br> e.preventDefault();<br> };<br> document.ondrop = fonction (e) { <br> e.preventDefault();<br> };<br> <br> var source = document.getElementById('dragme');<br> var dest = document.getElementById('text');<br> source.addEventListener('dragstart', function (e) {<br> var dt = e.dataTransfer;<br> dt.setData('text/plain', '您好' new Date());<br> } , false);<br> <br> dest.addEventListener('dragend', function (e) {<br> e.preventDefault();<br> }, false);<br> <br> dest.addEventListener( 'drop', fonction (e) {<br> var dt = e.dataTransfer;<br> var text = dt.getData('text/plain');<br> dest.innerHTML = text;<br> e. stopPropagation();<br> e.preventDefault();<br> return false;<br> }, false);<br> <br> </script><br> </body><br> < ;/html><br>
</div>
<p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535527.jpg"></p>
<p>拖放时候一定要记住，其中以下亦是重点：</p>
<p>1 拖放可使用DataTransfer传递数据，该对象是非常有用的，因为在拖动目标元素时，可能会经过其它元素，我们可以用此传递信息；</p>
<p><strong>API：</strong></p>
<p>dragstart <span style="COLOR: #ff0000">被拖放元素</span> 开始拖放时</p>
<p>faites glisser <span style="COLOR: #ff0000">被拖放元素</span> 拖放过程中</p>
<p>dragenter <span style="COLOR: #ff0000">拖放过程中鼠标经过的元素</span> 被拖放元素开始进入本元素时</p>
<p>dragover <span style="COLOR: #ff0000">拖放过程中鼠标经过的元素</span> 本元素内移动</p>
<p>drageleave <span style="COLOR: #ff0000">拖放过程中鼠标经过的元素</span> 离开本元素</p>
<p>déposez <span style="COLOR: #ff0000">拖放的目标元素 <span style="COLOR: #000000">拖动的元素放到了本元素中</span></span></p>
<p>dragend 拖放的对象 拖放结束</p>
<p>其实这里是有问题的，我并未去深入研究从开始拖动到经过各种元素会产生神马情况，这个可以作为二次学习时的重点研究对象。</p>
<p><strong>结语 </strong></p>
<p>html5的文件和表单做的比较精致，个人感觉比布局新增的几个标签有用多了，明天开始学习canvas,虽然不懂，虽然见过，但是还是感觉很厉害的样子！ </p>
</div>
</td></corps>
</table></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Images de dessin HTML5 (Partie 1) : problèmes liés à l'élément canevas qui mènent à la prochaine génération de pages Web_compétences du didacticiel HTML5" href="http://m.php.cn/fr/faq/6315.html">Images de dessin HTML5 (Partie 1) : problèmes liés à l'élément canevas qui mènent à la prochaine génération de pages Web_compétences du didacticiel HTML5</a></span><span>Article suivant：<a class="dBlack" title="Images de dessin HTML5 (Partie 1) : problèmes liés à l'élément canevas qui mènent à la prochaine génération de pages Web_compétences du didacticiel HTML5" href="http://m.php.cn/fr/faq/6319.html">Images de dessin HTML5 (Partie 1) : problèmes liés à l'élément canevas qui mènent à la prochaine génération de pages Web_compétences du didacticiel HTML5</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348281.html" title="AlloyTouch全屏滚动插件 30秒搞定顺滑H5页" class="aBlack">AlloyTouch全屏滚动插件 30秒搞定顺滑H5页</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348372.html" title="HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)" class="aBlack">HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348373.html" title="HTML5 canvas 9绘制图片实例详解" class="aBlack">HTML5 canvas 9绘制图片实例详解</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348374.html" title="正则表达式与HTML5新元素" class="aBlack">正则表达式与HTML5新元素</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348469.html" title="NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法" class="aBlack">NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html> | 