002.HTML簡介
網頁就是HTML?這麼理解大概沒錯。因為網頁中不但包含文字,還有圖片、視訊、Flash小遊戲,有複雜的排版、動畫效果,所以,HTML定義了一套語法規則,來告訴瀏覽器如何把一個豐富多彩的頁面顯示出來。
HTML長什麼樣?上次我們看了新浪首頁的HTML原始碼,如果仔細數數,竟然有6000多行!
所以,學HTML,就不要指望從新浪入手了。我們來看看最簡單的HTML長什麼樣:
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
可以用文字編輯器編寫HTML,然後儲存為hello.html
,雙擊或者把檔案拖到瀏覽器中,就可以看到效果:
HTML文件就是一系列的Tag組成,最外層的Tag是<html>
。規範的HTML也包含<head>...</head>
和<body>...</body>
CSS簡介
CSS是Cascading Style Sheets(層疊樣式表)的簡稱,CSS用來控制HTML裡的所有元素如何展現,比如,給標題元素<h1>
加一個樣式,變成48號字型,灰色,帶陰影:
<html> <head> <title>Hello</title> <style> h1 { color: #333333; font-size: 48px; text-shadow: 3px 3px 3px #666666; } </style> </head> <body> <h1>Hello, world!</h1> </body> </html>
效果如下:
JavaScript簡介
JavaScript雖然名稱有個Java,但它和Java真的一點關係沒有。JavaScript是為了讓HTML具有互動性而作為指令碼語言新增的,JavaScript既可以內嵌到HTML中,也可以從外部連結到HTML中。如果我們希望當用戶點選標題時把標題變成紅色,就必須通過JavaScript來實現:
<html>
<head>
<title>Hello</title>
<style>
h1 {
color: #333333;
font-size: 48px;
text-shadow: 3px 3px 3px #666666;
}
</style>
<script>
function change() {
document.getElementsByTagName('h1')[0].style.color = '#ff0000';
}
</script>
</head>
<body>
<h1 onclick="change()">Hello, world!</h1>
</body>
</html>
點選標題後效果如下:
小結
如果要學習Web開發,首先要對HTML、CSS和JavaScript作一定的瞭解。HTML定義了頁面的內容,CSS來控制頁面元素的樣式,而JavaScript負責頁面的互動邏輯。
講解HTML、CSS和JavaScript就可以寫3本書,對於優秀的Web開發人員來說,精通HTML、CSS和JavaScript是必須的,這裡推薦一個線上學習網站w3schools:
以及一個對應的中文版本:
當我們用Python或者其他語言開發Web應用時,我們就是要在伺服器端動態創建出HTML,這樣,瀏覽器就會向不同的使用者顯示出不同的Web頁面。