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