HTML
行内元素:a,b,span,button,input,img,label
行内元素和其他的行内元素都会在水平线上排列,处于同一行,不可设置width和height
行内元素实例
<body>
<!--定义超链接-->
<a href="">哈哈</a>
<a href="">哈哈</a>
<!--用于组合行内元素,没有固定的格式表现-->
<span>哈哈</span>
<span>哈哈</span>
<!--定义一个按钮-->
<button>按钮</button>
<button>按钮</button>
<!--用于收集用户信息-->
<input type="text" />
<input type="text" />
<!--规定粗体文本-->
<b>哈哈</b>
<b>哈哈</b>
</body>
块级元素:div,h1-h6,ul,li,table,th,tr,p,
块级元素独占一行,垂直向下排列
块级元素实例
<body> <a href="">哈哈</a> <a href="">哈哈</a> <span>哈哈</span> <span>哈哈</span> <button>按钮</button> <button>按钮</button> <input type="text" /> <input type="text" /> <b>哈哈</b> <b>哈哈</b> <label for="">哈哈</label> <label for="">哈哈</label> <!----> <!--可以把文档分割为独立的、不同的部分--> <div>哈哈</div> <div>哈哈</div> <!--定义段落--> <p>哈哈</p> <p>哈哈</p> <!--可定义标题--> <h1>哈哈</h1> <h2>哈哈</h2> <h3>哈哈</h3> <h4>哈哈</h4> <h5>哈哈</h5> <h6>哈哈</h6> <h1>奇葩新闻</h1> <!--定义无序列表--> <ul> <!--定义列表项目--> <li>xxx新闻</li> <li>xxx新闻</li> <li>xxx新闻</li> <li>xxx新闻</li> </ul> <!--表格--> <table border="1px"> <tr> <th>id</th> <th>usename</th> <th>sex</th> </tr> <!--行--> <tr> <!--列--> <td>0</td> <td>use0</td> <td>女</td> </tr> <!--第二行--> <tr> <td>1</td> <td>user1</td> <td>男</td> </tr> </table> </body>使行内元素转换为块级元素实例
<body> <span>哈哈</span> <span>哈哈</span> <b>哈哈</b> <b>哈哈</b> </body>
使用css修饰HTML完成转换
<style type="text/css">
span{
/*行内元素不可设置宽高,转换完成后可设置宽高*/
/*此元素将显示为块级元素，此元素前后会带有换行符*/
display: block;
}
b{
/*行内块元素,在同一行显示的块级元素*/
display: inline-block;
}
</style>
使块级元素转换为行内元素实例
<body> <p>呵呵</p> <p>呵呵</p> </body>
使用css修饰完成转换
<style type="text/css">
p{
/*默认。此元素会被显示为内联元素，元素前后没有换行符*/
display: inline;
}
</style>