Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
HTML 註解只有一種,以 <!--
開頭,以 -->
結束。可應用於單行註解或多行註解。
註解的用意:給「人」看的,瀏覽器遇到註解符號,會直接跳過,並不會顯示於網頁上,但會顯示於「頁面原始碼」中。
練習:將範例貼到你自己的 html 文件當中,並用瀏覽器開啟,以及使用滑鼠右鍵 → 檢視原始碼看是否呈現註解。
這裡有幾個,請觀察。
暫時性的假圖網址:
頁首 - <header>…</header>
頁尾 - <footer>…</footer>
導覽 - <nav>…</nav>
頁面主內容 - <main>…</main>
:一個網頁只能有一個 <main>...</main>
標籤。
獨立區塊 - <article>…</article>
:表示是獨立的區塊,可在網頁任意地方重覆出現。
頁面區段 - <section>…</section>
:例如 header、footer 標籤,只是 section 較一般化。
側邊欄 - <aside>…</aside>
在還沒有 HTML5 之前,是單純使用 <div>
來創造頁面的各個區塊,如下圖:
但 <div>
本身是沒有語意的,不利於 SEO。所以在 HTML5 開始之後,有了新的規範,讓以上各個頁面區塊,重新賦予實際的意義:
這樣就能更加瞭解各個頁面的區塊實際上所代表的意涵。
提供許多欄位,讓使用者填入後,送出資料。
action:值是一個網址,代表要將使用者填入的資料,送至此網址。
method:送資料至 action 所指定的網址,傳送的方式基本上有 get 或 post 兩種方式。若是 get 的話,表示資料會呈現於網址當中,post 則不會出現在網址當中,相對較安全。
如果表單有要傳送檔案,需增加 enctype 屬性及其值:
註:以上的屬性,會跟後端程式比較有關,目前可先初步認識即可。
input 標籤不需要結束標籤。
另可以使用 <label for="指定id"></label>
標籤,對應到欄位的 id
進行點擊的優化:
實際上還是存在,只是使用者看不到,而且該元素也不會佔位。
基本結構,通常會搭配 <label></label>
標籤一起使用。checked
是表示預設要選取。例:
多個選項時,若要創造單選的介面,則 name 要設定成一樣,才會被視為單選.例:
註:若有加上 <label>...</label>
標籤,有助於使用者的操作方便。
方式一:for 的值,對應到 id 的值。
方式二:<input>
放在 <label>…</label>
裡面。
範例:
基本結構,通常會搭配 <label></label>
標籤一起使用。checked
是表示預設要選取。例:
註:同 單選(radio)相同,若有加上 <label>...</label>
標籤,有助於使用者的操作方便。
方式一:for 的值,對應到 id 的值。
方式二:<input>
放在 <label>…</label>
裡面。
範例:
基本選單:
selected
:表示預設為這項。
分群選單,使用 <optgroup>...</optgroup>
包起來:
在 <select>
標籤上使用 multiple 屬性可以變成多選
使用 button 標籤,type 屬性設定為 "button",例:
這種按鈕使用者按了並不會有任何動作,需要再撰寫 JS 去開發相關需求。
type 設定為 "submit":
例:
使用者將這個按鈕按下去之後,會將所在的 form 表單裡的所有欄位資料,送到 form 標籤的 action 網址。
button 標籤,type 設定為 reset:
使用者將這個 reset 按鈕按下去之後,會將所在的 form 表單裡的所有欄位資料,都清空回到預設。
form 標籤的 method 屬性一定要用 post 方式。
form 標籤,記得加上 enctype="multipart/form-data"
屬性。
單選語法:
多選語法:
範例:
使用 W3C Markup Validation 服務,驗證自己寫的 html 是否可優化的空間。
將以下的 html,整個複製:
貼到 「Validate by Direct Input」, 結果出現如下圖 4 個訊息,請嚐試修正:
<video>...</video>
影片
屬性的部份:
controls:顯示控制列表。
autoplay:自動播放,要再加上 muted 屬性,才會自動播放。
muted:靜音。
playsinline:在手持裝置(手機、平板),想要自動可以播放影片的話,還要再加上這個屬性。
disablePictureInPicture:關閉子母畫面。
controlsList="nodownload noplaybackrate nofullscreen":關閉「下載按鈕、播放速度、全螢幕」。
poster:一開始尚未播放前的預載圖片。
loop:影片播放結束後,自動重播。
<source>...</source> 提供不同格式的影片,主要是讓瀏覽器從上而下依序選擇可以播放的格式,只要遇到可以播放的,就用那個來播。影片副檔名建議是 mp4、ogg(或 ogv)、webm。
網頁上常見的影片 type
類型設定:
video/mp4
video/ogg
video/webm
即表格之意。
<table>
:表格標籤。
<tr>
:table row 的縮寫。
<td>
:table data 的縮寫。
<th>
:table heading 的縮寫。
<thead>
:table head 的縮寫。
<tfoot>
:table foot 的縮寫。
<tbody>
:table body 的縮寫。
撰寫表格時,預設是不會有各欄的框線。
按照定義,撰寫的順序,<thead>
先寫,緊接著 <tbody>
,再來才是 <tfoot>
。
結果呈現:
rowspan:以「列(橫)」的方式來算,合併幾個欄位。
colspan:以「行(直)」的方式來算,合併幾個欄位。
<sup>...</sup>:上標。側:註解或數學。
<sub>...</sub>:下標。例:化學式。
<strong>...</strong>:想表達非常具重要性、緊急性,就適合用此標籤。
<em>...</em>:一段文字當中,想要「強調」某敘述,就適合用此標籤。
<i>...</i>:通常用做替代用途。例:Font Awesome ,就運用了此標籤,替代成小 icon 。