其他分享
首页 > 其他分享> > web前端学习-day05 html实体转义符+html块级标签和行级标签

web前端学习-day05 html实体转义符+html块级标签和行级标签

作者:互联网

web前端学习总页面

网页基础布局

html

html基础结构

html基础标签

htm标签属性

html文本格式化标签

html实体转义符+html块级标签和行级标签


1.html实体转义符

 列如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.&nbsp; 代表 空格 
		在输单纯打空格的时候 只能编译一个空格 如果需要多个空格输入&nbsp;-->
		<p>     werwr    tger</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;werwr&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tger</p>
	<p>1&times;2</p>
	</body>
</html>

运行结果

2.块级元素和行级元素

2.1 块级元素和行级元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块级标签和行级标签</title>
	</head>
	<body>
		<!-- 块级标签:(相当执行了display:block:操作
					1.独占一行
					2.宽度,高度可控,若没有设置,默认铺满整行
					3.可以包含块级标签和行级标签-->
					<div>div</div>
					<p style="width: 300px;height:50px;background: gold;">p</p>
					
		<!-- 行级标签:(相当执行了display:inline:操作 dispaly是css语句后续会学到
					1.不会独占一行,与相邻行级标签同占一行,直到行被占满,自动掉到下一行
					2.宽度,高度不可控
					3.只可以包含行级标签-->
					<strong>strong</strong>
					<span style="width: 300px;height:50px;background: gold;">span</span>
    </boby>
</html>

运行结果

2.2块级标签转为行级标签

<!-- 块级标签转为行级标签 
						display: inline-->
					<p style="width: 300px;height:50px;background: gold;display: inline;">p</p>

 运行结果

 

2.3行级标签转为块级标签

<!-- 行级标签转为块级标签 
					display: block-->
		<span style="width: 300px;height:50px;background: gold;display: block;">span</span>

运行结果


完整学习代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块级标签和行级标签</title>
	</head>
	<body>
		<!-- 块级标签:(相当执行了display:block:操作
					1.独占一行
					2.宽度,高度可控,若没有设置,默认铺满整行
					3.可以包含块级标签和行级标签-->
					<div>div</div>
					<p style="width: 300px;height:50px;background: gold;">p</p>
					
		<!-- 行级标签:(相当执行了display:inline:操作 dispaly是css语句后续会学到
					1.不会独占一行,与相邻行级标签同占一行,直到行被占满,自动掉到下一行
					2.宽度,高度不可控
					3.只可以包含行级标签-->
					<strong>strong</strong>
					<span style="width: 300px;height:50px;background: gold;">span</span>
					
		<!-- 块级标签转为行级标签 
						display: inline-->
					<p style="width: 300px;height:50px;background: gold;display: inline;">p</p>
		<!-- 行级标签转为块级标签 
			display: block-->
		<span style="width: 300px;height:50px;background: gold;display: block;">span</span>
	</body>
</html>

 

标签:块级,行级,span,标签,html,nbsp
来源: https://blog.csdn.net/starbiu/article/details/122060626