changed 4 years ago  
Published Linked with GitHub

HTML 標籤整理

tags: 網頁 HTML

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

HTML 文字型式

標籤

  • <b> 粗體字
  • <strong> 粗體字，和 <b> 大同小異
  • <i> 斜體字
  • <em> 斜體字，和<i>大同小異
  • <small> 小字
  • <sup> 上標
  • <sub> 下標
  • <ins> 底線
  • <del> 刪除線
  • <mark> 螢光筆(黃色)
  • <br/> 換行
  • <pre> 維持文字的段落和格式
  • <code> 程式碼
    printf("Hello HTML!")
  • <kbd> 鍵盤輸入
    This is kbd format
  • <samp> 電腦輸出
  • <var> 變數
  • <abbr> 首字母縮寫(+title)，但沒啥用處(?
  • <address> 地址
  • <bdo> 句子方向，rtl從右到左，ltr從左到右
    -<blockquote> 從別的網站引用文章
  • <q> 引言，雙引號

屬性

  • style="background-color:#F0F8FF;"

更換背景顏色

  • style="color:Tomato;"

更換文字顏色

  • style="border:2px solid Tomato;"

更換邊框顏色、寬度

  • style="text-align:center;"

規定文本的對齊方式，center置中

HTML 註解

<!-- 註解寫在這裡 -->

HTML 顏色

點這裡就有已經整理好的140種顏色，需要再查就好

HTML 符號

符號實在太多了，就不全部放上來了，這邊只貼連結，需要再找
如果想使用表情符號，請宣告<meta charset="UTF-8">
數學運算子
貨幣符號
箭頭符號
表情符號
各種圖示

HTML 數學運算式

\[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\]
數學公式表示法

HTML 超連結

標籤
  • <a> 加入連結
屬性
  • href 定義網址
  • target="_blank" 設定開啟模式
    _blank 在新分頁開啟
    _self 在原分頁開啟
  • 寫在head的style中
    a:link 狀態:連結
    a:visited 狀態:已參訪過
    a:hover 狀態:滑鼠游標經過
    a:active 狀態:點擊時
  • Example






















<head>
    <style>
        a:link
        {
            background-color: #008B8B;
            color: white;
            padding: 20px 30px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
        }
        a:visited
        {
            background-color: #FFD700;
            color: white;
        }
        a:hover, a:active
        {
            background-color: #20B2AA;
        }
    </style>
</head>
書籤
  • <a href="#C4"> 傳送至書籤"#C4"
  • <h2 id="C4"> 設定書籤"#C4"

HTML 圖片

圖片
  • <img src="https://i.imgur.com/sxUS3aI.jpg" alt="Ocean">
    src : 圖片來源
    alt : 找不到圖片時的置換文字
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
圖片地圖

  • <img src="https://i.imgur.com/sxUS3aI.jpg" usemap="Ocean"> 讓圖片成為地圖

  • <map name="Ocean"></map> 定義對應名稱地圖

  • <area shape="rect"> 感應區域
    rect - 正方形
    circle - 圓形
    poly - 多邊形
    default - 整個區域

  • <area coords="10,10,50,30">區域座標

  • <img src=" " align="bottom"> 圖片在文字中對齊方式
    bottom-底部
    middle-置中
    top-頂

背景圖片

寫在head的style中

  • background-image: url('ocean.jpg'); 背景圖片
  • background-repeat: no-repeat; 圖片是否重複?
    repeat 會直到填滿整個網頁為止
  • background-attachment: fixed; 圖片比例是否固定?
    fixed 固定
    nfixed 不固定
  • background-size: 100%; 圖片大小

  • Example











<head>
    <style>
        body 
        {
            background-image:url('https://i.imgur.com/JF9XBpB.jpg');
            background-repeat: no-repeat;
            background-attachment: nfixed;  
            background-size: 100% 500%;
        }
    </style>
</head>
gif

HTML 表格

標籤
  • <table> 定義一個表格
  • <th> 定義表格第一欄
  • <tr> 換列
  • <td> 換行
  • <caption> 定義表格標題
  • Example


















<table>
    <tr>
        <th>飲料</th>
        <th>金額</th>
    </tr>
    <tr>
        <td>紅茶</td>
        <td>20</td>
    </tr>
    <tr>
        <td>綠茶</td>
        <td>20</td>
    </tr>
    <tr>
        <td>奶茶</td>
        <td>30</td>
    </tr>
</table>
飲料 金額
紅茶 20
綠茶 20
奶茶 30
屬性
  • border-collapse 界線是否留白?
  • text-align 文字位置
    left - 置左
    right - 置右
    center - 置中
  • border-spacing 邊界是否留白?
  • colspan 合併欄
  • rowspan 合併列
  • id 辨識編號

HTML 清單

  • <li> 一項

  • <ul> 無編碼清單

    • HTML
    • CSS
    • JavaScript

  • <ol> 有編碼清單

    1. HTML
    2. CSS
    3. JavaScript

  • <dl> 描述清單

    • <dt>
    • <dd>
    HTML
    網站主架構
    CSS
    排版
屬性
  • type=" " 有編碼風格
    disc - 實心圓
    circle - 空心圓
    square - 正方形
    none - 無
    1 - 數字
    A - 大寫字母
    a - 小寫字母
    I - 大寫羅馬數字
    i - 小寫羅馬數字
  • start="50"設定起始點，從50開始數
  • float:left 橫向清單
  • display:block 留上下空間

HTML 區塊

  • <div> 區塊(block-level)，用於一開始設定，可容納多元素

  • <span> 區塊(inline)，用於段落內、<h><p>中

  • Example





<div style="background-color:black; color:white; padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

HTML 類別

可編寫多個Classes，並合併使用，類似JAVA多重繼承的概念

  • <div classes="XXX">
    提前設定後，方便引用所設定之格式
    XXX 為格式之名稱
    開頭設定為 .XXX
  • <span classes"EEE">
    用於段落文字內
    開頭設定須為span.EEE

HTML 標題元件

metadata放在head底下，網站上前台是看不到的!

  • <head> 元素都要包在這個裡面
  • <style> 常用
  • <meta>
    這串程式會讓格式更好看(RWD響應式網頁)
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • <title>
  • <base>
  • <link>
  • <script>

HTML 輸入

  • <form> 建立表單

  • <input> 輸入
    <input type="OOO"> OOO為輸入元件

    • "text" 文字框
    • "radio" 單選欄
    • "submit" 有點像按鈕
    • "checkbox" 勾選
    • "color" 選顏色
    • "password" 密碼
    • "time" 時間
    • "month" 月
    • "week" 周
    • "date" 天
    • "datetime-local" 日期+時間
    • "file" 檔案
    • "tel" 電話號碼
    • "url" 連結
    • "reset" 回歸預設值

  • <select> 下拉式選單

  • <option value="OOO"> 選項
    size="3" 高度
    multiple 多選

  • <textarea> 文字框(多行)

  • <fieldset> 表單外框

  • <legend> 表單名稱

  • <datalist> 資料搜尋欄
    必須放在form裡面，前須加上<input list="OOO">

  • <output> 輸出
    oninput="x.value=parseInt(a.value)+parseInt(b.value)"
    在form裡面宣告
    <input type="range" id="a" name="a" value="50">
    滑條
    <input type="number" id="b" name="b" value="50">
    數字調整欄

HTML 多媒體

HTML5僅支援MP4, WebM, Ogg video檔案
影片推薦使用MP4
音樂推薦使用MP3

  • <video>
    <source src="movie.mp4" type="video/mp4">
    片源:movie.mp4
    檔案類型必須是MP4

    • controls 手動播放、暫停、調整音量
    • autoplay 自動撥放

  • <audio>
    <source src="music.mp3" type="audio/mp3">
    片源:music.mp3
    檔案類型必須是MP3
    - controls 手動播放、暫停、調整音量

HTML 匯入框架

<iframe width="420" height="315"
src="https://www.youtube.com/watch?v=mpDldu2VUDU" alt="no">
</iframe>

HTML SVG畫布

  • <svg width=”100” height=”100”> 類似畫布(定義長&寬)

  • <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow">
    畫圓
    cx - 圓中心的X座標
    cy - 圓中心的Y座標
    r - 圓的半徑
    strock - 外框顏色
    strock-width - 外框粗度
    fill - 填滿顏色

  • <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)">
    畫長方形
    width:寬
    height:高
    rx:圓角
    ry:圓角

  • <defs> <linearGradient id="OOO" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs>
    畫漸層
    fill="url(#OOO)"
    呼叫漸層

HTML Web Storage Objects

  • window.localStorage 瀏覽器關了以後，資料不會消失
  • window.sessionStorage 瀏覽器關了以後，資料會消失
    • localStorage.setItem("標籤","儲存值") 存入資料，輸入對應的標籤和資料
    • localStorage.removeItem("標籤") 刪除暫存的資料

HTML學完囉，接下來繼續學CSS和JavaScript吧

Select a repo