作者簡介
作者名: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:昨天不是去教過你來嗎?怎么你今天又來了?
👸小媛:是嘛,昨天教的那一點不夠打牙祭,希望 bit 哥多教一點。
dog:1_bit:emm,你是不是要纏著我不放來。
👸小媛:bit 哥,年齡是有距離的,所以你別自戀了我不會纏著你的。
dog:1_bit:那你還來?
👸小媛:這是對知識的渴望。
dog:1_bit:emm,行吧。
👸小媛:多謝 bit 哥。
dog:1_bit:那我們先講一個超鏈接標簽 <a></a>
標簽吧。
👸小媛:什么是超鏈接?
dog:1_bit:emm,就是內容鏈接,可以跳轉到一個資源或者說一個網址,懂了吧?
👸小媛:原來如此。
dog:1_bit:那我們先看看超鏈接標簽<a></a>
吧。.
👸小媛:好的。
dog:1_bit:完成一個超鏈接的標簽編寫非常簡單,首先我們需要在 <a></a>
之間指定顯示的文本:
<a>這里跳轉到我的博客</a>
👸小媛:接下來怎么設置跳轉的目標呢?
dog:1_bit:我們只需要在這個 <a></a>
標簽的起始標簽 <a>
中指定一個 href 屬性,這個時候就可以跳轉到目標地址了。
<a href="https://blog.csdn.net/A757291228">超鏈接a標簽指定href屬性后就可以跳轉到目標地址</a>
👸小媛:那個 href 后面雙引號中就是跳轉的地址嗎?
dog:1_bit:是的,此時顯示的時候將會是以下的呈現形式。
👸小媛:點擊后就可以跳轉到目標地址呢,明白了。
dog:1_bit:接下來我們再試試 <bdo></bdo>
標簽。
👸小媛:這又是什么鬼,感覺英文逐漸變難。
dog:1_bit:哈哈哈,我們只需要記住他們的作用就可以了。
👸小媛:好像說的也是。
dog:1_bit: <bdo></bdo>
標簽是反向輸出的意思。
👸小媛:哈?自己打自己嗎?
dog:1_bit:emm,其實就是一個文本按照你指定的方式去顯示。
👸小媛:例如呢?
dog:1_bit:例如有一個文本是“小媛今早吃了糯米雞泡飯”,我們想讓這個文本在顯示的時候第一個字變成最后一個字,然后反向從后面顯示,這個時候就可以用到 <bdo></bdo>
了。
👸小媛:唔,明白了。但是我聲明一點,我沒有吃糯米雞泡飯,我都不知道這是啥。
dog:1_bit:好了,我們先看看示例吧。
<bdo dir="rtl">小媛今早吃了糯米雞泡飯</bdo>
👸小媛:然后呢?
dog:1_bit:你運行看一遍。
👸小媛:反向輸出了。
dog:1_bit:我們仔細看一下 <bdo></bdo>
標簽中的 dir 屬性。dir 屬性為 rtl 時就表示 right to left,意思是從右到左輸出顯示,如果 dir 屬性為 ltr 意思就是 left to right,就是正常的從左到右顯示。
👸小媛:明白了。
dog: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><hr><h1>p段落標簽內容:</h1><p>這是使用短路 p 標簽的示例,每個 p 元素都會重啟一行進行顯示,并且每一個 p 元素都會間隔較大,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><p>這是第二個 p 標簽,你可以看到跟上面的內容之間間隔還是挺大。</p><hr><h1>b加粗標簽內容:</h1><p>這是使用短路 p 標簽的示例,<b>每個 p 元素都會重啟一行進行顯示,并且每一個 p 元素都會間隔較大</b>,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><hr><h1>br換行標簽內容:</h1><p>這是使用短路 p 標簽的示例,每個 p 元素都會重啟一行進行顯示,(這里后面使用換行標簽)<br>并且每一個 p 元素都會間隔較大,相同一個 p 元素內則會間隔較小,你可以理解成這是這個 p 元素段落的特性如此,也可以說是一個標志特性。</p><hr><h1>a超鏈接標簽內容:</h1><a href="https://blog.csdn.net/A757291228">超鏈接a標簽指定href屬性后就可以跳轉到目標地址</a><hr><h1>bdo 標簽內容:</h1><bdo dir="rtl">小媛今早吃了糯米雞泡飯</bdo> —— 在屬性 dir 中定義 rtl 意思就是從右到左進行輸出,改成 ltr 意思則是從左到右輸出<hr></body>
</html>
👸小媛:感謝bit哥,我知道你想說下次再見了。
dog:1_bit:是的,拜拜。