<!DOCTYPE HTML>
告訴瀏覽器，用最新的 HTML 語法渲染。
註解形式
<!--
content
-->
哪裡都可以用
標籤三本柱
<html></html> 宣告網頁
<head></head> 放一些基本資訊
<body></body> 內容本體
大概長這樣
<html>
<head>
head 內容
</head>
<body>
body 內容
</body>
</html>
<head></head> 的內容
<meta <attribute>=<value> />
meta 是自己成對的標籤，只要一個就可以，裡面的斜線可加可不加。
<title> title </title>
網頁的標題
SEO
Search Engine Optimization
搜尋引擎優化。
網頁主動告訴搜尋引擎網頁資訊。
<meta>
告訴搜尋引擎這個網頁的資訊。
<meta name="keywords" content="">
<meta property="OG:title" content="">
屬性：
name:
- keywords: 關鍵字。
- deccription: 網頁敘述。
property:
- OG: open graph protocol。一種格式化的資料。FB 會抓這個。
- OG:title
- OG:image
- etc
- al: 給不同裝置或者不同 app 的使用者特殊訊息，例如在網頁版跳出訊息說有手機版 app 可以下載。
JSON-ld
格式化的 JSON 資料。
Robots.txt
給爬蟲看的文件。
- allow: 可以看的。
- disallow: 不可以看的。
- sitemap: 網頁地圖。
<link> 別的連結
<link rel="alternate" hreflang="zh-tw" href="url" />
告訴搜尋引擎標籤裡的連結是這個網頁另一種語言的版本。
<body></body> 的內容
<h1></h1> 到 <h6></h6>
內文的的標題。
<p></p>
內文的段落。
<div></div>
基本上不會有視覺變動，可以把東西包起來，把裡面的東西都變成一組。
使用後會換行，通常包住標籤。
<div>
<h1></h1>
<p id="p1"></p>
</div>
<span></span>
也是把包起來的東西分組，通常用在內文中，把特定字包起來。
<p>I am a <span>pencil</span></p>
<img />
自成一對的標籤，放圖片用的標籤，通常這樣用：
<img alt="message" title= "title" src="url" />
屬性：
- alt: 顯示失敗的訊息。
- title: 圖片的標題。
- src: 圖片的來源（網址）。
<pre></pre> preformated
html 有預設的顯示格式，用
<br /> or <br> 換行
加在預設格式內文中，可以直接換行。"/" 可加可不加。
escape 跳脫
把標籤的符號替代掉，讓內文顯示標籤文字。不然瀏覽器會將其視作標籤渲染。
| symbol | replacement |
|---|---|
| & | \& |
| < | \< |
| > | \> |
<a></a> anchor 錨點
可以帶使用者到指定位置。
<a herf="" target="">
屬性：
- herf: 要去的地方。
- "url": 外部連結，連到外面。
- "#id": 網頁內部標籤，跳到該標籤。
- target: 要開在原本頁面（"_self"）還是新分頁（"blank"）。
- "_self": 在本頁面開啟。
- "blank": 在新分頁開啟。
<iframe></ifram> 嵌入別的網頁
<iframe src="" width="" height="">
屬性：
- src: 網頁來源。
通常大網站都會黨這個標籤，實用性不大。
清單、列表
<ul></ul>、<ol></ol> and <li></li>
- ul: unordered list
- ol: ordered list
- li: list item
ex:
code
<ol>
<li>item1</li>
<li>item2</li>
</ol>
display
- item1
- item2
表格
<table></table>
<th></th> table header
<tr></tr> table row
<td></td> table cell
ex:
code
<table>
<tr>
<th> name </th>
<th> math grade </th>
<th> physic grade </th>
</tr>
<tr>
<td> Philip </td>
<td> B- </td>
<td> C+ </td>
</tr>
</table>
display
| name | math grade | physic grade |
|---|---|---|
| Philip | B- | C+ |
語意化標籤
有數個，可以從標籤名看出這些標籤的主要功能。課程列出三個。
<main></main>
用來包住重要的元素。
<nav></nav>
navigation bar 導覽列
<footer></footer>
網頁最下面，通常是一些版權與版本資訊。
<form></form> 表單
<form>
<div>
姓名<input type="text" />
</div>
<div>
密碼<input type="password" />
</div> <div>
e-mail<input type="email" />
</div> <div>
生日<input type="date" />
</div>
<div>
性別<input type="radio" name="gender" id="male"/><label for="male">男性</label>
<input type="radio" name="gender" id="female"/><label for="female">女性</label>
<input type="radio" name="gender" id="other"/><label for="other">其他</label>
</div>
<div>
興趣<input type="checkbox" id="sports"><label for="sports">運動</label>
<input type="checkbox" id="food"><label for="food">美食</label>
</div>
<div>
送出表單<input type="submit">
</div>
</form>
<input />通常用<div></div>包起來可以達到分行的效果。
屬性：
- type:
- text: 一般文字。
- password: 輸入內容變為不可視。
- email: 電子郵件，有些瀏覽器支援檢查格式。
- date: 日期。
- radio: 單選。
- checkbox: 多選。
- submit: 送出表單。
