小強的HTML5行動開發之路（42）－HTML4與HTML5文件結構比較-H5教程-PHP中文網

首頁

web前端

H5教程

小強的HTML5行動開發之路（42）－HTML4與HTML5文件結構比較

黄舟

Feb 15, 2017 pm 01:15 PM

一般來說，人們在書寫包括HTML在內的文件時，習慣上按照類似「章——節——小節」這樣的層次結構來進行。

在HTML4中的描述方式：

<html>
	<head>

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

上面程式碼，勉強可以看出文件的主體結構。但是在比較複雜的頁面中，這種結構很難看出來，所以就出現瞭如下寫法：

<html>
	<head>

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

在HTML5中，為了使文檔結構更加清晰，更容易理解，增加了很多具有語意性的專門用來劃分文檔結構的元素。

section元素：section元素是對頁面文檔結構進行劃分的最基本也是最主要的結構元素，主要用來對網站或應用程式的頁面上的內容進行層次結構上的劃分。一個section元素通常由內容及其標題所構成。

<html>
	<head>

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

使用section元素的時候要注意：

1、不要將section元素與p元素混淆使用。當一個容器需要直接定義樣式或透過腳本定義行為時，建議使用p.

2、通常不建議為哪些沒有標題的內容使用section,可以使用HTML5輪廓檢測工具來檢測（http://www.php .cn/）

article元素：article元素代表文件、頁面或應用程式中的所有「正文」部分，它描述的內容應該是獨立的、完整的、可以獨自被外部引用的，可以使一篇部落格、一篇報紙中的文章、一篇論壇貼文、一段用戶評價、一個獨立的插件，或任何獨立於上下文中其他部分的內容。

在一個section元素或article元素中，應該只有一個標題，如果有兩個標題，則第二個標題會被隱式放入一個新的section元素之內，如下面的程式碼所示，h2元素之後的內容會被隱式放入一個新的section元素內。

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

nav元素：nav元素是一個可以作為頁面導航的連結群組。一個頁面可以擁有多個nav元素，作為頁面整體或不同部分的導覽。在nav元素中，一般以ul列表的形式來具體放置改組連結元素。

aside元素：aside元素用來表示當前頁面或文章的附屬資訊部分，它可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、導航條，以及其他別於主要內容的部分。

下面來實作一個部落格首頁範例：

介面版面配置如下：

<!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="阳光小强的博客">阳光小强的博客</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 id="个人资料">个人资料</h1>
			</header>
			<p id="connBody1">
				<p>
				<figure>
					<img  src="/static/imghwm/default1.png"  data-src="image\head.jpg"  class="lazy"   alt="小強的HTML5行動開發之路（42）－HTML4與HTML5文件結構比較" >
					<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 id="分类">分类</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 id="评论">评论</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 id="分类">分类</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  src="/static/imghwm/default1.png"  data-src="image/head.jpg"  class="lazy"  title="此博文包含图片"  id="icon1" alt="小強的HTML5行動開發之路（42）－HTML4與HTML5文件結構比較" >
							<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>

樣式檔main.css

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

以上是小強的HTML557樣式檔案main.css

rrreee

以上是小強的HTML5575002）－HTML54ML比較的內容，更多相關內容請關注PHP中文網（www.php.cn）！

🎜🎜

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5代碼：可訪問性和語義HTMLApr 09, 2025 am 12:05 AM

H5通過語義化元素和ARIA屬性提升網頁的可訪問性和SEO效果。 1.使用、、等元素組織內容結構，提高SEO。 2.ARIA屬性如aria-label增強可訪問性，輔助技術用戶可順利使用網頁。

H5與HTML5相同嗎？Apr 08, 2025 am 12:16 AM

"h5"和"HTML5"在大多數情況下是相同的，但它們在某些特定場景下可能有不同的含義。 1."HTML5"是W3C定義的標準，包含新標籤和API。 2."h5"通常是HTML5的簡稱，但在移動開發中可能指基於HTML5的框架。理解這些區別有助於在項目中準確使用這些術語。

H5的功能是什麼？Apr 07, 2025 am 12:10 AM

H5，即HTML5，是HTML的第五個版本，它為開發者提供了更強大的工具集，使得創建複雜的網頁應用變得更加簡單。 H5的核心功能包括：1）元素允許在網頁上繪製圖形和動畫；2）語義化標籤如、等，使網頁結構清晰，利於SEO優化；3）新API如GeolocationAPI，支持基於位置的服務；4）跨瀏覽器兼容性需要通過兼容性測試和Polyfill庫來確保。

See all articles