日韩欧美人妻无码精品白浆,夜夜嗨AV免费入口,国产欧美官网在线看,高校回应聋哑女生因长相完美被质疑

伴隨著 HTML 的發(fā)展，頁(yè)面布局大體上經(jīng)歷了 table 布局，div 布局，HTML5 語(yǔ)義元素布局三個(gè)階段，

如今使用 table 布局很少，table 的使用更多回到了它本身代表的意義，呈現(xiàn)數(shù)據(jù)。

而且布局通常要深度使用 CSS，這里只是介紹典型的 div 布局，以及目前用來(lái)布局的元素。

使用 div 的基本布局

先來(lái)看個(gè)示例。

<div   id="container"   style="width:600px; margin:20px; text-align: center; margin: 0 auto; " >   <div id="header" style="background-color:lightcoral;">     <h2>IT從業(yè)指北</h2>     <div id="nav">       <a href="#">首頁(yè)</a> | <a href="#">產(chǎn)品介紹</a> |       <a href="#">產(chǎn)品展示</a> |       <a href="#">關(guān)于我們</a>     </div>   </div>    <div     id="menu"     style="background-color:lightblue;height:600px;width:150px;float:left;"   >     這里是信息分類(lèi)內(nèi)容   </div>    <div     id="content"     style="background-color:lightgreen;height:600px;width:450px;float:left;"   >     這里是網(wǎng)頁(yè)正文內(nèi)容   </div>    <div     id="footer"     style="background-color:lightgray;clear:both;text-align:center; height: 50px; line-height: 50px;"   >     &copy; 2024 IT從業(yè)指北 All right reserved.   </div> </div> 

為了方便展現(xiàn)網(wǎng)站常排版，在 CSS 里指定了所有元素的 margin 為 0。

<style>   * {     margin: 0;   } </style> 

效果如下：

這里用到了比較多的 CSS，如果從未接觸過(guò)，可能看著會(huì)有些不能理解。

不過(guò)我們重點(diǎn)講布局的結(jié)構(gòu)，至于這種結(jié)構(gòu)是如何通過(guò) CSS 實(shí)現(xiàn)的，在這一章節(jié)里暫時(shí)不涉及。代碼也只是簡(jiǎn)單的實(shí)現(xiàn)，不供實(shí)際使用的參考。實(shí)際的 CSS 代碼，會(huì)有一種更方便管理的書(shū)寫(xiě)方式。

去掉呈現(xiàn)內(nèi)容，可以看到使用的 div 布局結(jié)構(gòu)如下：

<div id="container">   <div id="header">     <div id="nav"></div>   </div>    <div id="menu"></div>    <div id="content"></div>    <div id="footer"></div> </div> 

通過(guò)所有 div 的 id 屬性，我們能看到它在排版中的用途。

通過(guò)在最外層，使用 id 為 container 的 div 作為容器，整個(gè)網(wǎng)頁(yè)內(nèi)容包含在了這個(gè)容器里。

接著網(wǎng)頁(yè)的標(biāo)題處理于 header 區(qū)域，有 nav 表示導(dǎo)航欄菜單。

接下來(lái)是左邊的菜單 menu 和右側(cè)的內(nèi)容 content。

最下面是 footer 區(qū)域，用于顯示站點(diǎn)的版權(quán)信息。

div 是沒(méi)有語(yǔ)義的元素，如果不看 id，根本不清楚它在布局里的用途。

而后來(lái)的 html5，引用了一些新的語(yǔ)義元素，這些語(yǔ)義元素在本質(zhì)上和 div 沒(méi)有區(qū)別，只是有了一個(gè)更清晰的意義。

HTML5 的語(yǔ)義元素

HTML5 里新增的語(yǔ)義元素如下：

• <header>

• <nav>

• <section>

• <article>

• <aside>

• <figcaption>

• <figure>

• <footer>

建議這些語(yǔ)義元素在布局里的使用如下圖：

如果根據(jù)這些語(yǔ)義元素的使用，對(duì)前一個(gè)例子做個(gè)修改的話(huà)，可以是這樣：

<header>   <nav></nav> </header> <aside></aside> <article></article> <footer></footer> 

可以看到，即使不指定名稱(chēng)，也能比較清楚地明白這些元素在布局中的用途。

根據(jù)這些用途，把上述例子里的 div 元素?fù)Q成這些語(yǔ)義元素，在保留 CSS 的前提下，效果一樣。

現(xiàn)代布局里，還能見(jiàn)到 div 的身影，并不是完全被 HTML5 的語(yǔ)義元素取代。

總結(jié)

• ?? 布局在經(jīng)歷過(guò)去的發(fā)展至今，基本上不再使用 table。

• ?? div 是布局里最常使用的元素，它本身無(wú)意義。

• ?? HTML5 引用了一系列有語(yǔ)義的元素，在布局里，可以理解為用處和 div 一樣。