我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)記和段落標(biāo)記。

標(biāo)題和段落" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 輕松學(xué):網(wǎng)頁設(shè)計(jì)6-html網(wǎng)頁的結(jié)構(gòu)元素、布局和屬性

輕松學(xué):網(wǎng)頁設(shè)計(jì)6-html網(wǎng)頁的結(jié)構(gòu)元素、布局和屬性

時(shí)間:2023-09-30 22:18:01 | 來源:網(wǎng)站運(yùn)營

時(shí)間:2023-09-30 22:18:01 來源:網(wǎng)站運(yùn)營

輕松學(xué):網(wǎng)頁設(shè)計(jì)6-html網(wǎng)頁的結(jié)構(gòu)元素、布局和屬性:在一個(gè)網(wǎng)頁中文字往往占有較大的篇幅,為了讓文字能夠排版整齊、結(jié)構(gòu)清晰,HTML提供了一系列的文本控制標(biāo)記。

我們經(jīng)常會(huì)在頁面中用到標(biāo)題標(biāo)記和段落標(biāo)記。

標(biāo)題和段落標(biāo)記:基本語法格式

<hn align="對(duì)齊方式">標(biāo)題文本</hn>

段落標(biāo)記主要用于把文字有條理地顯示出來基本語法格式

<p align="對(duì)齊方式">段落文本</p>

left :設(shè)置標(biāo)題文字左對(duì)齊(默認(rèn)值)

center:設(shè)置標(biāo)題文字居中對(duì)齊

right:設(shè)置標(biāo)題文字右對(duì)齊

以下是頁面代碼:

<!DOCTYPE html ><html><head> <!-- head是頁面的頭部元素 --> <meta charset= "utf-8" /><title>無標(biāo)題文檔</title> <!-- title是頁面的標(biāo)題 --> </head><body> <!-- body主體 --> <h1>這是標(biāo)題一:段落</h1> <!-- 標(biāo)題一 --> <p>這是段落,段落文本</p><hr/> <!-- 這是分割線 --> <h2>這是標(biāo)題二:無序列表</h2><ul> <!-- 每對(duì)<ul></ul>中至少應(yīng)包含一對(duì)<li></li>。 --> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ......</ul><h3>這是標(biāo)題三:有序列表</h3><ol> <!-- 每對(duì)<ol></ol>中至少應(yīng)包含一對(duì)<li></li>。 --> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> ......</ol><h4>這是標(biāo)題四:這是定義列表</h4><dl> <!-- <dl>標(biāo)記用于指定定義列表 </dl> --> <dt>名詞1</dt> <!-- <dt></dt>標(biāo)記用于指定術(shù)語名詞 --> <dd>名詞1解釋1</dd> <!-- <dd></dd>標(biāo)記用于對(duì)名詞進(jìn)行解釋和描述 --> <dd>名詞1解釋2</dd> <dt>名詞2</dt> <dd>名詞2解釋1</dd> <dd>名詞2解釋2</dd> <!--定義列表常用于圖文混排,其中<dt></dt>標(biāo)記中插入圖片,<dd></dd>標(biāo)記中放入對(duì)圖片解釋說明的文字。 --></dl><h5>這是標(biāo)題五</h5><h6>這是標(biāo)題六</h6></body></html>HTML5中所有的元素都是有結(jié)構(gòu)性的,且這些元素的作用與塊元素非常相似。

1.HTML5中的header元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素,該元素可以包含所有通常放在頁面頭部的內(nèi)容。

<header> <h1>網(wǎng)頁主題</h1></header>2.nav元素用于定義導(dǎo)航鏈接,是HTML5新增的元素,該元素可以將具有導(dǎo)航性質(zhì)的鏈接歸納在一個(gè)區(qū)域中,使頁面元素的語義更加明確。

<nav> <ul> <li><a href="#">首頁</li> <li><a href="#">公司概況</li> <li><a href="#">產(chǎn)品展示</li> <li><a href="#">聯(lián)系我們</li> </ul></nav>3.article元素代表文檔、頁面或者應(yīng)用程序中與上下文不相關(guān)的獨(dú)立部分,該元素經(jīng)常被用于定義一篇日志、一條新聞或用戶評(píng)論等。

4.aside元素用來定義當(dāng)前頁面或者文章的附屬信息部分,它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條等其他類似的有別于主要內(nèi)容的部分。

被包含在article元素內(nèi)作為主要內(nèi)容的附屬信息。

在article元素之外使用,作為頁面或站點(diǎn)全局的附屬信息部分。

5.section元素用于對(duì)網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊,一個(gè)section元素通常由內(nèi)容和標(biāo)題組成。

不要將section元素用作設(shè)置樣式的頁面容器,那是div的特性。如果article元素、aside元素或nav元素更符合使用條件,那么不要使用section元素。

沒有標(biāo)題的內(nèi)容區(qū)塊不要使用section元素定義。

6.footer元素用于定義一個(gè)頁面或者區(qū)域的底部,它可以包含所有通常放在頁面底部的內(nèi)容。

<article> 文章內(nèi)容 <footer> 文章分頁列表 </footer></article><footer> 頁面底部</footer>*其他元素 ——分組元素用于對(duì)頁面中的內(nèi)容進(jìn)行分組。HTML5中涉及到3個(gè)與分組有關(guān)的元素,分別是figure元素、figcaption元素和hgroup元素。

figure元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān),但如果被刪除,也不會(huì)對(duì)文檔流產(chǎn)生影響。figcaption元素用于為figure元素組添加標(biāo)題,一個(gè)figure元素內(nèi)最多允許使用一個(gè)figcaption元素,該元素應(yīng)該放在figure元素的第一個(gè)或者最后一個(gè)子元素的位置。

*其他元素 ——hgroup元素用于將多個(gè)標(biāo)題(主標(biāo)題和副標(biāo)題或者子標(biāo)題)組成一個(gè)標(biāo)題組,通常它與h1~h6元素組合使用。通常,將hgroup元素放在header元素中。

hgroup元素用于將多個(gè)標(biāo)題(主標(biāo)題和副標(biāo)題或者子標(biāo)題)組成一個(gè)標(biāo)題組,通常它與h1~h6元素組合使用。通常,將hgroup元素放在header元素中。

如果只有一個(gè)標(biāo)題元素不建議使用hgroup元素。當(dāng)出現(xiàn)一個(gè)或者一個(gè)以上的標(biāo)題與元素時(shí),推薦使用hgroup元素作為標(biāo)題元素。當(dāng)一個(gè)標(biāo)題包含副標(biāo)題、section或者article元素時(shí),建議將hgroup元素和標(biāo)題相關(guān)元素存放到header元素容器中。

為了更好的說明各群組的功能,hgroup元素常常與figcaption結(jié)合使用。例如,下面的案例效果。









關(guān)鍵詞:布局,屬性,結(jié)構(gòu),設(shè)計(jì)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉