Heim > Artikel > Web-Frontend > Eine kurze Einführung in Blockelemente und Inline-Elemente in HTML (Codeanalyse)
Eine kurze Einführung in Blockelemente und Inline-Elemente in HTML (Codeanalyse)
- 不言Original
- 2018-08-22 14:23:222564Durchsuche
Dieser Artikel bietet Ihnen eine kurze Einführung (Code-Analyse) über Blockelemente und Inline-Elemente. Ich hoffe, dass er für Sie hilfreich ist.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>demo</title>
<!--
<style type="text/css">
h1{
color: red;
}
</style>
-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<h1>这是一个漂亮的网页</h1>
<!--
块元素，会独占一整行；
div,p,h1,h2,h3,h4,h5,h6 都是块元素；
div标签没有任何语义；是一个纯粹的块，不会有任何默认样式；
div元素主要对我们的页面进行布局；
ps：p元素不能包含任何块元素；
-->
<div style="background-color: red; width: 200px;">
我是一个快元素
</div>
<div style="background-color: yellow;width: 400px;">
我是一个快元素
</div>
<hr />
<!--
内联元素：只会占用自身的大小，一行占满后自动换行；、
常见的内联元素：
a,img,iframe,span
span也没有任何语义，是专门用来选中文字设置样式；
让span圈一段字，为这段文件进行设置样式；
一般会在块元素中放一个span元素；而反过来不行；
ps：a元素可以包含任意元素；除了a本事；
-->
<span>
I am is a spane
</span>
<span>
I am is a spane
</span>
</body>
</html>Verwandte Empfehlungen:
HTML__Inline-Elemente und Blockelemente
Das obige ist der detaillierte Inhalt vonEine kurze Einführung in Blockelemente und Inline-Elemente in HTML (Codeanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn