html的body内标签之图片及表格
?
<li> list 標(biāo)簽定義和用法：
<li> 標(biāo)簽定義列表項(xiàng)目。
<li> 標(biāo)簽可用在有序列表 (<ol>) 和無(wú)序列表 (<ul>) 中。
<ol>標(biāo)記:ordered list稱為有序列表，編號(hào)列表標(biāo)記。其功能是將文字段落向內(nèi)縮進(jìn)，并在段落的每個(gè)項(xiàng)目前面加上1，2，3 有順序的數(shù)字。<ol>標(biāo)記必須搭配<li>標(biāo)記使用。
<ul>標(biāo)記:unordered list稱為無(wú)序列表，其功能是將文字段落向內(nèi)縮進(jìn)，并在段落前面加上圓形或空心圓形
或方塊等項(xiàng)目符號(hào)，以達(dá)到醒目的效果。<ul>必須搭配<li>標(biāo)記使用。 html <dl> <dt> <dd>是一組合標(biāo)簽，使用了dt dd最外層就必須使用dl包裹，此組合標(biāo)簽我們也又叫表格標(biāo)簽，
<dl><dt></dt><dd></dd></dl>為常用標(biāo)題+列表型標(biāo)簽。如沒(méi)有對(duì)dl dt dd標(biāo)簽初始CSS樣式，默認(rèn)dd列表內(nèi)容會(huì)一定縮進(jìn)。
<dl>:define list---定義列表
<dt>:define list title--用于生成定義列表中各列表項(xiàng)的標(biāo)題，重復(fù)使用可以定義多個(gè)列表項(xiàng)的標(biāo)題。
<dd>:define list define--用于生成定義列表各列表項(xiàng)的說(shuō)明文字段，重復(fù)使用可以定義
多個(gè)說(shuō)明文字段。dd是對(duì)應(yīng)dt的簡(jiǎn)短說(shuō)明或解釋。
?
1. img (src,alt,title)
????列表：??
?
?把“1.png“ 放到程序的同級(jí)目錄，把圖片導(dǎo)入。?
<img src="1.png">
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><img src="1.png"> </body> </html>運(yùn)行結(jié)果：
?
2.自己測(cè)試跳轉(zhuǎn)的效果吧，把它包在a標(biāo)簽里面。
title="大美女"： 把鼠標(biāo)放到圖片上的時(shí)候，會(huì)顯示大美女三個(gè)字。
alt="美女"：如果找不到圖片的話，會(huì)顯示美女這兩個(gè)字在圖片的位置。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><a href="http://www.oldboyedu.com"><img src="1.png" title="大美女" style="height:200px;width:200px" alt="美女"></a> </body> </html>?
3.列表
<ul>：<li>：前面是小黑點(diǎn)
<ol>：<li>：前面是數(shù)字
<dl>：表示分層，下面的 <dt>表示標(biāo)題；下面的<dd>表示內(nèi)容。
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><a href="http://www.oldboyedu.com"><img src="1.png" title="大美女" style="height:200px;width:200px" alt="美女"></a><ul><li>asdf</li><li>asdf</li><li>asdf</li><li>asdf</li></ul><ol><li>asdf</li><li>asdf</li><li>asdf</li><li>asdf</li></ol><dl><dt>ttt</dt><dd>ddd</dd><dd>ddd</dd><dd>ddd</dd><dt>ttt</dt><dd>ddd</dd><dd>ddd</dd><dd>ddd</dd></dl> </body> </html>?運(yùn)行結(jié)果：
?
4. 表格，<tr>表示一行table row，<td>表示一列table data cell
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><table border="1"><tr><td>第1行，第1列</td><td>第1行，第2列</td><td>第1行，第3列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td><td>第2行，第3列</td></tr></table> </body> </html>?運(yùn)行結(jié)果：
5.實(shí)例，同上
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><table border="1"><tr><td>主機(jī)名</td><td>端口</td><td>操作</td></tr><tr><td>1.1.1.1</td><td>8080</td><td><a href="s1.html">查看詳細(xì)信息</a></td></tr></table> </body> </html>?運(yùn)行結(jié)果：
?
6. 表頭, 規(guī)范的格式，建議用這個(gè)。個(gè)人感覺(jué)：“列“才是外國(guó)人認(rèn)為放真正內(nèi)容的地方。table--->row---->content(thead, table data cell)
<head> 中 <tr> 表示行table row，<th>表示列。table head
<tbody>中<tr>表示行table row，<td>表示列。table data cell
<th>則表示標(biāo)題,一般用在一列的第一格,里面的內(nèi)容會(huì)自動(dòng)加粗加黑；?? <td>表示內(nèi)容，不會(huì)自動(dòng)加粗加黑。
<head>里面定義有幾列，<body>里面定義一行一行的內(nèi)容。
?
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <table border="1"><table border="1"><thead><tr><th>表頭1</th><th>表頭2</th><th>表頭3</th><th>表頭4</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr></tbody></table><tr><td>第1行，第1列</td><td>第1行，第2列</td><td>第1行，第3列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td><td>第2行，第3列</td></tr> </table> </body> </html>?運(yùn)行結(jié)果：
?
插播一個(gè)小例子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><table border="1"><thead><tr><th>name</th><th>age</th></tr></thead><tbody><tr><td>Lily</td><td>26</td></tr><tr><td>Jack</td><td>20</td></tr></tbody></table> </body> </html>?運(yùn)行結(jié)果：
6. 橫向合并，一個(gè)占兩列，同時(shí)去掉一個(gè)。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <table border="1"><table border="1"><thead><tr><th>表頭1</th><th>表頭2</th><th>表頭3</th><th>表頭4</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>5</td><td colspan="2">6</td><td>7</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr></tbody></table><tr><td>第1行，第1列</td><td>第1行，第2列</td><td>第1行，第3列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td><td>第2行，第3列</td></tr> </table> </body> </html>?運(yùn)行結(jié)果：
?
7.縱向合并
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <table border="1"><table border="1"><thead><tr><th>表頭1</th><th>表頭2</th><th>表頭3</th><th>表頭4</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>5</td><td colspan="2">6</td><td>7</td></tr><tr><td rowspan="2">5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>6</td><td>7</td><td>8</td></tr></tbody></table><tr><td>第1行，第1列</td><td>第1行，第2列</td><td>第1行，第3列</td></tr><tr><td>第2行，第1列</td><td>第2行，第2列</td><td>第2行，第3列</td></tr> </table> </body> </html>?運(yùn)行結(jié)果：
?
轉(zhuǎn)載于:https://www.cnblogs.com/momo8238/p/7401380.html
總結(jié)
以上是生活随笔為你收集整理的html的body内标签之图片及表格的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Hadoop分布式集群搭建hadoop2
- 下一篇： 查看ubuntu磁盘空间占用及占用空间大