# HTML CSS 學習第一篇 : 建立一個簡單的網頁 ## 建立一個簡單的網頁 ### HTML標籤介紹 --- **p** 是段落的意思 **h1~h6** 是標題的意思 數字越大 標題越小 **a** 指的是連結，可以用它來加入一個網站連結 **img** 指的是插入圖片，可以加入一個圖片檔，或是加入一個網頁式圖片。 **ul li** 這個標籤是加入一個項目清單 附上HTML的網頁架構程式碼 ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML CSS 教學</title> </head> <body> </body> </html> ``` ### 所有網頁內容都要把程式碼寫在<body>裡面 --- 現在就來試看看如何建立一個簡單的網頁吧~ ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML CSS 教學</title> </head> <body> <h1>這是第一個練習</h1> <p>在這邊我把練習的東西都使用出來~ 請觀看以下內容</p> <a target="_blank" href="https://www.google.com">我是Google</a> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> <ul> <li>我是大哥</li> <li>我是二哥</li> <li>我是三哥</li> <li>我是四哥</li> <li>我是小妹</li> </ul> <ul> <li><a href="#">當然</a></li> <li><a href="#">也可以</a></li> <li><a href="#">變成連結</a></li> </ul> </body> </html> ``` ### 介紹使用內容 在這邊我使用了以上的用法，加上一點變化。 h1是我的主要標題，在這邊我也使用了a連結，把它連到了google的首頁，這邊也看到了，我在a連結這邊，使用了一個語法使它能夠，當我們在點選連結時，以另開一個網頁的方式開始連結，語法是target="_blank",我也加上了一個img圖片，使用的是網址圖片連結，在這邊如果要使用一個項目清單，也是非常簡單的，使用ul>li的語法，新增項目清單，如上列程式碼。 --- ## 實際做出來的程式碼與範例圖片 ### [程式碼Codepen](https://codepen.io/ert66553/pen/GRpOqKz) ![](https://i.imgur.com/jfBW1W4.jpg) --- >[name=傅小羊] >[time=Sun, May 3, 2020 11:08 AM] ###### tags: `HTML` `CSS` `前端` `筆記` `學習筆記`