Tatsächlicher Fall des semantischen H5-Tags

Dieses Mal bringe ich Ihnen einen praktischen Fall von H5-Semantik-Tags. Was sind die Vorsichtsmaßnahmen bei der Verwendung von H5-Semantik-Tags? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Seitenlayout basiert auf HTML5-Elementen. Daher ist es wichtig, dass Sie sich vor Beginn mit den HTML5-Elementen vertraut machen und anschließend prüfen, ob deren Semantik zu Ihrem Layout passt.

　Die HTML5-Struktur

Es ist sehr wichtig, dass Sie beim Schreiben von HTML5-Code nicht einfach das

-Tag in HTML5 ersetzen. Es gibt Zeiten, in denen das Element

semantisch immer noch eine gute Wahl ist

. Zum Beispiel Wrapper oder Container div

Eines der neuen Tags, die verwendet werden können, um das traditionelle div-Element zu ersetzen, ist das

Im

-Element können wir auch das

-Element platzieren, das das Hauptnavigationsmenü

umschließt. Das h1-Element, das einen Anker enthält, ist der Titel unseres Blogs.

Zuerst habe ich verwendet, um den Inhalt der Seite zu umbrechen, aber nachdem ich einige Dokumente gelesen hatte, hatte ich das Gefühl, dass dies semantisch nicht 100 % korrekt war. Wählen Sie weiterhin das div-Element.

Innerhalb des div-Elements ist jeder Blogbeitrag in ein eigenes Artikelelement eingeschlossen.

Unter einer Reihe von Blogs befinden sich zwei paginierte Links. Normalerweise ist die Bedeutung von Paginierungslinks nicht gleichbedeutend mit dem Element

(das an mehreren Stellen verwendet werden kann, nicht nur in der Hauptnavigation). Aber dieses Blog-Layout behandelt Paginierungslinks immer noch als Hauptnavigation.

Vor der Überarbeitung des

-Elements gab es kein semantisch spezifisches Element für eine Seitenleiste. Allerdings können Sie das aside-Element jetzt bedenkenlos verwenden, ohne sich Gedanken über Syntaxprobleme machen zu müssen.

In diesem Beispiel enthält das aside-Element mehrere Abschnittselemente. Unten in der Seitenleiste befindet sich ein einfaches Suchfeld. Es gibt uns Zugriff auf einige neue Funktionen von HTML5-Formularen.

Eines davon ist das Platzhalterattribut

Das Layout endet mit dem Fußzeilenelement. In diesem Beispiel muss das Fußzeilenelement außerhalb des div-Containers platziert werden, sodass sich die Breite des Fußzeilenelements über die gesamte Seite erstreckt.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

header {
	margin: 0 0 98px 0; 
}
	
	header h1 {
		float: left; font-size: 36px;
		font-weight: normal;
	}
	
	header nav {
		float: right; text-align: right;
		padding: 6px 0 0 0;
	}
		header nav ul {
			list-style: none;
		}
			header nav li {
				float: left; font-size: 18px;
				width: 136px; margin: 0 0 0 20px;
			}
			
			header nav li:nth-child(1):before {
				content: "1. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(2):before {
				content: "2. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(3):before {
				content: "3. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(4):before {
				content: "4. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(5):before {
				content: "5. ";
				color: #a2a2a2;
			}
#sidebar {
width: 292px; float: left;
padding: 4px 0 0 0;
}
#sidebar h3 {
font-size: 18px; font-weight: normal;
margin: 0 0 25px 0;
}
#sidebar ul {
list-style: none;
}
#sidebar section {
margin: 0 0 47px 0;
}
#sidebar #about a.more {
display: block; text-align: right;
}
#sidebar #categories {
width: 136px; float: left; 
margin: 0 20px 0 0;
}
#sidebar #social {
width: 136px; float: left; 
}
#footer-container {
	background: rgba(0,0,0,0.2); 
	overflow: hidden;
}
	footer {
		width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;
	}
	footer #credits {
		list-style: none; float: left; 
		}			
		footer #credits li {
			float: left; margin: 0 6px 0 0;
		}
			footer #credits li.wordpress a {
				display: block; width: 20px; height: 20px;
				background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
			}
			footer #credits li.spoongraphics a {
				display: block; width: 25px; height: 20px;
				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
			}
				
		footer #back-top {
			float: right; font-size: 12px;
		}

Verwandte Lektüre:

So erstellen Sie einen Drag-Effekt in H5

Wie Sie mit H5 die Kamera aufrufen

So gehen Sie mit der Inkompatibilität älterer Browserversionen mit H5 und C3 um

Das obige ist der detaillierte Inhalt vonTatsächlicher Fall des semantischen H5-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!