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

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


同样的我们来观察:

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

不同的段落之间通过

实现了明显的分行操作


换行标签

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



文本格式化标签

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

加粗标签

加粗标签:

这是一个加粗的文本。

斜体标签

斜体标签:

这是一个斜体的文本。

下划线标签

下划线标签:

这是一个下划线的文本。

删除线标签

删除线标签:

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



相关推荐
web150854159354 分钟前
基于YOLOv的目标追踪与无人机前端查看系统开发
前端·无人机
dodo201626 分钟前
HTML5 新的 Input 类型
前端·html·html5
爱学习的白杨树34 分钟前
Vue路由的实现模式
前端·javascript·vue.js
乐闻x1 小时前
零配置打包工具 Parcel 的详细使用指南
前端·javascript
等什么君!1 小时前
学习Ajax (概述,应用场景,使用jQury 实现ajax)
前端·学习·ajax
幽兰的天空1 小时前
CSS3:重塑网页设计的新力量
css·html·css3·html5
nVisual1 小时前
nVisual 前端集成SDK使用说明
前端
幽兰的天空1 小时前
CSS3 常用特性及应用全解析
前端·html·css3·html5
冰镇屎壳郎2 小时前
Vue八股青春版
前端·javascript·vue.js
hxx2212 小时前
iOS swift开发系列 -- tabbar问题总结
前端