--- disqus: HackMD_david --- ###### tags: `六角筆記王` `前端筆記` `HTML` # 基礎HTML教學重點 一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) <br> ## 建立 HTML 環境 ```html <!DOCTYPE html> 告訴大家這是html5的語法 <html> <head>關於整個專案的資訊放這裡面 <title>頁籤標題</title> </head> <body> 寫給別人看的要放這裡面 </body> </html> ``` <br> ## Emmet 預設安裝 ```html <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> ``` <br> ## 圖片 img img是少數沒有結尾標籤的 基本語法 ```html <img src="圖片位置" alt="給視障人士觀看，可以用播報讀給他們聽"> ``` 如果要找上一層(跟你現在的html檔相比)的圖片要用`..` 如果要找下一層的圖片用`/` ```html <img src="../2020css常用語法/img/logo1.png" alt=""> ``` <br> ## 斷行br <br> ## 連結 a 標籤 - 基本語法 ```html <a href="想要連結的網頁">顯示在網站的文字</a> ``` ### 想要開出新頁面 - 語法 ```html <a target="_blank" href="想要連結的網頁">顯示在網站的文字</a> ``` ### 製作當滑鼠移到連結時的彈跳視窗 - 語法 ```html <a title="連到google" href="想要連結的網頁">顯示在網站的文字</a> ``` - 顯示畫面 ![](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc7ced4bf-c343-4cab-8614-210a9615e4cf%2F_2021-06-21_11.52.29.png?table=block&id=8d03e539-11a5-426b-8632-bf7af6c95088&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=480&userId=&cache=v2) <br> ## ul li列表標籤 - 有一系列相同的資訊要呈現就可以用ul.li 不要用ul取代h2當標題 一定要用ul包起來 - 基本語法 ```html <ul> /*實心圓*/ <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> <ul> /*數字*/ <li>項目一</li> <li>項目二</li> <li>項目三</li> </ul> ``` - 顯示結果 ![](https://goofy-transport-a54.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F6ed5e3a9-f428-414b-99f1-f8157e33bdc8%2F_2021-06-22_12.07.50.png?table=block&id=b415a40e-4384-45a8-a3d2-32641372a0d2&spaceId=63ab1082-d836-4f90-9640-616e7a0e44a2&width=730&userId=&cache=v2)