html的body内标签之图片及表格
生活随笔
收集整理的這篇文章主要介紹了
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“ 放到程序的同級目錄，把圖片導入。?
<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>運行結果：
?
2.自己測試跳轉的效果吧，把它包在a標簽里面。
title="大美女"： 把鼠標放到圖片上的時候，會顯示大美女三個字。
alt="美女"：如果找不到圖片的話，會顯示美女這兩個字在圖片的位置。
<!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>：前面是小黑點
<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
- 下一篇： 查看ubuntu磁盘空间占用及占用空间大