整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實(shí)用視頻。
主要內(nèi)容：這是HTML課程的第四課，主要講解HTML的文字標(biāo)簽和格式標(biāo)簽。在今天我們做一個(gè)屬于自己的簡(jiǎn)歷。
在上一節(jié)中主要講解了HTML的標(biāo)題標(biāo)簽（h1~h7）以及加粗、斜體、下劃線、上下標(biāo)等格式的標(biāo)簽。上節(jié)請(qǐng)戳→HTML電腦編程03 標(biāo)題物理字體標(biāo)簽的使用，大學(xué)生學(xué)編程
HTML
font標(biāo)簽通過字面意思來看，就是字體的意思。是的這是一個(gè)用來顯示文字的標(biāo)簽。不過值得說的是，這個(gè)文字可以通過屬性的方式，指定顏色和字體大小。比如：
font標(biāo)簽的寫法
效果：
font標(biāo)簽的顯示效果
從書寫的HTML代碼可以看出，font標(biāo)簽包括兩個(gè)參數(shù)：
color（字體的顏色）：顏色的值可以為英文，也可以為RGB數(shù)值。
size（字體的大?。和ㄟ^數(shù)字1~7可以控制字體的大小。
face（文字的顯示字體）：這個(gè)屬性可以設(shè)置顯示的字體。如可以寫為：face="楷體"
在HTML中包括兩種顏色體系。一種就是直接寫顏色的英文，如：red（紅色）、blue（藍(lán)色）、green（綠色）等。
不同顏色
另外一種顏色體系是RGB。由R（Red）、G（Green）、B（Blue）三種顏色組成。相信小時(shí)候很多人都知道兩種不同的顏料，可以轉(zhuǎn)換為不同的顏色。RGB就是通過紅綠藍(lán)不同的明暗程度。來表示所有的顏色的。
RGB
RGB中的每一個(gè)顏色都是以六位十六進(jìn)制進(jìn)行表示。數(shù)值越大顏色越深。如：000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#號(hào)。
段落標(biāo)簽為p。會(huì)為里面的文字自動(dòng)分段顯示：
p標(biāo)簽自動(dòng)分段
換行標(biāo)簽為br，這是個(gè)單標(biāo)簽。寫法為：<br/>。
br標(biāo)簽的形式
效果：
換行標(biāo)簽的效果
默認(rèn)情況下，HTML的文檔排列形式為自上而下，自左而右。標(biāo)簽包括行級(jí)標(biāo)簽和塊級(jí)標(biāo)簽。如果想要對(duì)塊級(jí)標(biāo)簽進(jìn)行換行，你就需要使用br標(biāo)簽。
下面是幾個(gè)標(biāo)簽，大家直接Sublime中寫入看一下效果哦。在以后就直接使用啦
居中預(yù)格式化標(biāo)簽
HTML 可以將文檔分割為若干段落。
段落是通過 <p> 標(biāo)簽定義的。
實(shí)例
<p>這是一個(gè)段落 </p>
<p>這是另一個(gè)段落</p>
注意：瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。（</p> 是塊級(jí)元素）
不要忘記結(jié)束標(biāo)簽
即使忘了使用結(jié)束標(biāo)簽，大多數(shù)瀏覽器也會(huì)正確地將 HTML 顯示出來：
實(shí)例
<p>這是一個(gè)段落
<p>這是另一個(gè)段落
上面的例子在大多數(shù)瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結(jié)束標(biāo)簽會(huì)產(chǎn)生意想不到的結(jié)果和錯(cuò)誤。
注釋: 在未來的 HTML 版本中，不允許省略結(jié)束標(biāo)簽。
如果您希望在不產(chǎn)生一個(gè)新段落的情況下進(jìn)行換行（新行），請(qǐng)使用 <br> 標(biāo)簽：
實(shí)例
<p>這個(gè)<br>段落<br>演示了分行的效果</p>
<br /> 元素是一個(gè)空的 HTML 元素。由于關(guān)閉標(biāo)簽沒有任何意義，因此它沒有結(jié)束標(biāo)簽。
HTML 輸出- 使用提醒
我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對(duì)窗口的調(diào)整都可能導(dǎo)致不同的結(jié)果。
對(duì)于 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當(dāng)顯示頁面時(shí)，瀏覽器會(huì)移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會(huì)被算作一個(gè)空格。需要注意的是，HTML 代碼中的所有連續(xù)的空行（換行）也被顯示為一個(gè)空格。
HTML 標(biāo)簽參考手冊(cè)
技術(shù)等級(jí)】初級(jí)
【承接文章】《CSS字體屬性，詳解屬性用法，提升前端小白能力》
本文重點(diǎn)講解CSS技術(shù)中有關(guān)文本樣式的屬性以及這些屬性的取值。本文屬于前端開發(fā)的初級(jí)教程，適合于剛剛開始接觸CSS技術(shù)的學(xué)習(xí)者。
所謂文本，就是大段落的文字。當(dāng)文字多到可以形成段落時(shí)，就會(huì)涉及到段落的一些樣式調(diào)整。例如段落的對(duì)齊方式、段落的首行縮進(jìn)等。
被歸結(jié)為段落屬性的CSS樣式包括八個(gè)，小海老師將其分為兩組。
第一組有如下五個(gè)屬性：
letter-spacing
word-spacing
text-decoration
text-transform
text-indent
第二組有如下三個(gè)屬性：
text-align
line-height
vertical-align
本文小海老師先為大家講解第一組的5個(gè)屬性，后續(xù)的文章會(huì)緊接著為大家講解第二組的3個(gè)屬性。
一、設(shè)置字符間距：
CSS技術(shù)利用letter-spacing屬性來設(shè)置字符間距
該屬性可以有多種取值：
normal，正常，表示字符間距采用系統(tǒng)定義的默認(rèn)間距。
帶單位的長(zhǎng)度值，指定字符間距的具體數(shù)值。
實(shí)例：.sty01{letter-spacing:20px;}
上述代碼定義了用戶自定義類sty01，該樣式設(shè)置字符間距為20像素。
二、設(shè)置單詞間距：
CSS技術(shù)利用word-spacing屬性來設(shè)置單詞間距
在頁面中，單詞是以空格作為依據(jù)的，每個(gè)空格之間被認(rèn)定為一個(gè)單詞。所以也可以認(rèn)為該屬性是用來調(diào)整句子中空格的距離的。
該屬性可以有多種取值：
normal，正常，表示單詞間距采用系統(tǒng)定義的默認(rèn)間距。
帶單位的長(zhǎng)度值，指定單詞間距的具體數(shù)值。
實(shí)例：.sty02{word-spacing:20px;}
上述代碼定義了用戶自定義類sty02，該樣式設(shè)置單詞間距為20像素。
三、設(shè)置文本修飾：
CSS技術(shù)利用text-decoration屬性來設(shè)置文本修飾
該屬性可以有多種取值：
none，文本沒有經(jīng)過任何修飾。
underline，下劃線修飾。
overline，上劃線修飾。
line-through，刪除線修飾。
blink，閃爍修飾（主流瀏覽器不支持該效果）。
讓我們一同來看兩個(gè)下例子：
例1：結(jié)合虛類設(shè)定超級(jí)鏈接在鼠標(biāo)經(jīng)過時(shí)顯示下劃線效果。
a:link{font-size:12px;text-decoration:none;}
a:visited{font-size:12px;text-decoration:none;}
a:hover{font-size:12px;text-decoration:underline;}
a:active{font-size:12px;text-decoration:none;}
例2：結(jié)合虛類設(shè)定超級(jí)鏈接在鼠標(biāo)經(jīng)過時(shí)放大字號(hào)效果。
a:link{font-size:12px; }
a:visited{font-size:12px; }
a:hover{font-size:14px; }
a:active{font-size:12px; }
四、設(shè)置段落中西文的大小寫模式：
CSS技術(shù)利用text-transform屬性來設(shè)置西文的大小寫模式
該屬性可以有多種取值：
none，段落中西文的大小寫模式不受CSS樣式的影響。
uppercase，所有西文均為大寫模式。
lowercase，所有西文均為小寫模式。
capitalize，所有西文均為首字母大寫模式。
五、設(shè)置段落的首行縮進(jìn)：
CSS技術(shù)利用text-indent屬性來設(shè)置段落的首行縮進(jìn)
首行縮進(jìn)是指：段落中的第一行與整個(gè)段落左側(cè)之間的距離，也就是我們俗稱的“每一段的第一行空兩個(gè)格”。
該屬性可以取值為：
帶有單位的長(zhǎng)度值，一般首行縮進(jìn)兩個(gè)字符，可設(shè)置為字號(hào)的2倍。
實(shí)例：設(shè)置段落的首行縮進(jìn)為兩個(gè)字符的距離。
<p>段落內(nèi)容……</p>
p{font-size:14px; text-indent:28px;}
下一篇文章中，小海老師會(huì)為大家從細(xì)節(jié)上深入剖析text-align屬性以及塊級(jí)元素和內(nèi)聯(lián)元素的使用。塊級(jí)元素與內(nèi)聯(lián)元素在前端開發(fā)中的作用非常重要，我會(huì)用整整一篇文章的篇幅，為廣大Web前端愛好者們?cè)敿?xì)講解這兩個(gè)概念。對(duì)于渴望在前端開發(fā)道路上前進(jìn)的你一定不能錯(cuò)過！
如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。
在頭條上也已經(jīng)寫了有七八篇文章了。這些文章都是從前端開發(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)持的走下去。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
