一.标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素:
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素:
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块级元素:
<img> <input>
块级元素特点:display:block
1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.自己独占一行.
2.元素的高度,宽度,行高,顶边距和底边距都可以设置
3.元素的宽度在不设置的情况下,默认是本身父容器的的宽度.
行内元素(内联元素)的特点:display:inline
1.和其他元素在同一行上
2.元素的高度,宽度,顶边距和底边距都不可以设置
3.元素的宽度就是它包含的文字或者图片的宽度,不可改变
行内块级元素:display:inline-block
1.和其他元素都在一行上
2.元素的高度,宽度,行高,顶边距和底边距都可以设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签分类</title> </head> <body> <div class="wapper"> <!--块状元素: <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li> --> <div class="left"> 我的学校 <div>我的区域 <div style="500px;height:100px">我的爱好 </div> <ul> <li> <h2>抽烟</h2> </li> <li> <ol> <li>喝酒</li> <li>烫头</li> </ol> </li> </ul> </div> </div> <div class="right"> <!-- 行内元素:<a> <span> <br> <i> <em> <strong> <label> --> <a href="#">顶部</a> <a href="https://www.baidu.com" target="_blank">百度</a> </div> <div class="inline-block"> <!-- img input --> <img src="./homesmall.png" alt="加载失败时显示我" title="浏览时显示我"> <!-- <img src="./homesmall2.png" alt="加载失败时显示我" title="浏览时显示我"> --> 用户名: <input type="text" name="user" style="100px;height:50px"> </div> </div> </body> </html>
二.嵌套规则
1.块元素可以包含内联(行内)元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️ <a href=”#”><span></span></a> ✔️ <span><div></div></span> ❌
2.块级元素不能放在p标签里面，例如:
<p><ol><li></li></ol></p> ❌ <p><div></div></p> ❌
3.有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
4.li元素可以嵌入ul，ol，div等标签
<ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul>