HTML标准和语义化

HTML标准和语义化

打开浏览器，访问一个网站，看到了漂亮的网页。比如豆瓣（douban.com）是这样的：

豆瓣首页截图

右键“查看页面源代码”，看到了一行行的文本。是这样的：

豆瓣首页HTML源代码截图

把这些代码复制下来，保存成index.html文件（Windows系统需开启“显示文件扩展名”，用“记事本”“另存为”时选择“UTF-8”编码）。

Windows 10显示“文件扩展名”

Windows记事本另存为选择“UTF-8”编码

用浏览器打开，看到了和访问douban.com一样的内容。如图：

豆瓣首页HTML源代码保存到本地

这就是HTML，写的时候是一行行的文本，用浏览器打开，就会渲染成图形化的界面。

下面开始开发一个“在线阅读网站”，可以用来当小说网站、博客、新闻网站等等。

第一步：思考产品要做哪些功能

• 首页：显示文章列表，列表里显示每篇文章的标题和摘要等信息。

• 详情页：显示整篇文章。

• 发表页：录入文章。

第二步：制作产品原型

把想法画出来，就叫做“产品原型”。做原型的工具有很多，本书使用墨刀modao.cc来做。做好以后是这样的：在线阅读网原型0.1版 - 墨刀在线运行，截图如下：

在线阅读网原型0.1版 - 首页

在线阅读网原型0.1版 - 详情页

在线阅读网原型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%符合语法标准的。如图：

Firefox扩展HTML Validator“0错误/0警告”

写完之后和本书的代码对比一下：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网页都在电脑上存着，本机能打开，但别的电脑和手机如何访问呢？

  且听下回分解。