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

山坊

于 2024-01-21 17:00:00 发布

阅读量1.1k

点赞数 26

文章标签：前端 html

本文链接：https://blog.csdn.net/m0_74298002/article/details/135727997

版权

一、文本

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

标签: 定义着重文字

标签：定义粗体文本

标签：定义斜体字

标签：定义加重语气

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

标签：元素没有特定的含义便于以后加入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。

山坊

关注

26
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
web前端HTML基础（三）——文本及超链接

要创建一个超链接，需要使用 <a> 标签，并给它一个 href 属性，指定链接的目的地，这里的href的属性要设置成要跳转的网页链接。在了解了HTML的基本框架之后，我们可以在框架的<body>中编写我们想在网页中展示的东西，但是仅有标题和文本还是不够的，日常生活中我们还需要字体加粗来突出重点、添加斜体等等在这里介绍一下有关文本的一些标签。这里的a标签中，例如“京东”可以理解成超链接的载体，未访问点击过时呈现蓝色带有下划线，点击时呈红色且带有下划线，访问过的超链接呈紫色带有下划线。以上标签均可嵌套使用。
复制链接

扫一扫