网站建设学习（二）——HTML超链接与表格标签

最新推荐文章于 2025-08-16 06:13:53 发布

QJM1995

最新推荐文章于 2025-08-16 06:13:53 发布

阅读量380

点赞数

CC 4.0 BY-SA版权

文章标签： html 表格超链接教程网站

本文链接：https://blog.youkuaiyun.com/QJM1995/article/details/86383608

上一篇介绍了常用的文本标签，这一篇主要介绍了外部资源链接与本页面定位以及表格的相应操作，在介绍超链接标签使用前解释了其工作原理，如图所示：

超链接工作原理

本篇演示代码：

<!--html： hyper text markup language 超文本标记语言

    超级文本：可以对文本进行设计，布局，装饰等等操作
    标记：标签的各种布局，可以进行文本设计，标签包括开始与结束
-->


<!--开始设计一个HTML页面-->

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->
    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->

    <!--超链接标签，超链接可以链接到外部的网页，同时也可以定义锚，来到达本网页的任何一处位置-->
        <a href="http://www.baidu.com" target="_black">百度</a>
        <!--标签a表示链接，href属性是将要跳转的地址，必须加协议，否则默认为相对目录下文件即file协议-->
        <!--target属性表示是在当前页打开还是新窗口打开-->
        <a href="thunder://网址">迅雷下载</a>
        <!--迅雷协议，会调用迅雷软件进行资源下载，其他协议也同理-->
        <a href="mailto:2867221444@qq.com">发送邮件</a>
        <!--邮件协议，会调用本机的邮件软件进行邮件的发送-->
        <nav>
            <a href="http://www.baidu.com">百度</a>
            <a href="http://www.baidu.com">百度</a>
            <a href="http://www.baidu.com">百度</a>
        </nav>
        <!--定义导航链接部分，可以加前一页以及后一页链接--><br/>

        <a href="#flag">去flag的锚点</a>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <!--为演示锚所设置的空行-->
        <a name="flag">到这来，这有flag的锚点标识</a>
        <!--href可以连接到本页的name属性表示的锚点，以#开头，可以回到开头也可到达结尾等等-->
        <!--href在其他资源链接后加锚点从而到达其他链接的锚点处，例如http://www.baidu.com/#flag（如果存在锚点的话）--><br/>


    <!--表格标签，构建表格的系列标签-->
        <table border="1px" width="500px" height="300px" align="center">
            <caption>表格标题</caption>
            <thead>
                <tr>
                    <th>表头第一个单元格</th>
                    <th>表头第二个单元格</th>
                    <th>表头第三个单元格</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="2">第一行第一个单元格</td>
                    <td>第一行第二个单元格</td>
                    <td>第一行第三个单元格</td>
                </tr>
                <tr>
                    <!--<td>第二行第一个单元格</td>-->
                    <td>第二行第二个单元格</td>
                    <td>第二行第三个单元格</td>
                </tr>
                <tr>
                    <td>第三行第一个单元格</td>
                    <td>第三行第二个单元格</td>
                    <td>第三行第三个单元格</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>第四行第一个单元格</td>
                    <td colspan="2">第四行第二个单元格</td>
                    <!--<td>第四行第三个单元格</td>-->
                </tr>
            </tfoot>
        </table>
        <!--table表示表格标签，tr表示行，td表示单元格，逐行嵌套-->
        <!--th表示表头，加粗居中显示，caption表示标题-->
        <!--border属性表示表格的边界，width为宽度，height为高度，align为位置，默认单位为px（像素）-->
        <!--rowspan表示多行单元格合并成一行，注释或者删掉将要合并的单元格，数字表示要合并的单元格个数-->
        <!--colspan表示多列单元格合并成一列，注释或者删掉将要合并的单元格，数字表示要合并的单元格个数--><br/><br/>
        <!--thead,tbody,tfoot将表格分为三个部分，在这里没有明显的展示，主要是应用于请求资源时可以分部获取资源并展示，不用等待全部资源都加载完备时才展示，提升用户体验，在获取长资源时尤为明显，但一般很少使用，故不加也没有关系-->

    </body>

</html>

网页编程规范参考链接：w3school 在线教程

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。