实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </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> <br> <strong>php中文网</strong> <i>坚决打赢脱贫攻坚战</i> <em>定义着重字</em> <del>定义删除字标签</del> <span style="dipaly: ;background: pink;height: 200px;width: 300px;">399元</span><del>499</del> <pre>与格 式 化文本 </pre> <p style="background: #ccc;height: 200px;width: 300px;">123</p> <span>399元</span> <!-- 块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效（默认100%）； 行内元素：可以共存于一行 不可以设置宽高； 行内块级元素：结合了块级以及行内的特点； --> <img style="height: 256px;width: 200px;" src="images/1.jpeg"><span>123</span> <hr> <!-- 行内块级相互转换: display:inline 将块级元素转换为行内元素; display:inline-block ;将块级元素转换为行内元素; display:block 将块级元素转换为行内元素; --> <div style="height: 100px; width: 100px;background: #82d5e0;display: inline; ">1</div> <div style="height: 100px; width: 100px;background: #82d5e0;display:inline-block; ">2</div> <hr> <span style="height: 100px; width: 100px;background: #82d5e0;display:block; ">3</span> <hr> <span style="height: 100px; width: 100px;background: #82d5e0;display:inline-block;">4</span> <span style="height: 100px; width: 100px;background: #82d5e0;display:inline-block;">5</span> </body> </html> <div> </div>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
重点：
块级元素：div h1~h6 p 独占一行 对宽高属性值设置生效（默认100%）；
行内元素：可以共存于一行 不可以设置宽高；
行内块级元素：结合了块级以及行内的特点；
display:inline 将块级元素转换为行内元素;
display:inline-block ;将块级元素转换为行内元素;
display:block 将块级元素转换为行内元素;
