<!DOCTYPE html>｜聲明此文檔HTML5文檔<html>｜根元素lang語言屬性｜聲明網頁的語言，幫助搜索引擎和瀏覽器更好搜尋到你的網頁<head>｜<html> ，用來放 <title>、<style>、<meta>、<link>、<script>和<base>等元數據的容器<meta charset="UTF-8">為避免亂碼，必放 UTF-8介紹
<title>｜定義瀏覽器頁籤、添加到我的最愛、搜尋引擎等標題對SEO重要，必須的屬性<title>寫上
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<!-- 以下為塊狀元素 -->
/大區塊/ <header> <nav> <article> <section> <main> <aside> <footer>
/小區塊/ <address> <figcaption> <video> <figure> <fieldset>
/列表、表格/<li> <ul> <ol> <table> <dd> <dl> <dt> <form> <tfoot>
/文本用/ <p> <div> <blockquote> <h1>-<h6> <hr> <pre>
/圖形/ <canvas>
/其他/<noscript>
行內元素裡面不能有塊狀元素
<!-- 以下為行內元素 -->
/可點擊/ <a> <button> <input> <map> <select>
/輸入/ <label>
/圖片用/ <img>
/定義文本內容中的特殊字句用/ <abbr> <cite> <dfn> <textarea> <var>
/文本樣式/ <span> <b> <bdo> <code> <em> <i> <kbd> <q> <samp> <small> <strong> <sub> <sup> <time>
/空元素/<br>
/執行計算顯示/ <output>
/引入/ <script>
/HTML不支援的傢伙們/ <acronym> <big> <object> <tt>
<a>｜定義一個超連結href屬性｜指定連結到指定的URL，常在<a>、<link>等元素上使用
href時，不會停止繼續渲染
target屬性｜打開連結的位置
target="_self"｜預設，點擊後顯示在目前的視窗target="_blank"｜點擊後開啟新視窗target="_parent"｜點擊後開啟在目前的視窗target="_top"｜點擊後頂端開啟視窗title屬性｜滑鼠移到元素上顯示的文本href屬性｜在屬性內部寫上以下屬性，可以做到特殊效果<a href="(連結的URL)" download="(檔名)">下載圖片</a>
<a href="lisa5566407@gmail.com">寄信到我的信箱</a>
<a href="tel:(電話號碼)">撥打電話</a>
<a href="https://line.me/ti/p/@你的LINE ID">加入LINE好友</a>
ID建立快速跳轉長頁面章節的書籤首先使用ID創建書籤
`<h2 id="C4">章節4</h2>`
可在導覽列寫一個按鈕
`<a href="#C4">跳到章節4</a>`
或寫在另外一個頁面
`<a href="html_demo.html#C4">跳到章節4</a>`
<img>｜在 HTML 頁面中加入圖像alt、width、height、取名使用小寫英文，減少錯誤空間。src 屬性(Source File)｜指定 URL，常在<img>、<script>、<iframe>等元素上使用
src時，會暫停瀏覽器渲染，直到該資源載入完畢。推薦
src="img.png"
src="./pic/img.png"
src="../pic/img.png"
alt 屬性 (Alternative Text)｜無法顯示圖片時顯示的文字，無障礙網頁加分width屬性，指定圖像的寬度，max-width: 100% 為響應式圖片寫法，會在必要時縮小background-image: url('img_girl.jpg');可以把圖片寫在HTML元素裡面
background-repeat: no-repeat;取消圖片重複background-attachment: fixed;和background-size: cover;
<h1>~<h6>｜顯示標題或副標題<h1>在google開發者工具中，顯示的預設屬性h1 {
display: block;
<!--2em = 32 px -->
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
<p>｜(Paragraph) 定義一個段落<span>、勿用<div>
<p>在google開發者工具中顯示<p>標籤裡的文字內容多亂，HTML看到都是整齊一行的p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
標籤 | 瀏覽器預設 | 實際
------------- | -------------
html | 1em | 16px
p | 1em | 16px
h1 | 2em | 32px
h2 | 1.5em | 24px
h3 | 1.17em | 18.72px
h4 | 1.33em | 21.28px
<hr>｜空元素(Empty Elements)、顯示為水平線<br>｜空元素(Empty Elements)、換行<span>換行<pre>｜定義了預格式化的文本<span>｜段落中，改變一小段行內元素，無語意<div>｜多用在改變樣式區塊元素，無語意看到實際顯示的樣子比較準確，所以有用CodePen整理了一下整理在這裡
<b>沒什麼意義的粗體，應改用css設定or<strong></b>
如果是重要文字應取代b，定義<strong>重要的文本</strong>
<i>沒什麼意義的斜體</i>
屏幕閱讀器會用重音強調發音，定義<em>強調的文本</em>
定義<mark>應標記或突出顯示的文本</mark></p><small>定義了較小的文本</small>
定義已從<del>文檔中刪除的文本</del>
定義<ins>已插入文檔的文本</ins>
定義<sub>下標</sub>文本
定義<sup>上標文本</sup>
定義了從另一個來源引用的部分
<blockquote cite="http://www.worldwildlife.org/who/index.html"></blockquote>
<p>定義了一個<q>簡短的引用</q></p>
定義縮寫或首字母縮略詞、可以為搜尋引擎、瀏覽器提供有用的信息
<p>在<abbr title="台北車站">北車</abbr>的火字下集合</p>
<address>以斜體顯示，定義文檔或文章的作者/所有者的聯繫信息</address>
<!--<cite>定義了創意作品的標題，不能用在人名-->
<p><cite>我現在在聽的歌</cite>街仔路雨落</p>
<!--<bdo>文字左右鏡像-->
<bdo dir="rtl">This text will be written from right to left</bdo>
iframe｜在目前的HTML嵌入另一個文檔<title>中border:none;刪除<!-- 註解內容 -->｜註解標籤src定義要嵌入的頁面的 URL
iThome鐵人賽
看影片追技術