常见标签

郭雨婷01

已于 2022-04-13 21:18:46 修改

阅读量68

点赞数 1

文章标签： javascript 前端 html html5 css

于 2022-04-13 21:17:27 首次发布

本文链接：https://blog.csdn.net/m0_51272779/article/details/124156785

版权

html前端开发-----html常见标签----块标签，行标签，行块标签的用法与特点

前言

哈喽同学们大家好，本节我们开始学习html5基础部分------常见标签相关知识

作为基础章节，常见标签涉及的内容不多，重点关注各个标签的特点

思维导图

一、块标签block

特点：独占一行，默认宽度撑满父级，高度为0，子级内容撑开高度

代码如下（示例）：

<div>无语意</div>
    <h1>大标题</h1>
    <!-- SEO: 网络引擎搜索优化 -->
    <!-- 一个页面最多出现1次 -->
    <!-- h1 ~ h3 都具备seo功能 -->

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

二、行标签inline

特点：同排序跟显示，遇到父级边界换行

不支持上下外边距

不支持宽高，内容撑开高度

不正常显示上下内边距

换行被解析

代码如下（示例）：

<!-- 富文本 -->
    <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>

span {
            width: 100px;
            height: 100px;
            background-color: cyan;
            /* padding-top: 100px; */
            margin-left: 10px;
        }

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

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

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

三、行块标签inline-block

特点：同排序跟显示，遇到父级边界换行

没有宽高时内容撑开高度

换行被解析

代码如下（示例）：

<style>
        img {
            width: 200px;
        }
    </style>
</head>
<body>
    <img src="img/fj.webp" alt="风景" title="风景图">
    <img src="img/fj.webp" alt="风景" title="风景图">
    <img src="img/fj.webp" alt="风景" title="风景图">
    <!-- 如果不给宽度和高度，以图片默认的大小显示 -->
    <!-- 如果只给宽度或者高度，等比例缩放 -->
</body>

img：src:资源路径

title:鼠标悬停时的提示文本

alt:图片不能正常显示时的提示文本