当前位置: 首页 > news >正文

HTML 常用的块级元素和行内元素

1. 常用的块级元素

  • 块级元素具有如下特点:

    • 占据父容器的整行宽度。
    • 通常从新的一行开始。
    • 可以包含其他块级元素和行内元素。
  • 常用的块级元素:

    div:通用的容器,用于布局和分块内容。
    h1 到 h6:标题标签,定义从一级标题到六级标题。
    p:段落标签,用于定义文本段落。
    ul 和 ol:无序列表和有序列表,分别用于定义项目符号列表和编号列表。
    li:列表项,用于在列表(ul 或 ol)中定义项目。
    blockquote:块级引用,用于引用大段的文本。
    header:页面或部分内容的头部。
    footer:页面或部分内容的底部。
    section:用于页面中定义内容的一个区块。
    article:表示页面中的一篇文章或独立的内容块。
    nav:定义导航链接的容器。
    aside:表示与页面主要内容相关的侧边内容。
    form:用于创建表单。
    table:定义表格结构。

  • 其他常见的块级元素:
    hr:水平线,通常用于分割内容。
    figure:用于包含图像、图表或其他插图。
    figcaption:定义 figure 的标题或说明。

2. 常用的行内元素

  • 行内元素具有如下特点:

    • 只占据内容所需的宽度,不会从新的一行开始。
    • 不能包含块级元素,但可以包含其他行内元素或文本。
  • 常用的行内元素:

    span:通用的行内容器,通常用于局部样式化文本。
    a:链接标签,用于创建超链接。
    strong:用于表示重要的内容,通常显示为加粗文本。
    em:用于表示强调内容,通常显示为斜体文本。
    img:图像标签,用于嵌入图像。
    br:换行符,用于在文本中换行。
    i:斜体文本,通常用于表示不同语言或名词。
    b:加粗文本,用于强调部分内容。
    u:下划线文本。
    code:表示计算机代码,通常显示为等宽字体。
    small:用于显示小号文本。
    sub:下标文本。
    sup:上标文本。
    label:表单标签,用于描述表单控件。

  • 其他常见的行内元素:
    mark:用于高亮文本。
    time:表示时间或日期。
    abbr:表示缩写。
    cite:用于引用标题或作品名称,通常显示为斜体。
    q:短引用,表示短的行内引用文本。

3 总结:

块级元素行内元素
divspan
pa
h1-h6strong
ul,olli,em
tablei,b,u
blockquoteimg
header,footerbr
article,sectioncode
navlabel
asidemark,time,q

相关文章:

HTML 常用的块级元素和行内元素

1. 常用的块级元素 块级元素具有如下特点: 占据父容器的整行宽度。通常从新的一行开始。可以包含其他块级元素和行内元素。 常用的块级元素: div:通用的容器,用于布局和分块内容。 h1 到 h6:标题标签,定义…...

js短路求值

短路求值(short-circuit evaluation)是指在逻辑运算中,如果前面的表达式已经能够确定整个表达式的结果,后面的表达式就不会被执行。短路求值常见于逻辑运算符 &&(与)和 ||(或&#xff0…...

react 知识点汇总(非常全面)

React 是一个用于构建用户界面的 JavaScript 库,由 Facebook 开发并维护。它的核心理念是“组件化”,即将用户界面拆分为可重用的组件。 React 的组件通常使用 JSX(JavaScript XML)。JSX 是一种 JavaScript 语法扩展,…...

如何加密重要U盘?U盘怎么加密保护?

在日常生活中,我们常常使用U盘来存储和传输重要文件。然而,U盘的便携性也意味着它容易丢失或被盗。为了保护U盘中的数据安全,我们需要对U盘进行加密。本文将为您介绍如何加密重要U盘,以及U盘加密保护的方法。 BitLocker BitLocke…...

js编写一个中奖程序

好的,以下是一个用JavaScript编写的抽奖程序,它根据给定的概率来决定奖项。我们将使用随机数生成器来模拟抽奖过程。 function drawPrize() {const prizes [{ name: 特等奖, probability: 0.00000001 },{ name: 一等奖, probability: 0.00000003 },{ n…...

Mybatis-plus的基础用法

文章目录 1. 核心功能1.1 配置与编写规则1.2 条件构造器1.3 自定义SQL1.4 IService接口1.4.1 Lambda方法1.4.2 批量新增 1.5 分页查询 2. 拓展功能2.1 代码生成器2.2 DB静态工具2.3 逻辑删除2.4 枚举处理器 参考 1. 核心功能 1.1 配置与编写规则 Maven依赖&#xff1a; <…...

【网络篇】计算机网络——应用层详述(笔记)

目录 一、应用层协议原理 1. 进入应用层 2. 网络应用程序体系结构 &#xff08;1&#xff09;客户-服务器体系结构&#xff08;client-server architecture&#xff09; &#xff08;2&#xff09; P2P 体系结构&#xff08;P2P architecture&#xff09; 3. 进程间通讯 …...

力扣10.9

3171. 找到按位或最接近 K 的子数组 给你一个数组 nums 和一个整数 k 。你需要找到 nums 的一个 子数组 &#xff0c;满足子数组中所有元素按位或运算 OR 的值与 k 的 绝对差 尽可能 小 。换言之&#xff0c;你需要选择一个子数组 nums[l..r] 满足 |k - (nums[l] OR nums[l 1…...

@RequestMapping指定请求方式的用法

RequestMapping("/depts")public Result list() {log.info("查询全部部分数据");return Result.success();}上面代码没有指定请求方式&#xff0c;通过postman测试&#xff0c;可以用GET&#xff0c;POST&#xff0c;Delete的方式调用。 要想指定请求方式…...

卷积神经网络细节问题及知识点

一、Batch Normalization Batch Normalization&#xff08;BN&#xff0c;批归一化&#xff09; 是深度学习中的一种技术&#xff0c;主要用于加速神经网络的训练过程&#xff0c;同时提高网络的稳定性和收敛速度。它通过对每一层的输出进行归一化&#xff0c;减少梯度消失和梯…...

【图论】(一)图论理论基础与岛屿问题

图论理论基础与岛屿问题 图论理论基础深度搜索&#xff08;dfs&#xff09;广度搜索&#xff08;bfs&#xff09;岛屿问题概述 岛屿数量岛屿数量-深搜版岛屿数量-广搜版 岛屿的最大面积孤岛的总面积沉没孤岛建造最大人工岛水流问题岛屿的周长 图论理论基础 这里仅对图论相关核…...

PhotoMaker部署文档

一、介绍 PhotoMaker&#xff1a;一种高效的、个性化的文本转图像生成方法&#xff0c;能通过堆叠 ID 嵌入自定义逼真的人类照片。相当于把一张人的照片特征提取出来&#xff0c;然后可以生成你想要的不同风格照片&#xff0c;如写真等等。 主要特点&#xff1a; 在几秒钟内…...

双十一买什么最划算?2024年双十一选购攻略汇总!

随着一年一度的双十一购物狂欢节日益临近&#xff0c;消费者们纷纷摩拳擦掌&#xff0c;准备在这个全球最大的购物盛宴中抢购心仪已久的商品。双十一不仅是一场购物的狂欢&#xff0c;更是商家们推出优惠、促销的绝佳时机。然而&#xff0c;面对琳琅满目的商品和纷繁复杂的优惠…...

Oracle架构之物理存储之审计文件

文章目录 1 审计文件&#xff08;audit files&#xff09;1.1 定义1.2 查看审计信息1.3 审计相关参数1.4 审计的类型1.4.1 语句审计1.4.2 权限审计1.4.3 对象审计1.4.4 细粒度的审计 1.5 与审计相关的数据字典视图 1 审计文件&#xff08;audit files&#xff09; 1.1 定义 审…...

DAY6 面向对象

概念 对象是一种特殊的数据结构&#xff0c;可以用来记住一个事物的数据&#xff0c;从而代表该事物&#xff0c;可以理解为一个模板表&#xff0c;总而言之万物皆对象&#xff0c;比如一个人、一个物体等。 怎么创建对象 先设计对象的模板&#xff0c;也就是对象的设计图&a…...

代码随想录 (三)—— 哈希表部分刷题

当我们想使用哈希法来解决问题的时候&#xff0c;我们一般会选择如下三种数据结构。 数组set &#xff08;集合&#xff09;map(映射) 在java中有就是&#xff0c;hashmap, LinkedHashMap, TreeMap &#xff0c;HashTable 等 总结一下&#xff0c;当我们遇到了要快速判断一个…...

搜维尔科技:使用 SenseGlove Nova 2 远程操作机械手,实现了对鸡蛋的精细操控

使用SenseGlove Nova 2远程操作机械手&#xff0c;实现了对鸡蛋的精细操控 搜维尔科技&#xff1a;使用 SenseGlove Nova 2远程操作机械手&#xff0c;实现了对鸡蛋的精细操控...

Mybatis是什么?优缺点分别有哪些?

MyBatis 是一个开源的持久层框架&#xff0c;它提供了将 SQL 语句和 Java 对象进行映射的功能&#xff0c;使得开发者可以通过简单的配置来实现数据库操作&#xff0c;减少了手写 SQL 的工作量。 MyBatis 的优点&#xff1a; 1. 简单易用&#xff1a;MyBatis 采用了简单的配置…...

opencascade鼠标拖拽框选功能

1.首先在OccView中添加用于显示矩形框的类 //! rubber rectangle for the mouse selection.Handle(AIS_RubberBand) mRectBand; 2.设置框选的属性 mRectBand new AIS_RubberBand(); //设置属性 mRectBand->SetLineType(Aspect_TOL_SOLID); //设置变宽线型为实线 mRe…...

docker 部署 postgres

这里以postgres:12.6为例&#xff1a; 1. 拉取postgres镜像 docker pull postgres:12.62. 创建挂载目录 mkdir -p /mydata/docker/postgres-1/data3. 启动postgres容器 docker run --name postgres-12.6 \-e POSTGRES_PASSWORD123456 \-p 5432:5432 \-v /mydata/docker/pos…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...

Async-profiler 内存采样机制解析:从原理到实现

引言 在 Java 性能调优的工具箱中&#xff0c;async-profiler 是一款备受青睐的低开销采样分析器。它不仅能分析 CPU 热点&#xff0c;还能精确追踪内存分配情况。本文将深入探讨 async-profiler 实现内存采样的多种机制&#xff0c;结合代码示例解析其工作原理。 为什么需要内…...