第2天:文本标签和 div

咱们今天来学习下网页开发中常用的文本标签,比如标题标签、段落标签,还有加粗、斜体这些。同时咱们也要了解一下<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标签

<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>进行页面布局

通过合理使用<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>标签后,你已经迈出了网页开发的第一步!坚持学习,不断探索✨💻🚀

下一个 超链接和图像链接