HTML基础(4) | 青训营笔记

134 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第四天

HTML基础知识总结(四)

本 章 着 重 复 习 Html 的 基 础 内 容 , 学 习 Html 究 竟 要 学 些 什 么 呢 ? 主 要 是 学 习 注释语句 , 以及 HTML表格 ,来 搭 建 网 页 的 “ 结 构 ” 。

一、注释标签

< ! - - 注释语句 - - > 快捷键是:

c t r l + / 或 者 c t r l + s h i f t + /

二、表格

现 在 还 是 较 为 常 用 的 一 种 标 签 , 但 不 是 用 来 布 局 , 常 见 显 示 、 展 示 表 格 式 数 据 。 因 为 它 可 以 让 数 据 显 示 的 非 常 的 规 整 , 可 读 性 非 常 好 。 特 别 是 后 台 展 示 数 据 的 时 候 表 格 运 用 是 否 熟 练 就 显 得 很 重 要 , 一 个 清 爽 简 约 的 表 格 能 够 把 繁 杂 的 数 据 表 现 得 很 有 条 理 。

(1)表格由<table>标签来定义。

每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义)。

字母td指表格数据(table data),即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

(2)创建表格

table、 tr、 td , 他 们 是 创 建 表 格 的 基 本 标 签 , 缺 一 不 可 。

table 用 于 定 义 一 个 表 格 标 签 。

tr 标 签 用 于 定 义 表 格 中 的 行 , 必 须 嵌 套 在 ta ble 标 签 中 。

td 用 于 定 义 表 格 中 的 单 元 格 , 必 须 嵌 套 在 标 签 中 。

字 母 td 指 表 格 数 据 ( table data), 即 数 据 单 元 格 的 内 容。


<table>
        <tr>
            <td>文字1</td>
            <td>文字2</td>
            <td>文字1</td>
        </tr>
    </table>

(3)表 头 单 元 格 标 签 th

一 般 表 头 单 元 格 位 于 表 格 的 第 一 行 或 第 一 列 , 并 且 文 本 加 粗 居 中 ,只 需 用 表 头 标 签 替 代 相 应 的 单 元 格 标 签 即可。


<table align="center" border="1" collapse="20,10">   
        <tr> 
             <th>姓名</th>  <th>性别</th> <th>年龄</th> 
         </tr>
        <tr> <td>刘德华</td> <td></td> <td>46</td> </tr>
        <tr> <td>张三</td> <td></td> <td>22</td> </tr>
        <tr> <td>李四</td> <td></td> <td>34</td> </tr>
    </table>

效果如下:

姓名、性别、年龄。

15.png

(4) 表 格 标 题 caption

通 常 这 个 标 题 会 被 居 中 且 显 示 于 表 格 之 上 。 ca pt ion 标 签 必 须 紧 随 table 标 签 之 后 。 这 个 标 签 只 存 在 表格里 面 才 有 意 义 。

    <table>
        <caption>我是云南的!</caption>
    </table>