[ HTML ] 常用標籤

超文本標記語言（HyperText Markup Language)

最最最基本的組成 `<!DOCTYPE HTML>`

DOCTYPE其實是Document Type的簡寫，也就是文件類型的意思。
這是在跟瀏覽器講說我要用最新最標準的格式，瀏覽器就會知道這份文件內容是 HTML 標記語言撰寫的，所以我必須用我的 HTML 翻譯器來解讀。也是可以不加，但不加可能會有些 bug ,渲染出來的樣子跟你想的可能不太一樣，因為瀏覽器很多種，HTML 格式也很多種。
絕對會出現的標籤 : html、head 與 body，標籤出現都是成雙成對，<html><html/>

好用工具 :

Lorem ipsum 用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果
spiffy HTML5 site templates : 好用的 HTML 模板
html boilerplate : 好用的 HTML 模板
TinyPNG : 線上縮圖好工具
HTML標籤列表

<h1> Heading
<p> paragraph

<div> division 大分組
<span> 小分組
這兩個標籤比較像在 HTML 分組的感覺
span和div功能區別

span和div區別在於，div是一個塊級元素，它包含的元素會自動換行。而span是行內元素，在它的前後不會換行。span沒有結構上的意義，只是單純的應用樣式，其他元素不適合時，就可以使用span元素。span可以作為div的子元素，但div不能是span的子元素，如果出現span中出現div不符合ws3c的頁面標準。

<img> 屬性有

url : 用 "" 包起來代表字串
title : 滑鼠移上的顯示文字
alt : alternative 替代，當圖片沒辦法顯示出來，就用文字替代

顯示清單
<ul> unordered list 沒有排序，前面是出現小黑點
<ol> ordered list 有排序，1,2,3...

<li> list item

<pre> preformatted text
<br> line break

<table> 表格
<tr> table row (橫向)由上往下排
<td> table cell
<th> table header 表格的標題

<a> anchor 錨點，連到網頁外面的位置或網頁裡面的位置
屬性:

href :　hypertext reference 連到網頁外面的位置
target=_self : 從自己頁面連到網址
target=_blank : 開新分頁連網址

<a href="?#p1"></a> 連到網頁裡面的位置
<h1 id="p1"></h1>

UI 語意化的標籤
Semantic elements 語意化元素
<main>
<nav> navigation 導覽列
<footer>

MDN Semantics：https://developer.mozilla.org/en-US/docs/Glossary/Semantics
New Semantic Elements in HTML5：https://www.w3schools.com/html/html5_semantic_elements.asp

直接用別人網頁 iframe 嵌入網頁
<iframe src="https://www.google.com width="100%" />
但有時會鎖，像是 google 就會鎖，

Refused to display 'https://www.google.com/' in a frame index.html:1
because it set 'X-Frame-Options' to 'sameorigin'.

伺服器可以設定X-Frame-Options，防止別人或不信任的網站用 iframe 存取你的網頁

表單相關標籤
<form>
屬性有:

<input> 輸入框
text <input type="text"/> <input type="submit" value="送出表單"/>
password
email
date
radio
使用者體驗比較好是要用 <label>
radio 只能選原點裡面比較麻煩，設計時如果要連文字按的時候也被選到，就把文字用<label>包起來，並在前面的 <input> 標籤裡面加上 id ，並在 <label> 裡面加上 for

生理性別 : <input id="male"/><label for="male">男性</label>

checkbox

SEO
search engine optimization 搜尋引擎最佳化
幫助搜尋引擎理解你的網頁，那要怎麼幫助呢 ? 可以使用下列這些

<meta> keywords, description
og
Open Graph Protocol
JSON-ld
JSON for Linking Data
robots.txt
給網頁爬蟲看的檔案
通常放在根目錄底下，就可以打開
Sitemap.xml
網站爬好有很多連結，要怎麼告訴搜尋引擎它需要爬那些連結
其他
<link rel="alternate".....> 告訴搜尋引擎我有不同語言的網址，中文網站，英文網站，避免搜尋引擎分散掉
<meta property= al:ios:app_store_id".......> 我這個網頁有app