iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

從0開始系列 第 3

從0開始爬HTML - 文字元素

  • 分享至 

  • xImage
  •  

今天的學習筆記,繼續延伸昨天的body吧!
Body裡面就是網頁的內容了!有文字、圖片、影音……。
我們先講純文字的部分
https://ithelp.ithome.com.tw/upload/images/20220918/20151919otRZqk2GM4.png

文字

  • <h1~h6>,為什麼是1到6,是因為字的大小不同,1是最大
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919pKVDXpWtZB.png
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919WTwNofKv6n.png

接下來介紹的文字格式,是現在雖然可以繼續用,但是可以被CSS取代
這邊先介紹幾個比較容易用到的

  • 粗體<b>
    https://ithelp.ithome.com.tw/upload/images/20220918/201519196Q1qz63D4D.png

  • 斜體<i>
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919SIpGozYflH.png

  • 底線<u>
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919xLmgMPbozC.png

  • 上、下標<sup><sub>,這邊很有趣的是,上標是p下標是b,剛好跟我們的下意識認知相反
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919NoBWRcI5VE.png

  • 定義<dfn>
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919cvLWVbx5i0.png

  • 引用<q>
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919O2gJYtDkIn.png

  • 刪除<s>
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919e94gthNKc3.png

看到這邊應該有一個疑問,為什麼除了字體大小以外還有粗體字都加了<p>

  • <p>,他是分段標籤,就是下一行。
    那字體大小可以不用加?因為<h1~h6>屬於區塊層級,其他屬於區塊層級的還有<p>,他們的作用是在瀏覽器中跳下一行。
    這是在記事本裡的樣子,這個有很微小的差異,可以仔細看看,結果都是一樣的,但是HTML是不一樣的
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919mGq2TRchxY.png
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919MbyayAeuOB.png
    當他做為HTML打開後,他會自己自動下一行,可以來玩大家來找碴/images/emoticon/emoticon06.gif
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919tAwpFBs6lD.png
    https://ithelp.ithome.com.tw/upload/images/20220918/201519196UXQI3yY2u.png
    輸出如下~
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919zCxm5BCNAX.png

但是偶爾會覺得這中間行距又有點太大了

  • <br>是另一種可以換行的標籤
    當我直接把<p>都換成<br>
    這邊要注意的是<br>的格是不太一樣,他沒有結尾標籤,以下這兩寫法都可以
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919UqcJLn24cR.png
    https://ithelp.ithome.com.tw/upload/images/20220918/201519197xOjJVjyqx.png
    結果如下~
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919cn8BT7a0yE.png

像上一個例子我們引用了歌詞,並且想比<q>更明顯的話,

  • <blockquote>是縮排,可以更明顯的引用
    https://ithelp.ithome.com.tw/upload/images/20220918/20151919tOluJ8wmld.png

接下來,我們今天舉例舉了超級多,想要把他稍微分類一下,但是又不想顯示在網頁上,稍微加個自己的註解

<!-- -->,是在內容中註解,而且不會出現在網頁中。
https://ithelp.ithome.com.tw/upload/images/20220918/20151919uQApiGmBN1.png
https://ithelp.ithome.com.tw/upload/images/20220918/20151919rM43Lp3wOI.png


最後紀錄一下今天的學習時間<time>

時間的格式需要特別注意,尤其是年月日、時分秒
通常的設定格式,YYYY-MM-DDTHH:MM:SS,秒數是可寫可不寫的,更小的秒數單位可以用小數點做區隔
https://ithelp.ithome.com.tw/upload/images/20220918/20151919oZ1lNXCPJr.png
https://ithelp.ithome.com.tw/upload/images/20220918/20151919I8WJ4KOLHs.png


內容其實可以一起練習!
大ㄚ,晚安!/images/emoticon/emoticon29.gif


上一篇
從0開始爬HTML - 介紹&Head
下一篇
從0開始爬HTML - 文章、項目符號、超連結
系列文
從0開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言