HTML常见标签大全

2023-05-30 4330℃

html常见标签

1、body标签

网页身体标签,所有网页内容都在里面,存放各种标签

 

2、div盒子标签

一般划分一个个区域,构建骨架思路会用到。用于存放:文字、图片、内容等

 

3、p文本段落标签

为文本段落标签,可存放大段落文字

 

4、h1~h6 标题标签

h1到h6级别逐渐减小

书写规范,一个页面只允许出现一个h1(一级标题标签),若重复出现网页会分不清主次内容,就像一篇作文只能有一个作文题目一样。

5、b标签和strong标签(文字加粗标签)

都是用于加粗文字的。二者区别是:strong标签是为了突出重点

 

6、span文字包裹标签

包裹文字的标签。

p标签和span标签的区别是:p标签会自动换行,而span标签不会自动换行。一般短的语句可以用span标签包裹,长点的用p标签包裹。

7、br换行标签和hr分隔符标签

br标签和hr标签都是但标签

br标签是换行标签

hr标签是分隔符标签

8、i标签和em标签(文字斜体标签)

二者都是斜体标签,使文字呈现倾斜效果

二者区别:em标签更容易被浏览器识别到

9、del删除标签

一般用于价格删除线

 

10、center居中标签

使文本居中

 

11、sup上标和sub下标

标签的内容将会在当前字符高度的一半为基准线的下/上方,字体大小会小一点。

 

12、pre预格式化标签

被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。

 

上述标签使用方法及代码展示:

<body>
    <!-- 这是身体标签 -->

    <div class="div1">
        <!--这是一个盒子标签-->
        <p>我是段落文本p标签</p>
        <h1>我是一级标题标签</h1>
        <h2>我是二级标题标签</h2>
        <h3>我是三级标题标签</h3>
        <h4>我是四级标题标签</h4>
        <h5>我是五级标题标签</h5>
        <h6>我是六级标题标签</h6>
    </div>
    <hr>

    <div class="div2">
        <!--这也是一个盒子标签-->

        <!-- 区别是p会自动换行,而span不会自动换行,共用一行 -->
        <p>你好</p>
        <p>我爱前端</p>
        <p>好好学习</p>
        <hr>
        <!--分隔符-->
        <span>你好</span>
        <span>我爱前端</span>
        <span>好好学习</span>
        <br>
        <span>我被br强制换行了</span>
    </div>
    <hr>

    <div class="div3">
        <!--这还是一个盒子标签-->
        <p>我是正常的p</p>
        <p><i>我是被斜体i定义后的p</i></p>
        <p><em>我是被斜体em定义后的p,我更容易被浏览器识别</em></p>
    </div>
    <hr>

    <div class="div4">
        <span>现价:¥99
            <del>原价:¥399</del>
            <!--这是删除符-->
            <center>我是居中对齐</center>
            H<sub>2</sub>O
            CO<sup>2</sup>

        </span>
    </div>
    <hr>

    <div class="5">
        <p>
            你好 我是前端小白
            我爱学前端
            我的空格和换行没有被p保留
        </p>

        <pre>
            你好   我是前端小白
            我爱学前端
            我是被pre保留了空格和换行
        </pre>
    </div>
</body>
标签: