iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0

上一篇有大概提到一些HTML的概念以及什麼是HTML,那今天就來介紹一下比較常見的標籤以及用法!

h系列標題

我們通常會用<h1>這是標題</h1>來表示這是一個標題,h系列總共有<h1>~<h6>讓你使用。

為什麼使用h來代表標題呢?主要是使用標題的英文heading來表示,取單字的第一個字母h作為標題的標籤。

因為有可能在一個頁面有主標題、副標題需要呈現,但通常一個主頁只會有一個<h1>

<h1>我是標題1</h1>
<h2>我是標題2</h2>
<h3>我是標題3</h3>
<h4>我是標題4</h4>

當你使用不同的h字形大小也會不同。

不過上述只是一個理論,你當然可以寫很多個h1或是h2。但是這就不符合語意,因為你不會同時擁有很多個標籤。

p段落文字

那接下來<p>這個標籤這可以用於內文,為什麼使用p來代表段落文字?

是來自於paragraph這個單字以第一個字母p來代表

<p>This is some text in a paragraph.</p>

所以想要讓一段文字換行或有一個段落可以使用。

a超連結

<a href="http://google.com">google</a>

標籤是錨anchor的縮寫,主要使用屬性href來展現功能,href是hypertext reference的縮寫。

如果你對超連結(hyperlink)字面意思感到困惑,其實就是一個連結,連結到你指定的地方,只是這個連結是在hypertext 中。HyperText 就是超文字的意思。

div區塊元素

<div> 是division這個單字取前面三個字母來表示,division是區分的意思

這是一個可以讓你框選出一個範圍的元素,便於你在網頁編排或是想用CSS來做美化。

span行內元素

<span> 這個元素比較適合用於你想針對一部分文字或是小部分修改可以使用,因與div有不同特性所以可以交替使用。

清單系列

清單的部分可以分為<ul><ol> 這邊的OL跟你想的不一樣/images/emoticon/emoticon01.gif

ul的意思就是無序清單,那換而言之ol就是有序清單

什麼是ol有序清單ordered list,就是代表有順序的清單:

<ol>
<li>第一個<li>
<li>第二個<li>
<li>第三個<li>
</ol>

那如果這份清單沒有順序你就可以:

<ul>
<li>台北市<li>
<li>台南市<li>
<li>台中市<li>
</ul>

以上就是清單運用方式。

br換行跟hr分隔線

<br>使用這個標籤就可以做到換行的效果,<hr>這個標籤是分隔線。

section段落

通常會用<section>來表示一個有主題性的大段落:

<section>
    <h3>這是一個大區塊<h3>
    <div>A區塊</div>
    <div>B區塊</div>
    <div>C區塊</div>
    <span>我是文字</span>
</section>

當然你也可以在這之中可以放進你任何你想要的其他HTML元素。

nav導覽列

navigation是導覽、導航的英文所以取前面三個字母nav。

習慣上通常會放在網頁的最上方可以方便導覽這個網站,也會把網頁的logo放在裡面。


今天對於HTML常用的介紹先到這邊,明天會繼續帶來更多的介紹。/images/emoticon/emoticon07.gif

參考文獻

W3C SCHOOL


上一篇
Day2 淺談HTML基本觀念
下一篇
Day4 常見的HTML標籤-2
系列文
30天前端網頁基礎觀念(HTML,CSS,Javascript,blender)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言