HTML筆記

元素

HTML元素由開始標籤 <標記名> 和結束標籤 </標記名> 所構成。空元素（如 <br> 元素）沒有結束標籤。 <!DOCTYPE html> 開頭聲明表示文檔類型。文檔以<html>開頭和</html>結尾。
文檔的可見部分在<tbody>和</body>之間。    <DOCTYPE html<
<html>
        <head>
        </head>
        <body>
        </body>
</html>
    

    標題
    標題是由<h1>到</h6>定義的，<h1>最大而<h6>最小。
    範例:
    標題1
    標題2
    標題3
    標題4
    標題5
    標題6
    <h1<標題1</h1>
<h2>標題2</h2>
..............
<h6>標題6</h6>
    

    段落
    
段落使用<p>標籤。
    <p<段落</p>
    

    書籤
    使用id創建書籤，點擊時會移動到書籤位置。
    範例:雙引號
    

    超鏈結
    超鏈接使用<a>標籤，使用target可以改變視窗開啟方式。
    範例:google
    <a href="https://www.google.com.tw/" target="_blank">google</a>
    

    圖像
    鏈接使用<img>標籤，href屬性指向超連結，src指定圖像路徑，
alt用在圖片跑不出來時的替代文字，width與height指定高度和寬度。
    範例:
    <img src="github.png" alt="github" width="50" height="50">
    

    網站圖標
    在網站標題旁加入小圖標。
    <link rel="icon" type="image/x-icon" href="/notebook.png">
    

    背景顏色
    background-color屬性定義了HTML元素的背景顏色。
    補充:顏色值有幾種使用方式:

井字號兩碼代表一個顏色 例: #ff6347
RGB三原色0~255之間 例: RGB(255, 99, 71)
hsl色度彩度 例: hsl(9, 100%, 64%)
    <body style="background-color:#FFFAF2;">
    

    文字背景顏色
    background-color也可以使用在文字上。
    範例:橘色的文字背景
    <p style="background-color:orange;">橘色的文字背景</p>
    

    文字邊框顏色
    border用於文字邊框的顏色。
    範例:紫色的邊框
    <p style="border:2px solid Violet;">紫色的邊框</p>
    

    風格屬性
    style屬性用於向元素添加樣式，例如顏色、字體、大小、對齊等。
    範例:這是紫色.
這是深藍.
第一種字體.
第二種字體.
大
小
對齊中間.
對齊右邊.
    <p style="color:#7C00D6;">紫色.</p>
<p style="color:#0000D6;">深藍.</p>
<p style="font-family:STKaiti;">第一種字體.</p>
<p style="font-family:SimSun;">第二種字體.</p>
<p style="font-size:250%;">大</p>
<p style="font-size:50%;">小</p>
<p text-align:center;">對齊中間.</p>
<p text-align:right;">對齊右邊.</p>
    

    語言屬性
    在<html>中使用lang屬性，以聲明網頁的語言和國家，為了幫助搜索。
    <html lang="en-US">
    

    標題屬性
    當鼠標懸停在元素上時，title屬性的值將顯示。
    範例:將鼠標移到這裡!
    <p title="嗨">將鼠標移到這裡!</p>
    

    表格
    <table>開頭</table>結尾，標題欄位用<th>，內容欄位用<td>，而<tr>代表一行。
    範例:
        
          標題一
          標題二
          標題三
        
        
          內容一
          內容二
          內容三
        
        
          內容四
          內容五
          內容六
        
      
    <table>
    <tr>
        <th>標題一</th>
        <th>標題二</th>
        <th>標題三</th>
    </tr>
    <tr>
        <td>內容一</td>
        <td>內容二</td>
        <td>內容三</td>
    </tr>
    <tr>
        <td>內容四</td>
        <td>內容五</td>
        <td>內容六</td>
    </tr>
</table>
    

    水平線
    <hr>元素是用於分隔頁面中的水平線，且沒有結束標籤。
    <hr>
    

    列表
    無序列表以<ul>標籤開頭。每個列表項都以<li>開頭
    無序列表範例:
列表一
列表二
列表三

有序列表以<ol>標籤開頭。每個列表項都以<li>開頭。
    無序列表範例:
列表四
列表五
列表六

    <ul>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</ul>

<ol>
    <li>列表四</li>
    <li>列表五</li>
    <li>列表六</li>
</ol>
    

    換行符
    <br>用於換行而不開始新段落。
    範例:這是
換行
    這是<br>換行
    

    去格式化
    <pre>以固定寬度的字體保留了空格和換行符。
    範例:
        可以保留  空格
        還有換行
    
    </pre>
        可以保留  空格
        還有換行
</pre>


    格式化元素
    
        <b>- 粗體文字
        <strong>- 重要文字
        <i>- 斜體文字
        <em>- 強調斜體文字
        <small>- 較小的文字
        <mark>- 螢光筆
        <del>- 刪除線文字
        <ins>- 底線文字
        <sub>- 下標文本
        <sup>- 上標文字
    
    範例:粗體文字

重要的文字!

斜體文字

強調斜體文字

較小的文字
這是螢光筆
這是刪除線 
這是底線
這是_下標
這是^上標
<b>粗體文字</b>
<strong>重要的文字!</strong>
<i>斜體文字</i>
<em>強調斜體文字</em>
<small>較小的文字</small>
<p>這是<mark>螢光</mark>筆</p>
<p>這是<del>刪除線</del> </p>
<p>這是<ins>底線</ins></p>
<p>這是<sub>下標</sub></p>
<p>這是<sup>上標</sup></p>


引用
<blockquote>會以引用的格式顯示文字，而網址寫進起始標籤裡。
範例:
面對光明，陰影就在我們身後。－海倫凱勒
<blockquote cite="https://arielhsu.tw/celebrity-quotes/">
面對光明，陰影就在我們身後。－海倫凱勒</blockquote>


雙引號
<q>標籤會於文字中插入雙引號。
範例:I spent the morning reading Faulkner’s Barn Burning,
which seemed to be about a pyromaniac.
<p>I spent the morning reading Faulkner’s<q>Barn Burning,</q>
which seemed to be about a pyromaniac.</p>


註解
<!-- 這是註解不會顯示，也可以使用在程式碼上。 -->
範例:
只有這會顯示

<!-- 這個是註解 -->
<p>只有這會顯示</p>
<!-- 這部會顯示 -->


Responsive
    可以根據裝置的螢幕寬度來改變樣式。
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    Computer Code
    如果要寫一些程式的時候可以使用<code>標籤，但不保留換行因此可以加<pre>。
舉例:
    
        x = 10;
        y = 9;
        z = x + y;
    <pre>
    <code>
        x = 10;
        y = 9;
        z = x + y;
    </code>
</pre>
    

    特殊字元
    有些符號會容易造成瀏覽器搞混，因此可以使用替代字符。
    < = &lt;
> = &gt;
€ = &euro;
© = &copy;
    
    
    表單
    使用<form>標籤創建表單，<input>用來輸入，type決定方式，
<fieldset>在表單外生成框，<legend>為該表單名稱。
    
type="text" - 文字
type="password" - 只會顯示點
type="email" - 只能輸入郵件格式
type="number" - 只能輸入數字
type="date" - 可以選日期
type="color" - 可以選顏色
type="radio" - 單選
type="checkbox" - 複選
type="submit" - 送出按鈕
type="button" - 按鈕
type="reset" - 使整個表單重設


maxlength - 可以限制最大長度
step - 可以調整數字的間距
pattern="[只能輸入什麼]{只能輸入幾個}" - 規定格式
placeholder - 顯示提示字樣
required - 這欄一定要輸入
autofocus - 設置一開始游標的位置
autocomplete - 根據之前的輸入紀錄自動完成
    
    舉例:
    
        name:

        


        Password:

        


        Enter your email:

        


        Number:
        


        Birthday:
        


        Select a color:
        


        
            Choose your language:
        
        Chinese

        
        Engilsh

        
        Japanese
        
        Choose some fruits you like:
        
         Apple

        
         Banana

        
         Cherry


        
        
    
    <form>
    <label for="fname">name:</label><br>
    <input type="text" id="fname" name="fname">
    
    <label for="pwd">Password:</label><br>
    <input type="password" id="pwd" name="pwd"><br>

    <label for="email">Enter your email:</label><br>
    <input type="email" id="email" name="email">

    <label for="number">Number:</label>
    <input type="number" id="number" name="number" min="0" max="100" step="10" value="0">
    
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br>
    
    <label for="color">Select a color:</label>
    <input type="color" id="color" name="color" value="#ff0000"><br>
    
    <fieldset>
        <legend>Choose your language:</legend>
        <input type="radio" id="chinese" name="language" value="chinese">
        <label for="chinese">Chinese</label><br>
        <input type="radio" id="english" name="language" value="english">
        <label for="engilsh">Engilsh</label><br>
        <input type="radio" id="japanese" name="language" value="japanese">
        <label for="japanese">Japanese</label>
    </fieldset>
        
    <p>Choose some fruits you like:</p>
    <input type="checkbox" id="fruits1" name="fruits1" value="apple">
    <label for="fruits1"> Apple</label><br>
    <input type="checkbox" id="fruits2" name="fruits2" value="banana">
    <label for="fruits2"> Banana</label><br>
    <input type="checkbox" id="fruits3" name="fruits3" value="cherry">
    <label for="fruits3"> Cherry</label><br>
    
    <input type="submit" value="提交">
    <input type="reset">
</form>
    

    下拉表
    <select>可以建構一個下拉列表，<option>是一個選項，使用multiple可以多選。
    舉例:
    Choose a animal:


    <label for="animals">Choose a animal:</label>
<select id="animals" name="animals">
        <option value="monkey">Monkey</option>
        <option value="rabbit">Rabbit</option>
        <option value="dolphin">Dolphin</option>
</select>
    

    輸入下拉表
    <datalist>既可以選取也可以輸入。
    舉例:

Which country do you live in?

        
        
          
        
      
    <form>
    <input list="country" name="country">
    <datalist id="country">
        <option value="Taiwan">
        <option value="US">
        <option value="Japan">
        <option value="South Korea">
        <option value="Australia">
    </datalist>
    <input type="submit">
</form>
    

    文字框
    <textarea>建構一個可以多行輸入的文字框，rows決定列，cols決定行。
    舉例:
    這是大一點的文字框.
        
    <textarea name="message" rows="10" cols="30">
這是大一點的文字框.
</textarea>
    

    按鈕
    <button>建立一個可以點擊的按鈕。
    舉例:
    
    

    <button onclick="alert('嗨你好!')">點擊!</button>
    

參考資料:
陳鍾誠的課程社團
w3school(HTML)
google
GitHub圖片
引用海倫凱勒名言
雙引號示範
Favicon
其他筆記:

此筆記內容:

HTML筆記

元素

標題

標題1

標題2

標題3

標題4

標題5

標題6

段落

書籤

超鏈結

圖像

網站圖標

背景顏色

文字背景顏色

文字邊框顏色

風格屬性

語言屬性

標題屬性

表格

水平線

列表

換行符

去格式化

格式化元素

引用

雙引號

註解

Responsive

Computer Code

特殊字元

表單

下拉表

輸入下拉表

文字框

按鈕

參考資料:
