網頁

HTML（有結構的文字檔）透過瀏覽器渲染產生畫面，所以沒有瀏覽器就沒有網頁
檢查 --> 可到 dev tool

HTML (HyperText Markup Language)

超文本標記語言，不是程式 (programming) 語言
最早最常見的用途為顯示文章

HTML 的組成

告訴瀏覽器，這一份文件是屬於什麼文字類型，所以要先宣告

<!DOCTYPE HTML>

加在第一行，用來跟瀏覽器表示要用最新的 HTML 格式去渲染，不加也行，但可能會碰到 bug

標籤：為成雙成對出現

<html> & </html>

開 & 合

<head> & </head>

網頁基本資訊

<body> & </body>

網頁主要內容

<meta> & </meta>

後面可以放關鍵字，讓 SEO 可以搜尋的到
<meta charset="utf-8"/>
- meta 後面接屬性 (attribute)，所以在這邊屬性的名稱為 charset
- 宣告網頁的編碼為 utf-8，可以讓電腦讀懂原始碼
如果兩個標籤中間沒有放內容的話，可以直接用 <meta/>

MDN

<title> & </title>

放網頁的標題

註解不會顯示到網頁上面

<h1> & </h1>

Heading 標題
另有 <h2> ~ h6，代表不同的大小，<h1> 為最大，通常為主標題

<p> & </p>

paragrah 段落
Lorem ipsum 拉丁文章，排版設計時常用來測試版面看起來如何，文章內涵隨機亂數或文字

<h> & <p> 為排版的概念

<div> & </div>

division
分組段落時，不會改變畫面呈現，等到使用 CSS 來改變標籤顏色⋯⋯等的時候會更有感覺
分組文字時，會換行

<span> & </span>

用來分組文字，不會改變畫面呈現

<div> & <span> 為分組的概念

<img/>

<img alt="輸入內容" title="輸入內容" src="插入網址"/>
scr = source; " " = string
title，當游標移到圖片上時，才會出現該內容
alt = alternative，替代文字的意思
放圖片，不會直接 <img> 網址 </img>，因為放在標籤中的內容，會直接呈現在畫面上
為自成一組的標籤

<ul> & </ul>

unordered list
沒有排序

範例

<ul>
<li>h1</li>
<li>h2</li>
<li>h3</li>
</ul>

<ol> & </ol>

ordered list
有排序，前面會顯示序號：1, 2, 3

範例

<ol>
<li>h1</li>
<li>h2</li>
<li>h3</li>
</ol>

<li> & </li>

list item

<pre>

preformatted text 保留完整格式
在 HTML 格式中，空白、換行會被另行解讀，使用此標籤可以保留完整格式

<br/> or <br>

line break 換行

<table> & </table>

表格
以每一列為單元

範例

<table>
<tr>
  <th>姓名</th>
  <th>身高</th>
  <th>體重</th>
</tr>
  <td>Anne</td>
  <td>175</td>
  <td>100</td>
</table>

<tr> & </tr>

table row

<td> & </td>

table cell

<th> & </th>

table header

<a> & </a>

anchor 錨點
屬性有 href(hypertext reference) target
可以連到網頁內或網內外的地方

練到網頁外的地方，範例

<a href="https://google.com" target='_self' >take me to google</a>

_self 代表從透個頁面連到外面的網站
_blank 會開一個新的分頁來連到外面的網站

連到網頁內的地方，範例

<body>
<a href="_#p3">take me to page 3</a>
<h1 id="p1">網頁前端</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</P>
<h1 id="p3">網頁前端 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Semantics element 語意化元素

可以根據標籤判斷內容是什麼（幫助搜尋引擎理解）

<main> & </main>

把網頁上重要的東西包起來，不會改變畫面呈現

<nav> & </nav>

navigation 導覽列

<footer> & </footer>

網頁底端的資訊，不會改變畫面呈現

MDN
New Semantic Elements in HTML5

<iframe>

可以嵌入網頁
範例 => 會顯示錯誤，伺服器可以設定是否讓別人用 iframe 存取網頁
```
<iframe src="https://google.com.tw" width="100%" heigth="500px">
```

表單相關標籤

<!DOCTYPE>

<body>
  <form>
    <div>
      姓名：<input type="text" />
   </div>
    <div>
      密碼：<input type="password" />
    </div>
    <div>
      Email：<input type="email" />
    </div>
    <div>
      日期：<input type="date" />
    </div>
    <div>
    <div>
      生理性別：<input type="radio" name="gender" id="male" /><label for="male">男性</label>
      <!--加 label 的話，可以點「男性」兩個字來選曲-->
      <input type="radio" name="gender" id="female" /><label for="female">女性</label>   
      <!--要加在同一個組合內，才會變單選，用 name 來分組-->
      <input type="radio" name="gender" id="other"/><label for="other">其他</label>
    </div>
    <div>
      興趣：<input type="checkbox" id="sports" /><label for="sports">運動</label>
    </div>
      <input type="submit" value="送出表單" /> 
      <!--如果想要改「送出」為別的字，可以用 value-->
    </div>
  </form>
</body>

MDN

該怎麼顯示標籤 Escape

& => &
< => <
- lt = later than
> => >
- gt = greater than

SEO (Search Engine Optimization) 與相關標籤

用格式化方法，幫助搜尋引擎正確理解你的網頁，可能可讓搜尋排名變好

<meta> ：利用 Keywords, description
meta property="og:" OG 為 Open Graph Protocol)：通常給 Facebook 或其他網頁使用，可以讓他們看得懂使用什麼結構、描述
JSON-ld (JSON for Linking Data)：通常給 google 看，用固定格式去描述網頁，讓機器可以看得懂，這樣打關鍵字搜尋該網頁時，搜尋引擎會自動顯示更多資訊
robots.txt：看給網頁爬蟲看的檔案，通常放在根目錄底下
- Disallow：請搜尋引擎不要爬這些網頁
- Allow：可以爬這些網頁
- Sitemap.xml：網頁的地圖，讓搜尋引擎知道有哪些頁面
<link rel="alternate" hreflang="en"> 跟搜尋引擎講說這個網頁還有給其他國家用的語言，假設一個網站有中文版跟英文版，且為同一個頁面，利用這個標籤讓搜尋引擎知道他們是同個頁面
<meta property="al:ios:app_name" content="TripAdvisor">：會自動跳出是否要下載該網站的 APP 通知
Google Search Console