实例
<!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> <br> <br> <strong>php中文网</strong> <!-- 加重语气的标签 --> <i>这是定义斜体字</i> <em>定义着重字</em> <del>定义删除字</del> <span>现价1999元</span><del>原价5999元</del> <pre>预格式化文本，内部换行 空格也会被输出</pre> 块级元素 ：div h1---h6 p 独占一行，对宽高属性值设置生效 行内元素：可以共存于一行 对宽高属性值设置不生效 <br> 行内块元素：结合了块级以及行内的特点：img <img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg" style="width:300px;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> <span style="width: 100px;height: 100px;background: pink;display:inline-block;">6</span> <div style="width: 100px;height: 100px;background: pink;display:inline-block;">1</div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例