htmlタグの詳しい解説(2)-htmlチュートリアル-php.cn

htmlタグの詳しい解説(2)

高洛峰

リリース： 2017-02-16 14:17:06

オリジナル

1829 人が閲覧しました

前回は、httpの基本的なタグであるリンクタグ、イメージタグ、HTMLフレームワークなどを中心に説明しましたが、次回はテーブルタグ、リストタグ、フォームタグを中心に詳しく解説していきます

1 : テーブルタグ l & lt; & lt;/table & gt; タグ

& lt;/TR & GT; を示すために使用されます。 & lt;/td & gt; 列を表すために使用されるラベル

ラベルは、

と同じです。 ; ただし、内部のコンテンツは自動的に拡大され、太字になります

border テーブルの幅を設定します。単位はピクセルです

width テーブルの幅を設定します、単位はピクセルです

height テーブルの高さ、単位を設定しますピクセルです

cellspacing 表の境界線の間隔を表すセル間の距離を設定します

cellpadding テキストを設定しますセルの境界線からの距離

bgcolor 表の背景色を設定します

align 配置の設定に使用されます、中央、左、右など

(2) セルの結合について

<!DOCTYPE html>
    <html>
        <head>
            <!-- 原创作者：蜗牛 -->
            <title>table标签</title>
        </head>
        <body>
            <table  border="1" width="360"  height="240" 
                    cellspacing="1" cellpadding="1" 
                    align="center" bgcolor="red">   <!--这里的center表示该表格在页面的中间位置-->
                                                    <!--这里的背景色标签是bgcolor-->
                    <caption><h2>我的好朋友</caption>

                     <tr>
                         <th>姓名</th>
                 <th>性别</th>
                         <th>年龄</th>
                         <th>爱好</th>                     
                     </tr>

                     <tr align="center">          <!--这里的center表示的是表格里面的字体居中-->
                         <td>小红</td>
                         <td>女</td>
                         <td>20</td>
                         <td>跳舞</td>
                     </tr>

                     <tr align="center"> 
                         <td>小舵</td>
                         <td>女</td>
                         <td>24</td>
                         <td>唱歌</td>
                     </tr>
                    
                </table>
       </body>
    </html>

ログイン後にコピー

実行結果は以下の通りです:

注: 表の各セルに異なる内容を入力した場合、各セルのサイズを同じに保つには 2 つの方法があります。たとえば、テーブルの合計の高さが 400 で 4 行を設定し、各に属性を追加します。 tag: hight=100; これは均等分布に相当し、同じ幅に対して同じ方法を使用します。 2: CSSのスタイルを設定してtrとtdのサイズを固定するだけなので、1つ目より簡単になります

2: リストタグ

<!DOCTYPE html>
<html>
    <head>     
        <title>table中合并单元格</title>
    </head>
    <body>
        <table  border="1" width="300"  height="200" 
                align="center" background="first.jpg" >  <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->

                  <tr align="center" width="100" >
                     <td>1</td>
                     <td colspan="2">占两列</td>    <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
                     <!-- 删除掉此<td></td> -->
                     <td>2</td>
                 </tr>

                 <tr   align="center" width="100">  
                     <td rowspan="2">占两行</td>   <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
                     <td>3</td>
                     <td>4</td>
                     <td>5</td>
                 </tr>

                  <tr   align="center" width="100" >
                    <!-- 删除掉此<td></td> -->
                     <td>6</td>
                     <td>7</td>
                     <td>8</td>
                 </tr>          
            </table>
   </body>
</html>

ログイン後にコピー

実行結果は以下の通りです

3: フォーム

フォームタグ

<!DOCTYPE html>
<html>
    <head>
    <title>列表标签</title>
    </head>
    <body  bgcolor="#FFFF00">
        <!-- 无序列表 -->
        2017年心愿
        <ul type="circle">     <!--无序序列<ul> ，无序有circle：圆点，square：小方块-->
            <li>父母身体健康</li>
            <li>宝宝健康成长</li>
            <li>媳妇健健康康</li>
        </ul>

        <!-- 有序列表 -->
        2017年大事件
        <ol type="1" start="2">   <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始--> 
            <li>老婆要生小孩了</li>
            <li>自己换工作了</li>
            <li>要卖掉一套房</li>
        </ol>
        
        <!-- 自定义列表 -->
        <dl>                    <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项-->
            <dt>时刻告诉自己</dt>
            <dd>不抱怨</dd>
            <dd>零负能量</dd>
            <dd>该与不该</dd>
        </dl>
    </body>
</html>

ログイン後にコピー

レンダリングは以下の通りです:

htmlタグの詳しい解説(2)

htmlタグの詳しい説明は(2) 関連記事はPHP中国語サイトにご注目ください！