实例
<!DOCTYPE html> <html> <head> <title>文本控制</title> <meta charset="utf-8"> </head> <body> <h1>这是一个H1标签</h1> <h2>这个是H2标签</h2> <h3>这是H3标签</h3> <h4>这是H4标签</h4> <h5>这是H5标签</h5> <h6>这是H6标签</h6> <b>这是粗体标签</b> <p>习~近平总~书~记指出，全面建成小康社会、实现第一个百年奋斗目标，最艰巨的任务是脱贫攻坚，这是一个最大的短板，也是一个标志性指标。我们共~产党人从党成立之日起就确立了为天下劳苦人民谋幸福的目标。这就是我们的初心。打赢脱贫攻坚战，解决好贫困群众生~产生活问题，满足贫困群众追求幸福生活的基本需求，这是我们的目标，也是我们的庄严承诺，我们一定要兑现这一承诺。党的十八大以来，以习~近平~同志为核心的党中央把脱贫攻坚纳入“五位一体”总体布局和“四个全面”战略布局，摆到治国理政的重要位置，吹响了打赢脱贫攻坚战的进军号，脱贫攻坚取得了新的成就</p> <br> <strong>PHP中文网</strong><!-- 加重语气 --> <i>全面建成小康社会</i><!-- 斜体 --> <em>全面建成小康社会</em><!-- 着重表示 --> <del>定义删除字标签</del> <span style="background:pink;width:300px;height: 200px;">399</span><del>399</del> <pre>预格式 化文本 </pre> <p style="background:pink;width:300px;height: 200px;">123</p> <span>399</span> <!-- 块级元素（自带换行符）：DIV H1~H6 P独占一行对宽高属性值设置生效； 行内元素：共存一行不支持宽高设置 --> <!-- 行内块元素：结合了块级以及行内的特点 --> <img src="images/1.jpg" style="width: 200px;height:300px;"><span>123</span> 行内块级相互转换 display:inline将块级元素转化为行内元素； display: inline-block:将块级元素改为行内块级元素； display:block:将行内元素转化为块级元素； <div style="width:100px;height:100px;background:pink;display:inline;">1</div> <div style="width:100px;height:100px;background:pink;display: inline-block;">2</div> <span style="width:100px;height:100px;background:pink;display:block;">3</span> <span style="width:100px;height:100px;background:pink;display:inline-block;">4</span> <span style="width:100px;height:100px;background:pink;display:inline-block;">5</span> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄图片
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本控制</title>
<style type="text/css">
p{font-weight:bold;/*字体粗体*/
font-size: 30px;/*字体大小*/
font-family:楷体;/*定义字体*/
text-align:center;/*left:左 ;right: 右*/}
h1{text-align: center;
height: 40px;
background: pink;
line-height: 60px; /*设置H1离顶部的距离*/
}
span{font-weight: bold;
font-size:50px;
font-family: georgia;}
img{width:300px;height:400px;}
b{display:block;
width:300px;
height:40px;
background: pink;
overflow: hidden;/*溢出隐藏*/
margin-bottom: 100px;
}
b:hover{overflow: visible;}/*默认值，内容不会被修剪，元素会被呈现在元素框之外*/
</style>
</head>
<body>
<h1>PHP中文网</h1>
<P>PHP中文网</P>
<span style="color:#1955F1;">G</span>
<span style="color:#DB152E">o</span>
<span style="color:rgb(254,182,22);">o</span>
<span style="color:#1955F1;">g</span>
<span style="color:#09A514">l</span>
<span style="color:#DB152E">e</span>
<!-- 图文混排 -->
<br>
<p style="display: inline-block;width: 300px;height: 400px;">Finn Liu在北京的“硅谷”中心地带工作，每周工作60个小时，毫不夸张地说，支撑他的，是送到他办公桌上的外卖。他并不是一个人：午餐时间一到，穿着制服的送餐大军便来到他所在的办公楼，大声喊叫着数字，员工们则蜂拥而出领取他们订的面条、盒饭和沙拉。</p>
<img src="images/1.jpg">
<br><br>
<img src="images/1.jpg">
<b>Finn Liu在北京的“硅谷”中心地带工作，每周工作60个小时，毫不夸张地说，支撑他的，是送到他办公桌上的外卖。他并不是一个人：午餐时间一到，穿着制服的送餐大军便来到他所在的办公楼，大声喊叫着数字，员工们则蜂拥而出领取他们订的面条、盒饭和沙拉。</b>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄图片
实例
实例
<!DOCTYPE html>
<html>
<head>
<title>黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</title>
<style type="text/css">
img{display: block;
}
.left{ font-size:16px;
font-weight: bold;}
p{width: 600px;
font-weight:bold;
}
.lei{text-align: right;}
</style>
</head>
<body>
<h2 style="font-weight: bold;">黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</h2>
<pre style="color: #ccc;font-size: 8px;">2018-8-20 来源：PHP中文网</pre>
<b>原标题黄晓明出借账户被卷股票操纵案 知情人：账户未冻结</b>
<img src="images/2.jpg">
<pre class="left"> 黄晓明（资料图）</pre>
<b>（来源财新报）</b>
</div>
<p> 一则18亿元的股票操纵案，让影视明星黄晓明置于舆论漩涡之中。<br>
根据证监会披露的消息，高勇利用14个证券个人账户及2个信托计划账户，以连续封涨停的方式抬高"精华制yao"股价，之后迅速反向卖出，蓄意操纵市~场，最后获利高达近9亿元。因此证监会决定，没收高勇违法所得的8.97亿元，并处以等额罚款，该案也成为了证监会查处操纵单只股票获利金额最高的案件。而在罚单中被证监会提及的名为"黄某明"的个人账户，被确认为正是影视明星黄晓明。<br>
舆论惊涛骇浪，黄晓明两次发表声明。<br>
第一则声明，黄晓明撇清了与高勇的关系，表示不认识违法行为当事人，并表示未曾受到过任何与股票相关的处罚，未接入过任何与股票有关的调查。<br>
第二则声明则回应了四大核心问题，一是表示没有参与任何股票操控，二是不认识高勇，只是委托理财，三是从未投资长生生物，四是本次事件确实是因他理财不谨慎所导致。<br>
黄晓明在声明中也表示，本次事件确实是因他理财不谨慎所导致，“对此次事件给大家造成的不良影响深表歉意，我一定从中吸取教训”，“最后，我要特别说明一点，此事是因我将账户交由母亲打理而将她牵涉其中，由此给母亲带来困扰与担忧，作为儿子，我愿意也必须承担一切舆论责任。”</p>
<p class="lei">责任编辑：小黄</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行实例图片
总结：主体了解行内元素和块元素的区别和转换，及字体位置宽度等设置
块级元素（自带换行符）：DIV H1~H6 P独占一行对宽高属性值设置生效；
行内元素：共存一行不支持宽高设置；
行内块元素：结合了块级以及行内的特点 ；