HTML標準和語義化
打開瀏覽器，訪問一個網站，看到了漂亮的網頁。比如豆瓣（douban.com）是這樣的：
右鍵“查看頁面源代碼”，看到了一行行的文本。是這樣的：
把這些代碼復制下來，保存成index.html文件（Windows系統需開啟“顯示文件擴展名”，用“記事本”“另存為”時選擇“UTF-8”編碼）。
用瀏覽器打開，看到了和訪問douban.com一樣的內容。如圖：
這就是HTML，寫的時候是一行行的文本，用瀏覽器打開，就會渲染成圖形化的界面。
下面開始開發一個“在線閱讀網站”，可以用來當小說網站、博客、新聞網站等等。
第一步：思考產品要做哪些功能
首頁：顯示文章列表，列表里顯示每篇文章的標題和摘要等信息。
詳情頁：顯示整篇文章。
發表頁：錄入文章。
第二步：制作產品原型
把想法畫出來，就叫做“產品原型”。做原型的工具有很多，本書使用墨刀modao.cc來做。做好以后是這樣的：在線閱讀網原型0.1版 - 墨刀在線運行，截圖如下：
第三步：前端開發HTML頁面
先自學一下HTML 4和XHTML 1.0語法（并不影響以后學習HTML5），很簡單，預計需要1至2天時間。無需買書，推薦使用免費的在線教程：《HTML 教程-W3School》、《HTML 教程 - 菜鳥教程runoob.com》。
然后對著產品原型，做出3個頁面的HTML代碼。要求：
- 使用“UTF-8 without BOM”編碼
- 文件名為：
index.html、show_article.html、create_article.html - DTD使用“XHTML 1.0 Transitional”
推薦編輯器：Windows下使用EmEditor，Linux使用系統自帶的“文本編輯器”即可。
寫完之后，打開火狐瀏覽器（Firefox），安裝擴展HTML Validator，打開你編寫的網頁，觀察Firefox右上角，如果有錯誤，請按照提示進行修改，直到顯示為綠色的“0錯誤/0警告”，說明此HTML是100%符合語法標準的。如圖：
寫完之后和本書的代碼對比一下：github.com/sinkcup/phbook/tree/0.1，如果區別很大，說明不符合“語義化”的要求，這是機器檢查不出來的，需要自行學習，推薦讀讀《HTML語義化標簽探析》和《如何理解 Web 語義化？ - 知乎》，有條件的話建議買一本《基于Web標準的網頁設計技巧與實戰》進行修煉。
總結一下
我的技術水平
| HTML | CSS |
|---|---|
| HTML標準和語義化 | 暫不需要 |
作業
- 程序員入門常識：“UTF-8”和“Unicode”有什么區別？
- 精通Windows：記事本另存為時默認的“ANSI”編碼是什么意思，和“ASCII”有什么區別？
- 精通Windows：記事本的“UTF-8”編碼是“UTF-8 without BOM”還是“UTF-8 with BOM”？
- 精通Windows：從EmEditor官網了解價格，下載安裝并切換為免費版。
- 學習HTML：“HTML 4”和“XHTML 1.0”有什么區別？
- 擴展閱讀：《人在北京，30 歲了，實在買不起房，對生活感到悲觀，怎么辦？ - 知乎》
待解決的問題
-
這些HTML網頁都在電腦上存著，本機能打開，但別的電腦和手機如何訪問呢？
且聽下回分解。
