HackMD
HTML CSS 學習第一篇 : 建立一個簡單的網頁
建立一個簡單的網頁
HTML標籤介紹
p 是段落的意思
h1~h6 是標題的意思 數字越大 標題越小
a 指的是連結，可以用它來加入一個網站連結
img 指的是插入圖片，可以加入一個圖片檔，或是加入一個網頁式圖片。
ul li 這個標籤是加入一個項目清單
附上HTML的網頁架構程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML CSS 教學</title>
</head>
<body>
</body>
</html>
所有網頁內容都要把程式碼寫在<body>裡面
現在就來試看看如何建立一個簡單的網頁吧~
<!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
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
傅小羊
Sun, May 3, 2020 11:08 AM
