網頁的圖像、表格以及列表的使用和製做

時間 2020-02-05

標籤網頁圖像表格以及列表使用製做欄目 HTML 简体版

原文原文鏈接

一.網頁的圖像插入

網頁的圖像標籤<img>其中有不少屬性html

 <img src="" alt="圖片失效後提示語"  title="標題" />        <!--網頁圖片插入-->

src=" "

用於添加圖片的連接前端

alt = ""

當圖片失效的時候，提示圖片的信息spa

title = ""

圖片的提示code

二.網頁的列表

有序列表
無序列表
自定義列表

 <ol>  <!--有序列表-->
          <li>張三</li>
          <li>李四</li>
          <li>王二</li>
          <li>李一</li>
          <li>張酒</li>
          <li>趙四</li>
 </ol>

      <ul> <!--無序列表-->
          <li>張三</li>
          <li>李四</li>
          <li>王二</li>
          <li>李一</li>
          <li>張酒</li>
          <li>趙四</li>
      </ul>

       <dl>  <!--自定義列表-->
        <dt>Coffee</dt>
        <dd>black hot drink</dd>
        <dt>Milk</dt>
        <dd>white cold drink</dd>
       </dl>

三.網頁的表格

網頁表格的標籤<table></table>，table標籤下有多的標籤htm

首先是<tr>,<tr>是行標籤用來添加行,而每行都是由<td>組成blog

           <table> 
          <tr>              <!--1行8列-->
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
        </table>

若是我想合併兩個單元格,那麼怎麼搞?圖片

使用colspan和rowspan進行跨列和跨行進行合併ci

好比將2行2列的表格合併get

<colgroup></colgroup>這個標籤是什麼東東?it

colgroup是以組的形式,對列進行屬性的控制

<table cellspacing="0">  
               <colgroup span="2">
                   <col span ="2" style="background-color:red">          <!--前兩列爲一組-->
                   <col span="1" style="background-color: yellowgreen;">  <!--後一列爲一組-->
               </colgroup>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
                </table>

上面的代碼輸出:

 <table cellspacing="0">  
               <colgroup span="2">
                   <col span ="2" style="background-color:red">   <!--兩列爲一組-->
               </colgroup>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
              <tr>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
                </table>

添加表頭<th>和標題<caption>

    <table cellspacing="0">
            <caption>這是標題</caption>        <!--添加標題-->
            <tr>
                <th colspan="8">這是表頭</th>  <!--添加表頭-->
            </tr>    
          <tr>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
          </tr>
        </table>

剩下的就是一些語義標籤,沒有什麼實際做用,只是規範性比較強能夠不添加

<thead> <tbody> <tfoot>

最後上代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     <title>這是個標題</title>
    <style>
        table{
            background-color: #51ad51;
            border: 1px solid white;
        }
      table tr td{
          width: 200px;
          height: 60px;
          text-align: center;
          color: antiquewhite;
      }
      .gray{
          color: #c9c9c9;
      }
    </style>
</head>
<body>
       
        <table border="1px" cellspacing="0">
            <tr>
                <th colspan="8">H5-1725學員介紹</th>
            </tr>
            <col width="100px" />
              <tr>
                  <td>您的大名</td>
                  <td colspan="2"></td>
                  <td><strong>貴庚</strong></td>
                  <td colspan="2"></td>
                  <td rowspan="5" colspan="2" class="gray">請放下你最美的照片</td>
              </tr>
              <tr>
                  <td>是否畢業</td>
                  <td colspan="2"></td>
                  <td><strong>專業是啥</strong></td>
                  <td colspan="2"></td>
              </tr>
              <tr>
                  <td>大學名稱</td>
                  <td colspan="5"></td>                  
              </tr>
              <tr>
                  <td>從事過工做</td>
                  <td colspan="5"></td>
              </tr>
              <tr>
                  <td>H5基礎程度</td>
                  <td colspan="5"></td>
              </tr>
              <tr>
                  <td>自我性格描述</td>
                  <td colspan="7"></td>
              </tr>
              <tr>
                  <td rowspan="2">簡述<br>1.目標規劃<br>2.對H5疑問<br>3.建議</td>
                  <td colspan="3"></td>
                  <td colspan="4"></td>
              </tr>
              <tr>
                  <td colspan="3"></td>
                  <td colspan="4"></td>
              </tr>
              <tr class="gray">
                  <td colspan="8">歡迎來到H5-1723,"前端"值得你擁有</td>
              </tr>
        </table>
</body>
</html>

未完待續.....................

標籤	描述
<table>	定義表格
<th>	定義表格的表頭
<tr>	定義表格的行
<td>	定義表格單元
<caption>	定義表格標題
<colgroup>	定義表格列的組
<col>	定義用於表格列的屬性
<thead>	定義表格的頁眉
<tbody>	定義表格的主體
<tfoot>	定義表格的頁腳

屬性	值	描述
align	left right center justify char	HTML5 不支持。規定在列組合中內容的水平對齊方式。
char	character	HTML5 不支持。規定根據哪一個字符來對齊列組中的內容。
charoff	number	HTML5 不支持。規定第一個對齊字符的偏移量。
span	number	規定列組應該橫跨的列數。
valign	top middle bottom baseline	HTML5 不支持。定義在列組合中內容的垂直對齊方式。
width	pixels % relative_length	HTML5 不支持。規定列組合的寬度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。