html的body內標籤之圖片及表格

來源:互聯網
上載者:User

標籤:doc   列表   order   utf-8   lsp   table   tab   分享   lang   

1. img (src,alt,title)

    列表:  

 

 

<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.自己測試跳轉的效果吧

<!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.列表

<!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. 表格

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

 運行結果:

 

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>

 運行結果:

 

8.

 

html的body內標籤之圖片及表格

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.