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 用于设置字体的风格样式,颜色,粗细效果
- face属性设置字体风格样式
- size属性设置字体大小
- 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.文本格式化标签
- 文本粗体标签 b 和 strong
- 文本下划线显示标签 u 和 ins
- 文本斜体显示标签 i 和 em
- 文本删除线方式显示标签 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.特殊字符标签
特殊字符 | 描述 | 字符串代码 |
空格 | | |
< | 小于号 | &It; |
> | 大于号 | > |
& | 和号 | & |
¥ | 人民币 | ¥ |
© | 版权 | © |
° | 度数 | ° |
® | 注册商标 | ® |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 2平方 | ² |
³ | 3平方 | ³ |
<!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> <br/>小于号&It;<br/>大于号><br/>和号&<br/>人民币¥<br/>商标符号:©<br>摄氏度°<br></br>注册商标®<br><!-- 换行符 -->±<br>乘号×<br/>除号÷<br/>上标符号²<br/>³</body> </html>
效果图
10.图像标签img
注:
- ./boy.png 表示当前路径下名字为boy.png的图片
- /boy.png 表示真实路径下boy.png图片.
- ./表示当前目录
- /表示绝对路径
- 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)时间time标签 2)文本高亮Mark标签 3)cite标签 9.特殊字符标签 10.图像标签img 附录ÿ…...
通信协议感悟
本文结合个人所学,简要讲述SPI,I2C,UART通信的特点,限制。 1.同步通信 UART,SPI,I2C三种串行通讯方式,SPI功能引脚为CS,CLK,MOSI,MISO;I2C功能引…...
IDEA几大常用AI插件
文章目录 前言列表GPT中文版TalkXBito AIIDEA自带的AI 前言 最近AI、GPT特别火,IDEA里面又有一堆插件支持GPT,所以做个专题比较一下各个GPT插件 列表 先看idea的plugins里支持哪些,搜索“GPT”之后得到的,我用下来感觉第一第二和…...
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一款开源的可生成逼真的人像动画的工具。它利用深度学习技术,根据输入的图像和音频,生成具有生动表情和动作的视频。用户可以通过上传照片或使用预设的模型,轻松创建个性化的动画内容. 以上是官网的图, 下边是本地部署生成的,效果差…...
强化学习核心概念与公式总结
强化学习核心概念与公式总结 1. 核心概念 1.1 智能体(Agent)和环境(Environment) 智能体:学习和做决策的实体环境:智能体交互的外部系统1.2 状态(State) 描述环境在特定时刻的情况1.3 动作(Action) 智能体可以执行的操作1.4 奖励(Reward) 环境对智能体动作的即时反馈1.5 策…...
基础算法--双指针【概念+图解+题解+解释】
更多精彩内容..... 🎉❤️播主の主页✨😘 Stark、-CSDN博客 本文所在专栏: 数据结构与算法_Stark、的博客-CSDN博客 其它专栏: 学习专栏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…...
如何从硬盘恢复丢失/删除的视频
您是否想知道是否可以恢复已删除的视频? 幸运的是,您可以使用奇客数据恢复从硬盘驱动器、SD 卡和 USB 闪存驱动器恢复已删除的视频文件。 你有没有遇到过这样的情况:当你随机删除文件以释放空间时,你不小心按下了一些重要视频的…...
《Effective C++》第三版——设计与声明(1)
参考资料: 《Effective C》第三版 注意:《Effective C》不涉及任何 C11 的内容,因此其中的部分准则可能在 C11 出现后有更好的实现方式。 条款 18:让接口容易被正确使用,不易被误用 好的接口很容易被正确使用&…...
数值计算的程序设计问题举例
### 数值计算的程序设计问题 #### 1. 结构静力分析计算 **涉及领域**:工程力学、建筑工程 **主要问题**:线性代数方程组(Linear Algebraic Equations) **解释说明**: 在结构静力分析中,我们需要解决复杂的…...
Java之方法的使用
修饰符 返回值 方法名称(形式参数){ } 当无参数的时候形式参数中什么都不写。 列如求两个数相加 修饰符可有可无。 方法重载: 1.方法名相同 2.参数列表不同 3。返回值不影响重载...
sudo 命令:掌握系统权限控制,实现安全高效管理
一、命令简介 sudo 命令允许系统管理员授权普通用户执行特定命令,并以管理员身份运行这些命令,通常需要输入用户自己的密码。 sudo 全称是"substitute user do",意为“替用户做”,也就是“以另一个用户的身…...
AndroidStudio导入so文件
点击app 右键依次选择New-Floder-JNI Floder 创建jni目录 将需要的so文件拷贝到jni目录 在app目录下,build.gradle文件的android{}中添加: 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 节点加入集群五、部署网络插件(CNI…...
追随 HarmonyOS NEXT,Solon v3.0 将在10月8日发布
Solon (开放原子开源基金会,孵化项目)原计划10月1日发布 v3.0 正式版。看到 HarmonyOS NEXT 将在 10月8日启用公测,现改为10月8日发布以示庆贺。另外,Solon 将在2025年启动“仓颉”版开发(届时,…...
服装时尚与动漫游戏的跨界联动:创新运营与策划策略研究
摘要:本论文聚焦于服装时尚与动漫游戏的跨界联动现象,深入探讨其在运营和策划方向的策略与实践。通过对相关理论的梳理和实际案例的分析,阐述了跨界联动的背景、意义、模式以及面临的挑战。研究发现,成功的跨界联动能够实现品牌价…...
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上做跨境电商?
国内社交媒体正在逐渐兴盛,海外也不例外。在数字营销的新时代,Facebook已成为跨境电商不可或缺的平台之一。通过Facebook的巨大流量,卖家可以更好的触及潜在消费者,以实现销售增长。本文就深度拆解一下,卖家如何利用Fb…...
为啥数据需转换成tensor才能参与后续建模训练
将数据转换为Tensor(张量)格式用于深度学习和机器学习模型训练,主要是出于以下几个关键原因: 数值计算的效率:Tensor(由PyTorch、TensorFlow等库提供)是在GPU上执行高效的数值运算的数据结构。相…...
leetcode:380. O(1) 时间插入、删除和获取随机元素
实现RandomizedSet 类: RandomizedSet() 初始化 RandomizedSet 对象bool insert(int val) 当元素 val 不存在时,向集合中插入该项,并返回 true ;否则,返回 false 。bool remove(int val) 当元素 val 存在时࿰…...
Linux集群部署RabbitMQ
目录 一、准备三台虚拟机,配置相同 1、所有主机都需要hosts文件解析 2、所有主机安装erLang和rabbitmq 3、修改配置文件 4、导入rabbitmq 的管理界面 5、查看节点状态 6、设置erlang运行节点 7、rabitmq2和rabbitmq3重启服务 8、查看各个节点状态 二、添加…...
01DSP学习-了解DSP外设-以逆变器控制为例
(由于是回忆自己简单的DSP学习过程,所以博客看起来有些没有章法,请见谅~) 上一篇博客介绍了学习DSP需要的软件和硬件准备,以及一个DSP的工程包含了哪些东西。我的学习方法是目的导向,即我需要用什么我就学什么,并没有…...
【ArcGIS Pro实操第三期】多模式道路网构建(Multi-model road network construction)原理及实操案例
ArcGIS Pro实操第三期:多模式道路网构建原理及实操案例 1 概述1.1 原理 2 GIS实操2.1 新建文件并导入数据2.2 创建网络数据集2.3 设置连接策略(Setting up connectivity policies)2.4 添加成本(Adding cost attributes)…...
深度学习基础及技巧
机器学习中的监督学习 监督学习是通过对数据进行分析,找到数据的表达模型,对新输入的数据套用该模型做决策 主要分为训练和预测两个阶段 训练阶段:根据原始数据进行特征提取,然后使用决策树、随机森林等模型算法分析数据之间的特…...
Unity 外描边简单实现(Shader Graph)
1:原理 将物体的模型空间的位置(也就是顶点数据)放大,作为一个单独的渲染通道单独渲染,这时候模型是已经发大过的,要想看到外描边的效果,需要将正面显示的东西给去掉,显示背面渲染的…...
text2sql方法:NatSQL和DIN-SQL
NatSQL NatSQL出自2021年9月的论文《Natural SQL: Making SQL Easier to Infer from Natural Language Specifications》(github),它是一种SQL 中间表征(SQL intermediate representation(IR))方法。 NatSQL作者认为Text2SQL的关键挑战是自然语言描述和其对应的SQ…...
【新闻转载】Storm-0501:勒索软件攻击扩展到混合云环境
icrosoft发出警告,勒索软件团伙Storm-0501近期调整了攻击策略,目前正将目标瞄准混合云环境,旨在全面破坏受害者的资产。 该威胁行为者自2021年首次露面,起初作为Sabbath勒索软件行动的分支。随后,他们开始分发来自Hive…...
RabbitMQ 队列之战:Classic 和 Quorum 的性能洞察
RabbitMQ 是一个功能强大且广泛使用的消息代理,它通过处理消息的传输、存储和交付来促进分布式应用程序之间的通信。作为消息代理,RabbitMQ 充当生产者(发送消息的应用程序)和使用者(接收消息的应用程序)之…...
Spring Boot 集成 MySQL 的详细指南
在现代软件开发中,Spring Boot 因其简单易用而成为构建 Java 应用程序的热门选择。结合 MySQL这一常用关系型数据库,开发者可以快速构建出功能完善的后端服务。本文将详细介绍如何将 Spring Boot 与 MySQL 集成,提供从环境搭建到代码实现的全…...
浙江网站建设品牌设计/企业品牌推广
腾讯云存储团队正式发布数据加速器 GooseFS 1.4 版本(含 GooseFS 1.4.0 和 GooseFS 1.4.1 版本),该版本针对 AI、大数据场景提供了文件解压缩等便捷易用的工具,同时针对海量文件读写下的集群性能和稳定性问题进行了针对性优化&…...
禁止指定ip访问网站/开一个网站需要多少钱
LinuxShell col命令 Linux col命令用于过滤控制字符。 在许多UNIX说明文件里,都有RLF控制字符。当我们运用shell特殊字符">“和”>>",把说明文件的内容输出成纯文本文件时,控制字符会变成乱码,col指令则能有…...
做网站基本流程/百度网址入口
在进程一開始执行,就自己主动打开了三个相应设备的文件。它们是标准输入、输出、错误流。分别用全局文件指针stdin、stdout、stderr表示,相应的文件描写叙述符为0。1。2;stdin具有可读属性,缺省情况下是指从键盘的读取输入&#x…...
网站推广方案策划书/怎么可以让百度快速收录视频
熬夜删掉Linux中删除不掉的文件<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />今天在做关于shell的作业时不知咋的生成了一个一–z开头的文件,怎么删都删不掉,如图:<?xml:namespace pref…...
o2o电子商务网站建设/海口关键词优化报价
点击蓝字关注我们吧!Python的起源Python的作者,Guido von Rossum,荷兰人。1982年,Guido从阿姆斯特丹大学获得了数学和计算机硕士学位。然而,尽管他算得上是一位数学家,但他更加享受计算机带来的乐趣。用他的…...
珠海网站建设小小网络/网络公关公司
题意:给定你a,b 问你从a加到b进了多少次位 解题思路:判断a-b每一位上一共有多少个1,然后计算进位即可 解题代码: 1 {2 num1[i] - (a%k - k/2);3 }4 5 if( a < k/2 &&am…...