iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

30天淺嘗主流前端設計系列 第 5

DAY5 介紹各種文本標籤

  • 分享至 

  • xImage
  •  

DAY5 介紹各種文本標籤

在開始之前,我們需要先介紹最基本建構出HTML語法的重點-文本標籤
今天會介紹一些常運用到且是包含在HTML的body裡,也就是瀏覽者直接看到的內容。
-p
p是代表著一個段落文本標籤,是組成網頁的html中很常看到且重複使用的,
來源於段落的英文:paragraph,使用方法為在起始與結束標籤中直接輸入想
呈現的內容。
-h1~h6
h1是一個網頁最主要的標題,而後面的h2~h6則依順序降級,字體大小也依順
序做變化,可代表著各種階級的小標題,來源於標題的英文:heading,使用方
法為在起始與結束標籤中直接輸入想呈現的內容。
-img
用於在網頁中插入圖片,不一樣的是img不需要包裹起來,也就是單個標籤便能
發揮功用,來源於影像的英文:image,使用方法是src="檔案來源" alt="替代文本"
也要記得在src中打上圖片的副檔名,後面也可以再加上想設定的圖片長寬,
例如 height="160" width="150" 。
-ul/ol
ul是無序列表,ol是有序列表,差別在ol會使瀏覽器在列點前依序標示順序123,
而ul則是沒有順序的,而每個想呈現的小點則用li來包裹,ol來源於英文:ordered list,
ul來源於英文:unordered list,使用方法以ul來舉例,在起始與結束標籤中輸入複數個
以li包裹的列點,ol用法亦同。
-div
div也是html很重要的元素,用於在html中分割出一個區塊,是在使用CSS為網頁美化時很重要的元素,來源於分割的英文:division,使用方法為把想區分的區塊用div的起始與結束標籤包裹,並在內部填入想呈現的屬性。
-a
a是為文字或圖片附上超連結的元素,來源於英文:anchor,透過附加屬性herf來發揮功用,使用方法為在a的起始與結束標籤內添加屬性herf,herf是想連結的網站,也可以透過target屬性,將target設為:_blank來將超連結改為直接開啟一個新分頁。


上一篇
DAY4 起跑! 打出第一個自己的網頁內容~(悲劇)
下一篇
DAY6 開始製作腦海中的網頁!
系列文
30天淺嘗主流前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言