基礎HTML學習筆記

閱讀時間約 3 分鐘
一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)

建立 HTML 環境

<!DOCTYPE html> 告訴大家這是html5的語法
<html>
<head>關於整個專案的資訊放這裡面
<title>頁籤標題</title>
</head>
<body>
寫給別人看的要放這裡面
</body>
</html>

Emmet 預設安裝

<html lang="en"> /*語意使用英文*/
<meta charset="UTF-8"> /*使用UTF-81編碼,沒寫在IE會顯示亂碼*/
/*對網頁螢幕解析度優化,讓每個瀏覽器都能清楚*/
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">/*讓IE更新到最新*/
</html>

圖片 img

img是少數沒有結尾標籤的
基本語法
<img src="圖片位置" alt="給視障人士觀看,可以用播報讀給他們聽">
如果要找上一層(跟你現在的html檔相比)的圖片要用..
如果要找下一層的圖片用/
<img src="../2020css常用語法/img/logo1.png" alt="">

斷行br

連結 a 標籤

  • 基本語法
<a href="想要連結的網頁">顯示在網站的文字</a>

想要開出新頁面

  • 語法
<a target="_blank" href="想要連結的網頁">顯示在網站的文字</a>

製作當滑鼠移到連結時的彈跳視窗

  • 語法
<a title="連到google" href="想要連結的網頁">顯示在網站的文字</a>
  • 顯示畫面


ul li列表標籤

<ul> /*實心圓*/
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<ul> /*數字*/
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
  • 顯示結果
列表示範
    0會員
    5內容數
    留言0
    查看全部
    發表第一個留言支持創作者!
    你可能也想看
    【自學程式】HTML 屬性是什麼?解析常見 HTML 屬性用法在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
    Thumbnail
    avatar
    Vivian Yeh
    2021-06-15
    【自學程式】什麼是HTML標籤?初學網頁開法必備的四個HTML標籤HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
    Thumbnail
    avatar
    Vivian Yeh
    2021-06-07
    HTML.CSS學習筆記0201-圖片size寫法 background-size: 12px ; 當給一個數值的時候,另一個設定為auto 參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size 02-圖片切換-方法1: css: .a1
    Thumbnail
    avatar
    You
    2021-04-14
    HTML.CSS學習筆記0101-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
    Thumbnail
    avatar
    You
    2021-04-10
    語意化的 HTML ( Semantic HTML )Semantic HTML,直譯就是「語意化的 HTML」(也有人稱做: semantically-correct HTML , 語意正確的 HTML ) 指的是我們使用 HTML 建立架構的 Tag Name 是要有意義的,並適當的應用在其中
    Thumbnail
    avatar
    弦音
    2021-03-10
    JSFiddle是用於測試和展示用戶創建的協作HTML/CSS/JS線上IDE好用服務工具 譯自英文-JSFiddle是一個線上IDE服務和在線社區,用於測試和展示用戶創建的協作HTML,CSS和JavaScript代碼段,稱為“小提琴”。它允許模擬AJAX調用。在2019年,根據在全球和美國緊隨Cloud9 IDE的搜索次數,JSFiddle排名第二最受歡迎的在線IDE。 jsfi
    avatar
    學習 seeming
    2020-12-29