HTML--文本

news2024/12/24 21:30:52

文本一般存在于 body下
段落标签:<p> </p>
换行标签:<br/> 放在一句话里可以换行

<p>这是一段话<br/>这是另一段话</p>

文本标签分以下几种:
粗体标签:strong,b
斜体标签:i , em ,cite
上标标签:sup
下标标签:sub
中划线标签: s
下划线标签: u
大字号标签: big
小字号标签: small

看看代码示例:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
</head>
<body>
    <p><strong>这是粗体文本</strong>
    <b>这也是粗体文本</b></p>

    <p><i>这是斜体文本</i>
    <em>这也是斜体</em>
    <cite>这依然是斜体</cite></p>

    <p>这里有一个上标标签<sup>TM</sup></p>

    <p>这里有一个含下标文字 H<sub>2</sub>O</p>

    <p><s>这句话是带中划线的,即删除线</s></p>

    <p><u>这句话是带下划线的</u></p>

    <p><big>这句话字体比较大</big></p>

    <p><small>这句话字体比较小</small></p>
</body>
</html>

效果:
在这里插入图片描述
水平线标签:<hr/> 加了就会在文本中生成一条水平线,像下面这样


<hr/><br/>这两种标签都属于自闭合标签,我理解就是可以单独使用,而不用成对
自闭合标签:
<meta/> 定义网页的信息
<link/> 引入外部CSS文件
<br/> 换行标签
<hr/> 水平线标签
<img/> 图片标签
<input/> 表单标签

div标签,全称是 division分区
我们可以使用<div> </div>来划分HTML结构,配合CSS来整体控制某一块的样式

块元素(block)和行内元素(inline):
块元素独占一行,但是可以在其内部放其他元素结合,像上面例子一样:
常见的块元素:

块元素说明
h1~h6标题元素
p段落元素
divdiv元素
hr水平线
ol有序列表
ul无序列表

常见的行内元素:

行内元素说明
strong粗体元素
em斜体元素
a超链接
span常用行内元素,结合CSS定义样式

网页中的特殊符号:
详情见下面代码:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
</head>
<body>
    <p> 这是一个英文双引号: &quot; </p>
    <p> 这是一个左单引号: &lsquo; </p>
    <p> 这是一个有单引号: &rsquo; </p>
    <p> 这是一个乘号:&times; </p>
    <p> 这是一个除号: &divide; </p>
    <p> 这是一个大于号: &gt; </p>
    <p> 这是一个小于号: &lt; </p>
    <p> 这是一个与号: &amp; </p>
    <p> 这是一个长破折号: &mdash; </p>
    <p> 这是一个竖线: &#124; </p>
    <p> 你也可以直接打出来这些特殊字符:</p>
    <p> ",',',x,÷,>,<,&,——,| </p>
    <p> 下面是一些难以直接输入的字符:</p>
    <p> 这是一个分节符: &sect; </p>
    <p> 这是一个版权符: &copy; </p>
    <p> 这是一个注册商标: &reg; </p>
    <p> 这是一个商标: 哈哈&trade; </p>
    <p> 和上标是有区别的:哈哈<sup>TM</sup></p>
    <p> 这是一个欧元符号: &euro; </p>
    <p> 这是一个英镑符号: &pound; </p>
    <p> 这是一个日元符号: &yen; </p>
    <p> 这是度符号: &deg; </p>
    <p> 我直接敲呢?</p>
    <p> °,¥,</p>
    <p>              N多个空格 </p>
    <p> 开始         N多个空格 </p>
    <p>可以看到直接敲的空格根本没用</p>
    <p>&nbsp;&nbsp;前面空两个空格</p>

</body>
</html>

在这里插入图片描述

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

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

相关文章

React18-树形菜单-递归

文章目录 案例分析技巧通信展示效果实现代码技巧点技巧点 Refer to 案例分析 https://github.com/dL-hx/manager-fe/commit/85faf3b1ae9a925513583feb02b9a1c87fb462f7 从接口获取城市数据,渲染出一个树形菜单 要求: 可以展开和收起 技巧 学会递归渲染出一个树形菜单, 并点击后…

Windows开机后,Docker失败:Commoncauses include access rights issues

这种错误看似已经跟你说很清楚了&#xff0c;但是看国外docker社区也提到这个问题&#xff0c;一大堆回答解决了别人的问题&#xff0c;但未必解决你的。我写自己的方案&#xff0c;可能也未必适合你&#xff0c;如果要说Root Cause根源就是windows的虚拟化功能开启的问题。 An…

(vue)el-table表格最小/自动高度设置

(vue)el-table表格最小/自动高度设置 <el-table:data"tableData"size"mini"borderstyle"min-height:100px" //重点 ><el-table-column align"center" label"参数名称" prop"parametersName" />... &l…

web网页首页布局

效果展示&#xff1a; html代码&#xff1a; <!doctype html> <html> <head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1"> <meta name"viewport" content&qu…

Linux:centos yum安装指令指南

如果我们在Linux中输入命令发现该命令没有的时候&#xff0c;我们就可以通过yum来安装这个命令 具体分为两步&#xff1a;搜索&#xff0c;安装 搜索 首先搜索centos yum 安装 指令 以zip指令为例&#xff0c;在搜索框中输入centos yum 安装zip 安装 复制安装命令到shell…

Vue2x的自定义指令和render函数使用自定义指令

在某些情况下&#xff0c;我们需要对底层DOM进行操作&#xff0c;而内置的指令不能满足需求&#xff0c;就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义&#xff0c;钩子函数会接收到指令所绑定的元素作为参数。 定义指令 常用两种方式进行…

前端开发Docker了解

1&#xff0c;docker简介 docker主要解决了最初软件开发环境配置的困难&#xff0c;完善了虚拟机部署的资源占用多&#xff0c;启动慢等缺点&#xff0c;保证了一致的运行环境&#xff0c;可以更轻松的维护和扩展。docker在linux容器的基础上进行了进一步的封装&#xff0c;提…

几款优秀科学开源计算软件介绍

有一些比较优秀的软件&#xff0c;它们在科学计算、数据处理和分析方面具有广泛的应用和功能。以下是一些比较知名的软件&#xff1a; SciPy&#xff1a;SciPy是一个非常流行的科学计算库&#xff0c;提供了大量的数学函数和算法&#xff0c;用于解决各种科学问题。它支持多种操…

商城小程序(8.购物车页面)

目录 一、商品列表区域1、渲染购物车商品列表的标题区域2、渲染商品列表区域的基本结构3、为my-goods组件封装radio勾选状态4、为my-goods组件封装radio-change事件5、修改购物车中商品的选择状态6、为my-goods组件封装NumberBox7、为my-goods封装num-change事件8、修改购物车商…

Sqlmap注入参数

Sqlmap注入参数 &#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;&#x1f32d;❤️❤️❤️❤️❤️❤️❤️&#x1f968;&#x1f968;&…

题目:七段码(蓝桥OJ 595)

问题描述&#xff1a; 解题思路&#xff1a; 枚举每一种可能组合&#xff08;可以使用二进制数表示&#xff0c;每一个二进制就是一种组合&#xff09;&#xff0c;在判断是否符合题目要求的每一个发光灯管相邻&#xff08;使用并查集方法确定&#xff0c;当每一个发光…

NumPy 数据操作实用指南:从基础到高效(下)

文章接上篇&#xff1a; In [53]: from PIL import Image In [60]: dog Image.open(./dog.jpg) dog . . . In [61]: dog_datanp.array(dog) # 图片数据是ndarray # 彩色照片三维&#xff1a;高度&#xff0c;宽度&#xff0c;像素&#xff08;表示不同颜色&#xff09;&…

小程序基础库与Android之间通信优化的可能

最近在学习graalvm&#xff0c;发现有一个graaljs项目&#xff0c;项目中介绍可以让java与JavaScript做数据转换&#xff0c;比如JavaScript中可以使用java的数据类型与结构。突然想到之前遇到的一个问题&#xff0c;小程序中开发的代码和基础库的部分代码都是j2v8来执行的&…

易安联参与制定的《面向云计算的零信任体系》行业标准即将实施

中华人民共和国工业和信息化部公告2023年第38号文件正式发布行业标准&#xff1a;YD/T 4598.2-2023《面向云计算的零信任体系 第2部分&#xff1a;关键能力要求》及YD/T 4598.3-2023《面向云计算的零信任体系 第3部分&#xff1a;安全访问服务边缘能力要求》&#xff0c;并于20…

如何将ArcGIS工程文件迁移到ArcGIS Pro内

当你刚接触ArcGIS Pro的时候&#xff0c;尝试新建一个工程文件会发现工程文件的后缀已经改变&#xff0c;那么以前在ArcGIS内辛苦制作的工程文件是否就不能在ArcGIS Pro内使用了&#xff0c;答案是否定的&#xff0c;对此Esri也给出了解决方案&#xff0c;这里为大家介绍一下迁…

数字化校园实验室综合管理平台|推动实验室创新发展新引擎

一、数字化建设目标 实验室数字化指的是运用新一代的人工智能、大数据、互联网技术、物联网技术、云计算技术、人体感应技术、语音技术、生物识别技术、手机APP等技术&#xff0c;实现各个业务间数据流和任务流的互通互联&#xff0c;将实验室管理过程中涉及的对象&#xff0c…

vue2 el-table行悬停时弹出提示信息el-popover

实现方法&#xff0c;用到了cell-mouse-enter、cell-mouse-leave两个事件&#xff0c;然后在表格的首列字段中&#xff0c;加个el-popover组件&#xff0c;当然你也可以选择在其他字段的位置来显示提示框&#xff0c;看自己的需求了。 示例代码&#xff1a; <el-table cell…

GLES学习笔记---立方体贴图(一张图)

一、首先看一张效果图 立方体贴图 二、纹理坐标划分 如上图是一张2D纹理&#xff0c;我们需要将这个2D纹理贴到立方体上&#xff0c;立方体有6个面&#xff0c;所以上面的2D图分成了6个面&#xff0c;共有14个纹理坐标 三、立方体 上边的立方体一共8个顶点坐标&#xff0c;范围…

Web3社交治理:用户参与决策的新模式

Web3时代的到来不仅仅带来了区块链技术的创新&#xff0c;还为社交治理带来了全新的模式。传统社交平台上的决策权通常集中在平台的运营方&#xff0c;而Web3社交治理的兴起意味着用户能够更直接地参与到社交平台的决策过程中。本文将深入探讨Web3社交治理的背景、工作原理以及…

9.云原生存储之ceph在k8s中应用及问题处理

文章目录 ceph应用场景ceph应用在k8s集群外使用块设备ceph客户端配置创建块挂载使用删除pool 在k8s集群内使用块设备创建块池和StorageClass使用存储 块存储映射问题处理问题现象事件分析csi-rbdplugin pod日志分析问题小结CentOS 7 编译安装 nbd 模块nbd内核模块介绍安装 nbd …