HTML基础4--标题和段落

作者: 伊洛的小屋 | 来源:发表于2020-09-06 14:17 被阅读0次
    标题和段落

    文本通常都是由标题和段落组成
    段落是通过 <p>元素标签进行定义的

    <p>公众号:伊洛的小屋</p>
    

    标题是通过“标题标签”进行定义的

    <h1>标题:个人网站:https://yiluotalk.com</h1>
    

    <h1> 表示主标题(the main heading),<h2> 表示二级子标题(subheadings),<h3>表示三级子标题(sub-subheadings)

    输出内容格式化

    格式化的内容才适合人类去阅读,比如一首诗,没有段落格式化就很难阅读

    《浣溪沙》宋代:晏殊一向年光有限身,等闲离别易销魂,酒筵歌席莫辞频。满目山河空念远,落花风雨更伤春,不如怜取眼前人。片刻的时光,有限的生命,宛若江水东流,一去不返,深感悲伤。于是,频繁的聚会,借酒消愁,对酒当歌,及时行乐,聊慰此有限之身。若是登临之际,放眼辽阔河山,突然怀思远别的亲友;就算是独处家中,看到风雨吹落了繁花,更令人感伤春光易逝。不如在酒宴上,好好爱怜眼前的人。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>公众号:伊洛的小屋</title>
    </head>
    <body>
    <h1>《浣溪沙·一向年光有限身》</h1>
    <h3>宋代:晏殊</h3>
    <p>一向年光有限身,等闲离别易销魂,酒筵歌席莫辞频。</p>
    <p>满目山河空念远,落花风雨更伤春,不如怜取眼前人。</p>
    <h2>译文:</h2>
    <p>片刻的时光,有限的生命,宛若江水东流,一去不返,深感悲伤。于是,频繁的聚会,借酒消愁,对酒当歌,及时行乐,聊慰此有限之身。</p>
    <p>若是登临之际,放眼辽阔河山,突然怀思远别的亲友;就算是独处家中,看到风雨吹落了繁花,更令人感伤春光易逝。不如在酒宴上,好好爱怜眼前的人。</p>
    </body>
    </html>
    

    打开浏览器


    列表
    • 无序列表
      每份无序的清单从 <ul>元素开始,用 <li> 元素把每个列出的项目单独包裹起来
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>中国一线城市</title>
    </head>
    <body>
    <ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>
    </ul>
    </body>
    </html>
    
    • 有序列表
      按照项目的顺序列出来除了需要用<ol>元素将所有项目包裹,来看看炒菜的步骤:
      锅包肉的做法步骤
      1.切姜丝 ...
      2.大蒜切片 ...
      3.葱撕成细丝 ...
      4.肉切片,切片后用刀背在肉片上敲几下,用盐,鸡精腌制肉片5分钟 ...
      5.用淀粉和水对肉片进行挂糊 ...
      6.起油锅,油温五成热,把肉片放入锅中,一片片快速放入,不要一下子倒入锅中,一下子倒入肉片会粘在一起。 ...
      7.炸约1分钟后,可以用锅铲翻动,并防止肉片之间粘连
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>锅包肉的作法</title>
    </head>
    <body>
    <ol>
      <li>切姜丝 ...</li>
      <li>大蒜切片 ...</li>
      <li>葱撕成细丝 ...</li>
      <li>肉切片,切片后用刀背在肉片上敲几下,用盐,鸡精腌制肉片5分钟 ...</li>
      <li>用淀粉和水对肉片进行挂糊 ...</li>
      <li>起油锅,油温五成热,把肉片放入锅中,一片片快速放入,不要一下子倒入锅中,一下子倒入肉片会粘在一起。 ....</li>
      <li>炸约1分钟后,可以用锅铲翻动,并防止肉片之间粘连</li>
    </ol>
    </body>
    </html>
    
    • 嵌套列表
      将一个列表嵌入到另一个列表也是OK 的,比如:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>锅包肉的作法</title>
    </head>
    <body>
    <ol>
      <li>切姜丝 ...</li>
      <li>大蒜切片 ...</li>
      <li>葱撕成细丝 ...</li>
      <li>肉切片,切片后用刀背在肉片上敲几下,用盐,鸡精腌制肉片5分钟 ...</li>
      <li>用淀粉和水对肉片进行挂糊 ...</li>
      <li>起油锅,油温五成热,把肉片放入锅中,一片片快速放入,不要一下子倒入锅中,一下子倒入肉片会粘在一起。 ....</li>
        <ul>
          <li>如果想要口感酥脆需要油炸xx分钟</li>
          <li>如果想要口感松软需要油炸xxxx分钟</li>
        </ul>
      <li>炸约1分钟后,可以用锅铲翻动,并防止肉片之间粘连</li>
    </ol>
    </body>
    </html>
    

    欢迎下方【戳一下】【点赞】
    Author:伊洛Yiluo
    愿你享受每一天,Just Enjoy !

    相关文章

      网友评论

        本文标题:HTML基础4--标题和段落

        本文链接:https://www.haomeiwen.com/subject/bunusktx.html