HTML常见标签

最新推荐文章于 2024-06-01 23:46:19 发布

童童童ing

最新推荐文章于 2024-06-01 23:46:19 发布

阅读量2.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_64804275/article/details/124152674

版权

HTML常见标签

一、标签的作用
二、常见标签

一、标签的作用

HTML中的标签用于将内容展示在网页中。分为三大类：块标签，行标签以及行块标签。

二、常见标签

一、块标签

1.常见块标签有div无语意标签,h1~h6标题标签，p 段落标签, ul无序列表，ol 有序列表, li 列表项标签，语意化标签 article，section，aside,nav，header，footer
2.块标签的特点：独占一行，默认宽度占满父级，高度为0，子级内容撑开高度

    <h1>111</h1>
    <h2>222</h2>
    <h3>333</h3>
    <h4>444</h4>
    <h5>555</h5>
    <h6>666</h6>

h1~h6l六个标签效果
h1~h6 ,字体逐渐变小，其中h1一般只用一次，h2最多八次，h1~h3它们具有搜索引擎权重

   <p>段落      标签</p>

在这里插入图片描述
注意：p标签里的内容虽然有好多空格，但浏览器只显示一个

 <!-- pre标签可以保留段落的格式  -->
    <pre>
        这里    
        是     
        csdn
    </pre>

在这里插入图片描述

 <!-- 列表 -->
    <!-- 无序列表：unorder list -->
    <ul>
        <!-- 列表项: list-item -->
        <li>床前明月光</li>
        <li>疑是地上霜</li>
        <li>举头望明月</li>
        <li>低头思故乡</li>
    </ul>

    <!-- 有序列表： order list -->
    <ol>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ol>

在这里插入图片描述

二、行标签

行标签一般有span标签,a标签（超链接），i标签（倾斜），b标签（加粗），sub标签（下标），sup标签（上标），em标签（加强加粗），strong标签（加强倾斜）
行标签特点：

同排序跟显示，遇到父级边界换行
不支持宽高，内容撑开宽高
不支持上下外边距
不正常显示上下内边距
换行被解析

 <p><span style="color: red">C</span>SDN</p>

    <span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span><span>无语意</span>

    <!-- <br> 换行 -->
    <br>
    <a href="http://www.csdn.net"
       target="_blank">CSDN</a>
       <!-- targe=_self 默认值，在本页面打开
       target=_blank 在新的标签页打开 -->

    <br>

    <i>倾斜</i>
    <b>加粗</b>
    <em>加强 倾斜</em>
    <strong>加强 加粗</strong>

    <p>O<sub>2</sub></p>
    <p>6<sup>3</sup></p>

在这里插入图片描述

三、行块标签

用img标签来代表行块标签进行解释。
img标签有以下四个属性

src：资源路径
title：鼠标悬停时的提示文本
alt：图片不能正常显示的提示文本
特点：只给宽度或者高度，会等比例变化
行块标签的特点：
同排序跟显示，遇到父级边界换行
没有宽高的时候内容撑开宽高
换行被解析

    <style>
        img {
            width: 200px;
        }
    </style>
</head>
<body>
    <img src="./花花.jpg" alt="风景" title="风景图">

    <!-- 如果不给宽度和高度，以图片默认的大小显示 -->
    <!-- 如果只给宽度或者高度，等比例缩放 -->
</body>

在这里插入图片描述

童童童ing

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML常见标签

HTML常见标签一、标签的作用二、常见标签一、块标签二、行标签三、行块标签一、标签的作用HTML中的标签用于将内容展示在网页中。分为三大类：块标签，行标签以及行块标签。二、常见标签一、块标签1.常见块标签有div无语意标签,h1~h6标题标签，p 段落标签, ul无序列表，ol 有序列表, li 列表项标签，语意化标签 article，section，aside,nav，header，footer2.块标签的特点：独占一行，默认宽度占满父级，高度为0，子级内容撑开高度 <h1&
复制链接

扫一扫