HTML区块元素

HTML元素可分为块级元素和内联元素,这两种元素组合起来才成为一个网页

内联元素

在浏览器中不会以新行开始显示

如:<b>, <td>, <a>, <img>

区块元素

在浏览器中会以新行开始显示

如:<h1>,<p>,<table>,<ul>

HTML<span>元素

<span>元素是一个没有特定含义的内联元素,可用于文本的容器

一般用于同css一起使用来装饰部分文本

代码示例
<!--span元素示例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>span元素示例</title>
<style type="text/css">
.a{
font-size:30px;
color:red;
font-family:"宋体";
}
</style>
<body>
<h1>这是一个网页的标题</h1>
<span class="a">这是在内联元素中被装饰的文字</span>
</body>
</html>

HTML<div>元素

<div>元素是一个没有特定含义的块级元素,可以用来组合其它的HTML元素

<div>元素常用的用途就是给网页布局,前面我们说过用<table>也可以用来布局网页,但是<table>标签已经是被<div>元素取代了的,使用<div>元素来布局网页才是最正确的用法]

代码示例
<!--div元素示例-->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>块级元素示例</title>
<style type="text/css">
.a{
	background-color:#00BFFF;
	width:900px;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	border-radius:15px;
	text-align:center;
}
.b{
	width:900px;
	height:400px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
}
.c{
	background-color:#00BFFF;
	width:440px;
	height:400px;
	float:left;
	border-radius:15px;
	text-align:center;
}
.d{
	background-color:#00BFFF;
	width:440px;
	height:400px;
	float:right;
	border-radius:15px;
	text-align:center;
	}
.e{
	background-color:#00BFFF;
	margin-left:auto;
	margin-right:auto;
	border-radius:15px;
	width:900px;
	height:50px;
	margin-top:10px;
	text-align:center;
}
.font{
	font-family:"楷体";
	font-size:30px;
	}
}
</style>
</head>
<body>
<div class="a"><h1 class="a">网页标题</h1></div>
<div class="b">
	<div class="c"><span class="font">内容一</span></div>
	<div class="d"><span class="font">内容二</span></div>
</div>
<div class="e"><span class="font">底部内容</span></div>
</body>
</html>

上面代码可自行新建html文件将代码复制进去查看效果

总结

用块级元素和内联元素组合才能布置出一个像样的网页,特别是<div>元素,学会使用DIV+CSS之后我们就可以布置出一个精美的网页

版权声明:
作者:HONG
链接:https://www.honglog.com/209.html
来源:小洪博客
本站遵循cc共享许可协议:BY-NC-SA 4.0 转载请注明出处
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录