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 dc6dce4a544fdca2df29d5ac0ea9906b-Tag in HTML5 ersetzen. Es gibt Zeiten, in denen das Element dc6dce4a544fdca2df29d5ac0ea9906b 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 1aa9e5d373740b65a0cc8f0a02150c53 Im 1aa9e5d373740b65a0cc8f0a02150c53-Element können wir auch das c787b9a589a3ece771e842a6176cf8e9-Element platzieren, das das Hauptnavigationsmenü

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

Zuerst habe ich c0aa3cf4895f74092c771fac967496a8 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 c787b9a589a3ece771e842a6176cf8e9 (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 15221ee8cba27fc1d7a26c47a001eb9b-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!