整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實(shí)用視頻。
主要內(nèi)容：這是HTML課程的第四課，主要講解HTML的文字標(biāo)簽和格式標(biāo)簽。在今天我們做一個屬于自己的簡歷。
在上一節(jié)中主要講解了HTML的標(biāo)題標(biāo)簽（h1~h7）以及加粗、斜體、下劃線、上下標(biāo)等格式的標(biāo)簽。上節(jié)請戳→HTML電腦編程03 標(biāo)題物理字體標(biāo)簽的使用，大學(xué)生學(xué)編程
HTML
font標(biāo)簽通過字面意思來看，就是字體的意思。是的這是一個用來顯示文字的標(biāo)簽。不過值得說的是，這個文字可以通過屬性的方式，指定顏色和字體大小。比如：
font標(biāo)簽的寫法
效果：
font標(biāo)簽的顯示效果
從書寫的HTML代碼可以看出，font標(biāo)簽包括兩個參數(shù)：
color（字體的顏色）：顏色的值可以為英文，也可以為RGB數(shù)值。
size（字體的大小）：通過數(shù)字1~7可以控制字體的大小。
face（文字的顯示字體）：這個屬性可以設(shè)置顯示的字體。如可以寫為：face="楷體"
在HTML中包括兩種顏色體系。一種就是直接寫顏色的英文，如：red（紅色）、blue（藍(lán)色）、green（綠色）等。
不同顏色
另外一種顏色體系是RGB。由R（Red）、G（Green）、B（Blue）三種顏色組成。相信小時候很多人都知道兩種不同的顏料，可以轉(zhuǎn)換為不同的顏色。RGB就是通過紅綠藍(lán)不同的明暗程度。來表示所有的顏色的。
RGB
RGB中的每一個顏色都是以六位十六進(jìn)制進(jìn)行表示。數(shù)值越大顏色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#號。
段落標(biāo)簽為p。會為里面的文字自動分段顯示：
p標(biāo)簽自動分段
換行標(biāo)簽為br，這是個單標(biāo)簽。寫法為：<br/>。
br標(biāo)簽的形式
效果：
換行標(biāo)簽的效果
默認(rèn)情況下，HTML的文檔排列形式為自上而下，自左而右。標(biāo)簽包括行級標(biāo)簽和塊級標(biāo)簽。如果想要對塊級標(biāo)簽進(jìn)行換行，你就需要使用br標(biāo)簽。
下面是幾個標(biāo)簽，大家直接Sublime中寫入看一下效果哦。在以后就直接使用啦
居中預(yù)格式化標(biāo)簽
TML 顏色由紅色、綠色、藍(lán)色混合而成。
顏色值
HTML 顏色由一個十六進(jìn)制符號來定義，這個符號由紅色、綠色和藍(lán)色的值組成（RGB）。
種顏色的最小值是0（十六進(jìn)制：#00）。最大值是255（十六進(jìn)制：#FF）。
這個表格給出了由三種顏色混合而成的具體效果：
顏色值
| 顏色(Color) | 顏色十六進(jìn)制(Color HEX) | 顏色RGB(Color RGB) |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #FF0000 | rgb(255,0,0) | |
| #00FF00 | rgb(0,255,0) | |
| #0000FF | rgb(0,0,255) | |
| #FFFF00 | rgb(255,255,0) | |
| #00FFFF | rgb(0,255,255) | |
| #FF00FF | rgb(255,0,255) | |
| #C0C0C0 | rgb(192,192,192) | |
| #FFFFFF | rgb(255,255,255) |
1600萬種不同顏色
三種顏色 紅，綠，藍(lán)的組合從0到255，一共有1600萬種不同顏色(256 x 256 x 256)。
在下面的顏色表中你會看到不同的結(jié)果，從0到255的紅色，同時設(shè)置綠色和藍(lán)色的值為0,隨著紅色的值變化，不同的值都顯示了不同的顏色。
| Red Light | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080000 | rgb(8,0,0) | |
| #100000 | rgb(16,0,0) | |
| #180000 | rgb(24,0,0) | |
| #200000 | rgb(32,0,0) | |
| #280000 | rgb(40,0,0) | |
| #300000 | rgb(48,0,0) | |
| #380000 | rgb(56,0,0) | |
| #400000 | rgb(64,0,0) | |
| #480000 | rgb(72,0,0) | |
| #500000 | rgb(80,0,0) | |
| #580000 | rgb(88,0,0) | |
| #600000 | rgb(96,0,0) | |
| #680000 | rgb(104,0,0) | |
| #700000 | rgb(112,0,0) | |
| #780000 | rgb(120,0,0) | |
| #800000 | rgb(128,0,0) | |
| #880000 | rgb(136,0,0) | |
| #900000 | rgb(144,0,0) | |
| #980000 | rgb(152,0,0) | |
| #A00000 | rgb(160,0,0) | |
| #A80000 | rgb(168,0,0) | |
| #B00000 | rgb(176,0,0) | |
| #B80000 | rgb(184,0,0) | |
| #C00000 | rgb(192,0,0) | |
| #C80000 | rgb(200,0,0) | |
| #D00000 | rgb(208,0,0) | |
| #D80000 | rgb(216,0,0) | |
| #E00000 | rgb(224,0,0) | |
| #E80000 | rgb(232,0,0) | |
| #F00000 | rgb(240,0,0) | |
| #F80000 | rgb(248,0,0) | |
| #FF0000 | rgb(255,0,0) |
灰暗色調(diào)
以下展示了灰色到黑色的漸變
| Gray Shades | Color HEX | Color RGB |
|---|---|---|
| #000000 | rgb(0,0,0) | |
| #080808 | rgb(8,8,8) | |
| #101010 | rgb(16,16,16) | |
| #181818 | rgb(24,24,24) | |
| #202020 | rgb(32,32,32) | |
| #282828 | rgb(40,40,40) | |
| #303030 | rgb(48,48,48) | |
| #383838 | rgb(56,56,56) | |
| #404040 | rgb(64,64,64) | |
| #484848 | rgb(72,72,72) | |
| #505050 | rgb(80,80,80) | |
| #585858 | rgb(88,88,88) | |
| #606060 | rgb(96,96,96) | |
| #686868 | rgb(104,104,104) | |
| #707070 | rgb(112,112,112) | |
| #787878 | rgb(120,120,120) | |
| #808080 | rgb(128,128,128) | |
| #888888 | rgb(136,136,136) | |
| #909090 | rgb(144,144,144) | |
| #989898 | rgb(152,152,152) | |
| #A0A0A0 | rgb(160,160,160) | |
| #A8A8A8 | rgb(168,168,168) | |
| #B0B0B0 | rgb(176,176,176) | |
| #B8B8B8 | rgb(184,184,184) | |
| #C0C0C0 | rgb(192,192,192) | |
| #C8C8C8 | rgb(200,200,200) | |
| #D0D0D0 | rgb(208,208,208) | |
| #D8D8D8 | rgb(216,216,216) | |
| #E0E0E0 | rgb(224,224,224) | |
| #E8E8E8 | rgb(232,232,232) | |
| #F0F0F0 | rgb(240,240,240) | |
| #F8F8F8 | rgb(248,248,248) | |
| #FFFFFF | rgb(255,255,255) |
Web安全色?
數(shù)年以前，當(dāng)大多數(shù)計算機(jī)僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標(biāo)準(zhǔn)被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。
我們不確定如今這么做的意義有多大，因?yàn)樵絹碓蕉嗟挠嬎銠C(jī)有能力處理數(shù)百萬種顏色，不過做選擇還是你自己。
最初，216 跨平臺 web 安全色被用來確保：當(dāng)計算機(jī)使用 256 色調(diào)色板時，所有的計算機(jī)能夠正確地顯示所有的顏色。
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
回說到html的基本格式和a標(biāo)簽的用法。
接下來說一說段落標(biāo)簽——p標(biāo)簽，不管是一封信還是一篇文章，合理的分段能夠讓整篇文字的結(jié)構(gòu)更加清晰。
整篇文章以標(biāo)題起始。
在html中標(biāo)題標(biāo)簽有h1、h2、h3、h4、h5、h6。
上回我們創(chuàng)建了一個index.html文件，里面寫了：
現(xiàn)在把body中的代碼換成：
雙擊index.html文件，便會在瀏覽器中看到如下效果：
h2標(biāo)簽中的文字相較h1標(biāo)簽中的文字顯示效果要小一些，h3比h2又小一些，h6最小。具體效果你可以自己敲代碼試一試。
標(biāo)題之后便是第一個自然段。html中段落標(biāo)簽為p，代碼如下：
瀏覽器中的效果如下：
標(biāo)題標(biāo)簽和段落標(biāo)簽都會獨(dú)占一行，獨(dú)占一行的意思就是，第一行我只寫了一個字，那么之后的字就不能和我在一行了，因?yàn)槲要?dú)占了。比如，下面圖中這樣，我在h3標(biāo)簽中只寫了一個“我”字，h3標(biāo)簽之后寫了一個“你”字：
瀏覽器中的效果：
如果，我們不用h3標(biāo)簽，就像下面這樣：
瀏覽器中的效果：
現(xiàn)在我們是不是可以理解標(biāo)題標(biāo)簽（h1~h6）和段落標(biāo)簽（p）獨(dú)占一行的意思了。
獨(dú)占一行的標(biāo)簽還有div、blockquote。
下面是div、blockquote標(biāo)簽的代碼：
瀏覽器中的效果：
你一定注意到代碼中我寫的話了吧，p標(biāo)簽有內(nèi)邊距，div沒有，blockquote不光有內(nèi)邊距還有縮進(jìn)，那么內(nèi)邊距是個什么東東呢？縮進(jìn)又是什么東東呢？聽我給你慢慢道來。
我們在紙上畫邊框?yàn)榧t色的一個長方形或者正方形，長方形或者正方形里面放一個藍(lán)色的紙片。如下圖：
理解了內(nèi)邊距之后，那么再來說說縮進(jìn)，縮進(jìn)就好像是在前面加了幾個空白一樣。如果你要手動縮進(jìn)那你就敲幾個空格上去，如果用blockquote標(biāo)簽的話，這個標(biāo)簽自動給你加上了縮進(jìn)。
那么p標(biāo)簽和blockquote標(biāo)簽的內(nèi)邊距怎么才能看得見呢？
其實(shí)瀏覽器有一個查看內(nèi)邊距的功能，這個功能叫做開發(fā)者工具。
看圖：
你也可以按f12鍵，調(diào)出這個開發(fā)者工具。所有瀏覽器都有這個開發(fā)者工具，一般的快捷鍵都是f12。
我們來查看一下p標(biāo)簽的內(nèi)邊距：
p標(biāo)簽的上、下、左、右邊框和它里面的文字之間是有距離的，也就是圖中土黃色的部分。
但是如果你用開發(fā)者工具，查看div標(biāo)簽的話，并沒有內(nèi)邊距。
查看blockquote標(biāo)簽的話也是有內(nèi)邊距的。
我們?yōu)槭裁匆私膺@些東西呢？這些東西是很重要的基礎(chǔ)，不管學(xué)什么東西，老師總會強(qiáng)調(diào)你基礎(chǔ)很重要。但是你卻感覺這些東西好像并沒有什么用，那是因?yàn)榍捌趯W(xué)的東西還沒有構(gòu)成一個體系，如果現(xiàn)在讓你做一個淘寶首頁出來，你肯定不會，因?yàn)槟阒粚W(xué)了一丟丟，還沒有能力去做淘寶的首頁。等你學(xué)完了，有能力做淘寶首頁的時候，你會發(fā)現(xiàn)不了解這些基礎(chǔ)的后果就是從頭再學(xué)一遍，徒增學(xué)習(xí)成本。何不現(xiàn)在就把基礎(chǔ)打扎實(shí)呢？
動手做，動手敲，敲完了在瀏覽器測試效果。不敲光看，你是永遠(yuǎn)學(xué)不會的。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
