我化身保姆为你提供 html 教学服务(6)
作者簡介
作者名:1_bit
簡介:CSDN博客專家,2020年博客之星TOP5,藍橋簽約作者。15-16年曾在網上直播,帶領一批程序小白走上程序員之路。歡迎各位小白加我咨詢我相關信息,迷茫的你會找到答案。
目錄
HTML基礎之bit哥的反客為主之道(9)—— <big></big> 放大標簽 h5不支持、 <center></center> 居中h5不支持、<blockquote></blockquote> 引用標簽
趕緊3分鐘學完15分鐘的內容我要出去玩(8)—— <big></big> 放大標簽 h5不支持、 <center></center> 居中h5不支持、<blockquote></blockquote> 引用標簽
我使用 html 反向輸出自己打自己(7)——<a>超鏈接、<bdo>覆蓋
我化身保姆為你提供 html 教學服務(6)——<b>加粗、<br>換行、<hr>分隔
我開始一直以為網頁制作好難(5)——<h1></h1> 標題、<p></p> 段落、
你知道出現“亂碼”的原因是什么嗎?(4)——編碼、<title></title> 網頁標題、
一個基礎的 HTML 文檔有哪些標簽?第一節(3)—— <!DOCTYPE html>說明、<head></head> 頭部、<body></body> 主體、
使用 Vscode 編寫 HTML 文檔竟然可以自動寫代碼(2)—— vscode、快捷方式
保姆級的HTML零基礎教程少見吧?這是第一節(1)——介紹、雞湯
一、上門服務的保姆
噠噠噠…噠噠噠…(敲門聲)
👸小媛:bit哥你怎么來了?稀客稀客,真是無事不登三寶殿,說吧你有什么事?
🐶1_bit:沒事不能來嗎?
👸小媛:怎么每次這句話的回復都是 “沒事不能來嗎?”
🐶1_bit:這是你問了我之后的自然反應。
👸小媛:emm,所以到底有什么事,竟然不怕我去找你,自己送上門?
🐶1_bit:不開心嗎?
👸小媛:真是驚喜。
🐶1_bit:其實,我來是好事。
👸小媛:什么好事?
🐶1_bit:當然是上門服務教你 html 了。
👸小媛:真是好心,真是保姆級服務呀。
🐶1_bit:好了,上一節我們學到了標題標簽還有那個段落標簽,現在我們開始學新的內容吧。
👸小媛:行,趕緊把。
二、加粗
🐶1_bit:這一節我們先學習一下如何給段落標簽里面的內容加粗怎么樣?
👸小媛:可以呀,你說了算。
🐶1_bit:首先我們看一下上一節的完整 html 文檔。
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSDN 博主 1_bit 的 HTML 知識匯總頁面</title> </head> <body><h1>這是h1標簽顯示的示例</h1><h2>這是h2標簽顯示的示例</h2><h3>這是h3標簽顯示的示例</h3><h4>這是h4標簽顯示的示例</h4><h5>這是h5標簽顯示的示例</h5><h6>這是h6標簽顯示的示例</h6><h1>p標簽內容:</h1><p>這是使用短路 p 標簽的示例,每個 p 元素都會重啟一行進行顯示,并且每一個 p 元素都會間隔較大,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><p>這是第二個 p 標簽,你可以看到跟上面的內容之間間隔還是挺大。</p> </body> </html>🐶1_bit:我們現在要學習的就是將以上短路標簽中的指定一段話進行自體加粗。
👸小媛:是不是又要學習一個新標簽?
🐶1_bit:是的,這次我們要學習一個<b> 標簽,示例如下,然后你運行這個界面看看,是否這段內容加粗了呢?
<p>這是使用短路 p 標簽的示例,<b>每個 p 元素都會重啟一行進行顯示,并且每一個 p 元素都會間隔較大</b>,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p>👸小媛:加粗了,真的好簡單呀,比那些 C 語言,python 都簡單。
三、換行
🐶1_bit:那肯定是的,因為 html 是標簽語言,并不能說是編程語言呢。我們繼續學習一個換行標簽吧。
👸小媛:為什么要學,不就是每一行會自動換行嗎?
🐶1_bit:萬一你在某些地方需要一定換行呢?
👸小媛:明白了,趕快教我吧。
🐶1_bit:繼續用上面示例的段落舉例,我們使用的換行標簽是 <br> ,這個標簽沒有結束標簽,單獨一個標簽,看下面示例。
<p>這是使用短路 p 標簽的示例,每個 p 元素都會重啟一行進行顯示,(這里后面使用換行標簽)<br>并且每一個 p 元素都會間隔較大,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p>👸小媛:完成了,確實換行了。
🐶1_bit:我們再學一個水平線標簽吧,這個標簽可以在當前一行直接顯示一個水平線,可以作為分隔喲。我們看看我們改動了的 html 文檔內容。
四、分隔
🐶1_bit:這樣顯示沒有分隔很難看。
🐶1_bit:我們直接在每一個內容結束后加一個 <hr> 標簽。
👸小媛:我看到結果了,確實清晰多了。
🐶1_bit:好的,再見,保姆服務完畢。
👸小媛:emmm,再見。
總結
以上是生活随笔為你收集整理的我化身保姆为你提供 html 教学服务(6)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 我抓到bit哥了,嘿嘿嘿(5)
- 下一篇: 我使用 html 反向输出自己打自己(7