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

html中的文本标签(含标签的实现案例)

目录

1.标题标签

2.标题标签的align属性

3.段落标签

4.水平线标签hr

5.换行标签br

 6.文本样式标签font

​编辑7.文本格式化标签

8.文本语义标签

1)时间time标签

2)文本高亮Mark标签

3)cite标签

9.特殊字符标签

10.图像标签img

附录:

1.编写的html文件如何使用浏览器打开

2.如果没有默认浏览器打开html文件

3.vscode快速生成html代码模板

4.vscode快速保存


1.标题标签 <h>

<hn align="对其方式">标题文本</hn>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>标题标签</title>

</head>

<body>

   

   

    <h1>一级标题标签</h1>

    <hr></hr>

    <h2>二级标题标签</h2>

    <hr></hr>

    <h3>三级标题标签</h3>

    <hr></hr>

    <h4>四级标题标签</h4>

    <hr></hr>

    <h5>五级标题标签</h5>

    <hr></hr>

    <h6>六级标题标签</h6>

   

</body>

</html>

<hn>标签一样用于标记文章的标题  

标签里面的文章会被解析为对应的样式

<hr>标签是一个类似分割线的存在

会被解析为横线

效果图

2.标题标签<h>的align属性

align属性

1)默认左对齐

2)left:文本左对齐

3)center:文本居中

4)right: 文本右对其

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>标题标签的align属性</title>

</head>

<body>

    <h1>模式默认对其方式</h1>

    <hr/>

    <h2 align="left">左对齐</h2>

    <hr>

    <h1 align="center">居中对齐</h1>

    <hr/>

    <h3 align="right">右对齐</h3>

</hr>

   

</body>

</html>

效果图

3.段落标签<p>

作用:这个标签用于标记文章的段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>段落标签p</title>

</head>

<body>

    <h1 align="center">这是一篇文章</h1>

    <p align="center">html介绍</p>

    <p>HTML(HyperText Markup Language),即超文本标记语言,是一种用于创建网页的标准标记语言。它通过一系列的标记(tags)来描述网页的内容和结构,从而告诉浏览器如何显示这些内容.

       

        总之,HTML是Web的基础,它不仅定义了网页的结构,还为其他Web技术(如CSS和JavaScript)提供了基础,这些技术共同作用于创建动态且富有交互性的网页。</p>

</body>

</html>

效果图

4.水平线标签hr

hr就是告诉浏览器你给我显示一个水平的分割线

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>分割线标签hr</title>

</head>

<body>

   

    <h1>align属性,设置水平线对其方式</h1>

    <hr align="left"></hr>

    <h1 >size属性,设置水平线粗细</h1>

    <hr size="10" color="blue"></hr>

    <h1>color设置水平线颜色</h1>

    <hr color="red"></hr>


 

    <hr color="green"></hr>

    <h1>width属性设置水平线的宽</h1>

    <hr width="20%"></hr>

</body>

</html>

注:颜色处理也可以使用 #456789  #+l六位十六进制数字  或者是 #123  #+三位十六进制数字

效果图

5.换行标签br

作用:用于一行文字的换行

:<!----> 这个使用来写注释用的              vsCode使用 ctrl+/ 可以快速生成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>换行标签br</title>

</head>

<body>

    <p align="center">换行标签的作用</p>

    <!-- 没有使用换行标签 -->

    <p align="center">

        七律·到韶山

        毛泽东〔近现代〕

        别梦依稀咒逝川,故园三十二年前。

        红旗卷起农奴戟,黑手高悬霸主鞭。

        为有牺牲多壮志,敢教日月换新天。

        喜看稻菽千重浪,遍地英雄下夕烟。

    </p>

    <hr color="red" size="5"></hr>

    <!-- 使用换行标签 -->

     <p align="center">

        七律·到韶山<br>

        毛泽东〔近现代〕<br>

        别梦依稀咒逝川,故园三十二年前。<br>

        红旗卷起农奴戟,黑手高悬霸主鞭。<br>

        为有牺牲多壮志,敢教日月换新天。<br>

        喜看稻菽千重浪,遍地英雄下夕烟。

    </p>

</body>

</html>

效果图:

 6.文本样式标签font

作用:font 用于设置字体的风格样式,颜色,粗细效果

  1. face属性设置字体风格样式
  2. size属性设置字体大小
  3. color属性设置文字的颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文本样式标签font</title>

</head>

<body>

    <h2 align="center">文本样式标签font</h2>

    <hr color="red"/>

    <p>

            <font  color="blue" >控制字体为蓝色</font>

    </p>

    <hr color="#99689a"/>

    <p>

        <font size="5" >控制字体大小为5</font>

    </p>

        <hr color="#789"/>

    <p>

        <font face="黑体" >控制字体为黑体</font>

    </p>

</body>

</html>

效果图

7.文本格式化标签

  1. 文本粗体标签 b 和  strong
  2. 文本下划线显示标签 u 和 ins
  3. 文本斜体显示标签 i 和 em
  4. 文本删除线方式显示标签 s 和 del 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本格式化标签</title>
</head>
<body><h1>文本格式化标签</h1><hr color="#af4578"></hr><h3>文本粗体显示 b 和 strong</h3><p color="red"><b>文本使用b标签标签加粗使用</b><br><strong>文本使用strong标签使用</strong></p><hr color="#234632"></hr><h3>文本下划线显示 u 和 ins 标签</h3><p color="blue"><u>使用u标签为文本加上下划线</u><br><ins>使用ins标签为文本加上下划线</ins></p><hr color="#234632"></hr><h3>文本斜体显示 i 和 em</h3><p color="green"><i>使用i标签为文本斜着显示</i><br><em>使用em标签为文本斜着显示</em></p><hr color="#234632"></hr><h3>文本删除线 del 和 s</h3><p color="red"><del>使用del标签为文本加上删除线</del><br><s>使用s标签为文本加上删除线</s></p></body>
</html>

效果图

8.文本语义标签

1)时间time标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>时间语义增强标签time</title>
</head>
<body><p>现在时间是22:32</p><hr color="red" size="5"/><!-- 使用时间语义增强标签 --><p>现在时间是<time datetime="2024-10-1">22:32</time></p><hr color="green" size="5"/></body>
</html>

效果图

2)文本高亮Mark标签

作用:文字高亮显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文字高亮标签mark</title>
</head>
<body><p>这是一段普通的文字,高亮显示文字</p><p><mark>高亮显示的文字</mark></p></body>
</html>

效果图

 

3)cite标签

作用:引用标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本引用标签cite</title>
</head>
<body><p>这是文本应用标签</p><!-- 作用是文本引用   显示的样式是斜体 --><cite>--今天的时间是2024-10-1</cite></body>
</html>

效果图

9.特殊字符标签

常用的特殊字符标签
特殊字符描述字符串代码
空格&nbsp;
<小于号&It;
>大于号&gt;
&和号&amp;
人民币&yen;
©版权&copy;
°度数&deg;
®注册商标&reg;
±正负号&plusmn;
×乘号

&times;

÷除号&divide;
 ²2平方&sup2;
³3平方&sup3;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>特殊标记符号</title>
</head>
<body>&nbsp;<br/>小于号&It;<br/>大于号&gt;<br/>和号&amp;<br/>人民币&yen;<br/>商标符号:&copy;<br>摄氏度&deg;<br></br>注册商标&reg;<br><!-- 换行符 -->&plusmn;<br>乘号&times;<br/>除号&divide;<br/>上标符号&sup2;<br/>&sup3;</body>
</html>

效果图

10.图像标签img

注: 

  1. ./boy.png 表示当前路径下名字为boy.png的图片
  2. /boy.png 表示真实路径下boy.png图片.
  3. ./表示当前目录
  4. /表示绝对路径
  • src属性 图像路径
  • alt属性  文本不显示时出现的数字
  • title属性   鼠标悬浮在图片上的显示的内容
  • width属性 设置图像宽度
  • height属性 设置图像高度
  • border属性 设置图像边框
  • vspace属性 设置图像顶部和底部空白的部分
  • hspace属性 设置图像左侧和右侧的空白
  • algin属性
    • left 图像在左边
    • right 图像在右边
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图像标签img</title>
</head><body><h3>alt属性</h3><img src="/boy.png" alt="图片加载失败" width="300px" height="300px"></img><hr color="red" size="5"></hr><h3>title属性</h3><img src="./boy.png" title="这是一个小男孩" width="300px" height="300px"></img><hr color="green" size="8"></hr><br><h3>border属性设置边框</h3><img src="./boy.png" title="这是一个小男孩" width="300px" height="300px" border="5px"></img><hr color="red" size="5"></hr><br><h3>align属性设置图片对齐方式</h3><img src="./boy.png" title="这是一个小男孩" width="300px" height="300px" align="right"></img><hr color="blue" size="5"></hr><br><h3>hspace属性设置图片水平边距</h3><img src="./boy.png" title="这是一个小男孩" width="300px" height="300px" align="right" hspace="50"></img><hr color="pink" size="5"></hr></body></html>

 

效果图

 

附录:

1.编写的html文件如何使用浏览器打开

使用快捷键 Shift + alt + r  ===>弹出如下界面

双击点开就可以了

2.如果没有默认浏览器打开html文件

鼠标右键 ===> 打开方式 ===>选择浏览器打开就可以了

3.vscode快速生成html代码模板

输入感叹号 点击第一个就可以自动生成了

这个感叹号必须英文状态下的

4.vscode快速保存

快捷键 ctrl+s  

相关文章:

html中的文本标签(含标签的实现案例)

目录 1.标题标签 2.标题标签的align属性 3.段落标签 4.水平线标签hr 5.换行标签br 6.文本样式标签font ​编辑7.文本格式化标签 8.文本语义标签 1&#xff09;时间time标签 2&#xff09;文本高亮Mark标签 3&#xff09;cite标签 9.特殊字符标签 10.图像标签img 附录&#xff…...

通信协议感悟

本文结合个人所学&#xff0c;简要讲述SPI&#xff0c;I2C&#xff0c;UART通信的特点&#xff0c;限制。 1.同步通信 UART&#xff0c;SPI&#xff0c;I2C三种串行通讯方式&#xff0c;SPI功能引脚为CS&#xff0c;CLK&#xff0c;MOSI&#xff0c;MISO&#xff1b;I2C功能引…...

IDEA几大常用AI插件

文章目录 前言列表GPT中文版TalkXBito AIIDEA自带的AI 前言 最近AI、GPT特别火&#xff0c;IDEA里面又有一堆插件支持GPT&#xff0c;所以做个专题比较一下各个GPT插件 列表 先看idea的plugins里支持哪些&#xff0c;搜索“GPT”之后得到的&#xff0c;我用下来感觉第一第二和…...

51单片机学习第六课---B站UP主江协科技

DS18B20 1、基本知识讲解 2、DS18B20读取温度值 main.c #include<regx52.h> #include"delay.h" #include"LCD1602.h" #include"key.h" #include"DS18B20.h"float T; void main () {LCD_Init();LCD_ShowString(1,1,"temp…...

sadTalker本地编译

SadTalker一款开源的可生成逼真的人像动画的工具。它利用深度学习技术&#xff0c;根据输入的图像和音频&#xff0c;生成具有生动表情和动作的视频。用户可以通过上传照片或使用预设的模型&#xff0c;轻松创建个性化的动画内容. 以上是官网的图, 下边是本地部署生成的,效果差…...

强化学习核心概念与公式总结

强化学习核心概念与公式总结 1. 核心概念 1.1 智能体(Agent)和环境(Environment) 智能体:学习和做决策的实体环境:智能体交互的外部系统1.2 状态(State) 描述环境在特定时刻的情况1.3 动作(Action) 智能体可以执行的操作1.4 奖励(Reward) 环境对智能体动作的即时反馈1.5 策…...

基础算法--双指针【概念+图解+题解+解释】

更多精彩内容..... &#x1f389;❤️播主の主页✨&#x1f618; Stark、-CSDN博客 本文所在专栏&#xff1a; 数据结构与算法_Stark、的博客-CSDN博客 其它专栏&#xff1a; 学习专栏C语言_Stark、的博客-CSDN博客 项目实战C系列_Stark、的博客-CSDN博客​​​​​​ 座右铭&a…...

国产化系统/鸿蒙开发足浴店收银源码-收缩左侧———未来之窗行业应用跨平台架构

一、左侧展开后 二、代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><title></title><meta http-equiv"Content-Type" content"text/html; charsetUTF-8"><style t…...

如何从硬盘恢复丢失/删除的视频

您是否想知道是否可以恢复已删除的视频&#xff1f; 幸运的是&#xff0c;您可以使用奇客数据恢复从硬盘驱动器、SD 卡和 USB 闪存驱动器恢复已删除的视频文件。 你有没有遇到过这样的情况&#xff1a;当你随机删除文件以释放空间时&#xff0c;你不小心按下了一些重要视频的…...

《Effective C++》第三版——设计与声明(1)

参考资料&#xff1a; 《Effective C》第三版 注意&#xff1a;《Effective C》不涉及任何 C11 的内容&#xff0c;因此其中的部分准则可能在 C11 出现后有更好的实现方式。 条款 18&#xff1a;让接口容易被正确使用&#xff0c;不易被误用 好的接口很容易被正确使用&…...

数值计算的程序设计问题举例

### 数值计算的程序设计问题 #### 1. 结构静力分析计算 **涉及领域**&#xff1a;工程力学、建筑工程 **主要问题**&#xff1a;线性代数方程组&#xff08;Linear Algebraic Equations&#xff09; **解释说明**&#xff1a; 在结构静力分析中&#xff0c;我们需要解决复杂的…...

Java之方法的使用

修饰符 返回值 方法名称&#xff08;形式参数&#xff09;{ } 当无参数的时候形式参数中什么都不写。 列如求两个数相加 修饰符可有可无。 方法重载&#xff1a; 1.方法名相同 2.参数列表不同 3。返回值不影响重载...

sudo 命令:掌握系统权限控制,实现安全高效管理

一、命令简介 ​sudo​ 命令允许系统管理员授权普通用户执行特定命令&#xff0c;并以管理员身份运行这些命令&#xff0c;通常需要输入用户自己的密码。 ​​ sudo 全称是"substitute user do"&#xff0c;意为“替用户做”&#xff0c;也就是“以另一个用户的身…...

AndroidStudio导入so文件

点击app 右键依次选择New-Floder-JNI Floder 创建jni目录 将需要的so文件拷贝到jni目录 在app目录下&#xff0c;build.gradle文件的android{}中添加&#xff1a; sourceSets {main{jniLibs.srcDirs [src/main/jni]}}点击一下Sync Project with Gradle Files 然后编译生成AP…...

Kuebernetes 群集基于 Docker 部署

Kuebernetes 群集基于 Docker 部署 实验报告资源列表基础环境一、准备 Docker1、安装 Docker 二、安装 Kubeadm 工具1、配置 yum 源2、安装 Kubeadm 工具 三、初始化 Master 节点1、配置 Master 节点2、常见故障 四、Node 节点加入集群五、部署网络插件&#xff08;CNI&#xf…...

追随 HarmonyOS NEXT,Solon v3.0 将在10月8日发布

Solon &#xff08;开放原子开源基金会&#xff0c;孵化项目&#xff09;原计划10月1日发布 v3.0 正式版。看到 HarmonyOS NEXT 将在 10月8日启用公测&#xff0c;现改为10月8日发布以示庆贺。另外&#xff0c;Solon 将在2025年启动“仓颉”版开发&#xff08;届时&#xff0c;…...

服装时尚与动漫游戏的跨界联动:创新运营与策划策略研究

摘要&#xff1a;本论文聚焦于服装时尚与动漫游戏的跨界联动现象&#xff0c;深入探讨其在运营和策划方向的策略与实践。通过对相关理论的梳理和实际案例的分析&#xff0c;阐述了跨界联动的背景、意义、模式以及面临的挑战。研究发现&#xff0c;成功的跨界联动能够实现品牌价…...

Redis中String类型的常用命令(append,getrenge,setrange等命令)

Redis----String命令 前言.常见的String存储类型. 常见命令1. set 命令2. get 命令3. mget命令与mset命令4. setnx命令5. setex与psetex命令6. incr与incrby与incrbyfloat命令7. decr与decrby命令8. append命令9. getrange和setrange命令10. strlen命令. 前言. 常见的String存…...

深度拆解:如何在Facebook上做跨境电商?

国内社交媒体正在逐渐兴盛&#xff0c;海外也不例外。在数字营销的新时代&#xff0c;Facebook已成为跨境电商不可或缺的平台之一。通过Facebook的巨大流量&#xff0c;卖家可以更好的触及潜在消费者&#xff0c;以实现销售增长。本文就深度拆解一下&#xff0c;卖家如何利用Fb…...

为啥数据需转换成tensor才能参与后续建模训练

将数据转换为Tensor&#xff08;张量&#xff09;格式用于深度学习和机器学习模型训练&#xff0c;主要是出于以下几个关键原因&#xff1a; 数值计算的效率&#xff1a;Tensor&#xff08;由PyTorch、TensorFlow等库提供&#xff09;是在GPU上执行高效的数值运算的数据结构。相…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

二维FDTD算法仿真

二维FDTD算法仿真&#xff0c;并带完全匹配层&#xff0c;输入波形为高斯波、平面波 FDTD_二维/FDTD.zip , 6075 FDTD_二维/FDTD_31.m , 1029 FDTD_二维/FDTD_32.m , 2806 FDTD_二维/FDTD_33.m , 3782 FDTD_二维/FDTD_34.m , 4182 FDTD_二维/FDTD_35.m , 4793...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

基于Java项目的Karate API测试

Karate 实现了可以只编写Feature 文件进行测试,但是对于熟悉Java语言的开发或是测试人员,可以通过编程方式集成 Karate 丰富的自动化和数据断言功能。 本篇快速介绍在Java Maven项目中编写和运行测试的示例。 创建Maven项目 最简单的创建项目的方式就是创建一个目录,里面…...

window 显示驱动开发-如何查询视频处理功能(三)

​D3DDDICAPS_GETPROCAMPRANGE请求类型 UMD 返回指向 DXVADDI_VALUERANGE 结构的指针&#xff0c;该结构包含特定视频流上特定 ProcAmp 控件属性允许的值范围。 Direct3D 运行时在D3DDDIARG_GETCAPS的 pInfo 成员指向的变量中为特定视频流的 ProcAmp 控件属性指定DXVADDI_QUER…...

Docker环境下安装 Elasticsearch + IK 分词器 + Pinyin插件 + Kibana(适配7.10.1)

做RAG自己打算使用esmilvus自己开发一个&#xff0c;安装时好像网上没有比较新的安装方法&#xff0c;然后找了个旧的方法对应试试&#xff1a; &#x1f680; 本文将手把手教你在 Docker 环境中部署 Elasticsearch 7.10.1 IK分词器 拼音插件 Kibana&#xff0c;适配中文搜索…...

实现p2p的webrtc-srs版本

1. 基本知识 1.1 webrtc 一、WebRTC的本质&#xff1a;实时通信的“网络协议栈”类比 将WebRTC类比为Linux网络协议栈极具洞察力&#xff0c;二者在架构设计和功能定位上高度相似&#xff1a; 分层协议栈架构 Linux网络协议栈&#xff1a;从底层物理层到应用层&#xff08;如…...