咱们今天来学习下网页开发中常用的文本标签,比如标题标签、段落标签,还有加粗、斜体这些。同时咱们也要了解一下<div>标签,知道它是干啥的,怎么用它来布局页面。
标题标签和段落标签昨天已经说过了,今天就不说了
要让文字显示为粗体,可以使用<strong>标签或<b>标签;要显示为斜体,可以使用<em>标签或<i>标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本标签</title>
</head>
<body>
<p>这是<strong>粗体</strong>文字,这是<em>斜体</em>文字。</p>
</body>
</html>
<div>标签是一个通用的块级容器,用来将内容分组,并且可以用来进行页面布局。它本身不会添加任何样式,但可以通过CSS来设置样式,实现页面布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div</title>
</head>
<body>
<div>
<p>这是放在div里面的一段文字。 </p>
</div>
</body>
</html>
通过合理使用<div>标签,我们可以创建出更有条理的页面结构。比如,将网页分成头部、导航、主体和底部等不同区域,然后用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落</title>
</head>
<body>
<div class="header">
<h1>这是头部</h1>
</div>
<div class="nav">
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
</ul>
</div>
<div class="main">
<p>这是主体内容。</p>
</div>
<div class="footer">
<p>这是底部信息。</p>
</div>
</body>
</html>
学习了文本标签和<div>标签后,你已经迈出了网页开发的第一步!坚持学习,不断探索✨💻🚀