【第一部分 | HTML】2：HTML的常用标签

ゝ一世哀愁。 2023-09-26 09:22 98阅读 0赞

**目录**

| 本章目标

|标题标签

| 段落标签\\和换行标签\\

| 文本格式化标签

| div 和 span标签

| 图像标签![Image 1][]

| VS根目录配置 及 路径url相关知识

| 超链接标签

| 锚点链接《a href="\#Name"》

| 特殊字符

--------------------

这一篇文章，我们将介绍一下HTML常用的一些标签，这些标签很零散，因此归为一篇来介绍。

### | 本章目标 ###

HTML标签（上）

主要学习：标题、段落、文本格式化、图像、超链接、锚点链接、特殊字符

主要技巧：初始div和span、学习VS配置根目录和快捷创建文件、url相关知识

学习目标：可以制作简单的具有一定格式文本的网站、简单的页面跳转

--------------------

### |标题标签 <h> ###

![74f09f18348442148ecc52e5894fa7dc.png][]

--------------------

### | 段落标签\\<p>和换行标签\\<br/> ###

HTML中若不使用段落标签，则即使你给文本分了段，浏览器中的文本仍然不会以分段形式展示，会默认为一段。

同理，若不使用换行标签，则即使给文本换了行，浏览器中的文本仍然会视为没有换行

![0b23983226f34254a3d7e1cda7fd2f93.png][]

--------------------

### | 文本格式化标签 ###

![ce846529f53a488d86f9cb72f13e1afc.png][]

--------------------

### | div 和 span标签 ###

![7198e5a6762a45b7b506e9eecdddfbc9.png][]

注意：

一个div中定义的所有东西会独立地占用对应空间，占用一行，是一个大盒子，块级元素！

一个span中定义的东西只占用当前位置，占用一小块，是一个小盒子，行级元素！

具体如何使用，在今后网页布局的时候会学习。

![d21ef099b0524d08986a478b90a82d36.png][]

--------------------

### | 图像标签<img src> ###

![bf3e33f397864533b2702e28d321c072.png][]

下列代码的图片存放在html所在目录 / imgs目录下，名字为Klee.jpg

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>图像标签的使用</h1>
        <p>通过alt可以设置图片加载失败时候的代替文本</p>
        <p>通过title可以设置鼠标放置在图片上的标题文本</p>
        <p>width=300px表示设置图片宽度为300像素</p>
        <img src="imgs/klee.jpg" alt="图片加载失败" title="这是Klee" width="300px"/>
    </body>
    </html>

--------------------

### | VS根目录配置 及 路径url相关知识 ###

**1.两个概念**

目录文件夹：存放html文件、img文件（目录）等的文件夹

根目录：把整个web各目录看作树，则最上面那个根节点文件夹就是根目录

**2.在VScode中设置目录文件夹**

File → Open Folder 即可打开目录文件夹。

这样以后点击“New File“的时候就可以直接在目录文件夹创建html啦

![eeb116d7979a4b5581ca1cba66c006bf.png][]

**3.url的路径**

![7975e078bf6e4d5d8127115cc4e8911b.png][]

--------------------

### | 超链接标签 <a href=url> ###

![14bed4799136448a8d61bb697980df4f.png][]

url的种类：**外部链接、内部链接、空链接、下载链接、网页元素链接** 五种链接 示例：

![72a90e52c6744f518d53421abd528c9a.png][]

下面的代码，展示了外部链接、内部链接、空链接、下载链接四种链接的书写方式

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>超链接标签</h1>
        <p>a 表示这是一个超链接</p>
        <p>href 是必备属性，表示超链接的url</p>
        <p>target="_blank" 表示新窗口打开页面</p><br/>
    
        <h2>外部链接</h2>
        <a href="https://blog.csdn.net/m0_57265007?spm=1011.2266.3001.5343" target="_blank">
            Klee
        </a>
        <br/>
    
        <h2>内部链接</h2>
        <a href="6.图片标签 img.html">
            内部链接
        </a>
    
        <h2>空链接</h2>
        <p>使用 href="#" 来表示这是一个空链接，一般用于表示目标网页还在开发中</p>
        <a href="#">空链接</a>
        
        <h2>下载链接</h2>
        <p>如果url是一个文件或压缩包，则点击url后会下载这个文件</p>
        <a href="imgs/klee.rar">下载图片klee.jpg</a>
    
        <h2>网页元素链接</h2>
        <p>a标签内，除了写文本，其实还可以放上图片、视频、表格、音频、视频哦</p>
        <a href="https://www.baidu.com/" target="_blank"><img src="imgs/klee.jpg" title="点击进入百度" width="300px"/></a>
    </body>
    </html>

--------------------

### | 锚点链接《a href="\#Name"》 ###

锚点链接的作用是实现当前网页的页内跳转（比如点一下右边向上的箭头就会回到网页顶部）

![542c7ccfd7bc429ba6338fbdd6919281.png][]

--------------------

### | 特殊字符 ###

在Html中，就算我们使用了<p></p> <h></h>等标签，

文本中的空格，还是会被浏览器忽略掉。

如果我们想打空格，就需要特殊字符。

![cb6ef7477ab547dc84543e372dc6b2de.png][]

[Image 1]: 
[74f09f18348442148ecc52e5894fa7dc.png]: https://img-blog.csdnimg.cn/74f09f18348442148ecc52e5894fa7dc.png
[0b23983226f34254a3d7e1cda7fd2f93.png]: https://img-blog.csdnimg.cn/0b23983226f34254a3d7e1cda7fd2f93.png
[ce846529f53a488d86f9cb72f13e1afc.png]: https://img-blog.csdnimg.cn/ce846529f53a488d86f9cb72f13e1afc.png
[7198e5a6762a45b7b506e9eecdddfbc9.png]: https://img-blog.csdnimg.cn/7198e5a6762a45b7b506e9eecdddfbc9.png
[d21ef099b0524d08986a478b90a82d36.png]: https://img-blog.csdnimg.cn/d21ef099b0524d08986a478b90a82d36.png
[bf3e33f397864533b2702e28d321c072.png]: https://img-blog.csdnimg.cn/bf3e33f397864533b2702e28d321c072.png
[eeb116d7979a4b5581ca1cba66c006bf.png]: https://img-blog.csdnimg.cn/eeb116d7979a4b5581ca1cba66c006bf.png
[7975e078bf6e4d5d8127115cc4e8911b.png]: https://img-blog.csdnimg.cn/7975e078bf6e4d5d8127115cc4e8911b.png
[14bed4799136448a8d61bb697980df4f.png]: https://img-blog.csdnimg.cn/14bed4799136448a8d61bb697980df4f.png
[72a90e52c6744f518d53421abd528c9a.png]: https://img-blog.csdnimg.cn/72a90e52c6744f518d53421abd528c9a.png
[542c7ccfd7bc429ba6338fbdd6919281.png]: https://img-blog.csdnimg.cn/542c7ccfd7bc429ba6338fbdd6919281.png
[cb6ef7477ab547dc84543e372dc6b2de.png]: https://img-blog.csdnimg.cn/cb6ef7477ab547dc84543e372dc6b2de.png