【复习】HTML常用标签＜table＞

文章目录

[a 标签](#a 标签)
[table 标签](#table 标签)

a 标签

href 属性：href即hyper(超级)-reference(链接/引用)的缩写，即为超链接的意思。该属性值为超链接地址名。该属性值的取值形式为：

txt 复制代码

"https://baidu.com"
"http://baidu.com"

html 复制代码

 <a href="https://www.baidu.com" target="_blank" download>https://www.baidu.com</a>
 <a href="http://www.baidu.com" target="_self">http://www.baidu.com</a>

target 属性：该属性是指跳转方向的意思，即将在哪个窗口打开该链接地址。基本属性值有五类，分别为

"_self" ：在当前页面打开超链接
"_blank" ：在新的空白页面打开超链接
"_parent" ：若有iframe包含的子窗口、孙窗口等，在当前窗口的上一层父窗口打开超链接
"_top" ：若有iframe包含的子窗口、孙窗口等，在最外层窗口即祖宗窗口打开超链接。
"xxx" ：会先检查有没有叫xxx名字的窗口，若没有则新建一个窗口命名为xxx，当后面再有一个值为xxx时便是该窗口打开。可用于设置利用同一个窗口打开覆盖多个页面。也可给iframe窗口的name命名为xxx，则打开的页面就是在iframe窗口打开了。

download下载超链接，不用

table 标签

工作最常用到的表格crud

html 复制代码

<table>
 <thead>表头</thead>
 <tbody>主体</tbody>
 <tfoot>表尾</tfoot>
</table>

html 复制代码

<style>
		table {  
            width: 100%;  
            border-collapse: collapse;  
        }  
        th, td {  
            border: 1px solid #ddd;  
            padding: 8px;  
        }  
        th {  
            background-color: #f2f2f2;  
            text-align: left;  
        }  
        tr:nth-child(even) {  
            background-color: #f9f9f9;  
        } 
</style>
<table summary="这是一个示例表格，包含了一些常见属性和标签。">  
        <caption>示例表格</caption>  
        <thead>  
            <tr>  
                <th scope="col">姓名</th>  
                <th scope="col">年龄</th>  
                <th scope="col">城市</th>  
                <th scope="col">操作</th>  
            </tr>  
        </thead>  
        <tbody>  
            <tr>  
                <td>张三</td>  
                <td>25</td>  
                <td>北京</td>  
                <td><button onclick="alert('点击了张三')">详情</button></td>  
            </tr>  
            <tr>  
                <td>李四</td>  
                <td>30</td>  
                <td>上海</td>  
                <td><button onclick="alert('点击了李四')">详情</button></td>  
            </tr>  
            <tr>  
                <td>王五</td>  
                <td>28</td>  
                <td>广州</td>  
                <td><button onclick="alert('点击了王五')">详情</button></td>  
            </tr>  
        </tbody>  
        <tfoot>  
            <tr>  
                <td colspan="3">总计</td>  
                <td>3人</td>  
            </tr>  
        </tfoot>  
    </table>

通过这个范例了解html <table>标签的常见属性及子标签

<table> 表格的根元素。
<thead> 表头，一行或多行

<tr>表格行

<th>表头，默认居中加粗

<tbody> 表格主体，数据行

<tr> 数据行

<td> 表格数据单元格

<tfoot>:页脚

colspan="3" 合并三列