Maison > Article > interface Web > Notes d'étude HTML 2
Notes d'étude HTML 2
- 不言original
- 2018-04-19 14:32:031461parcourir
Cet article présente les notes d'étude HTML 2, qui ont une certaine valeur de référence. Je les partage avec vous maintenant. Les amis dans le besoin peuvent s'y référer
1 , tableau43c4707103c6cc3650c2aeb71d2b1e8d
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
a34de1251f0d9fe1e645927f19a896e8......fd273fcf5bcad3dfdad3c41bd81ad3e5définir des lignes, b6c5a531a458a2e790c1fd6421739d1c......b90dd5946f0946207856a8a37f441edfdéfinir des colonnes
L'en-tête représente :
<tr> <th>heading</th> </tr>
Si vous souhaitez représenter une ligne vide, vous pouvez la remplir avec un espace réservé space.
2. Liste
Premier type : Aucune Séquence Liste - ff6d136ddc5fdfeffaf53ff6ee95f185, utilisez des points gras
<ul> <li>Coffee</li> <li>Milk</li> </ul>
ou utilisez 162a8c4b77d546c61ae9ca306cde4ebb... utilisé des points creux.
Le deuxième type : liste ordonnée - c34106e0b4e09414b63b2ea253ff83d6, utilisez des balises numériques
<ol> <li>Coffee</li> <li>Milk</li> </ol>
Ou utilisez 1f440b6628a2ecdeba8d7a6562e2d7a9... pour indiquer que le nombre commence à 50.
Troisième type : Liste personnalisée - 5c69336ffbc20d23018e48b396cdd57a
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
Explication :
5c69336ffbc20d23018e48b396cdd57a indique le début de la liste
73de882deff7a050a357292d0a1fca94 représente l'élément de liste
67bc4f89d416b0b8236eaa5f43dee742 représente la définition de l'élément de liste
Notez que les paragraphes, les sauts de ligne, les images, les liens, d'autres listes, etc. peuvent être utilisés à l'intérieur des éléments de liste.
3. Classe HTML
classe le HTML et peut classer un élément. définit le style CSS.
Définissez le même style pour la même classe.
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<p class="cities">
<h2>London</h2>
<p>
London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
</p>
</body>
</html>
e388a4556c0f65e1904146cc1a846bee est un élément de niveau bloc utilisé pour définir la même classe.
45a2772a6b6107b401db3c9b82c049c2 est un élément en ligne.
<html>
<head>
<style>
span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>4. Mise en page du site Web HTML
(1) Utilisez e388a4556c0f65e1904146cc1a846bee
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>en utilisant 4786dff7ee6470928194244baf979f1e...94b3e26ee717c64999d7867364b1b4a3
(2) Le nouveaux éléments sémantiques fournis par HTML5
1aa9e5d373740b65a0cc8f0a02150c53 définissent l'en-tête du document ou de la section
c787b9a589a3ece771e842a6176cf8e9 Définir un conteneur pour les liens de navigation
2f8332c8dcfd5c7dec030a070bf652c3 >23c3de37f2f9ebcb477c4a90aac6fffd Définir un article autonome indépendant
15221ee8cba27fc1d7a26c47a001eb9b je ne sais pas de quoi il s'agit)
c37f8231a37e88427e62669260f0074d Définir le pied de page du document ou de la section
4646b701c1f738fb936aa20967492bb3 Définir des détails supplémentaires
631fb227578dfffda61e1fa4d04b7d25 Définir le titre de l'élément de détails
5. Cadres
En utilisant des cadres, vous pouvez afficher plus d'une page dans la même fenêtre du navigateur. Chaque document HTML devient un cadre et chaque cadre est indépendant des autres cadres.
(1) Balise de structure de cadre f900b4fc197b16ab214eecf015bb6bd2
Chaque f900b4fc197b16ab214eecf015bb6bd2 Lignes et colonnes
La valeur des lignes/colonnes précise la zone de l'écran occupée par chaque ligne ou colonne
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
(2) Autres
Généralement, un cadre a une bordure visible, et l'utilisateur peut faire glisser la bordure pour modifier sa taille. Si vous souhaitez l'éviter, vous pouvez ajouter noresize="noresize" à 04a0d55efbbfd646a993fbc01f262c57.
Vous ne pouvez pas utiliser la balise 6c04bd5ca3fcae76e30b72ad730ca86d et la balise f900b4fc197b16ab214eecf015bb6bd2 Cependant, lors de l'ajout d'une balise 37f861bd36cef5b6406eba87d20a5bab contenant un morceau de texte, le texte doit être imbriqué dans la balise 6c04bd5ca3fcae76e30b72ad730ca86d L'attribut d'ancrage de nom peut être utilisé dans
<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </frameset> </html>
d5ba1642137c3f32f4f4493ae923989c Utilisé pour afficher des pages Web dans des pages Web
Utilisation : 108b34cd515b899952f8b14f04a78142065276f04003e4622c4fe6b64f465b88
iframe可用作链接的目标（target），该链接的target属性必须引用iframe的name属性。
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
注意，由于链接的目标匹配iframe的名称，所以链接会在iframe中打开。
相关推荐：
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!