程序员我爱编程

你需要一个开始编程的契机~入门篇：来自于一个HTML页面的成就感

2018-10-06  本文已影响12人  一定要成长
HTML Programming

以下，一点不算废话的闲言碎语

不管你现在学的是C系列语言还是类似于VB的 可视化编程语言 ，都这个时代了，你不另外学点HTML网页编程，还真是跟不上时代了
比如我身边的软件开发同行，有做 嵌入式开发 的，有做 桌面应用开发 的，还有做 APP开发 的，其中不乏高手，但很多人都想学或是已经在学用一定程度的HTML网页编程技术

为什么呢？打个通俗的比方（或许有些牵强），电脑上的输入法，不管你用拼音还是五笔甚至日文德文，都得使用键盘吧
要打出各种语言文字，就相当于嵌入式开发呀桌面应用开发呀APP开发，而你可能需要用到ctrl或alt等快捷键，那么这就可能相当于使用HTML
这种情形下，HTML类似于辅助性的功能，但并不代表要用它去做多么令人激动的事，所以这个比喻仅仅针对上面的命题，适用于非网页编程的开发者想做的事情

还不知道HTML的朋友，不用着急可以自行找度娘问问，知道HTML的朋友可以更加期待本篇内容，不管怎样咱们从基础开始，进入正题

初识HTML

我尽量以HTML5为例解说
另外，网上数不尽的各种官方的非官方的对于HTML的定义，大家可以先不用理会
跟着本篇学会了，自然会有不少启发，到时再去看定义，应该会有较好的理解

第一次的 扫盲篇，给大家拿出了案例“餐厅预约系统”
那么从本篇开始（包括后续各篇章）就围绕着这个案例引导大家进入角色--做软件（网站）

上菜：怎样的情况？

HTML制作出来的简单页面效果

填写预约信息的页面

贴上代码

<!DOCTYPE HTML>
<html>
  <head>
  <title>填写信息 | 王老二餐厅预约服务</title>
  </head>
  <body>
    <h3>请输入您要预约的以下信息：</h3>
    姓名：<input type="text" size="15"><br>
    电话：<input type="tel" size="15"><br>
    人数：<input type="number" style="width: 10em"><br>
    日期：<input type="date"><br>
    时间：<input type="time"><br>
    <input type="submit" value="预约确认">
  </body>
</html>

这里可以“动"起来：https://jsfiddle.net/codingme/xyz58L6t/
另外，大家可以使用这个网站来任意编写前端代码 html + css + javascript，免费而无需在自己电脑上安装任何编程软件/编辑器，也不需要搭建什么服务器（目前这个阶段），只要能写出代码，展现出页面构成，是多么很有成就感的一件事

调味：分析页面与代码

页面的构成

从截图可知，由姓名到时间的几个输入用的基本信息项目，和一个确认按钮等元素（element）组成

代码的构成

什么是标签？这里可以事先了解一下：http://www.w3school.com.cn/html/html_primary.asp

“声明”自己是一个“合法的”html文档
注意，< 与 > 是始末配对标志，必须同时有，并且它俩对于html代码中的任意标签都是必须的

在这个物理范围内，写下咱们的html代码（以及后面要讲的css和javascript）
注意，这里在结束标签时，语法要求必须用 /

道理类似，必须有首尾标签 <head> ... </head> 和 <title> ... </title>
这里切记，在 title 的物理范围以外的地方，不能有任何文本信息及符号（半角空格可）

想把HTML用得更好？

入门了？！或许吧，谦虚一点，下面继续...

再加入几个常见元素

HTML制作出来的页面效果

填写预约信息的页面 更多项目

贴上代码

<!DOCTYPE HTML>
<html>
  <head>
  <title>填写信息 | 王老二餐厅预约服务</title>
  </head>
  <body>
    <h3>请输入您要预约的以下信息：</h3>
    姓名：<input type="text" size="15" placeholder="张三"><br>
    电话：<input type="tel" size="15" placeholder="13712345678"><br>
    人数：<input type="number" style="width: 10em" placeholder="10"><br>
    日期：<input type="date"><br>
    时间：<input type="time"><br>
    包间：<input type="checkbox">如需要请勾选<br>
    菜品：
    <select>
      <option selected>随意点菜</option>
      <option>特色餐桌</option>
      <option>四季餐桌</option>
      <option>家庭餐桌</option>
      <option>商务餐桌</option>
      <option>豪华餐桌</option>
    </select><br>
    酒水：
    <input type="radio" name="drink">酒水单点
    <input type="radio" name="drink">酒水全包（+30元/人）
    <input type="radio" name="drink">仅软饮料（+10元/人）<br>
    备注：
    <textarea rows="5" cols="30" placeholder="例：有老人和3岁小孩各一位，麻烦到时安排一下，谢谢"></textarea><br>
    注：如果需要包场，请另外联系<br>
    <input type="submit" value="预约确认">
  </body>
</html>

仍然是jsfiddle，这里可以“动"起来：https://jsfiddle.net/codingme/tq8fyndb/

分析页面与代码

页面的构成

在之间的基础项目上，加入了几个可选项目，作为细节，让顾客有更多选择性，也感到些许人性化
加入了几个不同的页面元素，提供稍微丰富的可视性，及提高了操作上的便利性

代码的构成

可以理解为想表达 YES / NO 的意思
实际生活中，经常看到的页面上会使用复选项让咱们确定某商品的筛选条件，比如颜色、大小、品牌

只要觉得想加入的内容，“恋人餐桌”“尊师餐桌”“哥们餐桌”...，可以随意增加N多个选项 option，其中我用 selected 属性把第一个选项设定成默认被选择的状态
理论上应该没有限制，不过，你不会想往里面加入上百个选项！！那会有多么地难看，以咱们这个例子，从jsfiddle试试便知 ;)
实际生活中，经常看到的页面上会使用下拉列表显示各省自治区的名称

与复选项类似，不过，这时只能选定其中一种
如果没有 name 这个属性，且必须要写成同一个属性值（因为是想表达河水，所以这里是drink），不然，选定后的效果会与复选项一样了，达不到单选的目的！以咱们这个例子，去掉所有 name="drink"， 挨个点击选项，从jsfiddle试试便知 ;)
实际生活中，经常看到的页面上会使用单选项让咱们选择性别：男 or 女

这个也很常见，可以改变属性 rows 以及 cols 的值大小试试效果

编辑软件/工具

那么多标签和代码，都得自己一个个敲键盘吗？！
大家可能有这样的担心，所以如果你不够勤奋的话，这确实是一个问题...
但又不用过于担心，有妙招，尤其在实际工作中，需要高效编码（不过，初学者还是多敲敲键盘吧，有益无害）

这一段代码，我没有敲一个键盘，鼠标轻轻一点，自动生成，编码效率大幅提高（稍后讲解）
有些模板已经做得很人性化，甚至你连代码都不用怎么写，一个完整的页面就出来了
现在，作为html的骨架部分已经有具备，那么本篇前面部分讲述那些的 <title> <body>，接下来就该你来表演了

提示 ：虽然说骨架已经具备，但因为只是初学编写html，这样足够了，而实际工作中要开发一个网站的话，这里也是有很多学问的，今后的文章中会有涉及

页面显示太死板了，看不下去...

作者表示，这是一件很尴尬的事情 :(
本篇主要是想让大家知道怎样能写出html代码，且讲解了页面构成和相关元素的使用
为了进一步激发大家的兴趣化解迷局，接下来把原本放在下一篇要讲的内容稍作提示，也为本篇作个了结

“前端工程师”，想必大家经常听到，尤其是准备就职的朋友们，html + css + ?，这个组合是必备技能
“？”的地方先保留一下，现在只是针对本节的尴尬局面，对css作点预习

还是先上页面的效果

填写预约信息的页面 稍加修饰

代码

<head>
  <title>填写信息 | 王老二餐厅预约服务</title>
</head>

<body style="font-family: Microsoft YaHei">
  <h3 style="background-color: lightgray">请输入您要预约的以下信息：</h3>
  姓名：<input type="text" size="15" placeholder="张三" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  电话：<input type="tel" size="15" placeholder="13712345678" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  人数：<input type="number" style="width: 10em" placeholder="10" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  日期：<input type="date" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  时间：<input type="time" style="border-radius: 5px; border:solid 1px black; margin:5px;"><br>
  包间：<input type="checkbox">如需要请勾选<br>
  菜品：
  <select style="border-radius: 5px; border:solid 1px black; margin:5px;">
    <option selected>随意点菜</option>
    <option>特色餐桌</option>
    <option>四季餐桌</option>
    <option>家庭餐桌</option>
    <option>商务餐桌</option>
    <option>豪华餐桌</option>
  </select><br>
  酒水：
  <input type="radio" name="drink">酒水单点
  <input type="radio" name="drink">酒水全包（+30元/人）
  <input type="radio" name="drink">仅软饮料（+10元/人）<br>
  备注：
  <textarea rows="5" cols="30" placeholder="例：有老人和3岁小孩各一位，麻烦到时安排一下，谢谢" style="border-radius: 5px; border:solid 1px black; margin:5px;"></textarea><br><br>
  注：如果需要包场，请另外联系<br>
  <input type="submit" value="预约确认" style="border-radius: 5px; border:solid 1px black; padding:5px; margin: 10px 0 0 150px; display: block">
</body>

jsfiddle实例在这里 https://jsfiddle.net/codingme/5j6obdgf/

这里只作了简单的变化，所以页面并没有被我改得多么漂亮...
不过，大家看出什么端倪了吗？
除了我把页面整体（<body>）的字体从默认的宋体变化成了微软雅黑，更多魔法在于 style 属性
我在每个输入框类的元素中，分别加入了一小串代码，即所谓的css（与下篇要讲解的css文件异曲同工，本质是一样的），修饰需要变化的元素
大家可以自行实践，网上查阅css的用法等，期待下篇更精彩！

下一篇 《或许程序员与艺术家有前世的缘分~入门篇：Hello Style! 化妆师CSS带来的问候》

希望能为社会尽一份绵薄之力，更多和您类似的迷惘中的朋友能看到
无论点赞、收藏、分享或是打赏，您的关注，便是我继续写作的动力
原创作品，欢迎转发，但求注明出处，谢谢合作！

上一篇 下一篇

猜你喜欢

热点阅读