HTML

Elements in line: a, b, span, button, input, img, label

Inline elements and other inline elements will be arranged on the horizontal line, on the same line, width and height cannot be set

Inline element instance

<body>
                <!--Define hyperlinks-->
		<a href="">哈哈</a>
		<a href="">哈哈</a>
                <!--For combining inline elements, there is no fixed format representation-->
		<span>Haha</span>
		<span>Haha</span>
                <!--Define a button-->
		<button>按钮</button>
		<button>按钮</button>
                <!--Used to collect user information-->
		<input type="text" />
		<input type="text" />
                <!--Specify bold text-->
		<b>Haha</b>
		<b>Haha</b>
	</body>

Block-level elements: div, h1-h6, ul, li, table, th, tr, p,

Block-level elements have a line of their own and are arranged vertically downward

block-level element instance

	<body>
		<a href="">哈哈</a>
		<a href="">哈哈</a>
		<span>Haha</span>
		<span>Haha</span>
		<button>按钮</button>
		<button>按钮</button>
		<input type="text" />
		<input type="text" />
		<b>Haha</b>
		<b>Haha</b>
		<label for="">哈哈</label>
		<label for="">哈哈</label>
		<!---->
		
		<!--You can split the document into separate, different parts-->
		<div>Haha</div>
		<div>Haha</div>
		<!--Define Paragraph-->
		<p>Haha</p>
		<p>Haha</p>
		<!--Definable title-->
		<h1>Haha</h1>
		<h2>Haha</h2>
		<h3>Haha</h3>
		<h4>Haha</h4>
		<h5>Haha</h5>
		<h6>Haha</h6>
		<h1>Wonderful News</h1>
		<!--Define unordered list-->
		<ul>
			<!--Define list items-->
			<li>xxx news</li>
			<li>xxx news</li>
			<li>xxx news</li>
			<li>xxx news</li>
		</ul>
		<!--Form-->
		<table border="1px">
			<tr>
				<th>id</th>
				<th>usename</th>
				<th>sex</th>
			</tr>
			<!--line-->
			<tr>
				<!--column-->
				<td>0</td>
				<td>use0</td>
				<td>女</td>
			</tr>
			<!--Line 2-->
			<tr>
				<td>1</td>
				<td>user1</td>
				<td>男</td>
			</tr>
		</table>	

	</body>

Convert inline element to block-level element instance

<body>
		<span>Haha</span>
		<span>Haha</span>
		<b>Haha</b>
		<b>Haha</b>
	</body>

Use css to decorate HTML to complete the conversion

<style type="text/css">
	span{
		/* The width and height of the inline element cannot be set, and the width and height can be set after the conversion is completed*/
		/* This element will be displayed as a block-level element with line breaks before and after this element */
		display: block;
	}
	b{
		/* Inline block elements, block-level elements displayed on the same line */
		display: inline-block;
	}
</style>

Make a block-level element into an inline element instance

<body>
		<p>Hehe</p>
		<p>Hehe</p>
	</body>

Use css decoration to complete the conversion

<style type="text/css">
        p{
	        /*default. This element will be displayed as an inline element without line breaks before and after the element */
		display: inline;
	}
</style>

Inline and block-level elements