实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本控制</title> <style type="text/css"> </style> </head> <body> <!-- h1~h6为标题标签 顺序从大到小 --> <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h5> <h6>这是一个h6标签</h6> <b>这是粗标签</b> <!-- 字体加粗标签 --> <p>坚决打赢脱贫攻坚战，<br><!-- 换行符 -->让贫困人口和贫困地区同全国一道进入全面小康社会是我们党的庄严承诺。党的十八大以来，扶贫足迹遍布全国，<br>对坚决打赢脱贫攻坚战作出重要战略部署。党建网微平台整理了总书记关于脱贫攻坚的部分精彩论述，从说“不”的角度，深入体会总书记对脱贫攻坚工作的重要指示精神。</p> <!-- p是段落标签，且标签独占一行 --> <storong>加重语气标签</storong> <!-- 加重语气，其实就是粗体 --> <br> <i>这是斜体</i><!-- 字体斜体标签 --> <br> <em>着重字</em> <br> <del>定义删除字</del> <!-- 定义删除标签 以下面为例 --> <br> 现价：<span>399元</span> 原价：<del>499元</del> <br> <pre>预定义格式文本</pre><!-- 可输出 控制 换行符 预计格式文本 --> <br> <!-- 块级标签的讲解 --> 块级元素：div h1~h6 p<!-- 独占一行 对宽高值设置生效 如例子 --> <p style="background:blue;width:200px;height:200px;">我是块标签</p> 行内元素：span i em <!-- 特点：可以共存在一行，对宽高属性值设置不生效 如例子 --> <br> <span style="color:green;width:20px;height:200px;">我是行内元素</span> <br> 行内块元素： <!-- 例子如下 --> <br> <img style="width:200px;height:200px;"src="https://bpic.588ku.com/element_water_img/18/07/19/a9cea690a7c5580cf72a651f360cab3a.jpg"><br><span>logo</span> <br> 行内块级元素相互转换： <br> <!-- display:inline:将块级转换为行内 宽高无效 --> <div style="background: red;display:inline;">11</div> <!-- display:inline-block:将块级元素转换为行内块元素 可与其他元素并排 并且能设置宽高 --> <div style="background:red;width:100px;height:50px; display:inline-block;">22</div> <!-- display：block：将行内元素转换为块级元素 设置宽高 独占一行 --> <span style="background: red;width:100px;height:50px;display:block;">33</span> <span style="background: red;width:100px;height:50px;display:block;">33</span> <br> <pre> 总结： display:inline:将块级转换为行内 宽高无效 display:inline-block:将块级元素转换为行内块元素 可与其他元素并排 并且能设置宽高 display：block：将行内元素转换为块级元素 设置宽高 独占一行 三种元素分类 行内 块级 行内块级 </pre> <!-- css行内元素 文本的控制 --> <p>php中文网</p> <br> <!-- 制作谷歌logo --> <span style="color: #0388F1">G</span> <span style="color: rgb(245,28,39)">o</span> <span style="color: #FFE80E">o</span> <span style="color: #0388F1">g</span> <span style="color: #39FF1B">l</span> <span style="color: #FFE80E">e</span> <!-- 图文混排 --> <br> <p style="display:inline-block;width:300px;height:400px;"> 据Engadget消息，谷歌可能让多款Chromebook支持Windows 10系统。谷歌正在研发一种新功能Campfire，它可让Pixelbook同时支持Chrome OS和Windows 10。前提是笔记本硬件必须达到运行Windows 10的最基本标准。此外安装Windows10至少需要40GB存储空间，而目前Chromebook存储空间都不是很大。 虽然谷歌总是宣称Chrome OS能带来更简单、更安全的使用体验，但Chromebook的销量显然不及其他几款Windows系统的主流笔记本，因此Camfire也许可以视为谷歌对那些想在Chromebook上使用Windows的用户的一种妥协。 <img src="http://y2.ifengimg.com/b2677775d3fcae2d/2015/0928/re_5608b9f5b76ed.jpg"> <br> <img src="http://y2.ifengimg.com/b2677775d3fcae2d/2015/0928/re_5608b9f5b76ed.jpg"> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码:
![5~[OFAG)1[1N_~W}4A]0]QO.png](https://img.php.cn//upload/image/531/554/292/1534211985272403.png "1534211985272403.png")
![J$SD)RFA2GB]$$Y8~((C$Q3.png](https://img.php.cn//upload/image/953/764/529/1534212031140566.png "1534212031140566.png")
