HTML标签分类以及常用标签

HTML标签
html标签又叫作html元素,可以分为:块级元素、行内块元素、内联元素。
块级元素
块级元素就是本身属性为display:block的元素,块级元素独占一行,每一个块级元素都会新开辟一行并从上到下进行布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>圣耀救赎</h1>
		<p>夜语黑瞳</p>
	</body>
</html>

HTML标签分类以及常用标签_第1张图片
可以看到,第一个标签所在行的后面还有空间,但是第二个标签并没有在它后面接着布局,而是新开辟一行。
行内块元素
可以和其它元素在同一行中,但是自己的宽和高是可以设置的。

<!-- 块级元素 -->
		<h1>圣耀救赎</h1>
		<p>夜语黑瞳</p>
		<!-- 行内块元素 -->
		<img src="img/1.jpg" style="height: 100px; width: 100px;"/>
		<input style="width: 60px; height: 100px;" />

HTML标签分类以及常用标签_第2张图片
可以看到,行内块元素不像块级元素一样新开一行,而是可以和别的元素在同一行中。可以通过设置宽和高来改变大小。
行间元素
行间元素也可以和其它行元素在一起,无法设置宽高,根据内容确定高低。

<!-- 块级元素 -->
		<h1>圣耀救赎</h1>
		<p>夜语黑瞳</p>
		<!-- 行内块元素 -->
		<img src="img/1.jpg" style="height: 100px; width: 100px;"/>
		<input style="width: 60px; height: 100px;" />
		<!-- 行间元素 -->
		<span style="height:80px;width:80px;background-color:red;">飞花逐月</span>
		<a href="http://www.baidu.com" style="height:800px;width:80px;background-color:red;">超新星核爆</a>

HTML标签分类以及常用标签_第3张图片
在代码中修改宽高无法改变大小。

你可能感兴趣的:(前端,html5,标签)