2017年2月12日16:55:58

第二个子任务开始了，目标是编写一个简单的Web页面。首先需要从HTML Editors - w3school选择一款HTML编辑器，用来设计内网版天气查询系统页面，页面示例如下。

天气查询输入页面：

天气查询结果页面：

如上的参考文档里面推荐使用简单的文本编辑器来学习HTML，我当前使用的是Atom，就使用这个吧。

创建一个HTML文件

参照HTML Basic Examples - w3school写下了第一个HTML示例程序：

<!DOCTYPE html>
<html>
<body>
  <h1>My First Head.</h1>
</body>
</html>

显示效果如下：

相比最终的天气查询系统，这里有两个问题需要解决：

  • 设计出与示例效果一样的页面。
  • 如何将代码部署到Web Server端。

第一个问题是需要马上解决的。

设计Web页面

在上面最简单的HTML页面里只包含html, body, 以及h1元素。在阅读HTML Input Types - w3school之后可知与天气查询系统相比较还缺少input元素，于是添加代码：

<!DOCTYPE html>
<html>
<body>
  <h1>天气查询系统</h1>
  城市：
  <input type="text" name="query_city">
  <input type="submit" value="查询">
  <input type="submit" value="历史">
  <input type="submit" value="帮助">
</body>
</html>

显示效果为：

显然是中文编码问题，首先检查当前编辑器Atom编码方式，为utf-8。阅读w3schools的HTML Encoding (Character Sets)章节，发现需要在html通过如下语句指定解析的编码形式：

HTML4采用如下方式：

 <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

HTML4采用如下方式：

<meta charset="UTF-8">

分别测试了一下发现HTML5的声明可以工作，HTML4的那种方式不可以。之后在阅读了html5页面编码如何确定之后得知是自己在HTML4设定中指定的编码方式不对，修改为如下方式之后正常显示中文：

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

显示效果为：

需要再调整一下，使它们居中显示。

在HTML Styles查找到了居中style的设置方式。不过对于下面四个元素，一直无法设置居中：

城市：
<input type="text" name="query_city">
<input type="submit" value="查询">
<input type="submit" value="历史">
<input type="submit" value="帮助">

突然想起示例当中是将它们定义为form element，所以尝试在form上应用text-align样式，便可正常显示。

代码：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<!DOCTYPE html>
<html>
<body>
  <h1 style="text-align:center;">天气查询系统</h1>
  <form style="text-align:center;">
    城市：
    <input type="text" name="query_city">
    <input type="submit" value="查询">
    <input type="submit" value="历史">
    <input type="submit" value="帮助">
  </form>
</body>
</html>

效果：

results matching ""

    No results matching ""