学习HTMLCSS第二天

一、表格标签

• 基本结构

  • table：表格标签，必须有。
  • thead：表格头部，可选。
  • tbody：表格主体，可选。
  • caption：表格标题，可选。
  • tfoot：表格尾部，可选。
  • tr：行，必须有。
  • th：列（加粗字体），可选。
  • td：列（未加粗），必须有。

• 属性设置

  • cellspacing：设置单元格与单元格之间的距离。
  • cellpadding：设置内容与边框之间的间距。例如：

<table cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th>名称</th>
            <th>价格</th>
            <th>库存</th>
            <th>日期</th>
            <th>地址</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>短袖</td>
            <td>29.9 </td>
            <td>50</td>
            <td>2024/07 - 11</td>
            <td>广州</td>
        </tr>

        <tr>
            <td>鞋子</td>
            <td>19.9 </td>
            <td>60</td>
            <td>2024/07 - 11</td>
            <td>深圳</td>
        </tr>
    </tbody>
</table>

• 跨行与跨列
  • rowspan：如rowspan = "2"表示跨行，数字表示跨的行数。
  • colspan：如colspan = "4"表示跨列，数字表示跨的列数。例如：

<table cellspacing="0">
    <caption>
        <h3>描述表格信息</h3>
    </caption>

    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>班级</th>
            <th>成绩</th>
            <th>备注</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="4">（跨行）</td>
        </tr>

        <tr>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td>3</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td>4</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="4">这是表格尾部（跨列）</td>
        </tr>
    </tfoot>
</table>

二、链接标签（a 标签）

• 基本特点

  • 行内标签，不能直接设置宽度高度。
  • 可嵌套文本、行内元素、块级元素。
  • href 属性：用于填写页面或者文件地址。

• 样式设置

  • 通过 CSS 可以设置链接的各种样式，例如：

a {
    font - size: 24px;
    font - weight: bold;
}

a:link {
    color: green;
}

a:visited {
    color: pink;
}

a:hover {
    color: orange;
}

a:active {
    color: red;
}

• 链接功能
  • 跳转页面：如<a href = "./pages/my.html">跳转“个人中心”</a>。
  • 在新窗口打开页面：添加target = "_blank"，如<a href = "./pages/my.html" target = "_blank">跳转“个人中心”</a>。
  • 返回页面顶部、跳转页面指定区域：使用#作为锚点，如<a href = "#box1">链接3 (跳转到 “box - 1” )</a>。
  • 下载文件：如<a href = "img.zip" download = "img.zip" >点击“下载素材”</a>。

三、带默认样式的行内标签

• u 标签：默认下划线，对应 CSS text - decoration: underline;。
• i 标签：默认斜体字，对应 CSS font - style: italic;。
• del 标签：带删除线，对应 CSS text - decoration: line - through;。
• b 标签：加粗字体，对应 CSS font - weight: bold;。
• strong 标签：加粗字体，对应 CSS font - weight: bold;。这些标签可修饰页面细节、起到强调突出效果。