HTML中的文本标签控制与图文混排是学习前端的基础，今天给大家介绍一下相关知识。
以下代码，实现图文混排，可用于大部分网站文章结构。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网-20180813作业</title>
<style type="text/css">
h1{
text-align: center;
line-height: 50px; /*定义行高*/
}
img{
width: 640px;
height: 352px;
}
div{
text-align: center;
}
p{
width: 640px;
display:inline-block;
text-indent:2em;
text-align: left;
}
</style>
</head>
<body>
<h1>i-Phone9基本确定，颜值高，售价亲民</h1>
<div>
<pre style="text-align:center;display:inline">乔布斯 2018年8月13日 </pre>
<img src="https://www.easyicon.net/api/resizeApi.php?id=1148804&size=16" style="width:16px;height:16px">
<a href="https://baike.baidu.com/item/%E5%8F%B2%E8%92%82%E5%A4%AB%C2%B7%E4%B9%94%E5%B8%83%E6%96%AF/85300?fromtitle=%E4%B9%94%E5%B8%83%E6%96%AF&fromid=4694726" target="_blank">乔布斯</a>
</div>
<div>
<img src="http://p3.pstatp.com/large/pgc-image/1533954436011c32706a180">
</div>
<div>
<p>i-Phone这样有情怀的手机，可以说每一款都是经典。2017年i-Phone十周年推出的i-PhoneX，虽说被网友各种吐槽刘海屏丑，但还是在国内众多手机产商的模仿一波接着一波。而继OPPO、VIVO也推出新款之后，也就结束了i-Phone X的刘海屏丑的局面了。</p>
<br>
<p>距离i-Phone九月份的发布会还有不到一个月了，i-Phone秋季发布会推出一款新机——i-Phone9。在性能方面，基本可以确定i-Phone9将采用i-Phone最新最强的A12处理器，这款心片比起当前市-场上所有的心片都更为强悍。比起现在高通最强骁龙845处理器性能上提高20％；并搭载着最新的iOS12系统。有了这两个硬件加系统的优势，i-Phone9在运行速度和稳定性上比现在的i-Phone X更好。</p>
<br>
<p>据悉，i-Phone9砍掉下巴和刘海，屏占比自然要比去年的i-Phone X高出许多。i-Phone9手机的机身还将会采用经典的玻璃设计，在手感上将会进一步的加强。大家还在好奇i-Phone9会不会延续刘海屏设计时，有消息却已经表示i-Phone9有可能不会再有刘海屏。拍照方面上，有可能搭载后置双1200万像素摄像头，支持光学防抖，前置摄像头上，i-Phone 9将搭载单枚1600万像素摄像头。</p>
<br>
<p>说再多也是猜测，不妨让我们期待9月的i-Phone发布会吧。初定是在12号发布i-Phone 9，同时售价很良心，i-Phone9的价格可能也会在5500左右，而且按照以往i-Phone发布的时间来看，i-Phone9或将会在9月12日左右问世！</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
以下为网页预览图片。
手抄代码：
