前端html基础标签

关注

原创最新推荐文章于 2026-06-23 13:47:04 发布 841 阅读 AI 写同款· GEO 优化 ›

Python全栈（九）Web前端基础之1.Web前端介绍和HTML基本标签 web1.0时代的网页多是静态网页，缺乏交互性；web2.0时代及以后，出现动态网页；HTML即超文本标记语言，不同的格式用不同的标签来标记，具有不同的语义，HTML具有其自身的特点；编辑器可以选择Sublime、VSCode等，Sublime安装之后需要安装一些常用的插件才能进行更加高效的开发。一个HTML文件包括头部和主体部分，标签有单标签、双标签等，还有很多属性。厂家俺的基础标签包括基础标签、段落标签、水平线标签、修饰标签、特殊符号、列表标签、图片标签和超链接标签等，很多标签都有自己特定的属性。阅读详情

前言❤️❤️

hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹

这是这个栏目第二篇的学习博客，上篇演示了环境的搭建，这篇博客的内容包括常用的各种基础标签，以及举例使用

🎆个人主页：洋不写bug的博客
🎆所属专栏：前端基础
🎆铁汁们对于前端的各种常用核心语法，都可以在上面的前端专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~

1，注释，标题，段落，换行标签

1，注释标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题，段落，换行，注释标签</title>
</head>
<body>
    <!-- 注释标签 -->
</body>
</html>

这里写个注释标签的字样，然后，选中这段话，按ctrl键 + /，就会把这句话给注释掉

2，标题标签

标题标签，一般在这个标签里放网页标题，我们用h后跟数字来表示，一共有六级，h后面跟的数字越小，字体越大：

<body>
    <!-- 注释标签 -->
     <h1>h1标签</h1>
     <h2>h2标签</h2>
     <h3>h3标签</h3> 
     <h4>h4标签</h4>
     <h5>h5标签</h5>
     <h6>h6标签</h6>
</body>

在这里插入图片描述

3，段落标签

下面这样一段文字，想让它显示在网页上，如果直接粘在body中，就会发现在网页中这些字体密密麻麻贴在了一起

经过一年的市场和用户验证，发布之初围绕在三折叠上的争议，也已经渐渐平息。现在对于华为，乃至于行业更重要的问题，早已不是「三折叠有什么用」，而是：
Mate XT 三折叠，究竟仅仅只是一个试验品，还是一款足以长期立足市场的全新物种？
而今天，华为发布了世界上第二台量产的「三折叠」手机 Mate XTs非凡大师。芯片提升到麒麟 9020，价格比第一代 Mate XT 还降了 2000 元。
答案有了：三折叠这个品类，已经走向成熟，立住了。
诚然，今天的折叠屏手机，即便是小折叠、大折叠这种常规形态，仍然被许多人所不看好——而华为不仅在折叠屏这条路上走了更远，现在看来，还想要走更久，且步伐更加坚定。

在这里插入图片描述

这是因为在代码编译器中写的换行，空格，在网页上显示不出来

想要有一段一段的效果，就可以使用p标签,这些段落就可以分隔开

 <p>经过一年的市场和用户验证，发布之初围绕在三折叠上的争议，也已经渐渐平息。现在对于华为，乃至于行业更重要的问题，早已不是「三折叠有什么用」，而是：
Mate XT 三折叠，究竟仅仅只是一个试验品，还是一款足以长期立足市场的全新物种？</p>
<p>而今天，华为发布了世界上第二台量产的「三折叠」手机 Mate XTs非凡大师。芯片提升到麒麟 9020，价格比第一代 Mate XT 还降了 2000 元。</p>
<p>答案有了：三折叠这个品类，已经走向成熟，立住了。</p>
<p>诚然，今天的折叠屏手机，即便是小折叠、大折叠这种常规形态，仍然被许多人所不看好——而华为不仅在折叠屏这条路上走了更远，现在看来，还想要走更久，且步伐更加坚定。</p>

在这里插入图片描述

4，换行标签

代码编译器中写的换行，空格，在网页上显示不出来，那如果想要换行的话，就只有写段落标签p才可以吗？？？
其实还有一个换行标签，它是一个单标签，只需一个写在末尾即可，也能达到换行的效果，我们后面换行都是使用这个标签。

 经过一年的市场和用户验证，发布之初围绕在三折叠上的争议，也已经渐渐平息。现在对于华为，乃至于行业更重要的问题，早已不是「三折叠有什么用」，而是：
Mate XT 三折叠，究竟仅仅只是一个试验品，还是一款足以长期立足市场的全新物种？<br>
<p>而今天，华为发布了世界上第二台量产的「三折叠」手机 Mate XTs非凡大师。芯片提升到麒麟 9020，价格比第一代 Mate XT 还降了 2000 元。</p>
<p>答案有了：三折叠这个品类，已经走向成熟，立住了。</p>
<p>诚然，今天的折叠屏手机，即便是小折叠、大折叠这种常规形态，仍然被许多人所不看好——而华为不仅在折叠屏这条路上走了更远，现在看来，还想要走更久，且步伐更加坚定。</p>

在这里插入图片描述

2，格式化标签

格式化标签有4个：

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

这个比较简单，平常多用几次就可以掌握了,(标签的两种写法，怎么写都可以，效果都是相同的)

<body>
    <strong>加粗标签1</strong><br>
    <b>加粗标签2</b><br>
    <em>倾斜标签1</em><br>
    <i>倾斜标签2</i><br>
    <del>删除标签1</del><br>
    <s>删除标签2</s><br>
    <ins>下划线标签1</ins><br>
    <u>下划线标签2</u><br>
</html>

在这里插入图片描述

3，img标签

img标签就是用来向网页中插入图片，
当我们输入img，让代码编译器自动补全时，我们会发现有一个src属性和alt属性，
这里的src属性表示的就是图片的路径（必填），而alt属性中表示的就是当图片加载不出来时显示的文字（比如说显示加载出错了，这个其实不填也可以）

在这里插入图片描述

alt属性里面写不写内容都行，没有的话就只是图片加载出错时不会显示文字罢了
但是src属性是必须写的，src属性用来指定图片路径，图片就是通过这个路径来加载的

路径分为绝对路径和相对路径两部分：

1，相对路径

在这个.html文件同级有张图片，那就直接一个点斜杠（这里写完点斜杠后就会补出文件的选项让我们选择，因此这里是不用写文件名字的），表示同级：

在这里插入图片描述

<body>
    <img src="./3a3452eeb40f49b0a51c8121b0cbe552.png" alt="">
</body>

如果装图片的文件夹跟html同级，那就一个点斜杠找到同级的图片文件夹，在一个斜杠找到图片文件夹中的图片：

在这里插入图片描述

<img src="./图片/无标题.png" alt="">

图片文件夹如果跟html文件夹在同一级，那也就是说图片文件夹在.html文件的上一级，在那就使用两个斜杠先找到图片文件夹，再通过一个斜杠找到图片文件夹里面的图片

在这里插入图片描述

<img src="../图片/无标题.png" alt="">

相对路径如果感觉比较抽象的话，可以在网上随便下载一张图片，按照这几种位置摆一下，把相对路径传到img标签中，试几次很快就可以理解👍💪

2，绝对路径

前面的相对路径就是图片相对.html文件的位置，而绝对路径就是给出了图片比较具体的位置
一种就是保存网上的url资源，我们这里点击复制图像链接，然后把链接粘到src中，就可以了。

在这里插入图片描述

还有一种就是直接写图片在计算机中的具体存储位置
比如E盘中有这样一个文件夹，想把文件夹中的照片显示到浏览器上，那就可以直接右键图片，点击复制图片地址，粘到src上，就可以显示了。

在这里插入图片描述

<img src="E:\励志图片\小米.jpg" alt="">

3，alt属性

有时候传的图片的链接可能是错误的，那么在网页中图片就加载不出来了，这时候我们就可以在alt里面加入一句话，这句话在图片加载失败时会显示出来
我们这里输入一个错误的路径，打开后就会发现图片加载失败的字样。

<body>
    <img src="E:\励志图\小米.jpg" alt="图片加载失败">       
</body>

在这里插入图片描述

4，title属性

在浏览器上浏览网页时，把鼠标放在有的图标上面，就会显示出文字（比如微软浏览器把鼠标放在这个搜素图标上就会显示出“搜索”两个字），那这个其实就是通过title属性来实现的。

这样写，在网页中把鼠标放上去，就有雷军演讲的小字出现（这里因为点击截图键效果就会消失，因此没办法截图网页效果😅😅😅）

<img src="E:\励志图片\小米.jpg" alt="图片加载失败" title="雷军演讲">

5，width/height属性

如果觉得图片在网页中显示的太大了，那就可以通过width/height属性来修改

因为图片本身就是有长宽比例的，因此，我们需要修改图片大小时，只改一个就可以了，另一个会等比缩放。 像下面这样就把图片改小了很多。（这里改的时候用px，也就是像素为单位）

<img src="E:\励志图片\小米.jpg" alt="图片加载失败" title="雷军演讲" width="200px">

在这里插入图片描述

6，border属性

border就是给图片加上边框，单位也是px
这里的border会爆红，也不会自动补全，这个我们一般是在CSS中设定的，这个大家现在暂时就这样写，仍然可以生效。

在这里插入图片描述

4，a标签

1，href属性

在浏览器网页上当点击有的图片或者文字时，就会跳转到其他网页中（下面点击哪个AI的图标，就会跳到哪个网页中）
这个就是靠a标签的href属性来表示的。

在这里插入图片描述

写个a标签，将华为的官网链接粘到href属性中，再写个华为的字样，在网页中打开，点击“华为”字体，就能跳转到华为官网。

<body>
    <a href="https://www.huawei.com/cn/?redir=huawei_com_cn">华为</a>     
</body>

在这里插入图片描述

除此之外，我们还可以用a标签跳转到另一个html文件的网页(就是传入另一个网页的相对路径或绝对路径，这里我传入的是绝对路径)

在这里插入图片描述

那这些链接为什么颜色是紫色，而且加了下划线呢，这是html的css默认样式，后面学习了css以后，就可以更改这些样式。

如何点击图片跳转到其他网页呢？
其实也很简单，用a标签包住前面提到过的img标签即可
这里href里面搞上小米的官网链接，src里面粘上个小米yu7的图片链接，打开网页，点击这个汽车照片，就能跳转到小米汽车的官网。是不是非常帅！！！

<a href="https://www.xiaomiev.com/">
        <img src="https://img.pcauto.com.cn/images/upload/upc/tx/auto5/2412/09/c17/468611679_1733752790904.jpg" alt="">
    </a>

在这里插入图片描述

2，target属性

前面用a标签的时候，大家如果写代码试一下的话，会发现点击跳转到新网页后会覆盖掉原有的网页，如果不想让新的网页覆盖掉原来的网页，就需要设置一下target属性。

在这里插入图片描述

输入target属性后，就会发现有4个选项
_parent和_top我们现在不用管，只看_self和_blank属性即可
_self的意思就是新的网页覆盖掉原有的网页，也可以理解为在原来的网页上打开新的网页，target默认属性就是 _self
_blank就是不覆盖原有的网页，在新的网页上打开

在这里插入图片描述

这里试一下，新打开了一个新的网页，而不是把原来的给覆盖掉：

<a href="https://www.xiaomiev.com/" target="_blank">
        <img src="https://img.pcauto.com.cn/images/upload/upc/tx/auto5/2412/09/c17/468611679_1733752790904.jpg" alt="">
    </a>

在这里插入图片描述

5，结语

HTML 标签是构建网页的基础元素，注释标签便于对代码进行说明，标题、段落等标签能搭建页面的基本结构，格式化标签可丰富内容的呈现效果，img 标签实现了网页中图像的展示，a 标签则完成了页面之间的链接跳转。通过对这些基础标签的学习与运用，我们就能逐步构建出清晰且具备交互性的网页啦😄😊
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉
在这里插入图片描述