Nouvel attribut |
Compréhension personnelle |
formulaire |
Avant HTML5, les éléments subordonnés du formulaire devaient être placés dans des balises. Vous pouvez désormais spécifier la balise de formulaire pour la balise .Commentaire : Cette fonction résout certains problèmes que nous avons rencontrés en pratique. Par exemple, lorsque l'iframe simule un téléchargement d'image asynchrone, l'image doit être écrite en dehors du formulaire. |
formaction méthode de formulaire |
Cet attribut est utilisé pour les boutons (soumettre) pour rendre la page de soumission du formulaire contrôlable par des boutons formmethod précise la méthode de soumission de chaque bouton |
placehoder |
Cet attribut est très utile. Il est utilisé pour afficher des informations d'invite dans la zone de texte . |
liste |
L'attribut list doit être utilisé avec datalist, qui équivaut à une zone de texte et simule une sélection. C'est un attribut très approprié . |
autofocus |
Utilisé pour les zones de texte afin de se concentrer activement, des éléments utiles |
Ajouter un attribut d'entrée à la vérification gratuite, qui n'est pas pris en charge par divers navigateurs |
|
tél |
Pour les appels téléphoniques |
url |
URL de vérification |
|
Vérifier l'e-mail |
date/heure |
Vérification du type de date, un plug-in de sélection de date apparaîtra. . . |
numéro |
ne peut être que des chiffres |
gamme |
Plage de numéros de contrôle |
couleur |
Sélecteur de couleurs, quelle bonne chose. . . |
HTML5 a ajouté de nombreux attributs liés au formulaire. Pour être honnête, ces éléments sont vraiment réfléchis ! ! ! Dans une large mesure :
Validation de formulaire totalement libérée
Si vous n’avez pas pris en compte le problème de compatibilité, j’aurais hâte d’intervenir immédiatement, mais une fois que vous aurez réfléchi au problème de compatibilité, vous aurez un énorme mal de tête ! ! !
Parce que quelque chose qui était bon à l'origine va augmenter notre charge de travail pour des raisons historiques ! ! !
En faisant la bonne chose au mauvais moment, il a l'air bien et a en fait raison. . . Mais vous constaterez qu’il a tort. . . .
项目 |
个人理解 |
figure/figcaption |
据说表示页面独立内容,移除后无影响,暂无发现用处.. |
details |
该标签有点意思,用于替代js中,元素收起展开功能。 最新ff都不支持……个人觉得,既然提供了该标签应该提供属性表示上下展开或者左右展开; |
mark |
高亮显示,当真语义化 |
progress |
屌丝们,可以告别gif图片了,也不用div模拟百分比了,与windows区域一致的进度条出现啦,异步文件上传更加完善! |
改良ol |
老夫就没有用过这个主。。。 |
…… |
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 :
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 :
Après avoir sélectionné l'image dans ff, soumettez-la, définissez un point d'arrêt et jetez un œil :
Le protagoniste du fichier apparaît, c'est lui, sortons ses attributs pour voir :
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 :
Chers téléspectateurs, je n'ai pas du tout cet attribut, donc tout est polyvalent. . .
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 ? ?
Interface FIleReader
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à.
Quatre méthodes de lecture de fichiers :
readAsBinaryString lit le fichier sous forme de code binaire - nous transmettons généralement les données au backend
;readAsText lit le fichier sous forme de texte - lit le contenu du texte
readAsURL lit le fichier sous forme de DataURL - généralement un petit fichier, une image ou du HTML
;l'abandon interrompt la lecture, car le fichier est trop volumineux et le temps d'attente est très long
Événement d'interface du lecteur de fichiers :
déclencheur d'interruption de lecture lors de l'abandon
une erreur se déclenche en cas d'échec de la lecture
onloadstart se déclenche lorsque la lecture commence
onprogress est en cours de chargement
le chargement est déclenché lorsque la lecture est réussie
onloadend est déclenché une fois la lecture terminée, quel que soit le succès ou l'échec
;Parler sans pratique ne suffit pas, faisons une petite expérience ici :
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.
拖放时候一定要记住,其中以下亦是重点:
1 拖放可使用DataTransfer传递数据,该对象是非常有用的,因为在拖动目标元素时,可能会经过其它元素,我们可以用此传递信息;
API:
dragstart 被拖放元素 开始拖放时
faites glisser 被拖放元素 拖放过程中
dragenter 拖放过程中鼠标经过的元素 被拖放元素开始进入本元素时
dragover 拖放过程中鼠标经过的元素 本元素内移动
drageleave 拖放过程中鼠标经过的元素 离开本元素
déposez 拖放的目标元素 拖动的元素放到了本元素中
dragend 拖放的对象 拖放结束
其实这里是有问题的,我并未去深入研究从开始拖动到经过各种元素会产生神马情况,这个可以作为二次学习时的重点研究对象。
结语
html5的文件和表单做的比较精致,个人感觉比布局新增的几个标签有用多了,明天开始学习canvas,虽然不懂,虽然见过,但是还是感觉很厉害的样子!