Web前端開發(fā)項(xiàng)目教程主講人：卞孝麗轉(zhuǎn)換元素類型【任務(wù)目標(biāo)】

知識(shí)目標(biāo)了解不同類型元素的特征；理解不同類型元素之間的區(qū)別；熟悉轉(zhuǎn)換元素類型的方法。

能力目標(biāo)會(huì)轉(zhuǎn)換元素的類型能夠通過轉(zhuǎn)換元素類型滿足網(wǎng)站頁面布局排版的需求。

素質(zhì)目標(biāo)提升辨別能力，不同的場(chǎng)合能做出相應(yīng)的適合的選擇?！緦?dǎo)學(xué)知識(shí)】一、認(rèn)識(shí)元素類型

HTML標(biāo)記語言提供了豐富的標(biāo)記，使頁面結(jié)構(gòu)的組織更加輕松、合理。用于組織頁面結(jié)構(gòu)的HTML標(biāo)記分為兩種類型，塊標(biāo)記和行內(nèi)標(biāo)記，也稱為塊標(biāo)簽和行內(nèi)標(biāo)簽，從開始標(biāo)記到結(jié)束標(biāo)記通常包含內(nèi)容整體叫作塊級(jí)元素和行內(nèi)元素。

了解這兩種類型標(biāo)記的特性有助于靈活控制CSS布局排版。【導(dǎo)學(xué)知識(shí)】1.塊元素塊級(jí)元素的特點(diǎn)：常見的塊級(jí)元素：

塊級(jí)元素在頁面中以區(qū)域塊的形式出現(xiàn)，其特點(diǎn)是，塊元素通常都會(huì)獨(dú)自占據(jù)一整行，總是在新行上開始，自上而下排列，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，行高以及外邊距和內(nèi)邊距都可控制。常見的塊級(jí)元素有<h1>～<h6>、<div>、<ul>、<li>、<ol>、<p>等，其中<div>為最典型最常用的塊元素。塊級(jí)元素的作用：一般情況下，塊元素作為盛裝內(nèi)容的容器，可以容納內(nèi)聯(lián)元素和其他塊元素，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。【導(dǎo)學(xué)知識(shí)】1.行內(nèi)元素行內(nèi)元素的特點(diǎn)：常見的塊級(jí)元素：

行內(nèi)元素又稱內(nèi)聯(lián)元素或內(nèi)嵌元素，其特點(diǎn)是不必在新的一行開始和結(jié)束，通常會(huì)和其前后的其他行內(nèi)元素逐個(gè)排列顯示在同一行內(nèi)，不占據(jù)獨(dú)立的區(qū)域，靠自身內(nèi)容的字體大小或圖像尺寸撐開，不可以設(shè)置寬度、高度、對(duì)齊、外邊距和內(nèi)邊距等屬性。常見的行內(nèi)元素有<span>、<i>、<b>、<em>、<del>、<strong>、<u>、<a>、<s>、<ins>等，其中<span>標(biāo)簽為最典型最常用的行內(nèi)元素。行內(nèi)元素的作用：常用于控制頁面中文本的樣式?！緦?dǎo)學(xué)知識(shí)】二、轉(zhuǎn)換元素類型其常用屬性值及含義見表所示：

網(wǎng)頁是由多個(gè)塊級(jí)元素和行內(nèi)元素排列而成的，在排版時(shí)，如果想要設(shè)置行內(nèi)元素的寬度和高度，或是需要塊元素不單獨(dú)占一行排列，就需要對(duì)元素的類型進(jìn)行轉(zhuǎn)換，這就用到了display屬性，具體語法格式如下：display:屬性值;值含義inline此元素將顯示為行內(nèi)元素（行內(nèi)元素默認(rèn)的display屬性值）block此元素將顯示為塊元素（塊元素默認(rèn)的display屬性值）inline-block此元素將顯示為行內(nèi)塊元素，可設(shè)置寬度、高度和對(duì)齊等屬性，但不會(huì)獨(dú)占一行none此元素將被隱藏，不顯示，也不占用頁面空間，相當(dāng)于該元素不存在【導(dǎo)學(xué)知識(shí)】三、對(duì)象的顯示與隱藏

可以通過把display屬性設(shè)置為none隱藏一個(gè)元素，而且隱藏后不占用任何空間，也就是說，該元素不但不顯示了，而且該元素原本占用的空間也會(huì)從頁面布局中消失。

與display不同，通過把visibility屬性的默認(rèn)值visible可見設(shè)置為hidden隱藏后的元素仍占用與未隱藏之前一樣的空間，也就是說，該元素雖然不顯示了，但仍然會(huì)影響布局?！救蝿?wù)小結(jié)】

本節(jié)課我們學(xué)習(xí)了如何轉(zhuǎn)換元素的類型，能夠通過轉(zhuǎn)換元素類型滿足網(wǎng)站頁面布局排版的需求。

古語云:“君子謀時(shí)而動(dòng),順勢(shì)而為”。聰明有遠(yuǎn)見的人會(huì)準(zhǔn)備好,在合適的時(shí)候做出行動(dòng),