Nachdem Leser so viele HTML -Tags gelernt haben, die die Anzeige von Webseiten steuern, können die Leser zunächst reine Artikelseiten erstellen. Dieser Abschnitt lernt die Listenelemente in HTML. Das Listenformular berücksichtigt einen relativ großen Teil des Website -Designs, und die Anzeigeinformationen sind sehr ordentlich und intuitiv, was für Benutzer leicht zu verstehen ist. Die fortgeschrittene Rolle von Listenelementen wird im nachfolgenden Lernen im CSS -Stil ausgiebig verwendet.
4.4.1 Strukturkomposition der ListeDas Listenelement von HTML ist eine Struktur, die durch ein Listen -Tag eingeschlossen ist, und die enthaltenen Listenelemente bestehen aus <li> </li>. Die spezifische Struktur ist in Abbildung 4.17 dargestellt.
4.4.2 Erstellen einer ungeordneten ListeWie der Name schon sagt, handelt es sich bei einer ungeordneten Liste um ein Listenformular, in dem die Listenelemente in der Listenstruktur keine Bestellung haben. Die meisten Webanwendungen verwenden ungeordnete Listen, und ihre Listen -Tags sind <ul> </ul>. Die Schreibmethode lautet wie folgt:
<ul>
<li> Listelement 1 </li>
<li> Listelement 2 </li>
<li> LISTE ITEM 3 </li>
<li> Listelement 4 </li>
<li> Listelement 5 </li>
</ul>
4.4.3 Erstellen Sie eine bestellte ListeWie der Name schon sagt, bedeutet eine geordnete Liste, dass die Listenelemente in der Listenstruktur eine Abfolge von Listen haben. Von oben nach unten können verschiedene Sequenznummern wie 1, 2, 3 oder A, B, C usw. vorhanden sein. Erstellen Sie im D:/ Web/ Verzeichnis namens UL_OL.HTM eine Web -Datei und schreiben Sie den Code wie in Code 4.17 gezeigt.
Code 4.17 Listeneinstellungen: ul_ol.htm
<html>
<kopf>
<title> Listeinstellungen </title>
</head>
<body>
<Schriftgröße = 5>
Web -Rezeptentechnologie
<ul>
<li> html </li>
<li> CSS </li>
<li> JavaScript </li>
<li> Flash </li>
</ul>
Lernen des Webhintergrunds
<ol>
<li> ASP </li>
<li> ASP.NET </li>
<li> Php </li>
<li> cgi </li>
<li> Ruby </li>
<li> Python </li>
</ol>
</font>
</body>
</html>
Geben Sie http: //localhost/ul_ol.htm in die Browser -Adressleiste ein, und der Browsing -Effekt ist in Abbildung 4.18 dargestellt.
Abbildung 4.18 Einstellungen der Liste