HTML基础之＜h＞,＜p＞,＜span＞,＜pre＞

一.今天简单学习几个元素

h

1.大家都知道h1-h6是标题，那怎么快速让我们设置不同的标题呢，今天给大家一个简单的方法。

<body>
   h$*6>{$级标题}
body>
1
2
3

h后面的$标识是每次会按照自增生成数字，我们这个代码中用到了两个符号，第一个标识让我们的标题元素自增，第二个标识是让我们的标题名称自增，在代码中输入内容以后点击tab它就会生成我们想要的代码。

<body> 
   <h1>1级标题h1>
   <h2>2级标题h2>
   <h3>3级标题h3>
   <h4>4级标题h4>
   <h5>5级标题h5>
   <h6>6级标题h6>
body>
1
2
3
4
5
6
7
8

接下来我们运行看看,非常的简单快捷
在这里插入图片描述

p

2.p元素是段落，全称是paragraphs,这个用法我想大家都知道，那我们今天来讲点不一样的东西，在p里面用lorem，这个lorem俗称是乱数假文，就是没有任何意义的文字，如果说我们想看下页面的排版，那我们就可以用它，接下来上代码。

<body>
   p*3>lorem
    
body>
1
2
3
4

看起来是不是很眼熟，我们要3个p元素，后面直接放lorem,点击tab，它就会帮我们生成。

<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore quis dolores omnis ipsum beatae, quo aspernatur! Earum, labore! Magnam minima quo illum tempora hic quos earum tempore pariatur quis veniam?p>
   <p>Delectus unde fugit, expedita ducimus quod provident repellendus inventore quibusdam. Alias, voluptatem? Magnam eos saepe quidem qui doloribus a dolore ipsam placeat, sed enim accusantium delectus quia laborum nam aliquam.p>
   <p>Voluptate laborum cupiditate fugit et incidunt fuga rem vitae corrupti sit necessitatibus eum minima, maxime placeat perferendis nisi alias minus quidem? Dolores nisi minima quam sit, nihil quae placeat culpa?p>
    
body>
1
2
3
4
5
6

我们可以看下页面的样式，可以非常清晰的看排版有没有问题。
在这里插入图片描述

如果你觉得这个太多了，想看简短一点的排版，我们还可以这样，在lorem后面直接+数字。

<body>
   p*3>lorem1
    
body>
1
2
3
4

点击tab看下，一个字母没问题。

<body>
   <p>Lorem.p>
   <p>Autem?p>
   <p>Maxime.p>
    
body>
1
2
3
4
5
6

我们再看下页面，千万别忘记保存哦！这个真的是非常好用
在这里插入图片描述

span

3.span这个元素是没有语义的，仅用于设置样式，接下来看下案例。

<body>
   请给字体加上颜色：红，黄，绿
body>
1
2
3

那这种情况我们就可以用span这个元素了。

<body>
   请给字体加上颜色：<span style="color:red">红span>, <span style="color:yellow">黄span>,<span style="color:green">绿span>
body>
1
2
3

css我们后期也会更新的，现在大概看下就好，我们运行看看样式，span元素在显示时是不会独占一行的（快级元素），某些元素是独占一行（行级元素），heml5已经弃用这种说法了。
在这里插入图片描述

pre

4.pre是预格式化文本元素，我们先了解一下空白折叠，它的意思是在源代码中的连续空白字符（空格，换行，制表）,在页面上显示时，会被折叠为一个空格,但是在pre元素中不会被折叠，会按照源码样式显示，给大家看下案例。
这是我代码的样式
在这里插入图片描述

这是运行后展示的样式，是不是把空格全部合没了
在这里插入图片描述
接下来我们用pre试试，这是运行代码。

这是运行后的样式。

哈哈，大家学会了吗，喜欢的可以关注我，后续会陆续更新的！

相关阅读:
自大型人格分析，如何改变自大型性格？
前台页面查询时间是今天12点可是第二天日期才能查询到今年下午的数据什么原因导致的
mysql面试题——存储引擎相关面试题
【核心概念】图像分类和目标检测中的正负样本划分以及架构理解
Python中拟合线性方程(最小二乘法)
SpringBoot ApplicationContext分析
比较3个结构之间的关系
Python：SM4
Dubbo的前世今生
如何获取QColorDialog.getColor()的取消事件

原文地址：https://blog.csdn.net/xuxu_boke/article/details/128061643