程序员经验分享-hwhale

HTML的块级元素（常用整理）

2023-05-16

emmm，最近想整理复习一下前端的基础，最开始的HTML想了好久也没想好怎么写，最后也是决定以行块这样整理，再在后面补充吧。
说到HTML，什么是HTML呢？

        什么是 HTML？
    HTML 是用来描述网页的一种语言。

    HTML 指的是超文本标记语言 (Hyper Text Markup Language)
    HTML 不是一种编程语言，而是一种标记语言 (markup language)
    标记语言是一套标记标签 (markup tag)
    HTML 使用标记标签来描述网页

也就是说HTML不是像java一样的一门编程语言，而是一门标记性语言。

那我们常说的HTML标签是什么意思呢？

            HTML 标签
    HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

    HTML 标签是由尖括号包围的关键词，比如 <html>
    HTML 标签通常是成对出现的，比如 <b> 和 </b>
    标签对中的第一个标签是开始标签，第二个标签是结束标签
    开始和结束标签也被称为开放标签和闭合标签

也就是说，一对标签中包含着元素。而我们学习HTML也就是在学习HTML的标签。

现在开始，就把HTML中常用的块级元素整理出来。

一、HTML 标题

标题（Heading）是通过 《h1》 到 《h6》等标签进行定义的。

《h1》 定义最大的标题。《h6》 定义最小的标题。


        <h1>这是一个h1标签</h1>
        <h2>这是一个h2标签</h2>
        <h3>这是一个h3标签</h3>
        <h4>这是一个h4标签</h4>
        <h5>这是一个h5标签</h5>
        <h6>这是一个h6标签</h6>

像这样的在网页显示的就是：
在这里插入图片描述
这里可以再说一下另一个标签–>hr 元素可用于分隔内容。
例如上面的例子我们在每个h标签中间加上一个hr标签。

        <h1>这是一个h1标签</h1>
        <hr>
        <h2>这是一个h2标签</h2>
        <hr>
        <h3>这是一个h3标签</h3>
        <hr>
        <h4>这是一个h4标签</h4>
        <hr>
        <h5>这是一个h5标签</h5>
        <hr>
        <h6>这是一个h6标签</h6>

这样显示出来的话就是这样：
在这里插入图片描述
哎？说到了hr标签，那就得说一下br标签。
HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 br 标签：

<h1>这是一 <br> 个h1标签</h1>

在h1标签中加上一个br标签（标签是可以嵌套的）
在这里插入图片描述

二、HTML 段落

段落是通过 p标签定义的

        <p>这是第一个p标签</p>
        <p>这是第二个p标签</p>

我们打印一下看看，也是块级元素。
在这里插入图片描述
这里可以说一下，

        <p>这是第一个p标签</p>
        <p></p>
        <p>这是第二个p标签</p>

像这样在标签中间插入一个空的p标签可以起到换行的作用，但是最好不要这么做，用上面说的那个br标签。

三、表格

表格由 table标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

举个例子看看。

        <table>
            <tr>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
            </tr>
        </table>

然后看一下在网页上显示的是什么样子的。
在这里插入图片描述
嘶，这和我想象的表格不太一样啊，emm，其实主要是少了边框，这里涉及了css的样式，就先把它看成一个表格吧，边框先自己想象。

表格的表头
表格的表头使用 th标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：
例如我在这个表格上加上一个表头：

        <table>
            <tr>
                <th>这是第一列</th>
                <th>这是第二列</th>
            </tr>
            <tr>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>21</td>
                <td>22</td>
            </tr>
            <tr>
                <td>31</td>
                <td>32</td>
            </tr>
        </table>

看一下效果哈：
在这里插入图片描述

关于表格还有一些其他的点我可能没有说到，如果需要用到的话可能就得在找别的资料了。

四、HTML 列表

无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 ul 标签。每个列表项始于 li。
这个也是比较常用的列表
我们来写一下：

        <ul>
            <li>这是第一个li</li>
            <li>这是第二个li</li>
            <li>这是第三个li</li>
            <li>这是第三个li</li>
        </ul>

然后我们看一下这个是啥样的。
在这里插入图片描述
Ok，那我们再看另一个。
有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 ol标签。每个列表项始于 li 标签。

        <ol>
            <li>这是第一个li</li>
            <li>这是第二个li</li>
            <li>这是第三个li</li>
            <li>这是第三个li</li>
        </ol>

就是把ul换成了ol，这回再看一下这个怎么有序。
在这里插入图片描述

五、HTML div 元素

HTML div元素是块级元素，它是可用于组合其他 HTML 元素的容器。

div元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，div元素可用于对大的内容块设置样式属性。

元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

简单来说的话，div是一个块级元素，主要用来进行页面布局，进行组合其他的HTML元素，也可以把它当成一个容器。

这里，就说这五个常用的块级元素。OK，结束。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

HTML的块级元素（常用整理） 的相关文章

  • 聊一聊SLAM核心算法之ESKF多传感器融合算法

    作者 应知 编辑 汽车人 原文链接 xff1a https zhuanlan zhihu com p 628074965 点击下方卡片 xff0c 关注 自动驾驶之心 公众号 ADAS巨卷干货 xff0c 即可获取 点击进入 自动驾驶之心

  • Ubuntu20.04跑VINS-fusion

    Ubuntu20 04跑VINS Fusion 使用docker 由于工程较大 xff0c 依赖较多 xff0c 环境配置十分繁琐 xff0c 故使用docker环境来运行VINS Fusion Docker 可以让开发者打包他们的应用以及

  • ubuntu20.04跑PL-VINS

    PL VINS源码 xff1a https github com cnqiangfu PL VINS 编译时报错 catkin make Ceres报错 报错信息 CMake Error at usr local lib cmake Cer

  • unubtu20.04环境下inter d435i相机标定遇到的一些问题

    前言 最近拿到深度相机inter d435i 但是在ros开发中遇到了一些问题 这里我就将我遇到的问题跟解决的办法讲一下 我采用的是双系统ubuntu系统环境下开发的 并不是基于虚拟机开发的 先提一下 问题1 select timeout报

  • 页面报错：Invalid prop: custom validator check failed for prop “percentage“.

    问题 xff1a 使用element 组件库的el progress组件 xff0c 页面正常渲染 xff0c 但是控制台有报错 xff1a 出现问题代码如下 xff1a lt el progress percentage 61 34 en

  • 将mysql中的数据导入到hdfs中

    将mysql中的数据导入到hdfs中 mysql中的数据导入到hdfs中 xff0c 需要借助一个工具sqoop完成 xff0c sqoop的安装和简介请点大数据必学框架 sqoop 一 配置sqoop环境 为了能够让sqoop识别到hdf

  • 串口通信——串口接收数据，发送数据

    十六进制 HEX hexadecimal heks des ml 十进制 DEC decimalism 39 desim liz m 二进制 BIN binary ba n ri 八进制 OCT octonary kt n ri 波特率计算

  • 大疆半固态激光雷达Horizon的优缺点

    原文链接 xff1a 大疆激光雷达 xff0c 车厂为何不爱 xff1f 优点 xff1a 1 成本低 xff0c 可以量产 xff1a 2020 年 xff0c 在当年的 CES 展会上 xff0c 大疆 Livox 发布了 Horizo

  • Ubuntu18.04切换Python版本

    转载自 xff1a Ubuntu18 04 切换 Python 版本 前言 Ubuntu18 04 默认安装了两个版本 Python2 7 和 Python3 6 查看可用二进制文件 ls usr bin python 过程 使用 upda

  • 解决ubuntu1604联网以后网页还是打不开的问题

    ubuntu系统连接正常的联网的网线但是网页还是打不开 xff0c 所有联网的软件也打不开 xff0c 在路由器工作正常的情况下 xff0c 可能出现的问题为dns解析异常 xff0c 关于dns解析异常的解决方法 xff1a 这段时间在u

  • 操作系统--线程并发实验三

    操作系统 线程并发实验三 一 实验目的 线程的运行时并发的 xff0c 如果互不相干的线程交替运行不会产生问题 但是如果有共享资源 合作关系的线程之间由于交替运行可能产生问题 xff0c 例如偶尔出现程序的结果不正常 理解临界区的概念 xf

  • 安装OOQP遇到问题

    Ubuntu20 04 安装OOQP遇到问题 OOQP安装 OOQP安装 MA27是OOQP的依赖 在安装MA27时容易出现找不到fortran77等情况 xff0c 在配置这些环境时容易出现其他错误导致系统环境出现问题 选择其他版本的安装

  • 15个好用的百度网盘搜索引擎

    15个好用的百度网盘搜索引擎 前言 分享 15 个好用的百度网盘搜索引擎 xff0c 方便大家搜索百度云网盘分享的资源文件 挑出来这 15 个效果还不错 xff0c 都可以正常使用 挑选标准 xff1a 免费 xff0c 大部分不登录可用

  • 操作系统死锁实验六

    操作系统死锁实验六 一 实验目的 如果一个进程集合中的每个进程都在等待只能由该进程集合中的其他进程才能引发的事件那么该进程集合就是死锁的 产生死锁的必要条件 xff1a 互斥 xff1b 请求资源和保持已获得资源不释放 xff1b 不可抢占

  • 修复 Windows11 打不开 Windows安全中心

    修复 Windows 打不开 Windows安全中心 遇到以上问题我们直接上解决方法 win10的话直接WIN 徽标 43 X键 win11 菜单栏输入 PowerShell 管理员启动 管理员权限打开PowerShell xff0c 依次

  • webstorm/idea 配置less环境

    看了一下发现大多数教程少了最关键的一步 如果这个lessc不能自动识别的话 需要手动寻找lessc cmd的路径 xff0c 可以在终端中通过 where lessc查找 复制lessc cmd位置就可以了

  • 自定义http钩子

    简单创建一个自定义http钩子函数 span class token keyword import span span class token punctuation span useState span class token punct

  • React Redux 工具包 Redux Toolkit 初步学习

    Redux 工具包 xff08 Redux Toolkit xff09 的目标是帮助简化常见的 Redux 用例 它并不是你想要用 Redux 做的所有事情的完整解决方案 xff0c 但它应该使你需要编写的许多与 Redux 相关的代码变得

  • 卫星导航模拟器GSS7000测试NTRIP RTK--以Ublox F9P 为例.rtklib原始观测量解算固定解FIX

    GSS7000 Ntrip 测试指南 Ntrip Networked Transport of RTCM via Internet Protocol 通过互联网进行RTCM网络传输的协议 是在互联网上进行RTK数据传输的协议 Ntrip是一

  • Ubuntu网络调试助手安装后无法打开

    转载自 解决Ubuntu网络调试助手安装后无法打开问题

随机推荐

  • 微机原理与接口技术之8060微处理器

    微机原理与接口技术之Intel8060微处理器 这篇bolg主要讲的是8060微处理器的内部结构 xff0c 引脚功能以及总线时序 8086内部结构 xff1a 8086CPU是由执行指令部件EU和总线接口部件BIU两部分注组成 1 EU部

  • Qt的三个基类QObject、QApplication和QWidget

    一 Qt介绍 1 概述 Qt是一个跨平台的C 43 43 图形用户界面应用程序框架 由挪威TrollTech公司出品 1996年Qt进入商业领域 xff0c 它已经成为全世界范围内数千种成功的应用程序的基础 Qt也是流行的Linux桌面环境

  • 锂电池串联放电并联充电自动转换电路

    直接通过5v充电器给串联锂电池组充电可以大大提高充电器的利用率 毕竟现在手机充电器都有 再去买个专用的锂电池平衡充电器又感觉没啥必要 一般给串联锂电池组充电的方案就是通过升压模块将5v升压后再充电 感觉有弊端 1 一般没有平衡充电功能 造成

  • Linux（Ubuntu）配置Cuda，Pytorch，Anaconda

    近期需要在Linux xff08 Ubuntu20 04 xff09 上运行一个工程 xff0c 需要搭建相关环境 xff0c 这是首次在Linux系统上完成anaconda xff0c cuda xff0c 及Pytorch的下载与配置

  • Visual Studio配置OpenGL

    近期工作中需要用到OpenGL 而之前一直是用Opencv工作 xff0c 这就需要在VS上配置OpenGL 因为是首次在VS上配置OpenGL xff0c 以备自己和有需要的小伙伴不时之需 我的VS是2022版的 xff0c 但配置流程各

  • Pycharm终端问题： python : 无法将“python”项识别为 cmdlet、函数、脚本文件或可运行

    发现这个问题的起因是我打算尝试用Django练习做网站 xff0c 需要在Pycharm终端输入一些命令以运行脚本 xff0c 我的Pycahrm配置了anaconda xff0c 但在终端运行命令时一直报错 xff1a python 无法

  • Python:把列表内容按行数写入txt

    事情的起因是我需要把一个元素全为数字的列表按固定列数写入txt文件 xff0c 也就是每行几个元素 xff0c 用逗号隔开 看了一些网上的分享觉得都不太合适 xff0c 于是自己想了一个办法 xff0c 一行代码解决 xff0c 废话少说

  • 解决Git提交代码报错： ERROR: commit xxxxx: missing Change-Id in message footer

    在近期的工作中完成代码修改提交代码时Git报错并提示提交不成功 xff0c 具体错误如下 xff1a 原因是Change Id缺失 至于解决方法 xff0c Git在报错时已经提示了 xff0c 如下图黄框所示 xff1a 首先 xff0c

  • 如何实现用串口助手实时绘制16位数据波形图

    先和大家kuan两句 xff0c 哈哈 因为之前参加智能车想用波形显示来调节PID xff0c 找了很多工具也没有成功 xff0c 心里也知道串口一次就是只能发送八位数据 xff0c 很多时候可以用字符显示16位的 xff0c 但是就不是数

  • STM32之中断方式实现串口通信

    中断方式实现串口通信 一 创建项目二 编写代码三 运行四 总结 一 创建项目 创建一个STM32f103c8的STM32CubeMX项目 xff1a SYS设置 xff1a RCC设置 xff1a 时钟树设置 xff0c 输入72后回车 x

  • 1.（1）数据结构之链表-typedef的用法

    本人坚持更新C语言 xff0c 数据结构 xff0c 操作系统知识 xff0c 可以收藏 xff0b 关注随时了解 x1f61c x1f61c x1f61c 目录 我们在之前学习结构体的时候 xff0c 是如何定义结构体的呢 xff1f t

  • gazebo 中创建含有二维码的墙的模型

    1 新建空白墙的模型 在gazebo中添加一个Edit gt Building Editor xff0c 生成sdf文件 xff0c 放在 gazebo models文件夹下 如图Untitled1 编辑model sdf文件 xff0c

  • 在vscode中开发arduino编译巨慢解决办法

    每次在vscode中 编译Arduino花费的时间巨长 xff0c 等的好烦 xff0c 仔细一看每次在Arduino 输出控制台上会出现一个警告 Warning Output path is not specified Unable to

  • 工作空间中的devel和build文件夹可以删掉

    工作空间中的devel和build文件夹可以删掉 xff0c 再cmake就可以产生

  • IOT的核心—无线通讯模块

    文章目录 前言一 IOT是什么 xff1f 1 IOT的运用 1 智能家居 2 无线控制 2 IOT总结 三 如何从互联网转换为物联网简述芯百特的CB2401与CB2402 1 CB2401介绍内部结构与管脚图产品应用评估板原理图 2 CB

  • STM32F103C8T6 串口3(USART3) 只能发不能收

    问题原因 xff1a 今天因为上述问题 困扰一天 xff01 最后发现是 PB8 9 xff08 配置输出 xff09 硬件短路了 xff01 问题现象 xff1a STM32F103C8T6 串口3 USART3 只能发不能收 xff01

  • eNSP第四篇：IP地址，逻辑接口，接口类型，三层路由接口，二层路由接口

    IP地址 xff0c 逻辑接口 xff0c 接口类型 xff0c 三层路由接口 xff0c 二层路由接口 私有IP地址的范围 IP范围 默认掩码 A类 10 0 0 0 10 255 255 255 255 0 0 0 B类 172 16

  • IMU及磁力计AHRS系统控制（一）：传感器物理实现原理

    AHRS系统前言 AHRS是 Attitude and heading reference system 的英文缩写 xff0c 百度对此的解释是 航姿参考系统 xff0c 按笔者比较浅薄的理解就是在计算平台上通过算法处理一套部署在被控对象

  • 归并排序（C语言）详解

    记录学习第五天 今天记录一下归并排序 xff0c 因为在csdn里面没有找到特别清楚的解析 xff0c 所以想自己写的认真一点 xff0c 也查阅了一些资料 xff0c 通过这篇博客记录一下 xff1b 归并排序 xff0c 光看字面 xf

  • HTML的块级元素（常用整理）

    emmm xff0c 最近想整理复习一下前端的基础 xff0c 最开始的HTML想了好久也没想好怎么写 xff0c 最后也是决定以行块这样整理 xff0c 再在后面补充吧 说到HTML xff0c 什么是HTML呢 xff1f 什么是 HT

热门标签