Résumé des points de connaissances HTML

L'éditeur suivant vous apportera un résumé des points de connaissances HTML front-end (recommandé). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Venez jeter un œil avec l'éditeur

1 Présentation du HTML

Le langage de balisage de texte htyper est un langage de balisage hypertexte

Hypertexte : signifie que la page peut contenir des images, des liens et même des éléments non textuels tels que de la musique et des programmes.

Langage de balisage : un langage composé de balises (tags).

Page Web == Document HTML, analysé par le navigateur, utilisé pour l'affichage

Page Web statique : statique. ressources , telles que xxx.html

Page Web dynamique : le code html est généré dynamiquement par un certain langage de développement en fonction des demandes des utilisateurs

Ce qui suit est l'arborescence du fichier html

Le concept de balise :

• Il est composé d'une paire de mots entourés de crochets angulaires . Par exemple : *Toutes les balises ne peuvent pas commencer par un chiffre

• Les balises sont recommandées.

• Les balises sont divisées en deux parties : la balise de début et la balise de fin . La partie entre les deux balises est appelée le corps de la balise

• Certaines fonctions de balise sont relativement. simple. Utilisez simplement une seule balise. Ce type de balise est appelé self Closure et label. Par exemple :
>• Les étiquettes peuvent être imbriquées. Mais elles ne peuvent pas être imbriquées de manière croisée.

• Apparaissent généralement sous la forme de paires clé-valeur. Par exemple name="alex"

•Les attributs ne peuvent apparaître que dans les balises d'ouverture ou de fermeture.

• Les noms d'attribut sont tous en minuscules. *Les valeurs d'attribut doivent être placées entre guillemets doubles ou simples. Par exemple, name="alex"•Si la valeur de l'attribut est exactement la même que le nom de l'attribut, écrivez simplement. le nom de l'attribut directement. Par exemple, en lecture seule

2. Introduction aux balises head principales

•La composition du balise méta : la balise méta a deux attributs, ce sont l'attribut http-equiv et l'attribut name. Différents attributs ont des valeurs de paramètres différentes. Les valeurs des paramètres réalisent différentes fonctions de page Web.

1 L'attribut name est principalement utilisé pour décrire les pages Web, et la valeur de l'attribut correspondante est le contenu. Le contenu du contenu est principalement utilisé par les robots des moteurs de recherche pour trouver des informations et classer les informations.

2 http-equiv, comme son nom l'indique, est équivalent à la fonction d'en-tête de fichier de http. Il peut renvoyer des informations utiles au navigateur. Informations permettant d'afficher le contenu de la page Web correctement et avec précision. La valeur de l'attribut correspondant est le contenu. Le contenu du contenu est en fait la valeur variable de chaque paramètre.

//(Notez les guillemets à la fin, respectivement devant des secondes et la fin de l'URL)

•

•

3. Balise corporelle

Balises de base :

 : La plage de valeurs de n est de 1 à 6 ; utilisée pour représenter le titre.<. ;p> : balise de paragraphe. Le contenu encapsulé est également entouré d'une ligne d'espace vide entre le contenu supérieur et inférieur

 : balise en gras. : pour ajouter une ligne centrale au texte.

 : le texte devient italique.

^{et  _{: exposant et indice.}}

 : saut de ligne.

---

 : ligne horizontale

Bloquer -balises de niveau et balises en ligne

Balises de niveau bloc :

Balises en ligne : _{^{<span></p> <p></p> <p>Caractéristiques du bloc (bloc) element</p> <p></p> <p>① commence toujours sur une nouvelle ligne </p> <p>② La hauteur, la hauteur de la ligne, les marges et le remplissage peuvent tous être contrôlés <strong><span style="color:#ff0000">③ Le la largeur par défaut est celle de son conteneur 100 % sauf si une largeur est définie. </span><p>④ 它可以容纳内联元素和其他块元素</p> <p><strong><span style="color:#ff0000">inline元素的特点</span></strong></p> <p>① 和其他元素都在一行上；</p> <p>② 高，行高及外边距和内边距不可改变；</p> <p>③ 宽度就是它的文字或图片的宽度，不可改变</p> <p>④ 内联元素只能容纳文本或者其他内联元素</p> <p>对行内元素，需要注意如下</p> <p>设置宽度width 无效。</p> <p>设置高度height 无效，可以通过line-height来设置。</p> <p>设置margin 只有左右margin有效，上下无效。</p> <p>设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。</p> <p><strong><span style="color:#ff0000">特殊字符：</span></strong></p> <p>< >；"；©®</p> <p>图形标签<img>：</p> <p>src: 要显示图片的路径.</p> <p>alt: 图片没有加载成功时的提示.</p> <p>title: 鼠标悬浮时的提示信息.</p> <p>width: 图片的宽</p> <p>height:图片的高 (宽高两个属性只用一个会自动等比缩放.)</p> <p>超链接标签<a>:　</p> <p>href:要连接的资源路径 格式如下: href="http://www.jb51.net"</p> <p>target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.</p> <p>name: 定义一个页面的书签.</p> <p>用于跳转 href : #书签名称.</p> <p><strong>列表标签:</strong></p> <p><ul>: 无序列表</p> <p><ol>:有序列表</p> <p>      <li>:列表中的每一项.</p> <p><dl> 定义列表</p> <p>      <dt> 列表标题</p> <p>      <dd> 列表项</p> <p>表格标签<table>：</p> <p><br>border: 表格边框.</p> <p>cellpadding: 内边距</p> <p>cellspacing: 外边距.</p> <p>width: 像素 百分比.（最好通过css来设置长宽）</p> <p><tr>: table row</p> <p>         <th>: table head cell</p> <p>         <td>: table data cell</p> <p>rowspan: 单元格竖跨多少行</p> <p>colspan:  单元格横跨多少列（即合并单元格）</p> <p><th>: table header <tbody>(不常用): 为表格进行分区</p> <p>表单标签<form></p> <p><br>表单用于向服务器传输数据。</p> <p>表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。</p> <p>表单还可以包含textarea、select、fieldset和 label 元素。</p> <p><strong><span style="color:#ff00ff">1、表单的属性</span></strong></p> <p>HTML 表单用于接收不同类型的用户输入，用户提交表单时向服务器传输数据，从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.</p> <p>action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如http://www.php.cn/</p> <p>method: 表单的提交方式 post/get 默认取值 就是 get（信封）</p> <p>get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.</p> <p>post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.</p> <p>get/post是常见的两种请求方式.</p> <p><strong><span style="color:#ff00ff">2.表单元素</span></strong></p> <p><input>     <br>type:     <br>text 文本输入框</p> <p>password 密码输入框</p> <p>radio 单选框</p> <p>checkbox 多选框 </p> <p>submit 提交按钮           </p> <p>button 按钮(需要配合js使用.) button和submit的区别？</p> <p>file 提交文件：form表单需要加上属性enctype="multipart/form-data"</p> <p class="codeText"><br></p> <p class="codeHead"><span class="lantxt">XML/HTML Code</span><span style="CURSOR: pointer" class="copyCodeText">复制内容到剪贴板</span></p> <ol class="dp-xml list-paddingleft-2"> <li><p>def index(request):   </p></li> <li><p>    print request.POST   </p></li> <li><p>    print request.GET   </p></li> <li><p>    print request.FILES   </p></li> <li><p>    for item in request.FILES:   </p></li> <li><p>        <span class="attribute">fileObj</span> = <span class="attribute-value">request</span>.FILES.get(item)   </p></li> <li><p> <span class="attribute">f</span> = <span class="attribute-value">open</span>(fileObj.name, 'wb') </p></li> <li><p> <span class="attribute">iter_file</span> = <span class="attribute-value">fileObj</span>.chunks() </p></li> <li><p> pour la ligne dans iter_file : </p></li> <li><p> f.write(line) </p></li> <li><p> f.close() </p></li> <li><p> return HttpResponse('ok') </p></li> </ol> <p>nom : formulaire La clé de l'élément soumis. Notez la différence avec l'attribut id : l'attribut name est le nom utilisé lors de la communication avec le serveur et l'attribut id est le nom utilisé par le navigateur. Cet attribut est principalement destiné à la commodité de la programmation client. , et en </p> <p>Utilisé en CSS et javascript. </p> <p>value : la valeur de l'élément de soumission du formulaire. Pour différents types d'entrée, l'utilisation de l'attribut value est également différente : </p> <p>type="button", "reset", "submit" - défini sur le bouton Le texte affiché</p> <p>type="text", "password", "hidden" - définit la valeur initiale du champ de saisie</p> <p>type="checkbox", "radio ", "image" - Définir la valeur associée à l'entrée </p> <p>cochée : la radio et la case à cocher sont cochées par défaut </p> <p>lecture seule : lecture seule. texte et mot de passe</p> <p>désactivés : fonctionne pour toutes les entrées utilisées. </p> <p><select> Attributs de l'étiquette de sélection déroulante : </p> <p>nom : la clé de l'élément de soumission du formulaire </p> <p>taille : le numéro. d'options </p> <p>multiple : multiple</p> <p><option> Attributs de chaque élément sélectionné dans la liste déroulante : valeur : La valeur de l'élément de soumission du formulaire sélectionné : sélectionné La sélection déroulante. est sélectionné par défaut </p> <p><optgroup> Ajouter des groupes pour chaque élément </p> <p><textarea> Nom de la zone de texte : la clé de l'élément de soumission du formulaire. Cols : le nombre de colonnes de la zone de texte. par défaut de lignes : combien de lignes la zone de texte contient par défaut </p> <p><label></p> <p>  <label for="www">Name</label><br>  <input id="www" type="text"></p> <p><fieldset></p> <p><fieldset><br> <legend>Connexion</legend><br> < input type="text"><br></fieldset></p> <p>L'article ci-dessus Le résumé des points de connaissances HTML front-end (recommandé) est tout le contenu partagé par l'éditeur, j'espère qu'il pourra. donnez-vous une référence et j'espère que vous soutiendrez Script Home. </p></strong></p><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="Comment ajouter des bordures arrondies aux éléments div" href="https://m.php.cn/fr/faq/356044.html">Comment ajouter des bordures arrondies aux éléments div</a></span><span>Article suivant：<a class="dBlack" title="Comment ajouter des bordures arrondies aux éléments div" href="https://m.php.cn/fr/faq/356063.html">Comment ajouter des bordures arrondies aux éléments div</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://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="https://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et href</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</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><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p></div><div class="footermid"><a href="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>}}