Xiaoqiangs mobiler HTML5-Entwicklungsweg (42) – Vergleich der HTML4- und HTML5-Dokumentstrukturen-H5-Tutorial-php.cn

Im Allgemeinen sind Menschen beim Schreiben von Dokumenten mit HTML daran gewöhnt, einer hierarchischen Struktur ähnlich „Kapitel – Abschnitt – Unterabschnitt“ zu folgen.

wird in HTML4 beschrieben:

<html>
	<head>

	</head>
	<body>
		<h1>第一章 小强的HTML5移动开发之路</h1>
		<h2>1.1 HTML5概述</h2>
		<h3>1.1.1 HTML5是什么？</h3>
		<h3>1.1.2 HTML5和HTML4的区别</h3>
		<h2>1.2 HTML5快速入门</h2>
		<h3>1.2.1 HTML与XHTML</h3>
	</body>
</html>

Nach dem Login kopieren

Der obige Code kann die Hauptstruktur des Dokuments kaum erkennen. Bei komplexeren Seiten ist diese Struktur jedoch schwer zu erkennen, sodass in HTML5 folgende Schrift erscheint:

<html>
	<head>

	</head>
	<body>
		<p>
			<h1>第一章 小强的HTML5移动开发之路</h1>
			<p>
				<h2>1.1 HTML5概述</h2>
				<p>
					<h3>1.1.1 HTML5是什么？</h3>
				</p>
				<p>
					<h3>1.1.2 HTML5和HTML4的区别</h3>
				</p>
			</p>
			<p>
				<h2>1.2 HTML5快速入门</h2>
				<p>
					<h3>1.2.1 HTML与XHTML</h3>
				</p>
			</p>
		<p>
	</body>
</html>

Nach dem Login kopieren

in HTML5 Um die Dokumentstruktur klarer und verständlicher zu machen, wurden viele semantische Elemente hinzugefügt, die speziell zur Unterteilung der Dokumentstruktur dienen.

Abschnittselement: Das Abschnittselement ist das grundlegendste und wichtigste Strukturelement, das die Seitendokumentstruktur unterteilt. Es wird hauptsächlich zum Organisieren von Websites oder verwendet Anwendungen Die Inhalte auf den Programmseiten sind hierarchisch gegliedert. Ein Abschnittselement besteht normalerweise aus Inhalt und Titel.

<html>
	<head>

	</head>
	<body>
		<section>
			<h1>第一章 小强的HTML5移动开发之路</h1>
			<section>
				<h2>1.1 HTML5概述</h2>
				<section>
					<h3>1.1.1 HTML5是什么？</h3>
				</section>
				<section>
					<h3>1.1.2 HTML5和HTML4的区别</h3>
				</section>
			</section>
			<section>
				<h2>1.2 HTML5快速入门</h2>
				<section>
					<h3>1.2.1 HTML与XHTML</h3>
				</section>
			</section>
		<section>
	</body>
</html>

Nach dem Login kopieren

Bei Verwendung des Abschnittselements beachten Sie bitte:

1. Kombinieren Sie das Abschnittselement nicht mit dem p-Element. Verwirrende Verwendung. Wenn ein Container Stile direkt definieren oder Verhalten über Skripte definieren muss, wird empfohlen, p zu verwenden.

article-Element: Das

article-Element stellt alle dar „Text“-Teile des Dokuments, der Seite oder der Anwendung sowie der darin beschriebene Inhalt sollten unabhängig und vollständig sein. Es kann extern für sich selbst zitiert werden, was ein Blog, ein Zeitungsartikel, ein Forumsbeitrag, eine Benutzerrezension oder eine unabhängige Quelle sein kann Plug-in oder andere Inhalte, die unabhängig von anderen Teilen des Kontexts sind. In einem Abschnittselement oder Artikelelement sollte es nur einen Titel geben. Wenn zwei Titel vorhanden sind, wird der zweite Titel implizit in ein neues Abschnittselement eingefügt, wie im folgenden Code gezeigt Danach wird das h2-Element implizit in ein neues Abschnittselement eingefügt.

<article>
	<h1>标题</h1>
	<!--隐式创建出一个新的section元素-->
	<h2>副标题</h2>
</article>

Nach dem Login kopieren

nav-Element: Das

nav-Element ist eine Gruppe von Links, die als Seitennavigation verwendet werden können. Eine Seite kann mehrere Navigationselemente haben, die als Navigation für die gesamte Seite oder verschiedene Teile der Seite dienen. Im Navigationselement werden die Shuffling-Link-Elemente im Allgemeinen in Form einer UL-Liste platziert.

aside-Element: Das

aside-Element wird verwendet, um den untergeordneten Informationsteil der aktuellen Seite oder des aktuellen Artikels darzustellen Seiten- oder Hauptinhalte, Seitenleisten, Anzeigen, Navigationsleisten und andere Teile, die sich vom Hauptinhalt unterscheiden. Das Folgende ist ein Beispiel für eine Blog-Homepage:

Das Interface-Layout ist wie folgt:

Stildatei main.css

<!DOCTYPE html>
<meta charset="UTF-8">
<title>阳光小强的博客</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="" name="keywords">
<meta content="" name="description">
<link href="main.css" type="text/css" rel="stylesheet"/>
<p id="blog">
	<header id="bloghead">
		<p id="blogTitle">
			<h1 id="blogname">阳光小强的博客</h1>
			<p id="bloglink">
				http://www.php.cn/
			</p>
		</p>
		<nav id="blognav">
			<ul id="blognavInfo">
				<li>
					<a href="http://blog.csdn.net/dawanganban" id="on">主页</a>
				</li>
				<li>
					<a href="#">博文目录</a>
				</li>
			</ul>
		</nav>
	</header>
	<p id="blogbody">
	<p id="column_1">
	<aside>
		<section>
			<header>
				<h1>个人资料</h1>
			</header>
			<p id="connBody1">
				<p>
				<figure>
					<img src="image\head.jpg">
					<figcaption>阳光小强的博客</figcaption>
				</figure>
				</p>
				<p id="pSpecial">
					<p>本人目前从事移动互联网开发，希望结识更多朋友</p>
					<p>推荐专栏：</p>
					<p>
						<a target="_blank"
							href="http://blog.csdn.net/column/details/dawanganban-html5.html">
							小强的HTML5移动开发之路
						</a>
					</p>
					<p>联系方式：739299362</p>
				</p>
			</p>
			<p id="connFoot1"></p>
		</section>
		<section id="conn2">
			<header id="connHead2">
				<h1>分类</h1>
				<span id="edit1">
					<a href="javascript:;"
						onclick="window.CateDialog.show();return false;">
						[<cite>管理</cite>]
					</a>
				</span>
			</header>
			<p id="connBody2">
				<nav id="classList">
					<ul>
						<li id="dot1">
							<a target="_blank" href="#">全部博文</a>
							<em>(62)</em>
						</li>
						<li id="dot2">
							<a href="#" target="_blank">HTML5</a>
							<em>(40)</em>
						</li>
						<li id="dot3">
							<a href="#" target="_blank">HTML5</a>
							<em>(40)</em>
						</li>
						<li id="dot4">
							<a href="#" target="_blank">HTML5</a>
							<em>(40)</em>
						</li>
						<li id="dot5">
							<a href="#" target="_blank">HTML5</a>
							<em>(40)</em>
						</li>
					</ul>
				</nav>
			</p>
			<p id="connFoot2"></p>
		</section>
		<section id="conn3">
			<header id="connHead3">
				<h1>评论</h1>
			</header>
			<p id="connBody3">
				<nav id="zComments">
					<ul id="zCommentsUl">
						<li id="commentsCell_linedot1">
							<p id="commentsH1">
								<span id="commentsName_txtc_dot1">
									<a href="#" target="_blank" title="随风">
									随风
									</a>
								</span>
								<time datetime="2014-03-31T16:59">03-31 16:59</time>
							</p>
							<p id="commentsContants1">
								<p id="commentsContantsTxt1">
									<a href="#" target="_blank">
										 博主，您好。为什么我在url中输...
									</a>
								</p>
							</p>
						</li>
						<li id="commentsCell_linedot2">
							<p id="commentsH1">
								<span id="commentsName_txtc_dot1">
									<a href="#" target="_blank" title="随风">
									随风
									</a>
								</span>
								<time datetime="2014-03-31T16:59">03-31 16:59</time>
							</p>
							<p id="commentsContants1">
								<p id="commentsContantsTxt1">
									<a href="#" target="_blank">
										 博主，您好。为什么我在url中输...
									</a>
								</p>
							</p>
						</li>
						<li id="commentsCell_linedot3">
							<p id="commentsH1">
								<span id="commentsName_txtc_dot1">
									<a href="#" target="_blank" title="随风">
									随风
									</a>
								</span>
								<time datetime="2014-03-31T16:59">03-31 16:59</time>
							</p>
							<p id="commentsContants1">
								<p id="commentsContantsTxt1">
									<a href="#" target="_blank">
										 博主，您好。为什么我在url中输...
									</a>
								</p>
							</p>
						</li>
						<li id="commentsCell_linedot4">
							<p id="commentsH1">
								<span id="commentsName_txtc_dot1">
									<a href="#" target="_blank" title="随风">
									随风
									</a>
								</span>
								<time datetime="2014-03-31T16:59">03-31 16:59</time>
							</p>
							<p id="commentsContants1">
								<p id="commentsContantsTxt1">
									<a href="#" target="_blank">
										 博主，您好。为什么我在url中输...
									</a>
								</p>
							</p>
						</li>
					</ul>
				</nav>
			</p>
			<p id="connFoot3"></p>
		</section>
	</aside>
</p>
<p id="column_2">
	<section id="conn4">
		<header id="connHead4">
			<h1>分类</h1>
			<span id="edit2">
				<a href="javascript:;"
					onclick="window.CateDialog.show();return false;">
					[<cite>管理</cite>]
				</a>
			</span>
		</header>
		<p id="connBody4">
			<p id="bloglist">
				<section>
					<header>
						<p id="blog_title_h1">
							<h1 id="blog_title1">
								<a href="#" target="_blank">
									HTML5中新增number元素的ValueAsNumber属性
								</a>
							</h1>
							<img title="此博文包含图片" src="image/head.jpg" id="icon1">
							<time datetime="2014-03-31T18:30" pubdate>(2014-03-31 18:30)</time>
						</p>
						<p id="articleTag1">
							<span id="txtb1">分类：</span>
							<a target="_blank" href="#">HTML5</a>
						</p>
					</header>
					<p id="content1">
						<p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
						<p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
						<p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
						<p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
						<p>   在使用JavaScript脚本对HTML5中number元素进行操作的时候，可以使用valueAsNumber属性很轻松地设置和读取元素中的数值。</p>
					</p>
					<footer id="tagMore1">
						<p id="tag_txtc1">
							<a href="#" target="_blank">阅读</a> | 
							<a target="_blank" href="#">评论</a>  还没有被转载| 
							<a href="javascript:;" onclick="return false;">收藏</a> 
						</p>
						<p id="more1">
							<span id="smore1">
								<a href="#" target="_blank">查看全文</a>>>
							</span>
						</p>
					</footer>
				</section>
			</p>
		</p>
	</section>
</p>

Nach dem Login kopieren

Das Obige ist Xiaoqiangs HTML5-Entwicklungsstraße für Mobilgeräte (42) – der Vergleich von HTML4- und HTML5-Dokumentstrukturen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www .php.cn)!

p#blog{
	background-position:50% 0%;
	background-image:url(image/blogb.png);
	width:100%;
	/*background-repeat:no-repeat;*/
}

ul{
	list-style:none;
}

p#blogbody{
	margin:0px;
}

[id^=column_]{
	display:inline;
	float:left;
	overflow:hidden;
}

p#column_1{
	margin-left:20px;
	width:210px;
}

Nach dem Login kopieren