整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
续上次没说完的标题吧，今天也顺便讲下段落和文本格式化。
首先，需要知道的是，标题很重要。
需要确保将 HTML 标题的标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。就像之前发的那张图一样。然后再说说标题的水平线。<hr> 标签在 HTML 页面中创建水平线,hr 元素也可用于分隔内容。实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)测试开发转型</title>
</head>
<body>
<h></h>
<p></p>
<h1>我是最大的，你忍一下</h1>
<hr>
<h2>我是老二，你也要忍一下</h2>
<hr>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">这是一个招聘网站</a>
</html>
可以看到有分割线
HTML注释
接着我们说下HTML的注释，可不是简单的 //
<!-- 这是一个注释 -->
需要注意的一点: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。
接着说下HTML的段落
HTML 段落
段落是通过 <p> 标签定义的。
具体我们来看个实例：
可以看到三个段落，我们再看看代码是怎么实现的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)测试开发转型</title>
</head>
<body>
<h></h>
<p>这是第一个段落</p>
<!--我是一个注释-->
<h1>我是最大的，你忍一下</h1>
<hr>
<p>这是第二个段落</p>
<h2>我是老二，你也要忍一下</h2>
<hr>
<p>这是第三个段落</p>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">这是一个招聘网站</a>
</html>
不要忘记结束标签:即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来。接着说下在段落中折行，这就需要用到<br>了
我们直接来看看实例:
可以看到有三个折行
来看看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210815---(二)测试开发转型</title>
</head>
<body>
<h></h>
<p>这是第一个段落,你服不服<br>我不服，你个二愣子</p>
<!--我是一个注释-->
<h1>我是最大的，你忍一下</h1>
<hr>
<p>这是第二个段落<br>你给我滚一边去</p>
<h2>我是老二，你也要忍一下</h2>
<hr>
<p>这是<br>第三个段落<br></p>
<h3>我是老三，我一般</h3>
<hr>
</body>
<a href ="https://www.baidu.com">这是一个招聘网站</a>
</html>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签
下一节我们讲下HTML的格式化，包含粗体、斜线等
加油，晚安~
海无涯，不要沉浸在知识的海洋里，迷失自己。
要知道自己想要什么，抓住重点，不忘初心。
这个世界上百分之20的人，掌握着百分之80的财富。
接下来一系列教程，就带领大家抓住重点，一起做那百分之20的人。
往期知识点回顾：
重点属性-display
重点属性-position
重点属性-float
重点属性-flex
重点属性-overflow
重点属性-media
CSS 背景这里指通过background对对象设置背景属性，如通过CSS设置背景各种样式。
设置颜色作为对象背景颜色
设置图片作为背景图片
设置背景平铺重复方向
设置或检索背景图像是随对象内容滚动还是固定的。
设置或检索对象的背景图像位置。
背景样式的值是复合属性值组合，也就是背景单词的值可以跟多个属性值，值与值之间使用一个空格间隔链接上即可。
1、设置纯色背景。背景background可以设置对象纯色的背景颜色，
2、设置图为背景。可以设置对象背景为图片，如果背景是图片可以让图片重复平铺横铺，或将图片作为对象背景固定在对象任何位置。
属性解析
no-repeat:不重复
repeat-x:水平方向（横向）重复平铺
repeat-y:垂直方向（竖向）重复平铺
如果不设置，为全背景平铺
left 图片靠左
right 图片靠右
top 图片靠上
bottom 图片靠下
fixed 图片固定
scroll 背景图片内容滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex布局css</title>
<style>
.container{
background: #FFF url(https://image.baidu.com/beijing.gif) no-repeat 0 0 fixed
}
</style>
</head>
<body>
<div class="container">
背景图
</div>
</body>
</html>
复制代码1、由使用float浮动造成浮动产生无法显示css背景颜色
2、高度不够而产生背景无法显示
3.如果是float造成：解决方法有三种，一个是设置clear清除浮动、设置css高度、设置css overflow样式。
4.如果是高度原因：解决方案如下，设置够高的高度，或取消删除高度样式即可。
篇中我们介绍了文本的一些样式，这篇接着讲文本样式。
6.文本下划线
一般文本下划线都用在什么地方呢？我想到一个就是画重点考前划重点，有没有画面感，^v^。
用css来实现划重点，也是别具风格呀。
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
span{
text-decoration:underline;
}
</style>
</head>
<body>
<p>
在做等离子物理对撞实验的时候，如果把第三能量的极坐标，向负方向调整三个阿尔法单位，那么对最终的结果将会产生多少影响?
<br>
<span>2伽马一步徐龙根号3</span>
</p>
</body>
</html>text-decoration可以给文本设置下划线，上划线，删除线，取消线。
上面代码实现效果如下：
这个效果看起来两行之间的距离有点拥挤，我们可以调整的它们的距离，稍微远一点，让它们看起不那么拥挤。
7.文本的行间距
用line-height来指定行间距，因为文本都包含在p标签中，所以我们给p标签加了行间距为50px
调整后的效果如下：
看起来下划线的文字还是不够显眼啊，我们再给它加点颜色上去，会更好。
这回好多了。够显眼，就绝对记得住。
text-decoration后面可以设置的值如下：
值 | 说明 |
none | 让本身有划线装饰的文本取消掉 |
underline | 让文本的底部出现一条下划线 |
overline | 让文本的头部出现一条上划线 |
line-through | 让文本的中部出现一条删除线 |
blink | 让文本进行闪烁，基本不支持了 |
text-decoration：none这个会让本身有划线装饰的文本取消掉的意思，例如a标签，天生就带下划线，那要不想要自带的下划线就可以利用这个样式给它去掉。
来尝试一下
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
</style>
</head>
<body>
<p>
在做等离子物理对撞实验的时候，如果把第三能量的极坐标，向负方向调整三个阿尔法单位，那么对最终的结果将会产生多少影响?
<br>
<span>2伽马一步徐龙根号3</span>
<br>
<a href="http://www.baidu.com">百度</a>
</p>
</body>
</html>百度两个字下面天生就带了下换线，要去掉请使用text-decoration：none
其余几个大家可以自己动手尝试一下效果。
8.设置英文文本转换为大小写
这个标题很好理解，就是专门针对英文的，如果想把英文文本转换大小写可以使用
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
p{
line-height: 50px;
}
span{
text-decoration:underline;
color: red;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<p>
在做等离子物理对撞实验的时候，如果把第三能量的极坐标，向负方向调整三个阿尔法单位，那么对最终的结果将会产生多少影响?
<br>
<span>2伽马一步徐龙根号3</span>
<br>
<a href="http://www.baidu.com">百度</a>
<br>
<span class="english">
no zuo no die you why cry
<br>
you zuo you die don't ask why
</span>
</p>
</body>
</html>页面效果如下：
这里的英文文本也是写在了span标签里面，受span标签样式的影响这里也变成了红色，也加了下划线。我们给它取消掉这些样式。并给它设置让英文单词首字母变成大写的样式。
下面给出text-transform的值和作用的表格，大家可以自行动手尝试效果。
值 | 说明 |
none | 将已被转换大小写的值恢复到默认状态 |
capitalize | 将英文单词首字母大写 |
uppercase | 将英文转换为大写字母 |
lowercase | 将英文转换为小写字母 |
9.文本添加阴影
text-shadow:5px 5px 5px red;
这里有四个值（3个5px和一个red）：第一个值代表水平偏移；第二个值代表垂直偏移；第三个值代表阴影模糊度（可选）；第四个值代表阴影颜色（可选）。
10.设置文本的对齐方式
我们可以设置文本的对齐方式，如果你用过word文档的话，那一定知道左对齐、右对齐、居中对齐。css里面同样有
我们来尝试一下居中对齐
值 | 说明 |
left | 靠左对齐，默认 |
right | 靠右对齐 |
center | 居中对齐 |
justify | 内容两端对齐 |
start | 让文本处于开始的边界 |
end | 让文本处于结束的边界 |
start和end属于css3新增的功能，IE和Opera浏览器可能不支持。
11.处理文本之间的距离（letter-spacing）
也就是两个字间的距离，通过例子来感受一下
很明显的可以看到字间距变大了。
12.设置英文单词之间的距离（word-spacing）
13.文本首行的缩进（text-indent）
一般每个段落的首行都要缩进，这是书写书信文件时的规定。
我们去掉了居中对齐的样式，是为了更好地演示首行缩进的效果。
看效果图红框的地方，明显有缩进。
好了，以上就是今天的内容了。
希望大家可以早日学会编程，踏上高薪之路，早日成为白富美、高富帅。动手练，听我的没错。
*请认真填写需求信息，我们会在24小时内与您取得联系。
