iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1

完成Navigation bar 之後我們就來進行內容吧!
https://ithelp.ithome.com.tw/upload/images/20200917/20130249NyZ6f0QFA7.jpg
有標題(紅色底)跟內文兩個部分,控制標題的是~標籤,而內文則主要是p標籤與其它換行等等的控制標籤。

<h1> 大標題 </h1>
<p> 自我介紹 </p>

https://ithelp.ithome.com.tw/upload/images/20200917/20130249H0LAcHWbaX.jpg
但是直接在VS code裡面使用Enter換行是沒有用的,完全只是自己看開心的排版。
在網頁還是顯示長長的一行文字。
https://ithelp.ithome.com.tw/upload/images/20200917/20130249HjSRWbdt8e.jpg

此時我們需要的是換行標籤!
https://ithelp.ithome.com.tw/upload/images/20200917/20130249nxuGXLH5RA.jpg
https://ithelp.ithome.com.tw/upload/images/20200917/201302499bodfNcvv7.jpg
在網頁顯示的模樣整個變得很棒了!


<h1>標題標籤

從h1由大到小排到h6,會自動換行。


<p> 內文標籤戰隊

p 標籤有許多輔助修改內文格式的標籤夥伴們,也能為他們個別加入CSS,對於長文章或是需要特別標註的部分很方便!

  • <br>:換行
  • <b>粗體
  • <cite>書名
  • <em>斜體
  • <q>:"雙引號"
  • <s>刪除線
  • <u>:底線

還有一個很強大的標籤<span>

<span>像是文字段落裡的div,而且不會強制換行,所以可以用來框住任何想要特別修改的地方,搭配CSS十分靈活。


下一章 圖片與 Font awesome

※本文章所使用之圖片皆為本人作品,內容則為本人之經驗分享


上一篇
Day 04 | Navigation bar 與 a標籤
下一篇
Day 06 | 圖片與 Font awesome
系列文
挑戰!用30天做一個自己的履歷作品集網頁!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言