作者簡介
作者名: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 哥就會有新知識get
👸小媛:bit 哥我抓到你了,趕緊教我新知識吧。
🐶1_bit:我這是懶得跑,否則你怎么可能抓到我。
👸小媛:說的跟真的一樣 <(︶︿︶)>_╭∩╮╭∩╮。
🐶1_bit:來吧,我們繼續上一節的內容講,上一節已經知道了我們大致基礎 html 文檔標簽的內容,這一節我們先講一下一些基礎標簽吧。
👸小媛:好,你講。
🐶1_bit:我們先學習一個標題標簽吧。
👸小媛:哈?你做出來,否則我不知道你講的標題標簽是什么東西。
🐶1_bit:你還記得 <body></body>
標簽是用來干什么的嗎?
👸小媛:啊?是用來主要需要顯示內容,你在里面填入文本就可以顯示呢。
二、<h1></h1>
是6胞胎
🐶1_bit:嗯,那我們先添加一個<h1></h1>
標簽吧。
👸小媛:這個標簽是啥東西。
🐶1_bit:你先看下面的示例。
<!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>
</body>
</html>
👸小媛:你在 <body></body>
標簽內部添加了一串標簽 <h1>這是h1標簽顯示的示例</h1>
。
🐶1_bit:這個 <h1></h1>
標簽就是標題標簽的意思,你可以運行這個網頁查看里面的內容。
👸小媛:嗯,我看到了,這個字號很大,這個就是標題的顯示形式嗎?
🐶1_bit:是的,其實還有不同樣式的標題,例如如下示例。
<!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>
</body>
</html>
👸小媛:一共 6 個嗎?我發現 1 號標簽顯示的內容越大,然后逐漸往 6 號越來越小。
🐶1_bit:是的,而且他們是每一對標簽開始后都會換行顯示?
👸小媛:啥意思?
🐶1_bit:就是會換行重新輸出,是不是 h1到h6 每一行都是新重起一行?
👸小媛:是的。
🐶1_bit:在 html 中有些元素并不會重起一行進行新內容顯示喲。
👸小媛:是嗎,剛學,沒見過,你說了我也不懂 ((‵□′)) 。
🐶1_bit:哈哈哈,我們之后會說的,這個都是小東西。
👸小媛:趕緊新內容吧。
三、<p></p>
是單身狗
🐶1_bit:那我們再來講一個元素叫做段落元素。平常你在文章里面看到段落是怎么樣的?
👸小媛:就是重啟一行咯。
🐶1_bit:這個段落元素也是這個作用呢。
👸小媛:趕緊拿出來看看。
🐶1_bit:那你看下面示例,詳情我在里面解釋清楚了呢。
<!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><p>這是使用短路 p 標簽的示例,每個 p 元素都會重啟一行進行顯示,并且每一個 p 元素都會間隔較大,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><p>這是第二個 p 標簽,你可以看到跟上面的內容之間間隔還是挺大。</p>
</body>
</html>
👸小媛:果然如此。
🐶1_bit:我們把這個頁面做好看一點吧,這樣你就可以之后直接拿來看筆記了。
👸小媛:你加了個標題呀?
🐶1_bit:是的,標簽如下,你仔細看喲。
<!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:88。
👸小媛:別跑…((‵□′))