前端学习6 | 超链接标签以及table表格

最新推荐文章于 2026-01-24 01:18:11 发布

原创最新推荐文章于 2026-01-24 01:18:11 发布 · 930 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #学习 #javascript

本文介绍了HTML中超链接和表格的基础用法及属性设置，包括如何创建超链接、设置目标窗口及表格的基本结构与样式。

超链接标签以及table表格

前言
一、超链接标签
二、table表格
- 1.table表格的基本结构
- 2.table表格的相关属性
总结

前言

超链接标签能够实现不同页面的跳转
table主要作用是显示我们所需求的数据。

一、超链接标签

具体的形式为

<a herf="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开文档"> 内容 </a>

我们先打开vscode，并创建好模板，在body部分中，加入以下部分：

    <a href="https://www.baidu.com/">百度</a>

    <a href="https://www.baidu.com/" target="_blank">百度</a>

    <a href="https://www.baidu.com/" target="_blank">
        <img src="test02/2.gif" title="确定要跳转到百度吗？" width="80px">
    </a>

提示：test02/2.gif为笔者使用图片的名字，可以选择自己目录的名字路径进行替换

我们以百度为例，以上代码段均表示超链接，我们运行代码，可以得到以下部分：
在这里插入图片描述
这时，我们单击第一个“百度”时，会在当前页面跳转百度，不会建立新的窗口。

在这里插入图片描述

当我们单击第二个百度时，会弹出另一个百度窗口，而不占用我们运行的窗口。

在这里插入图片描述

当我们单击图片时，会新建窗口打开百度。

在这里插入图片描述
以上，target属性的选取值为“_self”、“_blank”两种，self为默认值，即在当前页面跳转，blank为新建页面跳转。且内容部分可以为字符串或图片形式。

二、table表格

主要作用是显示我们所需求的数据。

1.table表格的基本结构

在正式开始之前，我们先统一下表格的名称，如下图所示：
在这里插入图片描述
制作表格，我们将使用table标签，代码示例如下：

<body>
    <table>     <!--创建表格-->
        <tr>    <!--tr表示行-->
            <td>1</td>      <!--td表示单元格-->
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

运行后我们会看到：
在这里插入图片描述
可见，该表格并没有其他的格式，其他属性我们会在接下来进行讲解。

2.table表格的相关属性

表格的常见属性

宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 align =“left || right || center”
cellspacing =“单元格与单元格之间的间距”
cellpadding =“单元格与内容之间的空隙”

代码如下（示例）：

<body>
    <!--width 的格式有px，百分比（百分比是相对于父元素的）-->
    <!--height 的格式有px，百分比（百分比是相对于父元素的,body默认是没有高度的，
        所以在当前情况下，height无法显示百分比）-->
    <table border="1" width="50%" height="500" 
    align="center" bordercolor="red" bgcolor="grey"
    cellspacing="0" cellpadding="90">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    </table>
</body>

运行以上代码，我们得到：
在这里插入图片描述
以上代码中，border代表外边框长度，笔者取值为“1”，当我们修改他的值，我们可以发现外边框发生了变化。

align属性为表格所在位置，通过修改为"left || right || center"，可以得到不同位置，这里不再举例。
bordercolor为“border + color”，代表框线的颜色，笔者这里赋值为“red”，也可以采用不同的颜色，以达到目的，这里不再演示其他颜色。
bgcolor为“backgroundcolor”，代表表格的背景颜色，本人选择“grey”，也可以选择其他颜色，以改变效果。
cellspacing为单元格与外边框的空隙，我们可以修改它的值，来使距离不同，以下为修改后的例子：