笔记-html常用标签02

最新推荐文章于 2024-09-20 13:42:43 发布

可笑万物

最新推荐文章于 2024-09-20 13:42:43 发布

阅读量63

点赞数

分类专栏： HTML+CSS 文章标签： html

本文链接：https://blog.csdn.net/qq_43458637/article/details/108876348

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

主要记录表格、表单等常用标签。

表格

主要用于展示数据
主要三组标签组成 table tr td

  <table>
        <!-- tr 为行 -->
        <!-- td 为列 -->
        <tr>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

表头单元格标签
第一行表明信息加粗居中显示

 <table>
        <!-- tr 为行 -->
        <!-- td 为列 -->
        <tr>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

2	3	4
3	4	5
4	5	6

表格边框
cellpaddind=“20” 内容和单元格的距离
cellspacing=“0” 单元格之间的距离

表格的属性和样式可以利用css控制

为了表格更好的语义化，
第一行可以包裹在thead标签里面
剩下的包裹在tbody标签里面。

合并单元格

跨行合并 rowspan=“合并单元格的个数”
跨列合并 colspan=“合并单元格的个数”

目标单元格（写合并代码）

跨行：最上方单元格是目标单元格
跨列：最左方单元格是目标单元格

合并单元格三部曲

先确定跨行还是跨列
找到目标单元格，写合并方式=合并的数量
删除多余的单元格

<table align="center" border="1" cellpaddind="20" cellspacing="0" width="500">
        <!-- tr 为行 -->
        <!-- td 为列 -->
        <tr>
            <th>2</th>
            <!-- 跨列 和下面的合并 -->
            <th colspan="2">3</th>
            <!-- <th>4</th> -->
        </tr>
        <tr >
            <!-- 跨行 和下面的合并 -->
            <td rowspan="2">3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <!-- <td>4</td> -->
            <td>5</td>
            <td>6</td>
        </tr>
    </table>

列表
用于布局
最大特点整齐整洁。

1 无序列表
ul嵌套li
无序列表用的最多。

 <!-- ul里面只能放li -->
    <ul>
        <!-- li里面可以放任何元素 -->
        <li>
            <a href=""></a>
        </li>
    </ul>

2 有序列表
ol嵌套li

<ol>
    <li>萨达</li>
    <li>为列</li>
    <li>分隔</li>
</ol>

3 自定义列表

<!-- dl 里面只能出现dt dd -->
<dl>
    <!-- 一个dt -->
    <dt>主题</dt>
    <!-- 若干个dd进行解释等 -->
    <dd>主题1</dd>
</dl>
<dl>
    <dt>关于</dt>
    <dd>关于1</dd>
</dl>
<dl>
    <dt>查看</dt>
    <dd>查看1</dd>
</dl>