iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

段落、換行、標題


段落標籤以及換行標籤

段落標簽 : <p></p>
換行標籤 : <br>

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

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

實例

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

結果

https://ithelp.ithome.com.tw/upload/images/20171217/20104423O2q7s0GCQZ.png
你會發現,我在程式裡面的確是將這兩行文字換行了,但是在網頁裡他根本沒用
所以需要使用 <p></p> 以及 <br>

實例

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

結果

https://ithelp.ithome.com.tw/upload/images/20171217/20104423TmBYxXDey0.png

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

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>

https://ithelp.ithome.com.tw/upload/images/20171216/20104423kuSx4puqt1.png

是不是很簡單呢?那讓我們結合今天講的東西來做一個簡單的例子
https://ithelp.ithome.com.tw/upload/images/20171217/20104423l0VMxmfoyK.png

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

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


上一篇
Day02 : 基本 html 架構
下一篇
Day04 : 常用標籤 ( 二 ) div 、span
系列文
從零開始的網頁設計22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言