一、诗歌小练习

由上图的小练习我们可以看到，红色框和黄色框都是标题标签，而每个标题下面的段落是用了段落标签，那么我们用代码来演示一下。

<body>
    <h1>诗歌</h1>
    <h2>《面朝大海，春暖花开》</h2>
        <p>从明天起，</p> 
   　　 <p>做一个幸福的人</p>
   　　 <p>喂马，劈柴，周游世界</p>
   　　 <p>从明天起，</p>
        <p>关心粮食和蔬菜</p>
      　<p>我有一所房子，</p>
      　<p>面朝大海，春暖花开</p>
      　<p>从明天起，和每一个亲人通信</p>
      　<p>告诉他们我的幸福</p>
      　<p>那幸福的闪电告诉我的</p>
      　<p>我将告诉每一个人</p>
      　<p>给每一条河每一座山取一个温暖的名字</p>
      　<p>陌生人，我也为你祝福</p>
      　<p>愿你有一个灿烂的前程</p>
      　<p>愿你有情人终成眷属</p>
      　<p>愿你在尘世获的幸福</p>
      　<p>我也愿面朝大海，春暖花开</p>
    <h2>《远和近》</h2>
        <P>你，</P>
        <P>一会看我，</P>
        <P>一会看云。</P>
        <P>我觉得，</P>
        <P>你看我时很远，</P>
        <P>你看云时很近。</P>　
</body>

二、文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。 标签语义: 突出重要性, 比普通文字更重要。

语义	标签	说明
加粗	< strong>< /strong>或 < b>< /b>	更推荐使用< strong>标签加粗语义更强烈
倾斜	< em>< /em>或< i>< /i>	更推荐使用< em>标签加粗语义更强烈
删除线	< del>< /del>或< s>< /s>	更推荐使用< dei>标签加粗语义更强烈
下划线	< ins>< /ins>或< u>< /u>	更推荐使用标签加粗语义更强
我们用代码演示一下

<body>
    <p>我是<strong>加粗</strong>的文字</p>
    <p>我是<b>加粗</b>的文字</p> 
    <p>我是<em>倾斜</em>的文字</p>
    <p>我是<i>倾斜</i>的文字</p>
    <p>我是<del>删除</del>的文字</p>
    <p>我是<s>删除</s>的文字</p>
    <p>我是<ins>下划线</ins>的文字</p>
    <p>我是<u>下划线</u>的文字</p>
</body>

三、 div和span标签

< div > 和 < span> 是没有语义的，它们就是一个盒子，用来装内容的。

    <div> 这是头部 </div>
    <span> 今日天气 </span>

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。 特点：

1. < div> 标签用来布局，但是一行只能放一个< div>。大盒子

2. < span> 标签用来布局，一行上可以多个 < span>。小盒子

我们可以用代码来演示一下< div>标签:

<body>
    <div>我是一个div标签，我一个人单独占一行</div>
    11.6
    <div>我是一个div标签，我一个人单独占一行</div>
    11.6
</body>

我们可以看到，div的确是一个大盒子，单独占一行。

我们再用代码演示一下标签：

<body>
    <div>我是一个div标签，我一个人单独占一行</div>
    <div>我是一个div标签，我一个人单独占一行</div>
    <span>QQ</span>
    <span>微信</span>
    <span>CSDN</span>
</body>

通过对比，我们可以很清楚的知道上述所得出的结论：

< div> 标签用来布局，但是一行只能放一个< div>。大盒子

< span> 标签用来布局，一行上可以多个 < span>。小盒子

好啦，今天就到这里，下次再更~

HTML入门零基础教程（四）

一、诗歌小练习

二、文本格式化标签

三、 div和span标签