HTML基础标签合集-CSDN博客

本文链接：https://blog.csdn.net/qq_64848411/article/details/132010110

<h1>标签到<h6>标签为标题标签通常用于一个页面的最上边的标题

<!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>
    <h1>这是第一大标签</h1>
    <h2>这是第二大标签</h2>
    <h3>这是第三大标签</h3>
    <h4>这是第四大标签</h4>
    <h5>这是第五大标签</h5>
    <h6>这是最小的标签</h6>
</body>
</html>

浏览器显示

标签和 标签介绍

标签为段落标签 标签为换行标签对于初学者没接触盒子之前可以换行美化文章，看起来不会那么杂乱无章。

<!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>

    曲曲折折的荷塘上面，弥望旳是田田的叶子。
    叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，<br>有袅娜地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，
    又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，<br>仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，
    霎时传过荷塘的那边去了。<br>叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。

    叶子底下是脉脉(mò)的流水，遮住了，不能见一些颜色;而叶子却更见风致了

    <!-- <br>换行标签
    <p>段落标签</p> -->
    <p>朱自清《荷塘月色》片段</p>

</body>

</html>

效果图：

此处为没有使用 标签之前的效果

上边的文字为使用了 标签后的效果，可以看到明显的换行。

标签和 虽然都可以换行但是会有细微的差距， 标签在换行时与上下文没有明显的间距，但是在使用之后会发现使用的那一端话会与上下文有明显的间隙，在设计页面的时候根据自己的情况来使用这两个标签。

修饰文本内容的简单标签、、<del>、<ins>。

：对于文本使用使用后可以使文字加粗。

：标签在使用的时候使文字或者整段文字倾斜。

<del>：会把标签内的文字打上删除线。

<ins>：会把标签内的文字或者文段标记上下划线。

另外补充一下<hr>标签此表现使用是一条横画线。

<!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>
   
    <b>这是b标签</b>

    <i>这是i标签</i>

    <del>这是del标签</del>

    <ins>这是ins标签hr</ins>
    
    <br>下边为hr标签
    <hr size="20px" noshade=>

</body>
</html>

效果图：

在<hr>标签中 size=“ px” 代表横画线有多宽，后边的noshade则代表颜色（没有设置所以就为默认的颜色）。

图片标签

<!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>
    
    <h1>相对路径的图片显示</h1>
    <img src="../img/1.jpg" width="250" height="500" alt="图片显示错误">

    <h1>绝对路径下的照片</h1>
    <img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0" width="250" height="500">
    
    <h1>图片显示错误</h1>
    <img src="./" width="250" height="250" title="图片错误" alt="图片显示错误">
</body>
</html>

在插入图片的时候使用img src=“ 图片的路径” width=“ 图片的长度” height=“ 图片有多宽”，

图片在插入时分为相对路径和绝对路径：

相对路径：直接使用本机存有的图片就为相对路径

绝对路径：访问网站有照片的时候右键复制照片路径到src处就为绝对路径。

title="图片错误"：是在照片出错的时候，会出现一段话。（只有在加载不出照片把鼠标放到jpg上时才会出现）。

alt="图片显示错误：与title的区别是在照片加载不出来时，会在照片后边出现，不需要把鼠标放到jpg上才显示。

第一次写文章，谢谢理解！