Maison  >  Article  >  interface Web  >  Détails récapitulatifs des balises communes HTML5

Détails récapitulatifs des balises communes HTML5

黄舟
黄舟original
2017-03-20 16:13:362292parcourir

1. Structure principale

header 页面头部,不同与
aside 边栏
nav 外部链接集合
section 章节或段落
article 类似文章、摘要或留言POST等形式的记录(一般搭配内嵌头部、尾部、底部结构使用)
hggroup 类似子标题,标题信息、可选标题、TAG标签这样的数据,还是英文更好理解一些,heading of a section
address 联系信息,一般用在article或body锚元素周围
footer 页脚

2. Tableau récapitulatif des balises d'éléments HTML 5

文档类型宣告
根元素元素 html
META元素 head、 title、base、link、meta、style
部件元素 body、section、nav、article、aside、h1、 h2、 h3、h4、 h5、 h6、hgroup、header、footer、address
分组内容元素 p、hr、br、pre、blockquote、ol、ul、li、dl、dt、dd、figure、figcaption、p
文本层次语义元素 a、em、strong、small、cite、q、dfn、abbr、time、code、var、samp、kbd、sub、sups、i、b、mark、ruby、rt、rp、bdo、span
编辑元素 ins、del
嵌入内容元素 img、iframe、embed、object、param、video、audio、source、canvasmap、area
表格元素 table、caption、colgroup、col、tbody、thread、tfoot、tr、td、th
表单元素 form、fieldset、legend、label、button、select、datalist、optgroup、option、textarea、keygen、output、progress、meter
互动元素 details、summary、command、menu
脚本元素 script、noscript

3. Attributs communs et gestionnaires d'événements des éléments HTML 5

4. Interprétation des balises d'éléments HTML5

Balise Type Signification Introduction
Balises de fichiers
Quantity Balise du fichier racine Informez le navigateur qu'il s'agit d'un fichier HTML
Balise META
Quantity commence fournit des informations générales sur le fichier
</td> <td>Quantity</td> <td>Titre</td> <td>Définir le titre du fichier, affiché en haut du navigateur</td> </tr> <tr> < ;link><td></td>o<td></td>La connexion aux ressources externes<td></td>doit porter la description de l'attribut rel<td></td> </tr> <tr>< meta><td></td>o<td></td> <td>Autres</td>Données META<td></td>Données META qui ne peuvent pas être décrites par le titre, la base, le lien, le style et les éléments de script</tr> <tr> <td> </td><style><td></td>Quantity<td><a href="http://www.php.cn/html5/html5-3-mip-normal.html" target="_blank">Informations de style de document intégrées</a></td> <td></td> </tr> <tr> <td>Marque du widget</td> <td></td> <td></td><body><td></td>Quantity</tr> <tr>Le corps du document démarre<td colspan="4"><strong>Conteneur de contenu du document</strong></td> </tr> <tr> <td> ></td>Quantity<td></td> <td>Navigation</td>Liens<td></td>Lien externe ou lien interne au document</tr> <tr> <td></td><article><td> </td>Quantity<td></td>Module Page<td></td>Enregistrements sous forme d'articles, de résumés ou de messages POST etc. </tr> <tr> <td></td><aside><td></td>Quantity<td><a href="http://www.php.cn/code/9303.html" target="_blank">Les modules isolés</a></td> sont généralement utilisés comme publicités dans la barre latérale, descriptions, <td>citations</td>, navigation, etc. La partie de confinement latérale est généralement moins couplée au texte principal</tr> <tr> <td></td><h1><td></td>Quantity<td></td>Balise de titre<td></td>De plus, il y a h2, h3, h4, h5, h6</tr> <tr> <td></td><hgroup><td></td>Quantity<td></td>Titre du groupe<td><a href="http://www.php.cn/wiki/231.html" target="_blank"> est utilisé lorsqu'un ensemble d'éléments tels que h1-h6 est utilisé pour distinguer le principal et les sous-titres ? ?</a></td> </tr> <tr> <td><header></td> <td>Quantity</td> <td>Description du groupe ou navigation du groupe </td> <td> peut également être appelé titre de l'en-tête </td> </tr> <tr> <td><footer></td> <td>Quantity</td> <td>Titre du pied de page</td> <td>La portée est liée à l'élément du widget le plus proche</td> </tr> <tr> <td><adresse></td> <td>Quantity</td> <td>Adresse ou coordonnées</td> <td> </td> </tr> <tr> <td><strong>Balises de contenu du groupe </strong></td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><p></td> <td>Quantity</td> <td> Marque de paragraphe </td> <td> </td> </tr> <tr> <td><hr></td> <td>o</td> <td>Ligne de séparation horizontale</td> <td> </td> </tr> <tr> <td><br></td> <td>o</td> <td>Saut de ligne</td> <td> </td> </tr> <tr> <td><pre class="brush:php;toolbar:false"></td> <td>Quantity</td> <td>Sous-blocs préformatés</td> <td> </td> </tr> <tr> <td><blockquote></td> <td>Quantity</td> <td> Bloquer le devis</td> <td> ></td> </tr><ul><tr> <td>Quantity</td> <td>Liste des projets</td> <td> </td> <td></td> </tr><li><tr> <td>Quantity</td> <td>Élément de la liste</td> <td> </td> <td></td> </tr><dl><tr> <td>Quantity</td> <td>Liste de définitions </td> <td> </td> <td></td> </tr><dt><tr> <td>Quantity</td> <td>Définir le nom</td> <td> </td> <td></td> </tr><dd><tr> <td>Quantity</td> <td>Description de la définition</td> <td> </td> <td></td> </tr><figure><tr> <td>Quantity</td> <td>Description du bloc de contenu du flux</td> <td>Utilisé en combinaison avec figcaption</td> <td></td> </tr><figcaption> ;<tr> <td>Quantity</td> <td>attribut de contenu de figure</td> <td> </td> <td></td> </tr><p><tr> <td>gree</td> <td>balise de positionnement</td> <td>Aucune Signification réelle </td> <td></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td></td> </tr> <tr>Balises sémantiques au niveau du texte <td></td> <td></td> <td><a></td> <td>Quantity</td> </tr>Balises de lien<tr> <td colspan="4"> <strong></strong> </td> </tr><em><tr> <td>Quantity</td> <td>Marque d'accentuation</td> <td> </td> <td></td> </tr><strong><tr> <td> ●</td> <td>Marque de soulignement</td> <td> </td> <td></td> </tr><small><tr> <td>Quantity</td> <td>Police réduite</td> <td> </td> <td></td> </tr><cite><tr> <td>Quantity</td> <td>marque italique</td> <td> </td> <td></td> </tr><q><tr> <td>Quantity</td> <td>Contenu des guillemets</td> <td>Le texte original formule le contenu, on ne sait pas comment pour le traduire encore</td> <td></td> </tr><dfn> <tr>Abréviation<td></td> <td></td><td></td><time><td></td>Quantity<tr>Date Heure<td></td> <td></td> <td></td><code><td></td>Quantity</tr> <tr>Code du programme<td></td> <td></td> <td></td><var> ;<td></td>Quantity</tr><tr><td>Variable</td><td></td> <td></td><td></td><samp></tr> <tr>Quantity <td></td>Exemple<td></td> <td></td> <td></td><kbd></tr> <tr>Quantity<td></td>Mot du clavier<td></td> <td><a href="http://www.php.cn/wiki/70.html" target="_blank"></a></td><sub><sups><td></td>Quantity</tr> <tr>Exposant/Indice<td></td> <td></td> <td></td><i><td></td>Quantity</tr> <tr>marque italique<td></td> <td></td> <td></td><b><td></td>Quantity</tr> <tr>Marque en gras<td></td> <td></td> <td></td><mark> ;<td></td>Quantity</tr><tr> Marquer ou surligner <td></td> <td></td><td></td><ruby><td></td>Quantity</tr> <tr>Marque d'annotation<td></td> <td> </td> <td></td><rt><td></td> ●</tr> <tr>le sous-élément rubis <td></td> est utilisé en combinaison avec rubis, par exemple : <ruby>天<rt> ;rp><td></td>Quantity<td></td>Le sous-élément ruby ​​<td></td> est généralement utilisé comme élément rt </tr> commentaire <tr> en utilisant <td></td> <td></td><bdo><td></td>Quantity<td></td> </tr> <tr> <td></td> <td></td><span><td></td>Quantity<td></td>Balise personnalisée</tr> <tr> <td></td> <td></td> <td>Marque de modification</td> <td><a href="http://www.php.cn/code/8105.html" target="_blank"></a></td><ins></tr> <tr>Quantity<td></td> <td></td> <td></td> <td></td><del></tr> <tr>Quantity<td></td> <td></td> <td></td> <td></td> </tr>Tag de contenu intégré <tr> <td colspan="4"><strong></strong></td><img></tr> <tr>Quantity<td></td> <td>Image</td> Balise <td></td> <td> </td> </tr> <tr><iframe><td></td>Quantity<td></td> <td>Cadre</td>Tag<td></td> </tr> <tr> <td colspan="4"><strong><embed></strong></td>Quantity</tr> <tr>Intégrer la balise<td></td> <td></td> <td><a href="http://www.php.cn/css/css-rwd-images.html" target="_blank"><objet></a></td>Quantity <td></td> </tr>Objet<tr>Balises <td> </td> </tr> <tr> <td><param></td> <td>weight</td> <td>Balises de paramètres</td> <td> </td> </tr> <audio><tr> <td>Quantity</td> <td></td>Audio<td>balise<a href="http://www.php.cn/code/6707.html" target="_blank"></a> </td> <td></td> </tr><source><tr> <td>Quantity</td> <td>Balise source</td> <td> <a href="http://www.php.cn/code/6093.html" target="_blank"></a> </td> <td><canvas></td> </tr>Quantity<tr> <td>Balise de cartographie</td> <td> </td> <td></td> <td><carte></td> </tr>Quantity<tr> <td></td>Carte<td>Marc</td> <td> </td> <td></td> </tr><area><tr> <td>Quantity</td> <td>Marqueur de zone</td> <td> <a href="http://www.php.cn/code/7891.html" target="_blank"></a> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td></td> <td></td>Marque de table</tr> <tr> <td></td> <td><table> ; </td><td>Quantity</td><td>Balise du tableau</td></tr>Définir les paramètres du tableau<tr><td colspan="4"><strong></strong><caption></td> </tr> ●<tr> <td>Titre du tableau</td> <td>Réalisé en une douzaine de colonnes pour remplir le titre du tableau</td> <td></td> <td><colgroup></td> </tr>Quantity<tr> <td> </td> <td> </td> <td></td> <td><col></td> </tr>Quantity<tr> <td> </td> <td> </td> <td></td> <td><tbody></td> </tr>Quantity<tr> <td> </td> <td> </td> <td></td> <td><thread></td> </tr>Quantity<tr> <td> </td> <td> </td> <td></td> <td><tfoot> > </td> </tr> <tr> <td><tr></td> <td>Quantity</td> <td>Colonnes du tableau</td> <td>Définir les colonnes du tableau</td> </tr> <th><tr> <td>Quantity</td> <td> L'en-tête du tableau</td> <td> est égal à <TD>, mais la police du texte à l'intérieur sera plus grasse</td> <td></td> </tr> <tr>Balise de formulaire<td></td> <td> </td> <td><form></td> <td>Quantity</td> </tr>La balise de formulaire<tr> <td> détermine le mode de fonctionnement du formulaire</td> <td></td> <td>< fieldset></td> <td>lég</td> </tr> <légende><tr> <td>greep</td> <td> </td> <td> </td> <td></td> </tr> <input><tr><td colspan="4">Quantity<strong></strong>Entrer l'étiquette</td></tr> <tr> <td></td> <td><label></td> <td>Quantity</td> <td> </td> </tr> <tr> <td></td> <td><bouton></td> <td>Quantity</td> <td></td>Bouton</tr> <tr> <td> </td> <td></td> <td>< ;select></td> <td>Quantity</td> </tr>Sélectionner la marque<tr> <td> </td> <td></td> <td><datalist></td> <td>lég</td> </tr> <tr> <td> </td> <td></td> <td><optgroup></td> <td>gree</td> < ></tr><tr><textarea><td></td>Quantity<td></td> <td><a href="http://www.php.cn/code/5991.html" target="_blank"> </a></td> <td></td>< 🎜></tr><tr><sortie><td></td>Quantity<td></td> <td></td> <td></td> </tr> <tr><progrès> ;<td> </td>Quantity<td></td> <td></td> <td></td></tr><tr><mètre><td></td>Quantity<td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td> </td>Interactif éléments<td></td> <td></td> <td></td><détails></tr> <tr>Quantity<td></td> <td></td> <td></td> <td></td><résumé></tr> <tr>Quantity<td></td> <td></td> <td></td> <td></td><commande></tr> <tr>Quantity <td></td> <td></td> <td></td> <td></td><menu> > </tr> <tr> <td></td> <td>Autres balises</td> <td></td> <td></td><script></tr> <tr>Quantity<td></td> <td></td> <td></td> <td></td><noscript> </tr> <tr>Quantity<td colspan="4"><p> <strong></strong> </p></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td>Remarques : <td></td> <td> 1. ● indique que la marque est une marque de confinement et doit se terminer par la marque </mark> ;. </td> <td>2.o signifie que la balise est une balise vide et ne nécessite pas de balise de fin. </td> </tr> </tbody></table><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p></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="Partage d'exemples de code html5 WebWorkers pour empêcher le navigateur de suspendre l'animation" href="http://m.php.cn/fr/faq/357701.html">Partage d'exemples de code html5 WebWorkers pour empêcher le navigateur de suspendre l'animation</a></span><span>Article suivant:<a class="dBlack" title="Partage d'exemples de code html5 WebWorkers pour empêcher le navigateur de suspendre l'animation" href="http://m.php.cn/fr/faq/357705.html">Partage d'exemples de code html5 WebWorkers pour empêcher le navigateur de suspendre l'animation</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><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348281.html" title="Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes" class="aBlack">Le plug-in de défilement plein écran AlloyTouch crée une page H5 fluide en 30 secondes</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348372.html" title="Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)" class="aBlack">Combat réel HTML5 et analyse des événements tactiles (touchstart, touchmove et touchend)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348373.html" title="Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9" class="aBlack">Explication détaillée des exemples de dessin d'images dans le canevas HTML5 9</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348374.html" title="Expressions régulières et nouveaux éléments HTML5" class="aBlack">Expressions régulières et nouveaux éléments HTML5</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348469.html" title="Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur" class="aBlack">Comment combiner NodeJS et HTML5 pour glisser-déposer plusieurs fichiers à télécharger sur le serveur</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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>