基礎HTML學習筆記
閱讀時間約 3 分鐘
一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)
標籤(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
不要用ul取代h2當標題
一定要用ul包起來 - 基本語法
<ul> /*實心圓*/
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<ul> /*數字*/
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
- 顯示結果
0會員
5內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。
那HTML屬性是怎麼運作的呢？
HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
01-圖片size寫法
background-size: 12px ;
當給一個數值的時候，另一個設定為auto
參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
02-圖片切換-方法1:
css:
.a1
01-選擇器寫法
圖片來源：自己擷取電腦螢幕
1.可以下.main .img .hot span
控制到a 下面的兩個span
也可以省略成下 .hot span 只要整個html不容易相撞到相同的class就可以
2.也可以下.hot .title 就單純控制span class=＂t
Semantic HTML，直譯就是「語意化的 HTML」(也有人稱做: semantically-correct HTML ， 語意正確的 HTML )
指的是我們使用 HTML 建立架構的 Tag Name 是要有意義的，並適當的應用在其中
譯自英文-JSFiddle是一個線上IDE服務和在線社區，用於測試和展示用戶創建的協作HTML，CSS和JavaScript代碼段，稱為“小提琴”。它允許模擬AJAX調用。在2019年，根據在全球和美國緊隨Cloud9 IDE的搜索次數，JSFiddle排名第二最受歡迎的在線IDE。
jsfi
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。
那HTML屬性是怎麼運作的呢？
HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
01-圖片size寫法
background-size: 12px ;
當給一個數值的時候，另一個設定為auto
參考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
02-圖片切換-方法1:
css:
.a1
01-選擇器寫法
圖片來源：自己擷取電腦螢幕
1.可以下.main .img .hot span
控制到a 下面的兩個span
也可以省略成下 .hot span 只要整個html不容易相撞到相同的class就可以
2.也可以下.hot .title 就單純控制span class=＂t
Semantic HTML，直譯就是「語意化的 HTML」(也有人稱做: semantically-correct HTML ， 語意正確的 HTML )
指的是我們使用 HTML 建立架構的 Tag Name 是要有意義的，並適當的應用在其中
譯自英文-JSFiddle是一個線上IDE服務和在線社區，用於測試和展示用戶創建的協作HTML，CSS和JavaScript代碼段，稱為“小提琴”。它允許模擬AJAX調用。在2019年，根據在全球和美國緊隨Cloud9 IDE的搜索次數，JSFiddle排名第二最受歡迎的在線IDE。
jsfi