HTML簡介 · 廖雪峰 JavaScript Python Git 教程

# 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`，雙擊或者把文件拖到瀏覽器中，就可以看到效果： ![hello.html](https://box.kancloud.cn/2016-01-15_56988a28c45af.png) HTML文檔就是一系列的Tag組成，最外層的Tag是`<html>`。規范的HTML也包含`<head>...</head>`和`<body>...</body>`（注意不要和HTTP的Header、Body搞混了），由于HTML是富文檔模型，所以，還有一系列的Tag用來表示鏈接、圖片、表格、表單等等。 ### 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> ``` 效果如下： ![hello-css](https://box.kancloud.cn/2016-01-15_56988a28d8b16.png) ### 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> ``` 效果如下： ![hello-js-change-color](https://box.kancloud.cn/2016-01-15_56988a28ea65e.png) ### 小結如果要學習Web開發，首先要對HTML、CSS和JavaScript作一定的了解。HTML定義了頁面的內容，CSS來控制頁面元素的樣式，而JavaScript負責頁面的交互邏輯。講解HTML、CSS和JavaScript就可以寫3本書，對于優秀的Web開發人員來說，精通HTML、CSS和JavaScript是必須的，這里推薦一個在線學習網站w3schools： [http://www.w3schools.com/](http://www.w3schools.com/) 以及一個對應的中文版本： [http://www.w3school.com.cn/](http://www.w3school.com.cn/) 當我們用Python或者其他語言開發Web應用時，我們就是要在服務器端動態創建出HTML，這樣，瀏覽器就會向不同的用戶顯示出不同的Web頁面。