html文本元素

文章目录

  • h
  • p
  • span
  • pre
  • code
  • 实体字符
  • strong
  • i
  • em
  • del
  • s

h

h – head – 标题
一共有六级标题
hKaTeX parse error: Expected '}', got 'EOF' at end of input: *6>{级标题} & tab

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

p

p – paragraph – 段落
(p>lorem)*3 & tab自动生成段落,内容如下:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at esse officia officiis veritatis. A dolor, ea eligendi laborum nihil quam qui. Accusantium eos quam quia, quisquam sit ut veritatis!</p>
<p>Accusantium amet asperiores aspernatur consequatur distinctio dolor, dolore dolorem doloremque ducimus illo ipsam labore, libero maiores nam non odio odit officiis omnis possimus quod rerum sunt veniam veritatis voluptate voluptates!</p>
<p>Aspernatur atque beatae ea mollitia totam. Autem eaque et hic magnam necessitatibus nobis omnis quia rem repudiandae sequi. Ad animi ea facilis in optio quidem rerum sapiente sed sequi voluptatem.</p>

span

span – 无语义
有时需要一个元素,但是这个元素有没有一个语义,这里提到了语义,语义就是为了可以更好的让浏览器识别到浏览器需要的信息的含义,标签都是语义,乱用语义会造成浏览器识别异常问题,如:

<p>三元素包含:<span style="color: red"></span><span style="color: green">绿</span><span style="color: blue"></span></p>

上面的红绿蓝要显示为指定颜色,就要使用css,而css需要依托于html标签,因此span就有了意义

pre

预格式化文本元素
空白折叠:在源代码中的连续空白字符(空格、换行、制表符),在页面显示时,会被折叠为一个空格,不论标签内外
在pre元素中的内容会按照源代码格式显示在浏览器,不会出现空白折叠,通常用于显示代码;pre的本质是有一套默认的css代码(white-space)

<pre>1
2
3</pre>
<p style="white-space: pre">123</p>
<p>123</p>
<hr>

code

显示为代码,会空白折叠,与p标签相比就是有个字体上的差异,要避免空白折叠需要配合pre标签使用,或者直接加white-space属性

<code>
<pre>int a = 0;printf("%d", a);
</pre>
</code>
<code style="white-space: pre">int a = 0;printf("%d", a);
</code>

实体字符

通常用于在页面中显示一些特殊符号,如拥有尖括号的标签,如果直接输入会被html认为是个标签,因此需要实体字符,编写如下:

<p>1. &单词; 如&lt;p&gt;</p>
<p>2. &#数字; 如&#60;p&#62;</p>
<p>小于 -- less then &lt;</p>
<p>大于 -- great then &gt;</p>
<p>小于 -- non-breaking space &nbsp;</p>
<p>版权符号 &copy;</p>
<p>&符号 &amp;</p>

strong

表示重要的,不能忽略的内容

i

表示含有特殊语义,阅读的时候会使用特殊的语调。

em

表示强调的内容

del

表示错误的内容

s

表示过期的内容

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45443.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32 串口复习

按数据通信方式分类&#xff1a; 串行通信&#xff1a;数据逐位按顺序依次传输。传输速率较低&#xff0c;抗干扰能力较强&#xff0c;通信距离较长&#xff0c;I/O资源占用较少&#xff0c;成本较低。并行通信&#xff1a;数据各位通过多条线同时传输。 按数据传输方向分类&…

Django进阶:DRF(Django REST framework)

什么是DRF&#xff1f; DRF即Django REST framework的缩写&#xff0c;官网上说&#xff1a;Django REST framework是一个强大而灵活的工具包&#xff0c;用于构建Web API。 简单来说&#xff1a;通过DRF创建API后&#xff0c;就可以通过HTTP请求来获取、创建、更新或删除数据(…

linux vscode 下开发

linux vscode 下开发 javajdk插件查看调用层次 java jdk 各种JAVA JDK的镜像分发 编程宝库 - 技术改变世界 jdk 镜像 ubuntu22.04 安装 # Linux x64 64位 jdk-8u351-linux-x64.tar.gztar -zxf jdk-8u351-linux-x64.tar.gz mv jdk1.8.0_351 jdk8/ vim ~/.pr…

Java并发编程之线程池详解

目录 &#x1f433;今日良言:不悲伤 不彷徨 有风听风 有雨看雨 &#x1f407;一、简介 &#x1f407;二、相关代码 &#x1f43c;1.线程池代码 &#x1f43c;2.自定义实现线程池 &#x1f407;三、ThreadPoolExecutor类 &#x1f433;今日良言:不悲伤 不彷徨 有风听风 有…

【Odroid C4】设置固定IP(ubuntu20.04系统可通用)

问题描述&#xff1a;在使用Odroid C4开发板的时候&#xff0c;根据常见教程ubuntu 20.04设置固定ip&#xff0c; /etc/netplan下没有yaml文件&#xff0c;没太搞懂 方法&#xff1a;通过开机自启动的方式更改IP地址 安装net-tools 为了能使用ifconfig命令 sudo apt instal…

【汇编语言】关于“段”的总结

文章目录 各种段三种段具体案例截图数据段、栈段、代码段同时使用不同段地址数据段、栈段、代码段同时使用一个段地址![在这里插入图片描述](https://img-blog.csdnimg.cn/45c299950ad949e3a90b7ed012b3a9ee.png) 各种段 1、基础 物理地址 段地址 x 16 偏移地址 2、做法 编…

【数据结构】双链表

链表&#xff08;二&#xff09; 文章目录 链表&#xff08;二&#xff09;00 引入01 类的搭建02 得到链表的长度03 打印链表04 查找是否包含关键字key是否在链表当中05 头插法06 尾插法07 任意位置插入08 删除关键字为key的节点09 删除所有值为key的节点10 清空11 LinkedList常…

leetcode 198. 打家劫舍

2023.8.19 打劫问题是经典的动态规划问题。先设一个dp数组&#xff0c;dp[i]的含义为&#xff1a;前 i 个房屋能盗取的最高金额。 每间房屋无非就是偷&#xff0c;或者不偷这两种情况&#xff0c;于是可以写出递推公式&#xff1a; …

LeetCode235. 二叉搜索树的最近公共祖先

235. 二叉搜索树的最近公共祖先 文章目录 [235. 二叉搜索树的最近公共祖先](https://leetcode.cn/problems/lowest-common-ancestor-of-a-binary-search-tree/)一、题目二、题解方法一&#xff1a;递归方法二&#xff1a;迭代 一、题目 给定一个二叉搜索树, 找到该树中两个指定…

依赖预构建与静态资源处理

依赖预构建 vite是一个基于浏览器原生ES-Module的前端构建工具。 当你首次启动vite的时候&#xff0c;vite会在本地加载你的站点之前预构建项目依赖。 原因&#xff1a; CommonJS和UMD兼容性&#xff1a;在开发阶段中&#xff0c;Vite的开发服务器将所有的代码视为原生ES模块。…

企业纳税注意事项

在市场经济中&#xff0c;所有的公司都需要承担纳税的责任。纳税是公司的法定责任&#xff0c;也是企业健康发展的基础。那么&#xff0c;公司应该如何交税呢&#xff1f;本文将为大家详细介绍公司交税的相关知识。 1.纳税申报流程 纳税申报是公司纳税的重要环节&#xff0c;也…

浅谈日常使用的 Docker 底层原理-三大底座

适合的读者&#xff0c;对Docker有过简单了解的朋友&#xff0c;想要进一步了解Docker容器的朋友。 前言 回想我这两年&#xff0c;一直都是在使用 Docker&#xff0c;看过的视频、拜读过的博客&#xff0c;大都是在介绍 Docker 的由来、使用、优点和发展趋势&#xff0c;但对…

VMWare Workstation 17 Pro 网络设置 桥接模式 网络地址转换(NAT)模式 仅主机模式

文章目录 网络模式配网要求CentOSDHCP虚拟网络桥接模式默认配置测试手动配置测试 网络地址转发模式 (NAT)还原配置虚拟网络配置默认配置测试手动配置测试 仅主机模式 网络模式 桥接模式: 主机与虚拟机对等, 虚拟机注册到主机所在的局域网, 会占用该网络的IP该局域网内的所有机…

设计模式详解-模板模式

类型&#xff1a;行为型模式 实现原理&#xff1a;一个抽象类公开定义了执行它的方法的方式/模板&#xff0c;它的子类可以按需要重写方法实现&#xff0c;但调用将以抽象类中定义的方式进行 意图&#xff1a;使子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。…

简单认识镜像底层原理详解和基于Docker file创建镜像

文章目录 一、镜像底层原理1.联合文件系统(UnionFS)2.镜像加载原理3.为什么Docker里的centos的大小才200M? 二、Dockerfile1.简介2.Dockerfile操作常用命令 三、创建Docker镜像1.基于已有镜像创建2.基于本地模板创建3.基于Dockerfile创建4.Dockerfile多阶段构建镜像 一、镜像底…

Flutter如何知道页面/组件可见?

在以前项目中,onPageShow和onPageHide由开源框架flutter_boost提供,在此次项目中,创新性的采用了fusion框架,fusion框架同样提供了类似的方法,但在实践中发现,当flutter页面相互replace或者多次pop页面后,onPageShow不会调用,这就导致了诸多bug,于是,需要探索如何了解…

产品经理如何提高用户画像效果?SIKT模型

产品经理做用户画像&#xff0c;最担心被业务方反馈&#xff1a;没效果。这往往是由用户画像与业务场景脱节造成的。那么我们该如何从业务场景出发&#xff0c;让用户画像更有效&#xff1f;一般来说&#xff0c;我们可以采用SIKT模型解决这个问题。 用户画像 ​ 1、SIK…

Mysql、Oracle 中锁表问题解决办法

MySQL中锁表问题的解决方法&#xff1a; 1. 确定锁定表的原因&#xff1a; 首先&#xff0c;需要确定是什么原因导致了表的锁定。可能的原因包括长时间的事务、大量的并发查询、表维护操作等。 2. 查看锁定信息&#xff1a; 使用以下命令可以查看当前MySQL数据库中的锁定信…

【操作系统】虚拟内存相关分段分页页面置换算法

虚拟内存是什么&#xff1f; 【进程地址空间虚拟地址空间C/C程序地址空间就是那个4G的空间】 虚拟内存是操作系统内核为了对进程地址空间进行管理&#xff0c;而设计的一个逻辑意义上的内存空间概念。在程序运行过程中&#xff0c;虚拟内存中需要被访问的部分会被映射到物理内…

“深入剖析JVM内部工作原理:解密Java虚拟机“

标题&#xff1a;深入剖析JVM内部工作原理&#xff1a;解密Java虚拟机 摘要&#xff1a; 本文将深入剖析Java虚拟机&#xff08;JVM&#xff09;的内部工作原理&#xff0c;包括类加载、运行时数据区、垃圾回收、即时编译等关键概念和机制。通过对JVM的解密&#xff0c;我们将…