當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html的body内标签之图片及表格

發布時間：2025/4/9 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 html的body内标签之图片及表格小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<li> list 標簽定義和用法：

<li> 標簽定義列表項目。

<li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。

<ol>標記:ordered list稱為有序列表，編號列表標記。其功能是將文字段落向內縮進，
并在段落的每個項目前面加上1，2，3 有順序的數字。<ol>標記必須搭配<li>標記使用。
<ul>標記:unordered list稱為無序列表，其功能是將文字段落向內縮進，并在段落前面加上圓形或空心圓形
或方塊等項目符號，以達到醒目的效果。<ul>必須搭配<li>標記使用。 html <dl> <dt> <dd>是一組合標簽，使用了dt dd最外層就必須使用dl包裹，此組合標簽我們也又叫表格標簽，
<dl><dt></dt><dd></dd></dl>為常用標題+列表型標簽。如沒有對dl dt dd標簽初始CSS樣式，默認dd列表內容會一定縮進。
<dl>:define list---定義列表
<dt>:define list title--用于生成定義列表中各列表項的標題，重復使用可以定義多個列表項的標題。
<dd>:define list define--用于生成定義列表各列表項的說明文字段，重復使用可以定義
多個說明文字段。dd是對應dt的簡短說明或解釋。

1. img (src,alt,title)

????列表：??

?把“1.png“ 放到程序的同級目錄，把圖片導入。?

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><img src="1.png"> </body> </html>

運行結果：

2.自己測試跳轉的效果吧，把它包在a標簽里面。

title="大美女"：把鼠標放到圖片上的時候，會顯示大美女三個字。

alt="美女"：如果找不到圖片的話，會顯示美女這兩個字在圖片的位置。

3.列表

<ul>：<li>：前面是小黑點

<ol>：<li>：前面是數字

<dl>：表示分層，下面的 <dt>表示標題；下面的<dd>表示內容。

<!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>

?運行結果：

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>

?運行結果：

5.實例，同上

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><table border="1"><tr><td>主機名</td><td>端口</td><td>操作</td></tr><tr><td>1.1.1.1</td><td>8080</td><td><a href="s1.html">查看詳細信息</a></td></tr></table> </body> </html>

?運行結果：

6. 表頭, 規范的格式，建議用這個。個人感覺：“列“才是外國人認為放真正內容的地方。table--->row---->content(thead, table data cell)

<head> 中 <tr> 表示行table row，<th>表示列。table head

<tbody>中<tr>表示行table row，<td>表示列。table data cell

<th>則表示標題,一般用在一列的第一格,里面的內容會自動加粗加黑；?? <td>表示內容，不會自動加粗加黑。

<head>里面定義有幾列，<body>里面定義一行一行的內容。

<!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>

?運行結果：

插播一個小例子：

<!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>

?運行結果：

6. 橫向合并，一個占兩列，同時去掉一個。

<!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>

?運行結果：

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>

?運行結果：

轉載于:https://www.cnblogs.com/momo8238/p/7401380.html

總結

以上是生活随笔為你收集整理的html的body内标签之图片及表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Hadoop分布式集群搭建hadoop2
下一篇：资本家怎样形成