web前端HTML基础（三）——文本及超链接

发布时间：2024年01月22日

一、文本

????????在了解了HTML的基本框架之后，我们可以在框架的<body>中编写我们想在网页中展示的东西，但是仅有标题和文本还是不够的，日常生活中我们还需要字体加粗来突出重点、添加斜体等等在这里介绍一下有关文本的一些标签。

????????<em></em>标签:? ? ? ? ? ???定义着重文字

????????<b></b>标签：? ? ? ? ? ? ? ? 定义粗体文本

????????<i></i>标签：? ? ? ? ? ? ? ?? ?定义斜体字

????????<strong></strong>标签：定义加重语气

????????<del></del>标签：? ? ? ? ? ?定义删除字

????????<span></span>标签：?????元素没有特定的含义便于以后加入css

以上标签均可嵌套使用。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <em>em大家好</em>
    <b>b大家好</b>
    <i>i大家好</i>
    <strong>strong大家好</strong>
    <del>del大家好</del>
    <span>span大家好</span>
    <hr>
    <p>大家好，我是<b>张三</b>，很高你高兴和大家成为<i><del>同学</del></i>朋友</p>    <!-- p是段落承载标签 -->
</body>
</html>

运行效果：

二、超链接

????????在日常上网中，我们在点击某个图片或网站链接就会跳转到另一网页，这里就是应用到了超链接。要创建一个超链接，需要使用 <a> 标签，并给它一个 href 属性，指定链接的目的地，这里的href的属性要设置成要跳转的网页链接。（a标签是一个双标签，使用a然后回车快捷生成）

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.jd.com/">京东</a><!-- <a> 双标签设置超文本链接，使用href属性进行连接链接地址 -->
    <a href="https://www.163.com">wangyi</a>
    <a href="https://www.baidu.com">
        <img src="./5.图片/joker.jpg" alt="xiaochou" width="300px"></a><!-- zhuyi:超链接的网址要写全：https://等... -->
    <a href="https://www.xuexitong.com">学习通</a>

    <a href="./3.label learn.html">biaoge</a>
</body>
</html>

????????这里的a标签中，例如“京东”可以理解成超链接的载体，未访问点击过时呈现蓝色带有下划线，点击时呈红色且带有下划线，访问过的超链接呈紫色带有下划线。

效果呈现：

这样我们就实现了超链接的跳转啦。

至于图片，我们下期见，bye。

文章来源:https://blog.csdn.net/m0_74298002/article/details/135727997
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章