[微精通：網頁設計Vue + Node.js + MySQL] 1.1. HTML

張貼者： 日期：
HTML如何文字版的Word，讓你透過文字的方式進行內容的排版。

 

image/svg+xml做個介紹殭屍的網⾴，怎麼開始好 ? 1.1. HTML < meta charset = " utf-8 " > < html > < body > 這是我們的第⼀個 HTML < img src =‘ zombie.png ' > </ body > < /html > 執⾏結果 <meta charset = "utf-8" > <html> <body> < h1 > 你好 < /h1 > < h2 > 你好 < /h2 > < h3 > 你好 < /h3 > < h4 > 你好 < /h4 > < h5 > 你好 < /h5 > < h6 > 你好 < /h6 > < a href = 'https://coding104.blogspot.com/' > 學的會、學的起的 Coding104 </a> < img src = 'smile.jpg' > < ul > < li > HTML < /li > < li > Vue.js < /li > < li > Note.js < /li > < li > MySQL < /li > < /ul > < p > 我是⼀個段落，結束時會換⾏。 < /p > < div > 我是⼀個區塊，結束時也會換⾏。 < /div> < span > 我是⼀個 span < /span > 不換⾏ < br > < button > 我是按鈕 < /button > <br> < input type = ' textbox ' > < input type = ' checkbox ' > < input type = ' radio ' > </body> </html> 執⾏結果： 1. 打開 Visual Studio Code 後，點選 ’New File...’ 就可以開始編輯網⾴。 1. <html> 標籤作為整個 HTML 檔的開始，⽽標籤⼀般是成對的，有開 始就有結束，結束標籤會多加⼀個反斜線 ’/' 在前⽅，如 </html> 。 3. 將檔案命名為 ’home.html' 存放在桌⾯。 1. Mac 中使⽤ Safari 瀏覽器，使⽤ google 的圖片搜 尋殭屍 ’zombie cartoon’ ，這樣就跑出搜尋 zombie 的網⾴了，這樣的網⾴要怎麼製作呢 ? 1. Google 中搜尋 ’virtual studio code’ 。 2. 點選 ’Visual Studio Code' 。 1. 安裝⽂字編輯器 - Visual Studio Code 3. 先選 ’Download Mac Universal’ 進⾏下載。 4. 連點兩下。 5. 第⼀次執⾏時同意 ' 打開 ' 網路下載的 Visual Studio Code 即可開始使⽤。 你可以把 Visual Studio Code 托拉到 ' 應⽤程式 ' ⽬錄中，分類為您的⼀ 應⽤程式。 提 ⽰ 2. 建立⼀個 home.html 檔 w1_1_1 - home.html 2. 在開啟的新檔案中選 ’File' 後選 'Save As...' 4. 如此， Visual Studio Code 就會 依照檔案類型，幫我們認得 html 語法。 3. HTML ，⼀個由標籤與屬性組或的⽂書編輯語法 2. 接著是 <body> 標籤表⽰整份⽂件的內容主體，所有要顯⽰的內 容都應該放在 body 中，它以巢狀的⽅式存在於 <html> 標籤中。 3. 接著打上你要的⽂字， 這個⽂字會顯⽰在網⾴上。 4. 使⽤ <img> 標籤顯⽰⼀張圖，使⽤ src 屬性指定圖片的 來源，等於符號 (=) 就像是指定、給予的意思，後⾯接的是 ⼀對單引號 (‘’) ，裡⾯放上圖片的檔名即可，當然這個檔案 會與 home.html 在同⼀個⽬錄中，⽬前是 ’ 桌⾯ ' 。 5. <img> 是⼀個單⼀標籤，因為它 不需要也不能在圖片中裝入其他東 ⻄，因此寫下⼀個 <img> 即可。 6. 因此，⼀個 HTML 可以說是由標籤與屬性所組成的⽂件， 透過標籤與屬性進⾏⽂件排版，⽽後在瀏覽器上顯⽰。 7. 最後，為避免亂碼，我們使⽤ <meta> 這個標籤在 <html> 標籤之前，並使⽤字元集 charset 屬性指定為 "utf-8" 編碼， 當然這份 html 編寫時也是要使⽤ utf-8 編碥。 8. ⼩提⽰，屬性上所使⽤的引號可以是單引號 ('') 也可以是雙引號 ("") ，記得成對使⽤即可。 請注意⼤⼩寫，像 safari 瀏覽器就會分判⼤⼩寫的差異，如圖片檔的⼤⼩寫 不⼀致時會視為不同的檔案。 提 ⽰ 4. 安裝 Chrome 瀏覽器 1. 在 Google 中搜尋 chrome 搜尋後點選 "Google Chrome | 立即下載 Chrome" 。 2. 點選 ’ 下載 Chrome' 。 3. 選擇對應你的 Mac 的 CPU 下載 Chrome 。 4. 點兩下下載的安裝檔。 5. 將 Google Chrome 拉到 應⽤程式中存放。 6. 找到並點兩下 Google Chrome ，第⼀次執⾏時會詢問是否 打開，選 ’ 打開 ’ 即可開啟 Chrome 。 5. 拖拉 'home.html' ⾄ Chrome 瀏覽器顯⽰ 1. 將桌⾯的 ’home.html' 托拉到 Chrome 中。 2. 記得從 W_1_1 範例中 copy 'zombie.png' 圖片檔⾄桌⾯。 3. 網⾴顯⽰完成，其中有⽂字和圖片。 認識常⽤的 HTML 標籤 w1_1_2 - home.html 1. <h> 標籤是 head 標題的意思，由⼤到⼩分 別是 <h1>~<h6> ，只要把想顯⽰的⽂字放入 於開始標籤與結束標籤之間即可。 2. 連結標籤 <a> 它是 Anchor 錨點的意思， href 屬性放入網址，即 可將在標籤中的內容加上連結，滑屬點⼀下即可到 href 所指定的網 址中，⽽ href 為 Hypertext Reference 的縮寫。 3. 圖片標籤 <img> 它是 Image 圖片的縮寫， src 為 soruce 的縮寫， 指定圖片的來源。圖片 smile.jpg 可在 W_1_2 範例中取得。 4. <ul> 與 <li> 通常⼀起使⽤來呈現⼀個清單， <ul> 可包含多個 <li> 標籤。 5. <ul> 為 unorder list 未排序清單的意思。 6. <li> 為 list item 清單項⽬的意思， <li> 中放的是顯⽰的內容。 7. <p> 是 Paragraph 段落的意思，就像⼀般的 ⽂書處理中的換⾏，在 HTML 中使⽤ <p> 標籤。 8. <div> 是 division 區段的意思，預設也會像 <p> 標籤⼀樣換⾏， 未來我們會使⽤ <div> 標籤作出⼀些與 <p> 不同的排版效果。 9. <span> 固名思意就是垃圾的意思，什麼效果也 沒有，只是幫你把⼀些內容裝起來。 10. <br> 是 break 斷⾏的意思，它⼀個單⼀標籤，功能就是換⾏。 11. <button> 會產⽣⼀個按鈕，其中的⽂字會顯⽰在按鈕上。 12. <input> 為輸入 input 的意思，它會依 type 屬性，產⽣出不⼀樣的輸入控制項。 1 2 4 1 3 2 & 3 4 5 6 7 5 6 8 7 8 9 9

留言

張貼留言