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网页都在电脑上存着，本机能打开，但别的电脑和手机如何访问呢？
且听下回分解。
