Notes d'étude HTML5 (2) - introduction détaillée aux éléments, attributs et formatage-Tutoriel H5-php.cn

Élément HTML . Un élément HTML sans contenu est appelé un élément vide. Les éléments vides sont fermés dans la balise d'ouverture.

est un élément vide sans balise de fermeture (la définition de la balise
s'enroule).

En XHTML, XML

et les futures versions de HTML, tous les éléments doivent être fermés.

开始(开放)标签	元素内容	结束(闭合)标签
	this is my web page

L'ajout d'une barre oblique dans la balise d'ouverture, telle que
, est la bonne façon de fermer un élément vide et est acceptée par HTML, XHTML et XML.

Même si
est valable dans tous les navigateurs, l'utilisation de
est en fait une garantie à plus long terme.

Syntaxe de l'élément HTML

Le contenu de l'élément est le contenu entre la balise de début et la fin tag Les éléments vides sont fermés dans la balise d'ouverture

La plupart des éléments HTML peuvent avoir l'attribut

Éléments HTML imbriqués

La plupart des éléments HTML peuvent être imbriqués

Attributs HTML

<p>Hello world, <a>找度娘</a></p>

Copier après la connexion

1. Les balises peuvent avoir des attributs pour fournir plus d'informations sur les éléments 2. Les attributs apparaissent sous la forme de paires clé-valeur, telles que : href = "www. cnblogs.www /winsoncheung" 3. Attributs de balise couramment utilisés :

　:target spécifie où ouvrir la connexion

4. Attributs communs :

< tr style="margin-left: 30px">< td style="margin-left: 30px">Spécifie des informations supplémentaires pour l'élément

class	Spécifiez le nom de classe de l'élément
id	Spécifie l'ID unique de l'élément
style	Spécifie le style de l'élément
title

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <!--id规定元素唯一ID-->
    <title id="1223">基础</title>
    <!--style规定元素的样式-->
    <style type="text/css"></style></head><body bgcolor="#5f9ea0">
    <h1 align="center">标题1</h1>
    <a href="index02.html" target="_blank">打开本地</a>
    <!--class规定元素类名-->
    <h2 class="h2ID">标题2</h2></body></html>

Copier après la connexion

HTML格式化

文本格式化标签:

标签	描述
	定义粗体文本。
	定义大号字。
	定义着重文字。
	定义斜体字。
all>	定义小号字。
	定义加重语气。
	定义下标字。
	定义上标字。
	定义插入字。
	定义删除字。
	不赞成使用。使用 ~~代替。~~
	不赞成使用。使用 ~~代替。~~
	不赞成使用。使用样式（style）代替。

“计算机输出”标签:

标签	描述
	定义计算机代码。
	定义键盘码。
	定义计算机代码样本。
	定义打字机代码。
	定义变量。
</td><td style="margin-left: 30px">定义预格式文本。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><<a href="//m.sbmmt.com/wiki/1059.html" target="_blank">list</a>ing></td><td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><plaintext></td><td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><xmp></td><td style="margin-left: 30px">不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。</td></tr></tbody></table><p style="margin-left: 30px; text-align: left;"><a href="//m.sbmmt.com/wiki/231.html" target="_blank">引用</a>、引用和术语定义</p><table style="margin-left: 30px; height: 261px; width: 331px"><tbody style="margin-left: 30px"><tr style="margin-left: 30px" class="firstRow"><th style="margin-left: 30px">标签</th><th style="margin-left: 30px">描述</th></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><abbr></td><td style="margin-left: 30px">定义缩写。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><acronym></td><td style="margin-left: 30px">定义首字母缩写。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><address></td><td style="margin-left: 30px">定义地址。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><bdo></td><td style="margin-left: 30px">定义文字方向。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><blockquote></td><td style="margin-left: 30px">定义长的引用。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><q></td><td style="margin-left: 30px">定义短的引用语。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><cite></td><td style="margin-left: 30px">定义引用、引证。</td></tr><tr style="margin-left: 30px"><td style="margin-left: 30px"><dfn></td><td style="margin-left: 30px">定义一个定义项目。</td></tr></tbody></table><p style="margin-left: 30px; text-align: left;"> 代码示例:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title id="1223">格式化</title></head><body> <b>My name is Winson</b> <br/> <big>Welcome to my blog~</big> <br/> <i>Hello, visitor!</i> <br/> <small>我很小, 你看不见看不见</small> <br/> <strong>太显眼了</strong> <br/> 大家好<sub>欢迎</sub>来到 <br/> 大家好<sup>欢迎</sup>来到 <br/> <ins>Come on! girls!</ins> <br/> <del>Hei! girl!</del></body></html> Copier après la connexion 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! Étiquettes associées：元素属性格式化 source：php.cn Article précédent：Notes d'étude HTML5 (1) - Comprendre HTML5 Article suivant：Notes d'étude HTML5 (3) - Explication détaillée des styles HTML5, des connexions et des codes de table Déclaration de ce site Web 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 Derniers articles par auteur Matériel vidéo sur la création de votre propre framework PHP à partir de zéro 2023-03-15 16:54:01 Exemple d'analyse de la façon dont PHPMailer utilise la boîte aux lettres QQ pour compléter la fonction d'envoi d'e-mails 2023-03-15 12:26:02 Introduction à la façon de recevoir des e-mails en IMAP en php 2023-03-14 18:58:01 Exemple de mise en œuvre rapide de la déduplication de tableau en PHP 2023-03-14 11:30:01 Résumé de l'utilisation de tous les attributs de la balise en html 1970-01-01 08:00:00 Résumé des connaissances de base de PHP (nécessaire aux débutants pour débuter) 2023-03-16 15:20:01 Introduction à l'utilisation de typeof en JavaScript 1970-01-01 08:00:00 Introduction à l'utilisation de la méthode confirm() en JavaScript 1970-01-01 08:00:00 Une introduction détaillée à l'attribut HTML5 Placeholder 1970-01-01 08:00:00 Comment implémenter la sélection unique, la sélection multiple et la sélection inversée dans les formulaires dans ReactJS 1970-01-01 08:00:00 Derniers numéros Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ... Depuis 2024-04-06 20:45:26 0 2 386 Impossible d'obtenir l'élément d'entrée du site Web J'essaie donc d'obtenir un élément d'entrée de Twitter mais lorsque je l'exécute, cela con... Depuis 2024-04-06 18:59:57 0 1 442 Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany... Depuis 2024-04-06 17:40:41 0 2 410 Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau J'ai un formulaire en plusieurs étapes et lorsque j'essaie de le soumettre, cette erreur s... Depuis 2024-04-06 16:25:39 0 1 346 Comparez Imagick, Adobe Photoshop et Windows - Détecter la résolution (pixels par centimètre ou pixels par pouce) Ce n'est pas une question mais une tentative d'améliorer ma compréhension de la façon dont... Depuis 2024-04-06 16:01:27 0 1 397 Rubriques connexes Plus> Comment trouver la valeur maximale et minimale d'un élément de tableau en Java Introduction aux attributs des balises d'article Comment récupérer des données après le formatage Comment résoudre le problème selon lequel le code js ne peut pas s'exécuter après le formatage méthode de formatage HTML point de symbole spécial Comment récupérer des fichiers supprimés accidentellement Vérifier l'espace disque sous Linux Recommandations populaires qu'est-ce que h5 Comment créer une page h5 si vous ne comprenez pas le code ? Plateforme de production de pages H5 recommandée Quelles sont les nouvelles fonctionnalités de html5 Qu'est-ce que la production de pages h5 Quelle est la différence entre le programme h5 et le mini ? Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1416677 Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine 4257192 Tutoriel vidéo JAVA pour débutants 2474841 Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 503273 Tutoriel d'introduction PHP base zéro 844023 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1416677 temps d'étude Tutoriel vidéo JAVA pour débutants 2474841 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 503273 temps d'étude Introduction rapide au développement web front-end 215252 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 876598 temps d'étude [Web front-end] Démarrage rapide de Node.js 6333 temps d'étude Collection complète de cours full-stack de développement Web étranger 4958 temps d'étude Aller au langage pratique GraphQL 4162 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 632 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 21214 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG) [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG) [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS) [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG) [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG) [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS) [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet À propos de nous Clause de non-responsabilité Sitemap Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！