前端--A_3--HTML区块_块元素与行内元素

第一节 块元素

块元素通常用于组织和布局页面的主要结构和内容，如：段落，标题，列表，表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块

1. 块级元素通常会从新的行开始，并占据整行的宽度，因此他们会在页面上呈现为一块独立的内容块。
2. 可以包含其他块级元素和行内元素。
3. 常见的块级元素包括"<div>','<p>',到'<h6>','<ul>','<ol>','<li>','<table>','<form>'等。

第二节 行内元素

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，强调文本等。

1. 行内元素通常在同一行内呈现，不会独占一行。
2. 它们只占据其内容所需的宽度，而不是整行的宽度。
3. 行内元素不能包含块级元素，但可以包含其他行内元素。
4. 常见的行内元素包括"<span>","<a>","<strong>","<em>",'<img>',"<br>","<input>"等。

第三节 练习代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML区域</title>

</head>

<body>

<div class="nav">

<a href = "#">链接1</a>

<a href = "#">链接2</a>

<a href = "#">链接3</a>

<a href = "#">链接4</a>

</div>

<div class="content">

<h1>文章标题</h1>

<p>文章内容</p>

<p>文章内容</p>

<p>文章内容</p>

<p>文章内容</p>

</div>

<span> 这是第1个span标签</span>

<span> 这是第2个span标签</span>

<span> 这是第3个span标签</span>

<span> 这是第4个span标签</span>

<hr>

<span>链接点击这里 <a href = "#">链接</a></span>

</body>

</html>

第四节 显示结果