Tatsächlicher Fall des semantischen H5-Tags-H5-Tutorial-php.cn

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

-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;
		}

Nach dem Login kopieren

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!

Verwandte Etiketten：

html5 实际案例

Quelle：php.cn

Vorheriger Artikel：So erstellen Sie einen Drag-Effekt in H5 Nächster Artikel：Erweiterte H5-Inline-Tags

Erklärung dieser Website

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

Neueste Artikel des Autors