# 重要標籤介紹 ###### tags: `NKFW 網頁設計入門` * 標題 * 段落 * 連結 * 圖片 * List * Table * 表單 * input * label * select * textarea * button * Proeject1 * Proeject2 * Proeject3... 為了不讓內容過於鉅細靡遺失去自學精神，可以去掉某些標籤改成讓他們自己找資料，比方說表單的components 按照以上的順序，用h2當標題，並參考以下格式撰寫內容 ## 格式 在此用無序標題撰寫關於此標籤的使用方法 * 使用要點一 * 使用要點二 * 使用要點三... ```htmlembedded! <tagname>inner html</tagname> <!-- 在這裡要列出關於這個標籤的所有components --> <!-- 比方說heading包含h1~h6 --> <!-- 比方說form包含label、input...等 --> ``` 在此處放一張圖片，顯示此標籤在網頁上的樣子(電腦截圖後，在此處按Ctrl+V就會將圖片上傳) :::success ❓如果這個標籤使用上有值得思考的問題，就寫在此處 ::: :::warning ⚠️注意(觀念澄清) 在HTML標籤介紹比較少出現以上兩個情形，所以不會經常撰寫這種說明，但是在CSS的使用上就有很多值得注意的事情 ::: ## 標題(範例) * h1~h6分別顯示不同的字體大小，而h4以下的標題因為差不多大，所以比較少用，改用CSS控制。 ```htmlembedded! <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> ``` ![](https://i.imgur.com/B4EDR9P.png) ## 連結(Anchor) * href(Hypertext reference)後面的雙引號中放入所要連結的東西，可以是網頁(絕對位置或相對位置)、網頁的特定段落、信箱甚至是電話。 ```htmlembedded! <a href="https://www.google.com/">Google Search</a> ``` ![](https://i.imgur.com/yuNxzoa.png) :::success ❓試試看，如何讓圖片具有超連結效果 ::: ## 圖片（image) * width及height分別放入寬與高，用以控制圖片顯示大小。 * alt為圖片的替代文字，在圖片無法正常載入時顯示。 ```htmlembedded= <img src="" width="" height="" alt=""> ``` ## Project 格式與內容 :::info Project基本上會有幾種形式 * 應用前面教的內容製作出一個小成品 * 為了呼應自學的精神，可以讓他們去自己找某個標籤的資料然後加進Project裡面 * 其他：有想法都可以提出來討論，列入下次開會內容 以上經過教學組討論後將內容編寫上去 ::: ## Project範例 :::info Project內容的說明將會寫在此區塊 ::: 可以放一張圖片顯示成品(先不要直接放程式碼，等到講解的時候再來公布解說) ## Project1：自我介紹 ## Project2：
{"metaMigratedAt":"2023-06-17T21:59:38.056Z","metaMigratedFrom":"Content","title":"重要標籤介紹","breaks":true,"contributors":"[{\"id\":\"446000a6-582a-4f7d-8048-bac88a69fada\",\"add\":1363,\"del\":173},{\"id\":\"541b7e86-e161-433e-8e2f-e7ba62eff271\",\"add\":379,\"del\":1}]"}
Expand menu