本节课讲解了文本控制标签和属性，以及元素的三大类型应用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML/CSS之文本控制与元素三大类型</title>
<style type="text/css">
.box{
width: 200px;height: 40px;background: pink;
}
</style>
</head>
<body>
<!-- 标题标签，从H1到H6 -->
<h1>这个是H1标签</h1>
<h2>这个是H2标签</h2>
<h3>这个是H3标签</h3>
<h4>这个是H4标签</h4>
<h5>这个是H5标签</h5>
<h6>这个是H6标签</h6>
<hr>
<!-- b标签：加粗 -->
<b>这个是粗体标签</b>
<hr>
<!-- p标签:段落标签,自动在段落的前后添加空行 -->
<p>坚决打赢脱贫攻坚战，让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，XJP总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。</p>
<hr>
<!-- br标签:换行标签，也支持在多个标签间换行 -->
<br>
<p>坚决打赢脱贫攻坚战，<br>让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。<br>党的十八大以来，XJP总书记的扶贫足迹遍布全国，<br>对坚决打赢脱贫攻坚战作出重要战略部署。<br>党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，<br>从说“不”的角度，<br>深入体会总书记对脱贫攻坚工作的重要指示精神。</p>
<p style="background: #ccc;height: 50px;line-height: 50px;">P标签独占一行效果，如内容超出一行系统自动换行</p>
<hr>
<!-- strong标签：定义文本加重语句，相当于粗体，strong与b不同的是，更具有语义化，对搜索引擎优化更友好 -->
<strong>我是PHP中文网的学员</strong>
<hr>
<!-- i标签：斜体字 -->
<i>坚决打赢脱贫攻坚战--i标签斜体</i>
<hr>
<!-- em标签：着重字效果类似斜体字 -->
<em>坚决打赢脱贫攻坚战--em标签着重字</em>
<hr>
<!-- del标签：删除字标签 -->
<del>定义删除字标签</del>
<hr>
<!-- span标签：组合文档中的行内元素 -->
<span>span标签被用来组合文档中的行内元素</span>
<br>
<!-- 这里有演示个错误的span用法，span属于行内元素，所以对width,height不生效 -->
<span style="color: red;background: yellow;width: 100px;height: 60px;">活动：1899 </span><del> 原价1899元</del>
<hr>
<!-- pre标签：定义预格式文本，保留输入的空格、换行，根据输入的格式输出，但输出字体大小不同 -->
<pre>
不能安之若素
我们党员干部都要有这样一个意识：只要还有一家一户乃至一个人没有解决基本生活问题，我们就不能安之若素；只要群众对幸福生活的憧憬还没有变成现实，我们就要毫不懈怠团结带领群众一起奋斗。
——2014年1月26日至28日，XJP在内蒙古调研考察时的讲话
既不降低标准，也不吊高胃口
既不急躁蛮干，也不消极拖延，既不降低标准，也不吊高胃口，确保焦点不散、靶心不变。
——2018年6月11日，XJP对脱贫攻坚工作作出重要指示强调
不搞层层加码
要坚持时间服从质量，科学确定脱贫时间，不搞层层加码。要真扶贫、扶真贫、真脱贫。
</pre>
<hr>
<!-- html中的三大元素类型
1-块级元素 display:block
a.每个块级元素都从新的一行开始。
b.元素的高度、宽度、行高都可设置。
c.元素宽度在不设置的情况下，默认宽度是的100%。
常用的块级元素:<div> <p> <h1>~<h6>
2-行内元素 display:inline
a.和其他元素都在一行；
b.元素的高度、宽度不可设置；
c.元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的行内元素：<a> <span> <br> <i> <em> <strong>
3-行内块级元素 display:inline-block
a.和其他元素都在一行上；
b.元素的高度、宽度可设置。
常用的行内块级元素：<img>
-->
<!-- img行内块级元素，演示和其他元素都在一行的效果 -->
<img src="https://t1.huanqiu.cn/37eb6cd9e3ffa9e30ec4c8d94226a46c.jpg" style="width: 300px;">
<span>航空飞镖赛</span>
<!-- div块级元素，设置框高，从新的一行开始的效果 -->
<div class="box">从新的一行开始</div>
<hr>
<!-- 行内块级元素互相转换 -->
<!-- display:inline 将块级元素转变为行内元素 -->
<div style="width: 150px;height: 100px;background: green;display: inline;">将DIV块级元素，转换为行内元素，宽高不生效，和其他元素都是同一行</div>
<span>和span行内元素是同一行输出</span>
<br>
<br>
<!-- display:block 将行内元素转变为块级元素 -->
<span style="width: 150px;height: 100px;background: green;display: block;">将行内元素转变为块级元素,宽高生效，新的块级元素从新的行开始</span>
<span style="background: pink">新的行内元素1,和上面块级元素不在同一行效果</span>
<span style="background: green">行内元素和行内元素1在同一行的效果</span>
<br>
<br>
<!-- display:inline-block 将span行内元素转换为块级元素 -->
<span style="width: 100px;height: 100px;background: pink;display: block;">将行内转块级</span>
<!-- display:inline-block 将span行内元素转换为块级元素 -->
<br>
<span style="width: 100px;height: 100px;background: green;display: inline-block;">将行内转行内块级</span>
<span style="width: 100px;height: 100px;background: pink;display: inline-block;">将行内转行内块级</span>
<hr>
<!-- 控制字体，考虑到上面有存在h1 p标签 -->
<h1 style="text-align: center;/*设置文字居中*/
height: 100px;/*设置元素高度*/
background: #ccc;/*设置背景颜色*/
line-height: 100px;/*设置等于行高*/
">PHP中文网</h1>
<p style="font-weight: bold;/*定义加粗*/
font-size: 20px;/*定义字体大小*/
font-family: 宋体;/*定义字体*/
">PHP中文网</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML/CSS基础知识(文本控制\元素三大类型)</title>
<style type="text/css">
h1{
text-align: center;/*设置居中*/
line-height: 100px;/*设置高度等于元素高度*/
height: 100px;
background: #ccc;
}
p{
font-weight: bold;/*定义粗体*/
font-size: 20px;/*定义字体大小*/
font-family: 微软雅黑;/*定义字体*/
}
span{
font-weight: bold;
font-size: 80px;
font-family: georgia;
}
img{
width: 300px;
height: 450px;
}
b{
width: 300px;
height: 45px;
background: pink;
display: block;/*转为块级元素*/
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;/*设置下框边距*/
}
/*伪类的写法 b:hover*/
/*overflow值为visible，内容被剪切，当鼠标移动到元素上，元素会被呈现*/
b:hover{
overflow: visible;
}
</style>
</head>
<body>
<!-- 控制文字 -->
<h1>PHP中文网</h1>
<p>PHP中文网：微软雅黑字体，20px，加粗</p>
<hr>
<!-- Google LOGO案例 -->
<span style="color: #4385F5">G</span>
<span style="color: rgb(234,66,53);">o</span>
<span style="color: #FBBD06">o</span>
<span style="color: rgb(63,133,243);">g</span>
<span style="color: #34A951;">l</span>
<span style="color: rgb(232,65,47);">e</span>
<hr>
<!-- 将块状元素转换为行内块级元素，显示结果为同一行 -->
<p style="font-size: 14px;width: 300px;height: 450px;display: inline-block;">坚决打赢脱贫攻坚战，让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，XJP总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。
不能安之若素
我们党员干部都要有这样一个意识：只要还有一家一户乃至一个人没有解决基本生活问题，我们就不能安之若素；只要群众对幸福生活的憧憬还没有变成现实，我们就要毫不懈怠团结带领群众一起奋斗。
——2014年1月26日至28日，XJP在内蒙古调研考察时的讲话
既不降低标准，也不吊高胃口
既不急躁蛮干，也不消极拖延，既不降低标准，也不吊高胃口，确保焦点不散、靶心不变。
——2018年6月11日，XJP对脱贫攻坚工作作出重要指示强调
不搞层层加码
要坚持时间服从质量，科学确定脱贫时间，不搞层层加码。要真扶贫、扶真贫、真脱贫。
——2016年7月20日，XJP主持召开东西部扶贫协作座谈会时指出
不能搞数字游戏
脱贫和高标准的小康是两码事。我们不是一劳永逸，毕其功于一役。相对贫困、相对落后、相对差距将长期存在。要实事求是，求真务实，踏踏实实做这个事，不能搞数字游戏。考核要有正确导向，起到促进作用。
——2016年3月，XJP在全国两会期间指出</p>
<img src="http://a.hiphotos.baidu.com/image/pic/item/0824ab18972bd4077557733177899e510eb3096d.jpg" alt="">
<hr>
<img src="http://a.hiphotos.baidu.com/image/pic/item/0824ab18972bd4077557733177899e510eb3096d.jpg" alt="">
<b>坚决打赢脱贫攻坚战，让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，XJP总书记的扶贫足迹遍布全国，对坚决打赢脱贫攻坚战作出重要战略部署。党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。
不能安之若素
我们党员干部都要有这样一个意识：只要还有一家一户乃至一个人没有解决基本生活问题，我们就不能安之若素；只要群众对幸福生活的憧憬还没有变成现实，我们就要毫不懈怠团结带领群众一起奋斗。
——2014年1月26日至28日，XJP在内蒙古调研考察时的讲话
既不降低标准，也不吊高胃口
既不急躁蛮干，也不消极拖延，既不降低标准，也不吊高胃口，确保焦点不散、靶心不变。
——2018年6月11日，XJP对脱贫攻坚工作作出重要指示强调
不搞层层加码
要坚持时间服从质量，科学确定脱贫时间，不搞层层加码。要真扶贫、扶真贫、真脱贫。
——2016年7月20日，XJP主持召开东西部扶贫协作座谈会时指出
不能搞数字游戏
脱贫和高标准的小康是两码事。我们不是一劳永逸，毕其功于一役。相对贫困、相对落后、相对差距将长期存在。要实事求是，求真务实，踏踏实实做这个事，不能搞数字游戏。考核要有正确导向，起到促进作用。
——2016年3月，XJP在全国两会期间指出</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</title>
<style type="text/css">
body{
width: 550px;
}
p{
font-size: 14px;
font-family: 微软雅黑;
}
a,span{
font-size: 10px;
font-family: 微软雅黑;
}
</style>
</head>
<body>
<h2>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h2>
<span style="color: #999">2018-08-13 22:18 </span>
<span style="color: #999"> 来源搜狐娱乐</span>
<div style="text-align: right;">
<img src="http://oalm.com.cn/11.png" style="display:inline-block;" alt="">
<a href="http://www.sohu.com/tag/62558" style="color: #598FF1;display:inline;">黄晓明</a></div>
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180813/2f1c5e1bdb8c44e6ad1246ec7c803b33.jpeg" style="width: 100%;";alt="">
<p style="text-align: center;">黄晓明（资料图）</p>
<p>(来源：财新报)</p>
<pre style="display: inline;font-size: 13.5px;font-family: 微软雅黑;">
搜狐娱乐讯 8月13日，据财新报道，记者证实，证监会刚刚公布的获利近9亿元、罚没款高达
18亿元的高勇股票操纵案中的自然人账户之一确实为影视明星黄晓明名下账户。
而接近监管层的人士表示，这些自然人账户的所有人如果仅仅是出借账户，并不知道账户被
利用进行SC操纵，这些账户也不会被冻结。
8月10日晚，证监会通报了5宗SC操纵案件，其中，高勇控制16个账户，操纵“精华制
YAO”，半年内股价暴涨300%，非法获利8.97亿，被证监会没收违法所得8.97亿元并处罚
8.97亿元。
根据证监会通报，高勇控制的16个账户，这些账户是黄某、张某燕、张某、吴某江、倪素
某、倪松某、姜某、黄某明、徐某、朴某娜、薛某、吴某丰、崔某欣、吴某等人的账户。
媒体“股票说”调查表示，名单中，黄某就是明星黄晓明：“黄某明账户开立后由其母亲张某霞
管理使用。经路某介绍，张某霞将黄某明证券账户部分委托高勇管理，该账户涉案交易由高
勇作出。黄晓明的母亲叫张素霞。黄晓明和母亲张素霞，跟证监会通报材料中的黄某明和其
母亲张某霞，正好一一对应！”
黄晓明工作室对此发声明否认，称黄晓明不认识高某，未参与过任何操纵股票的行为；黄晓
明未曾受过任何与股票有关的处罚，亦未介入过任何与股票有关的调查。黄晓明工作室还敦
促相关方即刻删撤一切虚假信息，以免对公众造成误导并导致己方法律责任的承
担。</pre>
<img src="http://oalm.com.cn/12.png" alt="">
<a style="color: #598ff1;font-size: 14px" href="https://www.sohu.com/?strategyid=00001">返回搜狐，查看更多</a>
<p style="text-align: right;">责任编辑：反正不是我</p>
<span style="color: #999">声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结: 运用块级 行元素 行内块级 实现对html的布局效果
1-块级元素 display:block
a.每个块级元素都从新的一行开始。
b.元素的高度、宽度、行高都可设置。
c.元素宽度在不设置的情况下，默认宽度是的100%。
常用的块级元素:<div> <p> <h1>~<h6>
2-行内元素 display:inline
a.和其他元素都在一行；
b.元素的高度、宽度不可设置；
c.元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的行内元素：<a> <span> <br> <i> <em> <strong>
3-行内块级元素 display:inline-block
a.和其他元素都在一行上；
b.元素的高度、宽度可设置。
常用的行内块级元素：<img>
