HTML5 定義文檔結(jié)構(gòu)
■知識點(diǎn)
HTML5包含一百多個標(biāo)簽,大部分繼承自HTML4,在HTML5中新增加了 30個標(biāo)簽。這些標(biāo)簽基本上都被放置在主體區(qū)域內(nèi)(<body>),我們將在各章節(jié)中逐一進(jìn)行說明。
正確選用HTML5標(biāo)簽可以避免代碼冗余。在設(shè)計(jì)網(wǎng)頁時不僅需要使用<div>#簽來構(gòu)建網(wǎng)頁通用結(jié)構(gòu),還要使用下面幾類標(biāo)簽完善網(wǎng)頁結(jié)構(gòu)。
<h1><h2><h3><h4xh5><h6>:定義文檔標(biāo)題,1表示一級標(biāo)題,6表示六級標(biāo)題,常用標(biāo)題包括一級、二級和三級。
<p>:定義段落文本。
<ul><0lxli>^:定義信息列表、導(dǎo)航列表、榜單結(jié)構(gòu)等。
<table><tr><td>等:定義表格結(jié)構(gòu)。
<form><i叩ut><textarea>等:定義表單結(jié)構(gòu)。
<span>:定義行內(nèi)包含框。
■實(shí)例設(shè)計(jì)
下面是一個簡單的HTML頁面示例,使用了少量HTML標(biāo)簽。它演示了一個簡單的文檔應(yīng)該包含的內(nèi)容,以及主體內(nèi)容是如何在瀏覽器中顯示的。
第1步,新建文本文件,輸入如下代碼。
<html>
<head>
<meta charset="UTF-8">
<title>一個簡單的文檔包含內(nèi)容</title>
</head>
<body>
<h1>我的第一個網(wǎng)頁文檔</h1>
<p>HTML 文檔必須包含三個部分: </p>
<u1>
<li>html-網(wǎng)頁包含框</li>
<li>head-頭部區(qū)域</li>
<li>body-主體內(nèi)容</li>
</ul>
</body>
</html>
第2步,保存文本文件,命名為test,設(shè)置擴(kuò)展名為.html。
第3步,使用瀏覽器打開這個文件,則可以看到如圖所示的預(yù)覽效果。
為了更好地選用標(biāo)簽,讀者可以參考w3school網(wǎng)站(http://www.w3school.com.cn/tags/index.asp)中的頁面信息。其中DTD列描述了標(biāo)簽在哪一種D0CTYPE文檔類型是允許使用
的:S=Strict,T=Transitional,F(xiàn)HFramese。
點(diǎn)擊加載更多評論>>