实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"><!-- 放在首位，第一时间告诉浏览器文档编码 --> <title>文本控制</title> </head> <body> <!-- h标签：h1到h6依次减小 块级元素--> <h1>这是一个h1标签</h1> <h2>这是一个h2标签</h2> <h3>这是一个h3标签</h3> <h4>这是一个h4标签</h4> <h5>这是一个h5标签</h5> <h6>这是一个h6标签</h6> <b>这是一个粗体b标签</b><!-- 加粗 --> <p>这是一个段落p标签</p><!-- 定义段落 --> <br><!-- 换行 --> <strong>加重语气：其实就是粗体</strong><br> <i>斜体</i><br> <p style="background: grey;">PHPCN</p> <em>定义着重字</em><br> <del>定义删除字</del><br> <pre>预格式化文本</pre><!--按原样输出 可输出空格和换行 --> <!-- 块级元素：独占一行可以设置宽高属性 行内元素：可以共存不能设置宽高 行内块：结合了块和行内特点，既能设置宽高也能多个共存与一行 --> <img src="images/1.jpg" style="width: 500px;"><!-- 行内块元素 --> <div style="width: 100px;height: background: blue;display: inline;">1</div><!-- inline块转成行 --> <div style="width: 100px;height: background: pink;display: inline-block;">2</div><!-- inline-block转化成行内块元素 --> <span style="width: 100px;height: 100px;background:yellow;display: block;">a</span><!-- 转化成块级元素 --> <span>b</span> <span style="width: 100px;height: 100px;background:red;display: inline-block;">c</span><!-- 转化成行内块元素 --> <span style="width: 100px;height: 100px;background:green;display: inline-block;">d</span><!-- 转化成行内块元素 --> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
块级元素：div h1~h6 p 独占一行，自带换行符.对宽高属性值设置生效 ,默认浏览器100%宽度
行内元素：可以共存于一行，对宽高属性值设置不生效.
行内块元素：结合了块级以及行内的特点，宽高属性生效，并存在于一行
