HTML的基本标签

最新推荐文章于 2024-07-08 14:13:57 发布

原创最新推荐文章于 2024-07-08 14:13:57 发布 · 1.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文介绍了HTML中的基本标签，包括段落<p>、标题<h1>到<h6>、换行<br>、分割线<hr>、布局<div>、span、斜体<i>和<em>、粗体<b>和<strong>、中划线<s>和<del>、下划线<u>和<ins>，以及图片<img>和注释标签。强调了在实际开发中使用更具语义化的标签的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章末尾有代码和效果可查看。

基本标签：

段落标签<p></p>
标题标签：<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>
换行标签<br/>
分割线标签<hr/>
布局标签<div></div>
span标签<span></span>
斜体标签<i></i>或<em></em> 后者更具有语义化
粗体标签<b></b>或<strong></strong> 后者更具有语义化
中划线标签<s></s>或<del></del> 后者更具有语义化
下划线标签<u></u>或<ins></ins> 后者更具有语义化
图片标签<img>
注释标签：

注：

标题标签：h1最大，h6最小
实际开发中应使用更具语义化的标签
<br>跟 <br/>的效果一样的，但有斜杠的<br/>包容性更好
注释标签的内容不会在网页中显示出来

标签的嵌套：

代码：

<!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>
    <!--p为段落标签-->
    <p>段落标签</p>
    <p>段落标签</p>
    <!--hr为分割线标签-->
    <hr/>
    <!--br为换行标签-->
    换行标签<br/>
    换行标签<br/>
    <!--div+span布局-->
    <!--div标签可用来布局，不会去修饰文本，不会段前段后，只是可以换行-->
    <div>div标签1</div>
    <div>div标签2</div>
    <!--
        span标签用来放文本用的最多
        和普通文本一模一样，不会换行，不会修饰文本，不会段前段后
    -->
    <span>span标签1</span>
    <span>span标签2</span>
    <br/>
    <!--文本修饰标签（后者更具语义化）-->
    <i>斜体标签</i>
    <em>斜体标签</em>
    <br/>
    <b>粗体标签</b>
    <strong>粗体标签</strong>
    <br/>
    <s>中划线标签</s>
    <del>中划线标签</del>
    <br/>
    <u>下划线标签</u>
    <ins>下划线标签</ins>
    <br/>
    <!--
        标签之间的嵌套关系：
            一个标签的开始与结束必须包含在另一个标签的里面
        行内元素：不能设置宽高，不能换行。span i u s em strong ins
        块级元素：可以设置宽高，可以换行。h1~h6 div p body
    -->
    <ins>
        <strong>标签的嵌套1</strong>
    </ins>
    <br/>
    <strong>
        <ins>标签的嵌套2(效果与嵌套1一样)</ins>
    </strong>
    <br/>
    <!--
        图片标签  <img src="" alt="" title="">
        src:图片的路径（必须要写路径）
        alt:当图片不能显示的时候，浏览器会提示alt中的信息
        title：当鼠标放在图片上时，提示title中的信息
        boder:边框
        width:图片的宽
        heigh:图片的高
        如果只写width或者height，会等比例缩放图片
        绝对路径：
            网络路径：
            磁盘路径:相对于计算机的位置
        相对路径：
            ./能访问与当前文件同层级（平辈）的文件或者文件夹
            ../能访问与当前文件的父目录级（父亲辈）同层级的文件或者文件夹
            ../../能访问与当前文件的上上级的文件或者文件夹
            （../建议不要超过四层）
    -->
    <img src="../../picture/day02/21.png" alt="21" title="截图" boder="2" 
        weight="150" height="100">
    <img src="../../picture/day02/22.png" alt="21" title="截图" boder="2">


    
</body>
</html>

效果：