img、列表和table标签
生活随笔
收集整理的這篇文章主要介紹了
img、列表和table标签
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、img圖片
<body><a href="https://www.fmtxt.com"><img src="images/1.jpg" title="哆啦A夢(mèng)" style="height: 200px; width: 200px " alt="哆啦A夢(mèng)"/></a> </body>'''1. 放在 a 標(biāo)簽中，點(diǎn)擊圖片就能跳轉(zhuǎn)到鏈接的網(wǎng)站2. src : 圖片的位置3. title：當(dāng)鼠標(biāo)放置在圖片上時(shí)顯示的內(nèi)容4. alt：當(dāng)圖片不能打開(kāi)時(shí)，顯示的內(nèi)容 '''注： img 標(biāo)簽?zāi)J(rèn)會(huì)自帶1px的邊框，可以使用樣式 boder:0 去掉這個(gè)邊框
二、列表標(biāo)簽
2.1 ul標(biāo)簽
說(shuō)明：ul=>unordered lists 無(wú)序列表，跟li標(biāo)簽配合著使用
<body><ul><li>1</li><li>2</li><li>3</li></ul> </body>如下：
2.2 ol標(biāo)簽
說(shuō)明：ol=>ordered lists 有序列表，也是跟li標(biāo)簽配合著使用
<body><ol><li>Python</li><li>Html</li><li>Linux</li></ol> </body>如下：
2.3 dl標(biāo)簽
? dl=>defintion list 定義一個(gè)列表?? 配合著dt=>defintion title(定義標(biāo)題)和dd=>defintion description(描述)兩個(gè)標(biāo)簽配合使用
<dl><dt>浙江</dt><dd>杭州</dd><dd>金華</dd><dd>嘉興</dd><dt>江蘇</dt><dd>蘇州</dd><dd>南京</dd><dd>無(wú)錫</dd></dl>如下：
三、table標(biāo)簽
3.1 tr 和 td
<table border="1"><tr><td>姓名</td><td>年齡</td><td>地址</td></tr><tr><td>張三</td><td>22</td><td>北京</td></tr><tr><td>李四</td><td>22</td><td>上海</td></tr></table>'''1. tr : 表示行2. td： 表示列 '''如下：
3.2 規(guī)范的表格寫(xiě)法?
<table border="1"><thead><tr><td>表頭1</td><td>表頭2</td><td>表頭3</td><td>表頭4</td></tr></thead><tbody><tr><td><a href="https://www.baidu.com">1</a></td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody>'''thead：表頭tbody：內(nèi)容a標(biāo)簽：為表格中內(nèi)容做鏈接'''如下：
3.3 合并單元格--列之間合并
<thead><tr><td>表頭1</td><td>表頭2</td><td>表頭3</td><td>表頭4</td></tr></thead><tbody><tr><td>1</td><td colspan="2">1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></tbody>'''colspan="2"：表示占兩列， 同時(shí)要?jiǎng)h去一列 '''如下：
3.3 合并單元格--行之間合并
<tbody><tr><td rowspan="2">1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td></tr></tbody>'''rowspan="2"：表示橫跨兩行，同時(shí)要在下一行中刪去一列 '''如下：
?
更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的img、列表和table标签的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 模态对话框和全选反选
- 下一篇： EasyUI加zTree使用解析 eas