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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Mehr anzeigen

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

1 Wochen vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7439

15

CakePHP-Tutorial

1369

52

Wie lautet das Format des Kontonamens von Steam?

76

11

Win11 -Aktivierungsschlüssel dauerhaft

32

19

Mehr anzeigen