Heim  >  Artikel  >  Web-Frontend  >  Analyse erfahrener HTML-Schreibstile und Gründe für die Erstellung von HTML/XHTML-Webseiten

Analyse erfahrener HTML-Schreibstile und Gründe für die Erstellung von HTML/XHTML-Webseiten

WBOY
WBOYOriginal
2016-05-16 16:42:001018Durchsuche

1. Navigation: Ungeordnete Liste im Vergleich zu anderen Tag-Elementen
Analyse erfahrener HTML-Schreibstile und Gründe für die Erstellung von HTML/XHTML-Webseiten
Der Grund für die Verwendung der am häufigsten verwendeten „ungeordneten Liste“ zum Schreiben der Navigation ist Offensichtlich handelt es sich um eine Liste von Links, was allein schon Grund genug ist, die Bezeichnung „Liste“ zu wählen. Der Standardstil der Liste muss jedoch entfernt werden, um sie aussagekräftiger zu machen.
Ein weiterer Vorteil übersteigt möglicherweise Ihre Vorstellungskraft: Sie erstellen eine Liste und fügen einen Link hinzu, und Sie können CSS verwenden, um eine Reihe von Elementen in der Liste zu steuern und zu definieren.



2. Pfad (Breadcrumbs): p Absatz-Tag zum Listenlisten-Tag
Analyse erfahrener HTML-Schreibstile und Gründe für die Erstellung von HTML/XHTML-Webseiten

Wir können dieses Problem gemeinsam besprechen. Wenn Sie andere bessere Möglichkeiten haben, lassen Sie es uns bitte wissen. Persönlich bevorzuge ich das Schreiben von Pfaden (Breadcrumbs) mit Code wie dem folgenden. (Das >>-Symbol verwende ich allerdings nicht oft).

<p id="breadcrumbs"><a href="#">首页</a> » <a href="#">关于我们</a> </p>

Der Website-Pfad (Breadcrumbs) weist auf einer bestimmten Seite eine hierarchische Beziehung auf. Logischerweise sollte die Liste verschachtelt sein, um die hierarchische Beziehung anzuzeigen. Wie denken Sie darüber, wenn Ihre Liste nur ein Element enthält? Was für eine Situation? Ich persönlich bin der Meinung, dass der Webseitenpfad (Breadcrumbs) in einer Zeile angezeigt werden sollte.

3. Schaltfläche versus Eingabe
Ich kann mich nicht erinnern, wann ich den Eingabetyp „submit“ verwendet habe, aber ich habe aus zwei Gründen schon vor langer Zeit damit aufgehört Sie müssen type="submit" für das Button-Element eingeben. Der Botton ist im Code leicht zu identifizieren und einfach mit CSS zu definieren (nicht alle älteren Browser unterstützen dieses Element-Tag-Attribut). Und es ermöglicht uns auch, andere Tag-Elemente darin zu schreiben und so unsere Möglichkeiten für seine Plastizität zu erweitern.

<button type="submit">Submit Form</button>

4. Hinterlassen Sie eine Nachricht: geordnete Liste (ol) vs. ungeordnete Liste (ul)
Analyse erfahrener HTML-Schreibstile und Gründe für die Erstellung von HTML/XHTML-Webseiten02
Liste ist wirklich großartig! Es gibt drei verschiedene Typen (geordnete, ungeordnete und definierte Liste) und jeder hat seinen eigenen Zweck. Vielleicht sind Sie verwirrt darüber, wann Sie eine geordnete Liste (ol) und wann eine ungeordnete Liste (ul) verwenden sollen, weil sie sinnvoll sind, wenn sie verwendet werden. Die Botschaften ähneln ein wenig den Beispielen im Lehrbuch, die ordentlich in chronologischer Reihenfolge angeordnet sind und auf natürliche Weise nach oben sortiert werden. Jeder Kommentar entspricht einer festen Zeit, daher sollte die Kommentarstruktur eine geordnete Liste (ol) verwenden.

<ol>
	<li>
	<ul>
	<li><img src="path-to-gravatar.gif" alt="Author's name"></li>
	<li><a href="url-to-authors-homepage.html">Author's name</a></li>

	<li>posted on date-goes-here</li>
	</ul>
	<div>Comment text goes here...</div>
	</li>
</ol>

5. label/input: div Für andere Label-Elemente
Analyse erfahrener HTML-Schreibstile und Gründe für die Erstellung von HTML/XHTML-Webseiten03
, legen Sie die übergeordnete Struktur außerhalb von label/input fest am besten? Was ist eine gute Wahl?

<label for="contactName">Your Name</label>
<input type="text" name="contactName" id="contactName">

Die Verwendung geeigneter Etikettencodes kann in der Vergangenheit diskutiert werden, aber jetzt entscheide ich mich immer noch für die Verwendung von div zum Einbetten von Etiketten/Eingaben. Das Etikett und das zugehörige Etikett werden als Ganzes betrachtet. Das div-Element verfügt über eine Vielzahl semantischer Eigenschaften und kann sich an jede Situation anpassen.

<div>
	<label for="contactName">Your Name</label>
	<input type="text" name="contactName" id="contactName">
</div>

Chinesischer Originaltext: Meine 5 HTML-Schreibvorlieben
Englischer Originaltext: Meine Die 5 wichtigsten HTML-Codierungseinstellungen

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn