html標籤列表html text標籤

HTML 標籤整理

文章推薦指數： 80 %
投票人數：10人

HTML 標籤整理 · HTML 文字型式 · HTML 註解 · HTML 顏色 · HTML 符號 · HTML 數學運算式 · HTML 超連結 · HTML 圖片 · HTML 表格.       Published LinkedwithGitHub Like1 Bookmark Subscribe #HTML標籤整理 ######tags:`網頁``HTML` [![](https://img.shields.io/badge/dynamic/json?color=orange&label=總觀看人數&query=%24.viewcount&url=https://hackmd.io/wHIiu44rSWKkAjss2PvleA%2Finfo)]() ###HTML文字型式 ####標籤 -``粗體字 -``粗體字，和``大同小異 -``斜體字 -``斜體字，和``大同小異 -``小字 -``上標 -``下標 -``底線 -``刪除線 -``螢光筆(黃色) -`
`換行 -`

`維持文字的段落和格式
-``程式碼
printf("HelloHTML!")
-``鍵盤輸入
Thisiskbdformat
-``電腦輸出
-``變數
-``首字母縮寫(+title)，但沒啥用處(?
-`
`地址
-``句子方向，rtl從右到左，ltr從左到右
-`
`從別的網站引用文章
-``引言，雙引號

####屬性
-`style="background-color:#F0F8FF;"`
更換背景顏色

-`style="color:Tomato;"` 更換文字顏色 -`style="border:2pxsolidTomato;"` 更換邊框顏色、寬度 -`style="text-align:center;"` 規定文本的對齊方式，center置中 ###HTML註解 `` ###HTML顏色 點[這裡](https://www.w3schools.com/colors/colors_names.asp"w3schoolColor")就有已經整理好的140種顏色，需要再查就好 ###HTML符號 符號實在太多了，就不全部放上來了，這邊只貼連結，需要再找 如果想使用表情符號，請宣告`` [數學運算子](https://www.w3schools.com/charsets/ref_utf_math.asp) [貨幣符號](https://www.w3schools.com/charsets/ref_utf_currency.asp) [箭頭符號](https://www.w3schools.com/charsets/ref_utf_arrows.asp) [表情符號](https://www.w3schools.com/html/html_emojis.asp) [各種圖示](https://www.w3schools.com/charsets/ref_utf_symbols.asp) ###HTML數學運算式 $$\sum_{i=0}^ni^2=\frac{(n^2+n)(2n+1)}{6}$$ [數學公式表示法](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference"mathjex") ###HTML超連結 #####標籤 -``加入連結 #####屬性 -`href`定義網址 -`target="_blank"`設定開啟模式 _blank在新分頁開啟 _self在原分頁開啟 -寫在head的style中 a:link狀態:連結 a:visited狀態:已參訪過 a:hover狀態:滑鼠游標經過 a:active狀態:點擊時 -Example ```HTML=1 ``` #####書籤 -``傳送至書籤"#C4" -``設定書籤"#C4" ###HTML圖片 #####圖片 -`` src:圖片來源 alt:找不到圖片時的置換文字 #####圖片地圖 -``讓圖片成為地圖 -``定義對應名稱地圖 -``感應區域 rect-正方形 circle-圓形 poly-多邊形 default-整個區域 -``區域座標 -``圖片在文字中對齊方式 bottom-底部 middle-置中 top-頂 #####背景圖片 寫在head的style中 -`background-image:url('ocean.jpg');`背景圖片 -`background-repeat:no-repeat;`圖片是否重複? repeat會直到填滿整個網頁為止 -`background-attachment:fixed;`圖片比例是否固定? fixed固定 nfixed不固定 -`background-size:100%;`圖片大小 [](https://i.imgur.com/iZS9Jsm.jpg) [](https://i.imgur.com/JF9XBpB.jpg) -Example ```HTML=1 ``` #####gif ![](https://i.imgur.com/oxJ6gDq.gif) ###HTML表格 #####標籤 -``定義一個表格 -``換列 -`
`定義表格第一欄 -`
`換行 -`
`定義表格標題 -Example ```HTML=1
飲料 金額
紅茶 20
綠茶 20
奶茶 30
```
飲料 金額
紅茶 20
綠茶 20
奶茶 30
#####屬性 -`border-collapse`界線是否留白? -`text-align`文字位置 left-置左 right-置右 center-置中 -`border-spacing`邊界是否留白? -`colspan`合併欄 -`rowspan`合併列 -`id`辨識編號 ###HTML清單 -`
  • `一項 -`
      `無編碼清單
      • HTML
      • CSS
      • JavaScript
      -`
      `有編碼清單
      1. HTML
      2. CSS
      3. JavaScript
      -`
      `描述清單 -`
      ` -`
      `
      HTML
      網站主架構
      CSS
      排版
      #####屬性 -`type=""`有編碼風格 disc-實心圓 circle-空心圓 square-正方形 none-無 1-數字 A-大寫字母 a-小寫字母 I-大寫羅馬數字 i-小寫羅馬數字 -`start="50"`設定起始點，從50開始數 -`float:left`橫向清單 -`display:block`留上下空間 ###HTML區塊 -`
      `區塊(block-level)，用於一開始設定，可容納多元素 -``區塊(inline)，用於段落內、`

      `中 -Example ```HTML=1

      London

      LondonisthecapitalcityofEngland.ItisthemostpopulouscityintheUnitedKingdom,withametropolitanareaofover13millioninhabitants.
      ```

      London

      LondonisthecapitalcityofEngland.ItisthemostpopulouscityintheUnitedKingdom,withametropolitanareaofover13millioninhabitants.

      ###HTML類別 可編寫多個Classes，並合併使用，類似JAVA多重繼承的概念 -`` 提前設定後，方便引用所設定之格式 XXX為格式之名稱 開頭設定為.XXX -`` 用於段落文字內 開頭設定須為span.EEE ###HTML標題元件 metadata放在head底下，網站上前台是看不到的! -``元素都要包在這個裡面 -`

    • 請為這篇文章評分？

    延伸文章資訊