Day03 : 常用標籤(一) 標題標籤、段落標籤

2018 iT 邦幫忙鐵人賽

DAY 3

Modern Web

從零開始的網頁設計系列第 3 篇

2018鐵人賽段落標籤換行標籤標題標籤標籤

樂樂

2017-12-17 00:54:42

6998 瀏覽

段落、換行、標題

段落標籤以及換行標籤

段落標簽 : 
換行標籤 :  

什麼是段落標籤呢？就跟他的名稱一樣其實就是用來分段的
那換行標籤呢？就是換行

那為什麼需要這兩位仁兄呢？
以往我們寫文章在換行的時候都是按Enter就好
但是你自己實際去寫會發現這在網頁裡根本沒用！

實例

<body>
 我是打醬油的
 QQQ
</body>

結果

你會發現，我在程式裡面的確是將這兩行文字換行了，但是在網頁裡他根本沒用
所以需要使用  以及  

實例

<p>第一個段落</p>
<p>第二個段落<br>我被換行了</p>
我只是打醬油用文字QQ

結果

我們會發現在第一個段落以及第二個段落中間有一段空行
也就是因為我們使用段落標籤的關係所以他被換了兩行
那我們看我被換行了只被換了一行

Emmet技巧分享：打上標籤的名稱後直接按 tab 就可以出現完整的開始與結束標籤囉

標題標籤

h1 h2 h3 h3 h5 h6

那何謂標題標籤呢？
其實他們最大的差別就在於字體大小XD
h1最大，h6最小，但其實字體大小都是可是可以利用CSS3去做修改的
那通常我們會怎麼使用呢？
我們在網頁裡一定會有最重要次要的標題對吧？
所以我們會利用重要性來選用

那我們就來實際運用吧

一樣是寫在<body> </body> 裡

實例


<body>
  <h1>我是h1標籤</h1>
  <h2>我是h2標籤</h2>
  <h3>我是h3標籤</h3>
  <h4>我是h4標籤</h4>
  <h5>我是h5標籤</h5>
  <h6>我是h6標籤</h6>
</body>

是不是很簡單呢？那讓我們結合今天講的東西來做一個簡單的例子

<body>
  <h1>聲聲慢</h1>
  <h3>李清照</h3>
  <p>尋尋覓覓，冷冷清清，淒淒慘慘慼慼。
    <br> 乍暖還寒時候，最難將息。
    <br> 三杯兩盞淡酒，怎敵他、晚來風急？
    <br> 雁過也，正傷心，卻是舊時相識。
  </p>
  <p>滿地黃花堆積，憔悴損，如今有誰堪摘？
    <br>守著窗兒，獨自怎生得黑？
    <br>梧桐更兼細雨，到黃昏、點點滴滴。
    <br>這次第，怎一個、愁字了得！
  </p>
</body>

想到就更新專業樂樂
有任何問題都歡迎一起提出來討論>_O