格式化標籤
無序列表 - <ul>...</ul>
程序源碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>格式化標籤</title></head><body> <ul> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> </ul></body></html>運行效果:
有序列表 - <ol>...</ol>
程序源碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>格式化標籤</title></head><body> <ol> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> </ol> <ol type="A" start="2"> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> </ol> <ol type="a" start="3"> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> </ol> <ol type="I" start="4"> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> </ol> <ol type="i" start="5"> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> <li>Mr.邪-帶你學編程</li> </ol></body></html>運行效果:
自定義列表 - <dl>...</dl>
程序源碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>格式化標籤</title></head><body> <dl> <dt>五絕綽號</dt> <dd>東邪</dd> <dd>西毒</dd> <dd>南帝</dd> <dd>北丐</dd> <dd>中神通</dd> </dl> <dl> <dt>五絕本名</dt> <dd>黃固</dd> <dd>歐陽鋒</dd> <dd>段智興</dd> <dd>洪七公</dd> <dd>王重陽</dd> </dl></body></html>運行效果:
原格式文本 - <pre>...</pre>
程序源碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>格式化標籤</title></head><body> <pre> 《登鸛雀樓》 白 如 依 山 盡, 黃 河 入 海 流。 欲 窮 千 裡 目, 更 上 一 層 樓。 </pre> <hr> <pre> Class Hello{ public static void main(String[] args){ System.out.println("Hello Java !~"); } } </pre> <hr> <pre> #include <stdio.h> #include <stdlib.h>
int main(int argc, char *argv[]) { printf("Hello C !~"); return EXIT_SUCCESS; } </pre></body></html>運行效果:
容器 - <div>...</div>
程序源碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>格式化標籤</title></head><body> <div style="border: 1px solid red; width: 100px; height: 100px;"> Mr.邪帶你學編程 </div> <div style="border: 1px solid blue; width: 200px; height: 200px;"> Mr.邪帶你學編程 </div></body></html>運行效果:
非塊狀 - <span>...</span>
程序源碼:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>格式化標籤</title></head><body> <span style="color: red">Mr</span> . 邪帶你學編程 <br> Mr<span style="color: red"> . </span>邪帶你學編程 <br> Mr . <span style="color: red">邪</span>帶你學編程 <br> Mr . 邪<span style="color: red">帶</span>你學編程 <br> Mr . 邪帶<span style="color: red">你</span>學編程 <br> Mr . 邪帶你<span style="color: red">學</span>編程 <br> Mr . 邪帶你學<span style="color: red">編</span>程 <br> Mr . 邪帶你學編<span style="color: red">程</span> <br></body></html>運行效果:
附近文章 上一期 - 筆記 點擊下方
第03期 - 《前端開發-HTML文本標籤》↓↓↓↓
PS:關注視頻號「Mr.邪-帶你學編程」,配套短視頻課程講義公眾號程同步更新 ...
持續關注,獲取更多課程,不斷更新中 ...