#WEB安全基礎：HTML/CSS系列，本系列採用第二人稱以免你不知道我在對著你說話，以朋友的視角和你交流 HTML的中文名叫做超文本標記語言，CSS叫做層疊樣式表 用HTML設計你的第一個網頁，你需要做的是用你的眼睛看，用你的手敲。 以下就是代碼，我已經幫你設計好了 我寫了註釋有助於你理解。 以下 ...
#WEB安全基礎：HTML/CSS系列，本系列採用第二人稱以免你不知道我在對著你說話，以朋友的視角和你交流
HTML的中文名叫做超文本標記語言，CSS叫做層疊樣式表
用HTML設計你的第一個網頁，你需要做的是用你的眼睛看，用你的手敲。
以下就是代碼，我已經幫你設計好了
1 <html> 2 <head> 3 <!--我是註釋在瀏覽器里看不到我哦--> 4 <title>Head First Lounge</title> <!--瀏覽器標簽上顯示的文本--> 5 </head> 6 <body> 7 <h1>Welcome to the Head First Lounge</h1> <!--標題，有6個分別是<h1><h2><h3>……依此類推，在瀏覽器里顯示的大小不同--> 8 <img src = "images/drinks.jpg" alt = "果汁" title = "果汁"> <!--插入圖片 src是圖片路徑，alt是在圖片無法顯示時的文本標識內容，title是滑鼠放在圖片上所顯示的提示內容--> 9 <P> 10 Join us any evening for refreshing elixirs, conversation and maybe a game of two of <em>Dance Revolution</em>Wireless access is always provided;BYOWS (Brinf you Web server). 11 </p> <!--<p>是正文，<em>是斜體字--> 12 <h2>Directions</h2> <!--<h2>是小一號的<h1>標題--> 13 <p> 14 You'll find us right in the center of downtown Website. Come join us! 15 </p> 16 </body> 17 </html> 18 19 <!--html文檔主體 20 <html> 21 <head> 22 </head> 23 <body> 24 </body> 25 </html> 26 -->
我寫了註釋有助於你理解。
以下是這個網頁的目錄
還有images文件夾里的文件
用於網頁引用的圖片
你肯定想看看自己的網頁寫成什麼樣子，依我看不怎麼樣，但你還是想看看，對吧？
你只需要用瀏覽器打開index.html(所有文件都會用下劃線強調)
它看起來有些單調對吧？是因為你還不會CSS，不要擔心，不出一周這種尷尬的網頁就會離你而去。
-在瀏覽器頁面中按F12可以查看網頁相關信息
-在瀏覽器中右鍵點擊審查元素即可查看網頁各個部分的代碼
以上兩個技巧對任何人來說都適用，包括你—— 一名不會寫網頁的肥宅朋友
這是這節課的附件
編輯器：notpad++官網下載地址：https://notepad-plus-plus.org/
//本系列教程基於《Head First HTML與CSS(第二版)》,此書國內各大購物網站皆可購買
轉載請註明出處:by:M_ZPHr
最後修改日期：2019-01-16
