iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

我的網頁前端小小小教室系列 第 9

Day9 Html常用標籤_4

今天要介紹的東西是"標籤屬性"。

標籤屬性(Attributes)是讓標籤有更多變化、增加其他功能。最常用到的就是添加CSS,這時候我們就會用到style屬性,接下來我們將介紹怎麼使用。

例如我們有個h1的標題,我想要讓它是黃色的。

<h1 style="color: yellow;">標題</h1>

https://ithelp.ithome.com.tw/upload/images/20210923/20141087FKkQiIrTIP.png

我們就可以在h1的後面空一格,加上style屬性,調整你想要的顏色,當然還可以增加許多屬性,邊框、字體顏色,置中,這些等之後的CSS介紹我們在更深入的討論!

常用語意標籤

首先我們要知道語意標籤是什麼呢?讓我們先看看這張圖

這是一個網頁基本組成的區塊,有最上方的頁首、依次是導覽列、內容的區塊、側邊欄位、及最底下的頁尾。

而其實如果你了解了我們前面所教學的div跟span區塊的定義,就會對語意標籤上手的十分快速,因為他們區別不大,只是善用這些語意標籤可以讓人更快速、更直白的了解到這個區塊是屬於網頁的哪個部分!

語意標籤:

<header>:網頁的最上方,通常會是標題,網站LOGO。
<nav>:網頁的選單、導覽列。
<main>:網頁的中間部分、主要內容。
<aside>:網頁的側邊欄、輔助內容。
<article>:一篇文章內容。
<section>:常見三欄或是四攔的自訂區塊,可以透過自行排版設定。
<footer>:網頁的頁尾,會有版權提醒、聯絡方式等等。
<mark>:強調特定區塊內容。
<time>:日期時間。

讓我們來看看他們的區別:

這是沒有語意標籤的部分

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
    <div class="section"></div>
    <div class="aside"></div>
</div>
<div class="footer">
    &copy; making by jason
</div>

有語意標籤的部分

<header></header>
<nav></nav>
<main>
    <article></article>
    <section></section>
    <aside></aside>
</main>
<footer>
    &copy; making by jason
</footer>

看出來了嗎,最主要的區別是你直接將語意標籤拿出來用,或者是你一樣使用div,然後穩扎穩打的將分類名稱一一做好,其實兩者都是行得通的,但若是你能夠兩者都精通,是不是更上一層樓了呢!?


上一篇
Day8 Html常用標籤_3
下一篇
Day10 Html常用標籤_5
系列文
我的網頁前端小小小教室30

尚未有邦友留言

立即登入留言