【Web——HTML 初阶】网页设计标题

news2024/10/23 11:20:13

♥HTML(HyperText Markup Language,超文本标记语言)是构建网页和Web应用的基础语言之一。它不是一种编程语言,而是一种标记语言,用于描述网页的结构和内容。HTML使用标签(tags)来标记不同类型的元素,如标题、段落、链接、图像等,并通过这些标签来控制网页的显示方式。

目录

标题标签

标头标签

段落标签

换行标签

文本格式化标签

加粗标签

斜体标签

下划线标签

删除线标签




标题标签

标头标签

标题分为h1-h6 六级标题 h1是最大的 h6是最小的

h1和h2之间的间距最大 h6和h5之间的间距最小

⭐标题的基本格式

<h1>标题名称</h1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vscode第一个网页文件</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>

我们来看一下运行效果

一级标题是字号最大的同样也是最重要的,逐渐递减至六级标题


段落标签

段落和段落之间有一定的空间用来区分不同的段落

⭐段落标签:

<p>段落标签内容</p>

注意❗❗

空格的使用

段落的分段

通过段落标签我们不难发现,在我们使用的过程中会存在内容很难通过空格来把控两个文字之间的距离,文字表述有些抽象,我们来通过实际例子来说明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vscode第一个网页文件</title>
</head>
<body>
<p> 你好!                      程序员</p>
</body>
</html>

在代码中我们将内容“ 你好!                      程序员”你好!程序员中敲制了多个空格,但是显示出来的内容和代码之间相差很多

这里就向我们说明在HTML中,计算机不能识别多空格


同样的我们来观察:

 

 在代码视窗中,我们对两段文字进行了看似换行的处理,但实际输出时,却没有实现所想要得到的内容,在操作中我们因将各个段落的内容分开,放在不同的段落标签之间<p> </p>

不同的段落之间通过<p></p>实现了明显的分行操作


换行标签

通过上一个板块的段落标签我们知道了,空格再多难以被识别。换行标签主要用于在文本中插入换行符,从而改变文本的布局。



文本格式化标签

对文字进行的处理,文字格式化标签用于改变文本的显示方式,文字的外观、样式和布局。使用简单的标记来控制文本的字体、大小、颜色、加粗、斜体、下划线等属性。

加粗标签

⭐加粗标签:

<p>这是一个<b>加粗</b>的文本。</p>

斜体标签

⭐斜体标签:

<p>这是一个<i>斜体</i>的文本。</p>

下划线标签

⭐下划线标签:

<p>这是一个<span style="text-decoration: underline;">下划线</span>的文本。</p>

删除线标签

⭐删除线标签:

<p>这是一段文本,下面的单词<del>删除</del>这个单词被删除了。</p>



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

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

相关文章

NFTScan | 10.07~10.13 NFT 市场热点汇总

欢迎来到由 NFT 基础设施 NFTScan 出品的 NFT 生态热点事件每周汇总。 周期&#xff1a;2024.10.07~ 2024.10.13 NFT Hot News ​01/ 数据&#xff1a;9 月份加密市场大多数指标均出现下降&#xff0c;链上总交易量下降 13% 10 月 7 日&#xff0c;据 The Block 研究总监 la…

阿里云ACP好考吗?阿里云ACP备考攻略及工具一站式备齐!

经常有小伙伴问&#xff1a;阿里云ACP好考吗&#xff1f;阿里云ACP难吗&#xff1f;作为过来人&#xff0c;给大家做好了阿里云ACP认证的整体规划&#xff0c;你只需要跟着做就okk啦&#xff01;再告诉大家一个好消息&#xff1a;目前阿里云ACP还是不用做实验的&#xff01; 一…

如何在算家云搭建Video-Infinity(视频生成)

一、模型介绍 Video-Infinity是一个先进的视频生成模型&#xff0c;使用多个 GPU 快速生成长视频&#xff0c;无需额外训练。它能够基于用户提供的文本或图片提示&#xff0c;创造出高质量、多样化的视频内容。 二、模型搭建流程 1.大模型 Video-Infinity 一键使用 基础环境…

深圳出手!新能源汽车被针对了

文 | AUTO芯球 作者 | 雷慢 这个政策好啊&#xff0c;我举双手赞成&#xff01; 来看&#xff0c;深圳刚发布了针对新能源车地下车库充电的管理规范&#xff0c; 我替你们扒了一遍&#xff0c;要点就几个&#xff0c; 新能源充电桩不能设在地下四层及以下&#xff0c; 这点…

产品图册转换为电子图册

​标传统的产品图册不仅体积庞大&#xff0c;携带不便&#xff0c;而且更新换代速度慢&#xff0c;信息更新不及时。在这个信息化时代&#xff0c;我们需要一种更加便捷、高效的方式来展示产品。那么&#xff0c;可翻页的电子画册怎么制作呢&#xff1f; 1.要制作电子杂志,首先…

“全民拼团:解锁社交电商新玩法,乐享购物与分红“

在当前电子商务领域&#xff0c;一种创新的购物体验——全民团购风潮正逐渐兴起。它创造性地将社交功能与电商购物相结合&#xff0c;借助团购、拼购等活动&#xff0c;不仅使消费者能够享受到更优惠的价格&#xff0c;更赋予购物过程一种全新的乐趣和互动性。 全民团购模式的独…

史诗级回归,连播两集,燃到让人窒息

《超人和露易丝》自2021年首播以来&#xff0c;虽然起初没有掀起太大的波澜&#xff0c;但凭借着温情的家庭故事与用心的制作&#xff0c;慢慢积累了口碑。它不再是简单的“英雄拯救世界”套路&#xff0c;而是把超人的身份放进了家庭的框架里&#xff0c;展现了英雄在拯救世界…

模板的路由的配置

1.安装路由 pnpm install vue-router 2.配置相应的路由 routes.ts //对外暴露这些配置的路由(常量路由)export const constantRoutes [{path: /login,name: login,//命名路由 权限用到component: () > import(/views/login/LoginPage.vue)},{path: /,name: layout,compo…

【Java数据结构】---七大排序(插入排序和选择排序)

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 什么是排序&#xff1f; 使一串数据…

新的一轮前端面试已来临,避坑指南来 get!

最近看到很多人都在投简历&#xff0c;可是很多人对待面试不够认真&#xff0c;只会等待结果&#xff0c;不去努力。所以整理一些懒人面试技巧给大家。 我们说说目前应用面积最广的 Vue&#xff0c;大厂或是高级工程师面试的时候究竟会碰到什么棘手或是难缠的 Vue 的面试题呢&a…

数据结构:LRU Cache

数据结构&#xff1a;LRU Cache LRU Cache实现类架构setget测试 总代码 LRU Cache cache意为缓存&#xff0c;硬件层面指CPU与主存之间的缓存&#xff0c;用于减缓两者之间的速度差距。广义上&#xff0c;可以把cache简单理解为一个临时存储区域。 cache的容量是非常有限的&a…

从0到1掌握大模型

人人都看得懂的大模型简介 大模型就像一座庞大的图书馆&#xff0c;里面有非常多的书籍。但与普通图书馆不同的是&#xff0c;这座图书馆中的每本书都是关于不同事物的描述和知识。而这些书籍中的每一页都代表了这个事物的一些特征或细节。现在&#xff0c;想象一下&#xff0…

前端文件流导出

1、前端代码 ​ /** 导出 */ const handleExport async () > {let config {responseType: blob,headers: {Content-Type: application/json,},};const res await getTargetExport(config);const blob new Blob([res]);const fileName PK目标跟进导出列表.xls;const li…

基于Python绘制一个三角形

一、程序 import turtledef draw_triangle(side_length):# 初始化turtle对象并设置速度my_turtle turtle.Turtle()my_turtle.speed(1)# 绘制三角形for _ in range(3):my_turtle.forward(side_length)my_turtle.left(120)# 结束后关闭窗口防止立即退出turtle.done()# 设定三角…

前端面试经验总结1(简历篇)

本文分为3部分&#xff0c;分别为第一部分简历篇&#xff0c;第二部分经典问题篇以及第三部分知识体系篇&#xff0c;都是个人面试经验及同行面试经验总结和整理。 我对于简历的理解是这样的&#xff0c;简历的作用是让看简历的人能够快速、准确地捕捉到有用信息&#xff1a; 你…

【MATLAB源码-第274期】基于matlab的高阶累积量矩阵和PCA的JADE算法在盲信号分离中的应用仿真,输出源信号,混合信号和分离信号。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 基于高阶累积量矩阵和主成分分析&#xff08;PCA&#xff09;的JADE算法是一种典型的盲源分离算法&#xff0c;在信号处理领域中&#xff0c;广泛应用于分离混合信号的独立源。盲源分离问题的核心在于从观测信号中提取出源信…

【C语言】动态内存管理(下)

本篇博客将讲解以下知识&#xff1a; 1、calloc和realloc 2、常见的动态内存错误 1、calloc和realloc &#xff08;1&#xff09;calloc C语言中还提供了一个函数叫calloc&#xff0c;calloc也用来动态内存分配 calloc函数原型&#xff1a; void* calloc(size_t num, …

基于springboo+vue+mysql私人西服定制设计与实现(源码+定制+开发)

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

初始Python篇(2)——逻辑控制、序列

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; Python 目录 顺序结构 选择结构 循环结构 遍历循环-for break 和 continue 无限循环-while pass空语句 猜数字小游戏 序列 序列相…

如何管理和维护自动化测试

将测试数据、测试脚本和测试结果进行有效的管理和维护是软件测试过程中的重要任务&#xff0c;它直接关系到测试的质量和效率。以下是对这三个方面分别进行管理和维护的具体建议&#xff1a; 一、测试数据的管理和维护 1. 数据收集 来源选择&#xff1a;测试数据主要来源于生…