【html】常见的行标签(inline)、块标签(block)和行块标签(inline-block)特点及相互转换


前言

本文总结了一些常见的HTML标签的用法以及特点,帮助看官您更好的掌握网页的构建。


提示:以下是本篇文章正文内容,下面案例可供参考

一、行标签

行标签又称内联标签,常见的行标签有span标签,a标签,br标签,i标签,b标签,em标签,strong标签,sup标签,sub标签等。

1.span标签

span标签没有具体的语义,通常用在编辑富文本时。

<!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>
    <style>
        span{
   
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
</body
  • 16
    点赞
  • 67
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是HTML5常见blockinlineinline-block元素以及它们的标签block元素: - div:用于组合其他HTML元素的容器。 - p:用于表示段落。 - h1-h6:用于表示标题,h1为最高级别的标题,h6为最低级别的标题。 - ul和ol:分别用于表示无序列表和有序列表。 - li:用于表示列表中的每一项。 - dl、dt和dd:分别用于表示定义列表、定义项目和定义描述。 - table:用于表示表格。 - tr:用于表示表格中的。 - td和th:分别用于表示表格中的单元格和表头单元格。 - form:用于表示表单。 - header:用于表示页面或章节的标题。 - nav:用于表示页面中的导航链接。 - section:用于表示页面中的章节。 - article:用于表示页面中的文章或独立内容。 - aside:用于表示页面中的侧边栏或次要内容。 - footer:用于表示页面或章节的页脚。 - main:用于表示页面主要内容。 inline元素: - span:用于分组HTML元素,通常用于通过CSS样式控制。 - a:用于表示链接。 - img:用于表示图片。 - strong和em:分别用于表示加粗和斜体的文本。 - input:用于表示用户输入框,如文本框、单选框等。 - button:用于表示按钮。 - label:用于表示表单标签。 - select:用于表示下拉菜单。 - option:用于表示下拉菜单的选项。 - textarea:用于表示多文本输入框。 - bdo:用于表示文字方向。 - code:用于表示计算机代码。 - time:用于表示时间或日期。 - small:用于表示小号文本。 - sub和sup:分别用于表示下标和上标。 inline-block元素: - input:用于表示用户输入框,如文本框、单选框等。 - button:用于表示按钮。 - textarea:用于表示多文本输入框。 - select:用于表示下拉菜单。 - img:用于表示图片。 - label:用于表示表单标签。 - progress:用于表示进度条。 - meter:用于表示度量值的范围和比例。 - video:用于表示视频文件。 - audio:用于表示音频文件。 - iframe:用于表示内嵌框架。 - details和summary:分别用于表示可展开的详细信息和概要。 - figure和figcaption:分别用于表示媒体对象和它们的标题。 - output:用于表示计算结果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值