html-2, a img ul li ol dl dt dd 標簽與列表標簽的簡單使用
阿新 • • 發佈：2018-09-17
oid spa sta 資源加載 顯示 self start uno 實現圖
<!-- a： （1）超鏈接 href 超鏈接的地址 target: _self 默認 在當前中打開鏈接地址 _blank 在空白的頁面打開連接地址 （2）標簽內部跳轉 錨點 默認有點擊行為。我們可以javascript:void(0);阻止a標簽的默認點擊行為。 如果有href = # 表示返回置當前頁頁首，相當於刷新，編寫時應避免，應該使用 javascript:void(0) img src:連接的圖片資源 alt:圖片資源加載失敗。顯示的文本 a 標簽與img標簽連用 實現圖片點擊跳轉頁面 標簽可以裝 img 但會出問題 即 a標簽會出現在圖片下邊一行空行 所以只有將a標簽設置於圖片一樣大小才不會出問題。先把a標簽變成行內塊 才能設置大小 ul: unordered list 無序列表 ul下的子元素只能是li 可設計多級列表 默認變成不同心(用處很廣泛 將來去除列表的標誌可以做很多事情) li type=‘circle‘ 圓心 type=‘square‘ 方塊 ol: ordered list 只能是li dl：定義列表 dt:定義標題 dd:定義描述 在標題後有縮進--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標簽的使用</title> <style type="text/css"> a{ display:inline-block; width = 300px; height = 300px; } </style> </head> <body> <!--a 標簽可以裝 img 但會出問題 即 a標簽會出現在圖片下邊一行空行 所以只有將a標簽設置於圖片一樣大小才不會出問題--> <!--先把a標簽變成行內塊 才能設置大小--> <a href="https://www.baidu.com/"> <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" alt="圖片加載失敗顯示文字" width="300" height="300"> </a> <!--錨點 這種寫法盡量避免--> <a href="#">點擊刷新 返回頂部</a> <!-- hash值 錨點 默認有點擊行為 javascript:void(0);阻止a標簽的默認點擊行為--> <a href="javascript:void(0);">阻止a標簽的默認點擊行為</a> <!--ul + li 列表標簽ul只能裝li type="circle" 圓心 type="square"方心 --> <ul> <li type="circle">一級列表</li> <li type="square">一級列表</li> <li>一級列表 <ul> <li>二級列表</li> <li>二級列表 <ul> <li>三級列表</li> </ul> </li> </ul> </li> </ul> <!--ol + li 默認顯示 1 1 1 1編號--> <ol> <li>ol一級 <ol> <li>二級</li> </ol> </li> </ol> <!--ol + li 顯示編號形式type 選擇編號格式 start設置開始編號默認從1開始--> <ol type="i" start="3"> <li>ol一級 <ol type="1" start="1"> <li>二級</li> </ol> </li> </ol> <!--dl + dt + dd 這表示dt的作為標題 --> <dl> <dt>dl+dt表格標簽一</dt> <dd>dl+dt表格標簽二</dd> <dd>dl+dt表格標簽三</dd> <dd>dl+dt表格標簽四</dd> </dl> </body> </html>
html-2, a img ul li ol dl dt dd 標簽與列表標簽的簡單使用