文本控制标签主要是以下几种
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本控制</title>
</head>
<body>
<style type="text/css">
.tuwen{font-weight: bold; /*定义粗体*/
font-size: 20px; /*定义字体大小*/
font-family: 楷体; /*定义字体库，注意要选择C盘font字库中存在的字体*/
}
.title{
text-align: center; /*定义文本居中 left--左 right--右*/
height: 100px;
background: pink;
line-height: 100px; /*定义行高*/
}
.google{
font-size: 26px;
font-weight: bold;
font-family: georgia;
}
img{width: 200px;
height: 200px;}
b{display: block;
width: 200px;
height: 40px;
background: green;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;/*边框外下边距*/
}
/*伪类，可视作事件类*/
b:hover{
overflow: visible;/*默认值，内容不会被修剪，元素会被呈现在元素框外*/
}
</style>
<!-- h1~h6标签 -->
<h1>这是一个h1</h1>
<h2>这是一个h2</h2>
<h3>这是一个h3</h3>
<h4>这是一个h4</h4>
<h5>这是一个h5</h5>
<h6>这是一个h6</h6>
<b>设置加粗字体</b><!-- 字体加粗标签 -->
<p>坚决打赢脱贫攻坚战，让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，习大大总书记的扶贫足迹遍布全国，对坚决打</p>
<br><!-- 换行标签 -->
<br>
<strong>（strong：加粗强调标签）php中文网</strong><!-- 加粗强调标签 strong 更具有语义化，对搜索引擎优化更友好-->
<i>i：坚决打赢脱贫攻坚战</i>
<em>em：定义着重字</em>
<del>del：定义删除字标签</del>
<s>s：对搜索引擎优化更友好</s>
<br>
<pre>预格 式化
文本，包括换行符，空格符</pre><!-- 内部换行是可以输出的 --><!-- 空格也可以输出 -->
<p style="background: pink;width: 100px;height: 100px;">我是块级元素哦</p>
<!-- 块级元素： div h1~h6 p 独占一行的,自带换行符,默认宽度100%,对宽高属性值设置生效
行内元素： strong i span 可以共存于一行，对宽高属性值设置不生效 -->
<!-- 行内块元素：结合了块级以及行内的特点 -->
<img src="https://n.sinaimg.cn/news/transform/590/w240h350/20180813/4nDi-hhqtawx7532001.jpg" alt="" style="width: 100px;height: 100px;"><span>123</span>
<!-- 行内块级相互转换:
display:inline 讲块级元素转换为行内元素
display: inline-block 讲块级元素转换为行内块元素
display: block 讲行内元素转换为块级元素 -->
<div style="width: 100px;height: 100px;background: pink;display: inline;">块级转行内元素display:inline</div>
<div style="width: 100px;height: 100px;background: pink;display: inline-block;">块级元素转行内块元素display: inline-block</div>
<span style="width: 100px;height: 100px;background: pink;display: block;">行内元素转换为块级元素display: block</span>
<span style="width: 100px;height: 100px;background: pink;display: inline-block;">行内元素转行内块元素display: inline-block;</span>
<span style="width: 100px;height: 100px;background: pink;display: inline-block;">行内元素转行内块元素display: inline-block;</span>
<h1 class="title">PHP中文网</h1>
<br>
<!-- 谷歌logo -->
<span class="google" style="color: #0085FF;">G</span>
<span class="google" style="color: rgb(246,26,35);">o</span>
<span class="google" style="color: #FCE80F;">o</span>
<span class="google" style="color: #0487F9;">g</span>
<span class="google" style="color: #3EFF18;">l</span>
<span class="google" style="color: #FF1428;">e</span>
<br>
<!-- 图文混排 -->
<p class="tuwen" style="width: 200px;height: 200px;display: inline-block;">
行内块级相互转换: <br>
display:inline 将块级元素转换为行内元 <br>
display: inline-block 将块级元素转换为行内块元素 <br>
display: block 将行内元素转换为块级元素 </p>
<img src="https://n.sinaimg.cn/news/transform/590/w240h350/20180813/4nDi-hhqtawx7532001.jpg" alt="">
<br>
<br>
<img src="https://n.sinaimg.cn/news/transform/590/w240h350/20180813/4nDi-hhqtawx7532001.jpg" alt="">
<b>hover鼠标放上出，触发事件，隐藏部分文字，鼠标放上去，内容不会被修剪，元素会被呈现在元素框外</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
8月13日作业如下
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本布局——8月13日作业</title>
<style type="text/css">
body{
background: #fff;
width: 412px;
margin: 0 auto;
padding: 0;
font-size: 14px;
font-family: 微软雅黑;
}
.box{
width: 385px;margin: 0 auto;
}
h1{
font-size: 20px;
font-weight: bold;
font-family: 微软雅黑;
margin: 0;
padding-top: 20px;
}
.p_time{
color: #999;
font-size: 12px;
display: inline-block;
}
.author{
display: inline-block;
float: right;
font-size: 12px;
}
img{
width: 385px;
height: 257px;
margin: 0 auto;
display: block;
}
.bianji{
color: #999;
font-size: 12px;
text-align: right;
}
.shengm{
color: #999;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
<h1>带着仇人扳倒毛晓彤？疑毛晓彤爸爸聊天截图被曝光</h1>
<p class="time">
<span>2018-08-13 20:8</span>
<span>来源：搜狐娱乐</span>
</p>
<p class="author">
<a href="">习大大</a>
</p>
<p>原标题：带着仇人扳倒毛晓彤？疑毛晓彤爸爸聊天截图被曝光</p>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180813/1da65ccc5d724b6088c272b7f1eaa50f.png">
<span style="text-align: center;display: block;line-height: 60px;">（资料图）</span>
<div class="content">
<p>搜狐娱乐讯8月13日，有网友曝光了疑似毛晓彤爸爸的微信聊天截图。他表示目前正在筹款，准备联合一线媒体推翻毛晓彤，还准备带记者、律师、证人等去剧组来记者会，逼毛晓彤出面。此前毛晓彤爸爸曾闹到电视台，向其索要五千万赡养费。</p>
<p>上个月毛晓彤爸爸曾闹到电视台，找她要五千万赡养费，毛晓彤希望私下和解。她爸打听到毛晓彤在横店拍戏，准备带着记者和毛晓彤妈仇人一起过去，逼着毛晓彤出现，搞新闻，彻底打倒她。</p>
<p>此前，毛晓彤爸爸控诉女儿的节目视频在网络疯传。在节目中，毛晓彤爸爸称自己“明星女儿”身家过亿却不赡养自己，主动上门找女儿也避而不见，故索要5000万天价赡养费，此外，他还自曝吸毒，并频频放狠话“咱们一起下地狱”。今年3月份就有网友透露毛晓彤爸爸李超准备到法院起诉毛晓彤弃养生父。</p>
</div>
<p class="bianji">责任编辑：张铮 ID9527</p>
<p class="shengm">声明：所有文字图片均摘自网络，如有侵权请告知。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1：
<!-- display:inline;将块级元素转行为行内元素 -->
<div style="width: 100px;height: 100px;background: pink;display:inline;">1111</div>
这样能将块级元素转化为行内元素
2：
<!-- display:inline-block;将块级元素转行为行内块元素 -->
<div style="width: 100px;height: 100px;background: pink;display:inline-block;">2222</div>
这样能将块级元素转化为行内块元素
3：
<!-- display:block;将行内元素转行为块级元素 -->
<span style="width: 100px;height: 100px;background: pink;display: block;">3333</span>
这样能将行内元素转为块级元素
4：
<!-- display:inline-block;将行内元素转行为行内块级元素 -->
<span style="width: 100px;height: 100px;background: pink;display:inline-block ;">4444</span>
这样能将行内元素转为行内块元素
5：
块级元素：独占一行，对宽高属性设置生效，自带换行符。eg：div h1~h6 p ...
行内元素：可以共存一行，对宽高属性设置不生效。eg：span
行内块元素：结合了块级和行内特点，能对宽高属性设置生效，也能共存一行。eg：image
6：overflow不设置默认值visible，内容不会被修剪，元素被呈现在元素框内，overflow: hidden溢出隐藏。