踏上編程之路的必經(jīng)之路之html篇六

德經(jīng)第二十二章中有一句是說“少則得，多則惑”，這句話的意思是：少取則真得，貪多則反而導(dǎo)致自身的混亂。結(jié)合我親身經(jīng)歷，更容易理解這句話的意思。

有一段時(shí)間，我們天都學(xué)習(xí)10個(gè)小時(shí)，這種情況一直持續(xù)了大半個(gè)月。可是效果卻幾乎等于沒有，這段時(shí)間內(nèi)每天都會(huì)有大量的信息涌入你的腦袋，在學(xué)的那一刻，你感覺你已經(jīng)完全會(huì)了。但是過個(gè)一兩天，你卻完全不記得你到底學(xué)過些什么，像失憶了似的。

艾賓浩斯記憶曲線也告訴我們，大腦的記憶是一個(gè)緩慢的過程，想要對(duì)某一知識(shí)記憶深刻，就需要不斷地重復(fù)練習(xí)。直到隨時(shí)隨地拿來就用的地步，你就再也不會(huì)忘記了。

為什么說少則得，多則惑呢？每天只學(xué)一點(diǎn)，練習(xí)好幾遍，把這個(gè)知識(shí)點(diǎn)刻到腦子里面去，這樣日積月累你會(huì)發(fā)現(xiàn)你已經(jīng)學(xué)會(huì)了很多。每天學(xué)習(xí)很多知識(shí)點(diǎn)，很少時(shí)間去練習(xí)，過段時(shí)間你會(huì)發(fā)現(xiàn)你什么都沒有記住，到用的時(shí)候根本想不起來，還得返回頭再去學(xué)習(xí)一遍。徒增學(xué)習(xí)成本，也就是多則惑的道理。

好了言歸正傳，今天我們來學(xué)習(xí)html中的表格和表單，這兩個(gè)可不是一個(gè)東西哦。

表格：excel表格知道吧，橫行豎起列的那種表格。看圖：

上面是一個(gè)9行2列的表格，在html里面也有這種表格，我們來使用html的table表格標(biāo)簽來實(shí)現(xiàn)一個(gè)5行3列的表格。

上圖中table標(biāo)簽表示這是一個(gè)表格，tr表示一行，圖中我寫了五行，都用紅圈標(biāo)注了出來，每個(gè)tr里面又包含著td，td表示列，第1行里面有3列，第2、3、4、5行每行里面都有3列。

在瀏覽器中的效果：

和我們想象中的樣子好像有點(diǎn)不一樣，沒有格子，這是因?yàn)槲覀儧]有設(shè)置的緣故，table標(biāo)簽允許你通過border屬性來設(shè)置邊框（也就是格子），那我們來給它設(shè)置一個(gè)邊框吧。

通過給table標(biāo)簽添加border="1"，就可以讓表格有邊框了，來看看瀏覽器中的效果：

還是有點(diǎn)別扭，我腦海里面的表格應(yīng)該是和艾賓浩斯記憶曲線的那張表格一樣才對(duì)啊，現(xiàn)在的這個(gè)表格有點(diǎn)鏤空的感覺，第1行的第1列和第1行的第2列，也就是“關(guān)羽”、“男”之前有距離，如何把這個(gè)距離去掉呢？我們可以通過table標(biāo)簽的cellspacing屬性把距離去掉，試一下：

加了cellspacing="0" 屬性后，瀏覽器中的效果如下：

當(dāng)然了， table標(biāo)簽的cellspacing屬性的不光可以等于0，還可以等于其他值，比如我們就是希望有距離，那么我們?cè)O(shè)置成20試一下：

瀏覽器中的效果：

cellspacing屬性的值應(yīng)該取多少，按照你的需求來設(shè)置就好了。

現(xiàn)在還有一個(gè)問題，我覺得每個(gè)單元格的太小了，也就是“關(guān)羽”這個(gè)格子的邊框和“關(guān)羽”這兩個(gè)字貼得太緊了，一點(diǎn)都不好看，我們可以讓他稍微有點(diǎn)距離，那樣看起來應(yīng)該比較美觀一點(diǎn)。這個(gè)需求可以通過table標(biāo)簽的cellpadding屬性來設(shè)置，其實(shí)也就是設(shè)置內(nèi)邊距，關(guān)于內(nèi)邊距的概念我們?cè)凇短ど暇幊讨返谋亟?jīng)之路之html篇三》中講解過，如果忘記的同學(xué)可以返回去看一下。

我們將cellpadding設(shè)置為10，在瀏覽器中的效果如下：

現(xiàn)在整個(gè)表格感覺是豎起來的，能不能讓他感覺是橫著呢？table標(biāo)簽允許你調(diào)整它的寬度，只要寬度夠了，感覺起來自然就是橫的了。我們通過table標(biāo)簽的width屬性來調(diào)整表格的寬度：

調(diào)整表格的寬度為600，瀏覽器中的效果如下：

表格中的文字現(xiàn)在是左對(duì)齊，也就是靠近單元格的左邊，我們可以讓它居中，或者靠右對(duì)齊（右對(duì)齊），文字的對(duì)齊方式可以通過tr標(biāo)簽的align屬性來控制：

注意文字對(duì)齊方式，是給tr標(biāo)簽（也就是table的行標(biāo)簽）設(shè)置了align屬性，不是給table，不要寫錯(cuò)地方了。align="center"就是讓文字居中，align="right"就是讓文字右對(duì)齊，如果不寫，默認(rèn)是左對(duì)齊。

設(shè)置了文字對(duì)齊方式后，瀏覽器中的效果如下：

最我們整體調(diào)整一下，我需要有邊框（border="1"，設(shè)置為0就是沒有邊框），單元格之間不要距離（cellspacing="0"，設(shè)置成其它值就是有距離），內(nèi)邊距需要5（cellpadding="5"），表格寬度需要400（width="400"），文字統(tǒng)一都是居中對(duì)齊（table標(biāo)簽的tr標(biāo)簽上面設(shè)置align="center"）,整體設(shè)置后的代碼如下：

瀏覽器中的效果如下：

其實(shí)table標(biāo)簽也有一個(gè)align屬性，它可以讓整表格在瀏覽器中的居中、靠左或者靠右對(duì)齊，有興趣的同學(xué)可以自己嘗試一下。

最后提醒一句，代碼中的各種標(biāo)簽和標(biāo)簽的屬性還有單雙引號(hào)，都必須是英文的，如果你寫成中文的，是不正確的。

舉個(gè)例子：

良好的行動(dòng)力，是成功的一半，動(dòng)手練起來。

格對(duì)齊

使用Bootstrap的柵格對(duì)齊樣式,輕松實(shí)現(xiàn)垂直方向和水平方向的各種對(duì)齊效果，只需要引入Bootstrap的樣式，并在頁面中指定相應(yīng)的Class名稱即可。

柵格對(duì)齊之垂直對(duì)齊

行中可指定如下樣式

align-items-start 向上對(duì)齊,是默認(rèn)的對(duì)齊方式
align-items-center 垂直居中對(duì)齊
align-items-end 向下對(duì)齊

2.各列中可指定如下樣式

align-self-start
align-self-center
align-self-end

示例

下面示例的柵格布局,只有一行,在該行中指定列居中方式為垂直居中。該行總共有三列，各列也可以分別指定垂直對(duì)齊方式。第一列指定向上對(duì)齊，第二列遵循行指定的對(duì)齊方式，第三列指定向下對(duì)齊。

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" >
</head>
<body>
<div class="container">
 <div class="row bg-info align-items-center" style="height: 100vh;">
 <div class="col bg-primary align-self-start" style="height: 20vh;">
 向上對(duì)齊
 </div>
 <div class="col bg-secondary" style="height: 20vh;">
 遵循行指定的對(duì)齊方式
 </div>
 <div class="col bg-success align-self-end" style="height: 20vh;">
 向下對(duì)齊
 </div>
 </div>
</div>
</body>
</html>

柵格對(duì)齊之垂直對(duì)齊示例

柵格對(duì)齊之水平對(duì)齊

將水平居中的class寫到行中
指定列寬
水平居中的樣式包括：

justify-content-start 靠左對(duì)齊
justify-content-center 居中對(duì)齊
justify-content-end 靠右對(duì)齊
justify-content-around 均勻排列（盡量讓所有列之間的間距一樣）
justify-content-between 兩邊分散排列（把剩余的空間添補(bǔ)到列之間）

示例

示例的柵格為一行，三列，每列占六分之一的行寬

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" >
</head>
<body>
<div class="container">
 <div class="row bg-info justify-content-start" style="height: 100vh;">
 <div class="col-2 bg-success" style="height: 20vh;"> 
 </div>
 <div class="col-2 bg-danger" style="height: 20vh;">
 </div>
 <div class="col-2 bg-dark" style="height: 20vh;">
 </div>
 </div>
</div>
</body>
</html>

水平對(duì)齊之靠左對(duì)齊

水平對(duì)齊之居中對(duì)齊

水平對(duì)齊之靠右對(duì)齊

水平對(duì)齊之均勻排列

水平對(duì)齊之分散排列

技術(shù)等級(jí)】初級(jí)

【承接文章】《CSS段落行高，竟然能夠?qū)崿F(xiàn)垂直居中功能，神奇的CSS技術(shù)》

本文重點(diǎn)講解CSS技術(shù)中文本樣式的 vertical-align 屬性的詳細(xì)用法。本文屬于前端開發(fā)的初級(jí)教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。

vertical-align屬性的用法較為復(fù)雜，該屬性的取值較多，不了解這個(gè)屬性用法的學(xué)習(xí)者，一定要堅(jiān)持把這篇文章讀完。

一、設(shè)置垂直方向的對(duì)齊方式：

CSS技術(shù)利用 vertical-align 屬性來設(shè)置內(nèi)聯(lián)元素的垂直對(duì)齊方式

該屬性的功能是：設(shè)置內(nèi)聯(lián)元素或內(nèi)聯(lián)塊元素相對(duì)于所在行其他元素的垂直對(duì)齊方式。這里在對(duì)齊時(shí)，都是考慮基線的對(duì)齊，即內(nèi)聯(lián)元素的基線相對(duì)于所在行其他元素的基線的垂直對(duì)齊方式。

這里需要注意的一定要是“內(nèi)聯(lián)元素”或“內(nèi)聯(lián)塊元素”。

【有關(guān)“內(nèi)聯(lián)元素”的知識(shí)，可以參考小海老師前面寫的《CSS段落對(duì)齊方式，系統(tǒng)認(rèn)識(shí)塊級(jí)元素與內(nèi)聯(lián)元素，CSS前端進(jìn)階篇》一文】

該屬性的取值可以有以下幾種：

帶有單位的數(shù)值，可以取負(fù)值，在基線對(duì)齊的基礎(chǔ)上，內(nèi)聯(lián)元素向下移動(dòng)一定的距離（正值）或者向上移動(dòng)一定的距離（負(fù)值）。
%，可以取負(fù)值，在基線對(duì)齊的基礎(chǔ)上，內(nèi)聯(lián)元素向下移動(dòng)line-height屬性的百分比的距離（正百分比）或者向上移動(dòng)line-height屬性的百分比的距離。
baseline，【默認(rèn)值】基線對(duì)齊，內(nèi)聯(lián)元素的基線與所在行的其他元素的基線對(duì)齊。
sub，上標(biāo)。
super，下標(biāo)。
top，頂部對(duì)齊，內(nèi)聯(lián)元素的頂部與所在行的其他元素中最高的元素的頂部對(duì)齊。
text-top，文本頂部對(duì)齊，內(nèi)聯(lián)元素的頂部與所在行的文字頂部對(duì)齊。
middle，中部對(duì)齊，內(nèi)聯(lián)元素的中部與所在行其他元素的中部對(duì)齊。
bottom，底部對(duì)齊，內(nèi)聯(lián)元素的底部與所在行的其他元素中最低的元素的底部對(duì)齊。
text-bottom，文本底部對(duì)齊，內(nèi)聯(lián)元素的底部與所在行的文字底部對(duì)齊。

二、基線垂直對(duì)齊：

要想深入了解vertical-align屬性各項(xiàng)取值的含義，首先，讓我們先看一看什么是基線對(duì)齊。

例1：在段落標(biāo)記內(nèi)部，放置一個(gè)圖片和一行文字。HTML代碼如下。

<img src="images/a.jpg" /> 小海前端

得到的效果如下圖所示，仔細(xì)觀察下圖：圖片底部和文字底部是對(duì)齊的嗎？

例1的最終效果

仔細(xì)觀察，其實(shí)它們底部并沒有完全對(duì)齊。如果將文字的字號(hào)放大，可以看得更加明顯。

將例1中的文字放大后的效果

上圖中，由于文字字號(hào)的變大，在圖片中只呈現(xiàn)了一個(gè)“小”字，但是我們完全可以看出，圖片的底部并沒有和文字的底部對(duì)齊。而對(duì)齊文字的這個(gè)位置實(shí)際上是文字的“基線”。

【有關(guān)“基線”的知識(shí)，可以參考小海老師前面寫的《CSS段落行高，竟然能夠?qū)崿F(xiàn)垂直居中功能，神奇的CSS技術(shù)》一文】

原來，圖片本身屬于內(nèi)聯(lián)元素，而 內(nèi)聯(lián)元素的vertical-align屬性的默認(rèn)取值為baseline，即基線對(duì)齊，也就是圖片的基線（底部）默認(rèn)和文字的基線對(duì)齊了。

三、取值為“帶有單位的數(shù)值”：

如果vertical-align屬性的取值為帶有單位的數(shù)值，則也是在基線對(duì)齊的基礎(chǔ)上開始上下移動(dòng)一定的距離。

如果圖片的vertical-align屬性取值為0px，則依然為基線對(duì)齊的位置。
如果圖片的vertical-align屬性取值為5px，則在基線對(duì)齊位置的基礎(chǔ)上向下移動(dòng)5px的距離。
如果圖片的vertical-align屬性取值為-5px，則在基線對(duì)齊位置的基礎(chǔ)上向上移動(dòng)5px的距離。

四、取值為“百分比 ”：

如果vertical-align屬性的取值為百分比，則也是在基線對(duì)齊的基礎(chǔ)上開始上下移動(dòng)一定的距離。

那么，問題來了。

百分比意味著移動(dòng)多少像素的距離呢？
百分比又是以什么距離為基準(zhǔn)的呢，即誰的百分比呢？

我們前端開發(fā)工程師一定要記住：vertical-align屬性的百分比取值不是父元素高度的百分比，而是 line-height 屬性取值的百分比。

即：vertical-align屬性的百分比取值是以line-height屬性的取值為基準(zhǔn)的，及移動(dòng)距離為vertical-align屬性的絕對(duì)值乘以line-height屬性取值的距離數(shù)。

假設(shè)：容器的line-height屬性取值為20px，則：

如果圖片的vertical-align屬性取值為0%，則依然為基線對(duì)齊的位置。
如果圖片的vertical-align屬性取值為50%，則在基線對(duì)齊位置的基礎(chǔ)上向下移動(dòng)(20px*50%)的距離，即向下移動(dòng)10px。
如果圖片的vertical-align屬性取值為-50%，則在基線對(duì)齊位置的基礎(chǔ)上向上移動(dòng)(20px*50%)的距離，即向上移動(dòng)10px。

五、取值為top和text-top：

例2：我們?cè)诶?的基礎(chǔ)上在段落中再添加一個(gè)圖片，并設(shè)置圖片的高度大于文本。

仔細(xì)閱讀下列HTML代碼：

<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />

從代碼中可以看出，文字“小海前端”左側(cè)的圖片設(shè)置了vertical-align屬性，并取值為top。根據(jù)文字“小海前端”左右的兩張圖片的width屬性可知，右側(cè)圖片的高度肯定比較高。

效果如下圖所示。

例2的最終效果

原因是：vertical-align屬性取值為top是指讓設(shè)置了該屬性的元素頂部和同行周圍元素中最高元素的頂部對(duì)齊。從圖中可知，顯然最高的元素是右側(cè)的圖片，因此就呈現(xiàn)為上圖中的外觀了。

而右面的圖片沒有設(shè)置vertical-align屬性，因此依然為“基線對(duì)齊”，即右側(cè)圖片的底部對(duì)齊文字的基線。

例3：在例2的基礎(chǔ)上，我們將右側(cè)圖片的高度縮小至比文字還小的程度，那可想而知，左側(cè)圖片就應(yīng)該與文字頂部對(duì)齊了。

仔細(xì)閱讀下列HTML代碼：

<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />

從代碼中可以看出，右側(cè)圖片的寬度由500改為了100，同時(shí)高度也會(huì)隨之等比縮小。

最終效果如下圖所示：

例3的最終效果

例4：在例2的基礎(chǔ)上，我們調(diào)整左側(cè)圖片vertical-align屬性的取值為text-top，則HTML代碼如下。

<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />

則最終的顯示效果如下圖所示。

例4的最終效果

原因是：text-top屬性是要求內(nèi)聯(lián)元素與同行內(nèi)文本的頂部對(duì)齊。因此，就出現(xiàn)了上圖中的效果。

而右面的圖片沒有設(shè)置vertical-align屬性，因此依然為“基線對(duì)齊”，即右側(cè)圖片的底部對(duì)齊文字的基線。

vertical-align屬性還具備bottom和text-bottom取值，和這兩個(gè)頂部對(duì)齊（top和text-top）的含義是類似的，希望同學(xué)們自己在電腦上嘗試一下。

文章預(yù)告

下一篇文章中，小海老師會(huì)為大家講解一個(gè)vertical-align屬性和line-height屬性的應(yīng)用，用于去掉圖片在容器中放置時(shí)，底部產(chǎn)生的小距離。這是前端開發(fā)中非常經(jīng)典的bug解決方案，對(duì)于希望深入了解前端開發(fā)的學(xué)習(xí)者真的是非常重要。

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。

小海聲明

在頭條上所寫的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。小海老師非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡(jiǎn)單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長(zhǎng)，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了我寫的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過我精心整理和系統(tǒng)歸納過的。

關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。

在線咨詢

上一篇：HTML 符號(hào)
下一篇：DataGear使用靜態(tài)HTML模板制作數(shù)據(jù)可視化看板

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。