技術標籤：one-error 多標籤

a 標籤

• href 連結

<a href = "//google.com"></a> //gogle.com 將自動識別協議（推薦連結寫法）
<a href = "/index.html"></a> 路徑：http-server在哪開啟服務哪裡就是根目錄
<a href = "javascript:;">xxx</a> xxx將什麼也不會執行不會對頁面造成任何變動
<a href = "#A">tz</a> 點選tz將會頁面跳轉到id為A的標籤處

<a href = "mailto:[email protected]"></a> 傳送郵件給xxx
<a href = "tel:007">xxx</a> 手機點選xxx後可到撥號介面並自動輸入007

• taget 指定用哪個視窗開啟

target="_blank" 新頁面開啟
target="_top" 通常與iframe配合使用，將連結內容跳轉到內嵌視窗的頂層iframe顯示
target="_parent" 通常與iframe配合使用，將連結內容跳轉到當前層級視窗的上層iframe顯示

target="_self" 預設設定，在當前視窗重新整理顯示連結內容
target="xxx" 瀏覽器會建立一個名為xxx的視窗（F12->console->Window.name 可檢視視窗名）

• download 下載（很多瀏覽器不支援）

img 標籤

<img src="pig.png", alt="這是一隻豬"> 

發出Get請求，展示pig.png，若圖片顯示失敗顯示描述“這是一隻豬”。

• 屬性

alt 當圖片載入不出來時，用alt的文字描述

width/height 改變圖片高度或寬度（原則：永遠不能讓圖片變形）

注：當只修改高或寬時，圖片會同比例的自動的改變對應的寬或高。但是當同時修改圖片寬和高時圖片寬高比會改變，圖片因此變形。

• 事件

oneload/oneerror 常用於當正常圖片載入不出來時，使用另一張圖片補救。

<script>
    xxx.oneload = funcion{
        console.log("圖片載入成功");
    };
    xxx.oneerror = function{
        console.log("圖片載入失敗");
        xxx.src = "/404.png";
    };
</script>

• 響應式

<style>
    img {max-width:100%;} /*圖片寬度把頁面鋪滿，並隨頁面自動調整*/
</style>

table 標籤

thead 表格結構頭部

tbody 表格結構內容

tfoot 表格結構腳部

tr 行

th 表頭單元格

td 表格資料

• 一般格式

<table>
        <thead>
            <tr>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>

• table 樣式調整

<style>
    table{
    table-layout:auto; /*根據內容自動調整表格寬度*/
                       /*table-layout:fixed; 列寬由此列行首內容決定*/
    border-collapse:collapse; /*取消表格間隙*/
    border-spacing:20px; /*固定表格單元格間隙為20px*/
},
</style>

form

• action 決定請求哪個頁面
• method 決定採用哪種方式傳送請求
• autocomplete 根據name屬性自動填充文本里的內容

• tartget

事件

注：一個form表單內必須有一個type="submit"的按鈕

input type ="submit" 與 button type = "sumbit" 的區別

用button標籤能改變提交按鈕樣式，input無法改變樣式

常用輸入標籤

input 常用type

• text
• color 顏色選擇器
• password
• radio 單選（當name屬性值相同時才表示一組單選）
• checkbox 多選（當name屬性值相同時才表示一組多選）
• file 可選擇單檔案

<input type = "file" multiple /> 可選擇多檔案

• hidden 隱藏input，通常給電腦使用，後期js會用到

textarea 文字域

<textarea style="resize: none; width: 50%; height: 300px;"></textarea>
<!--固定視窗，可避免使用者隨意拖動-->

select

一般用法

<select>
        <option value="1">星期一</option>
        <option value="2">星期二</option>
</select>

感想

今天學習做了很多筆記，知識點比較基礎部落格上就不做過多贅述。

整理筆記，歸納總結，學以致用。

Just for myself

Amusing Ourselves to Death