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

ops/2024/12/15 6:47:12/

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

目录

标题标签

标头标签

段落标签

换行标签

文本格式化标签

加粗标签

斜体标签

下划线标签

删除线标签




标题标签

标头标签

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

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

标题的基本格式

标题名称

<!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>

我们来看一下运行效果

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


段落标签

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

段落标签:

段落标签内容

注意

空格的使用

段落的分段

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

<!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中,计算机不能识别多空格


同样的我们来观察:

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

不同的段落之间通过

实现了明显的分行操作
换行标签

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



文本格式化标签

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

加粗标签

加粗标签:

这是一个加粗的文本。

斜体标签

斜体标签:

这是一个斜体的文本。

下划线标签

下划线标签:

这是一个下划线的文本。

删除线标签

删除线标签:

这是一段文本,下面的单词删除这个单词被删除了。




http://www.ppmy.cn/ops/142029.html

相关文章

“AI全网络深度学习系统:开启智能时代的新篇章

嘿&#xff0c;大家好&#xff01;今天咱们来聊聊一个特别前沿的话题——AI全网络深度学习系统。这名字听起来是不是有点像科幻电影里的玩意儿&#xff1f;但其实&#xff0c;它已经悄悄地走进了我们的生活&#xff0c;而且正在改变我们的工作方式。 首先&#xff0c;咱们得搞清…

《拉依达的嵌入式\驱动面试宝典》—前言目录篇

《拉依达的嵌入式\驱动面试宝典》—前言&目录篇 你好&#xff0c;我是拉依达。 感谢所有阅读关注我的同学支持&#xff0c;目前博客累计阅读 27w&#xff0c;关注1.5w人。 《拉依达的嵌入式\驱动面试宝典》 最开始我个人的面试学习笔记&#xff0c;里面整合了所有我认为可…

【使用PyQt5和YOLOv11开发电脑屏幕区域的实时分类GUI】——PyQt5在Pycharm中的安装配置

这里的安装配置以我个人在应用中的实际情况为准。参考了该博客Python——PyQt5在PyCharm的配置与应用&#xff08;保姆级教程&#xff09; 一、pip安装PyQt5 pip install PyQt5 -i https://pypi.tuna.tsinghua.edu.cn/simple pip install PyQt5-tools -i https://pypi.tuna.ts…

mysqlelasticsearch备份恢复

目录 1. mysql备份 1.1. 使用 mysqldump 命令备份整个数据库&#xff1a; 1.2. 备份特定表&#xff1a; 2. 恢复 MySQL 数据库 2.1. 使用备份文件恢复数据库&#xff1a; 3. 备份elasticsearch索引 3.1. 注册本次备份的存储路径 3.2. 查看当前备份快照信息 3.3. 备份索…

分布式 令牌桶算法 总结

前言 相关系列 《分布式 & 目录》《分布式 & 令牌桶算法 & 总结》《分布式 & 令牌桶算法 & 问题》 参考文献 《【算法】令牌桶算法》 概述 简介 TBA Token Bucket Algorithm 令牌桶算法是一种流行于网络通信领域的流量控制/频率限制算法。令牌…

Android UI:ViewTree:源码分析:事件处理:显示事件

文章目录 概述测量:measure和onMeasure​​​​​​​ View.MeasureSpecViewViewGroupLinearLayoutRelativeLayout布局:layout和onLayout ViewViewGroupLinearLayoutRelativeLayout绘制:dispatchDraw、draw和onDraw ViewViewGroupLinearLayoutRelativeLayout总结概述 显示事…

AI初创企业的未来趋势和潜在挑战

AI初创企业的未来趋势和潜在挑战 AI初创企业的未来趋势和潜在挑战可以从多个方面进行分析&#xff1a; 未来趋势 AI监管: 随着AI技术的快速发展&#xff0c;各国政府开始制定相关法规&#xff0c;以确保AI的安全和伦理使用。这将影响初创企业的运营模式和市场准入。 日常生活…

CNCF云原生生态版图-项目和产品综合分析

CNCF云原生生态版图-项目和产品综合分析 CNCF云原生生态版图-项目和产品综合分析整体统计分析中国研发人员贡献项目和产品其中&#xff0c;纳入 CNCF 管理的开源项目 链接 CNCF云原生生态版图-项目和产品综合分析 整体统计分析 在对云原生技术选型时&#xff0c;优先选择经过 …