[微精通:網頁設計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

留言