HTML 基礎

1月 11 2022 HTML

要簡單很簡單，要複雜也可以很複雜。

HTML 架構

  1. <!DOCTYPE html> => 宣告我用的是 HTML5 這個格式
  2. html => 整個 HTML 文件的根元素
  3. head => 放一些額外資訊。像是編碼格式，外部檔案之類的
  4. title => 網頁的標題
  5. body => 網頁的主要內容

成對與不成對的標籤

大部分的 HTML 標籤都會以成對出現，例如 <h1>title</h1>、<p>hahahaha</p>。

但有些標籤是沒有內容的，像是 <meta charset="utf-8" /> ，所以就改成在後面加上 / 可以想成是「自己一組」的這種概念。

HTML 一開始的用途

用來呈現「文章」的感覺，所以一開始最基本的標籤是 <h1>~<h6> 跟 <p>，這兩種標籤其實就大約是一篇文章的結構了，分別是「標題」跟「內文」。

把標籤給分組起來，<div> 與 <span>

兩個都是用來做「分組」這件事情，主要是在 CSS 的時候會用到： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 第一組 -->
<div>
  <h2>Group1</h2>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
    Ipsam quidem consectetur ratione doloribus ullam iusto neque iure,
    ea aliquam iste a quod reiciendis nam labore? Quam aperiam numquam
    totam sapiente?
  </p>
</div>
<!-- 第二組 -->
<div>
  <h2>Group2</h2>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
    Ipsam quidem consectetur ratione doloribus ullam iusto neque iure,
    ea aliquam iste a quod reiciendis nam labore? Quam aperiam numquam
    totam sapiente?
  </p>
</div>

<span> 也是分組，跟 <div> 最大的差別在於不會換行，可以把它想成是「可以與別人共處，但在組裡還有自己的小圈圈」這種感覺：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <!-- 第一組 -->
<div>
  <h2>Group1</h2>
  <p>
    Lorem ipsum, dolor sit <span>我是第一組裡面的小圈子<span> consectetur adipisicing elit. 
    Ipsam quidem consectetur ratione doloribus ullam iusto neque iure,
    ea aliquam iste a quod reiciendis nam labore? Quam aperiam numquam
    totam sapiente?
  </p>
</div>
<!-- 第二組 -->
<div>
  <h2>Group2</h2>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
    Ipsam quidem consectetur <span>我是第二組裡面的小圈子<span> doloribus 
    ullam iusto neque iure,ea aliquam iste a quod reiciendis nam labore?
    Quam aperiam numquamtotam sapiente?
  </p>
</div>

顯示圖片的標籤 <img>

用 <img> 這個標籤，不過不是這樣寫：

1
<img>https://xxxx</img>

通常會放在標籤裡的內容是指「直接顯示在網頁上」的東西。例如說 <h2>Title</h2> 會在網頁上顯示 「Title」。

但是圖片的內容是一個連結，不是我們真正想呈現的東西，所以正確的用法是這樣：

1
<img src="https://xxx" />

要用 src 來告訴網頁圖片的連結在哪裡。

title 屬性

1
<img src="https://xxx" title="yoyoyo">

代表圖片的標題，當滑鼠停在圖片上的時候，會顯示訊息。

alt 屬性

alt 的全文是 alternative（替代），當圖片沒辦法顯示的時候，就會顯示設定在 alt 中的替代文字。

1
<img src="https://xxx" alt="你怎麼帥成這樣">

顯示清單

<ul>（unordered list） 無序清單

代表沒有先後順序的清單：

1
2
3
4
5
<ul>
  <li>yoyo</li>
  <li>yoyo</li>
  <li>yoyo</li>
<ul>

<ol>（ordered list） 有序清單

代表有先後順序的清單：

1
2
3
4
5
<ol>
  <li>yoyo</li>
  <li>yoyo</li>
  <li>yoyo</li>
<ol>

保留完整格式 <pre> 與換行 <br>

<pre> preformatted text

在標籤內的「換行」、「空白」不管有幾個都會被解析成「一個空白」，所以可能會跟你在編輯器裡面打的格式不一樣：

1
<p>   我      就     要      空     一    大    格 </p>

pre 可以幫你把文字格式化，保留原本的格式：

1
<pre>   我      就     要      空     一    大    格 </pre>

<br> line break

因為剛剛說「換行」也會被解析成「一個空白」，所以真的想換行的時候可以用 <br />：

1
2
3
4
<p>
  第一行 <br />
  下一行
<p>

顯示表格 <table>

最常用的幾個：

  • <table> => 整個表格
  • <caption> => 整個表格的標題
  • <tr> => table row 表格的行
  • <td> => table cell 表格的列
  • <th> => table header 欄位標題
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table>
  <caption>一年 A 班</caption>
  <!-- 第一行（標題） -->
  <tr>
    <th>姓名</th>
    <th>英文</th>
    <th>國文</th>
  </tr>
  <!-- 第二行 -->
  <tr>
    <td>小明</td>
    <td>80</td>
    <td>90</td>
  </tr>
  <!-- 第三行 -->
  <tr>
    <td>小花</td>
    <td>10</td>
    <td>30</td>
  </tr>
  <!-- 第四行 -->
  <tr>
    <td>小邱</td>
    <td>48763</td>
    <td>66666</td>
  </tr>
</table>

帶你環遊世界 <a>

<a> anchor，錨點。比喻的是從船上拋出去的那個錨，在網頁的世界代表「超連結」，分成兩種：

  • 連到網頁「外面」的連結
  • 連到網頁「裡面」的連結

另外要搭配 href （hyper text reference）屬性來使用，用來設置連結的位置。

連到網頁外面的連結

1
<a href="https://google.com">take me to google</a>

另外還有一個屬性：target，可以用來設定要直接連到新頁面，還是用分頁來開啟：

1
2
<a href="https://google.com" target="_self">直接開啟</a>
<a href="https://google.com" target="_blank">開新分頁</a>

連到網頁裡面的連結

首先要在標籤加上 id 屬性，這樣 href 才可以有「參考點」，知道要把你帶到哪個位置：

1
2
3
4
5
6
<!-- 用法是 # + id 值 -->
<a href="#res1">帶我到餐廳1<a/>
...
...
...
<h2 id="res1">餐廳1</h2>

語意化標籤 Semantic elements

這些元素在渲染後的畫面上看起來都跟 <div> 沒有區別。最主要的用意是要讓人（工程師）或機器（搜尋引擎）在讀 HTML 的時候可以比較清楚一點，因為有「語意」。就跟看到 <h1> 知道是標題，看到 <p> 知道是內文，這個就是有語意的標籤。

  • <main> 最主要的內容，一個網頁只會有一個。
  • <header> 作為往開場介紹的內容，可以是 logo 或導讀網頁的內容
  • <footer> 通常是 copyright 或作者資訊等等
  • <article> 一個段落，重點是要能夠「獨立」存在，不相依其他內容
  • <section> 一個段落，可以「內嵌」在 <article> 裡，通常要有「標題」

更多的語意標籤可以參考：

直接用別人的網頁 <iframe>

如題，可以使用 src 來嵌入別人的網頁：

1
<iframe src="https://jubeatt.github.io/" width="80%" height="500px" style="display: block; margin: auto;"></iframe>

備註：屬於 replace element 的一種，所以可以設定寬高。

備註：可以把 replace element 想成是「內容是從外面嵌入的」會比較好理解，例如像 <img>、<iframe>、<textarea> 等等。

上有政策 下有對策

為了避免人家把你的網站拿去亂用，server 可以設定一個 header：x-frame-options: SAMEORIGIN。加了這個後別人就沒辦法用 <iframe> 來偷你的網站來用：

refuse

表單相關標籤

<input> 相關

text => 輸入文字
password => 輸入密碼，自動馬賽克
email => 瀏覽器會自動做驗證，手機上的鍵盤會自動添加 @、.com 的按鈕
tel => 不像 email 會自動驗證，但是手機上的 UX 會比較好（鍵盤）
date => 輸入日期
radio => 單選框
checkbox => 複選框
submit => 送出表單

其他

<label> => 把文字跟 input 標籤關聯起來
<select> => 下拉式選單
<button> => 按鈕（在表單外也能使用，只是也可用在表單）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form method="GET" action="https://a.com">
  <div>
    <select name="interesting">
      <option value="吃飯">吃飯</option>
      <option value="看電影">看電影</option>
      <option value="睡覺">睡覺</option>
    </select>
  </div>
  <div>
    <input type="checkbox" name="time" value="早上" id="早上"><label for="早上">早上</label> 
    <input type="checkbox" name="time" value="中午" id="中午"><label for="中午">中午</label> 
    <input type="checkbox" name="time" value="晚上" id="晚上"><label for="晚上">晚上</label> 
  </div>
  <div>
    <input type="submit" value="送出">
  </div>
</form>

備註：name 跟 value 一定要附上，這會對應到 server 收到表單後的 key 跟 value，沒有的話 server 就不知道內容是什麼。

更多 input 種類：MDN

SEO

Search Engine Optimization 搜尋引擎優化，幫助搜尋引擎（dock yahoo bing）理解你的網頁在說什麼。

主動告訴「搜尋引擎」你的網頁在做什麼，會更好。

<meta> 標籤

最常見的就是 keyword 跟 description：

1
2
<meta name="keyword" content="搜尋關鍵字">
<meat name="description" content="網站的簡介">

Open Graph Protocol

Facebook 提出的協議，遵循這個協議就可以讓網頁被分享到社群網站（臉書）上的時候比較亮眼，像是縮圖、標題、描述等等。

1
2
3
4
5
<meta property="og:title" content="網站標題">
<meta property="og:description" content="介紹">
<meta property="og:image" content="https://xxx.com">
<meta property="og:image:width" content="500">
<meta property="og:image:height" content="400">

可以用 這個網站 來查看 og 標籤的設定效果。

更多詳細可以參考 這個網站，寫得蠻簡潔的。

JSON-ld

JSON-ld，全名是 JSON for Linking Data，主要是給 google 看的。

跟 Open Graph Protocol 概念差不多，就是用「特定格式」來呈現資料，讓機器跟人比較好閱讀。

1
2
3
4
5
6
7
8
9
<script type="application/ld+json">
{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}
</script>

附上幾個參考網站：

robots.txt

給「網頁爬蟲」看的檔案，參考這裡。

其中 Disallow 是告訴爬蟲「不要爬這些檔案」，Allow 則是「爬這些檔案」。

Sitemap 則是把網站中的所有連結直接附給爬蟲，讓它們能更快找到有用的資訊。

APP 相關資訊

效果就是跳一個視窗問你要不要下載 APP？或是有安裝的話會直接跳到 APP 裡：

1
2
<meta property="al:ios:app_name" content="app名稱">
<meta property="al:ios:app_store_id" content="app的id">

跟 twitter 有關，用 twitter 瀏覽會有比較好的效果：

1
2
<meta property="twitter:app:id:ipad" name="twitter:app:id:ipad" content="284876795">
<meta property="twitter:app:id:iphone" name="twitter:app:id:iphone" content="284876795">
mentor-program-day30 mentor-program-day29
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×