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）组成
姓名、电话、人数
以三个文本输入框的形式表现出来日期、时间
虽然也是文本输入框，但填充了一些文字和字符，为什么呢？放在下面的代码构成讲解“预约确认”
以按钮的形式表现出来，按照通常的理解，点击这个按钮，就会出现一些交互性的动作，也放在后面讲解其它
还看出有什么了？还有一个可以称之为页面标题的“请输入您要预约的以下信息：”，它是以加粗且稍大号的字体显示的（可以想像成Word呀Excel里的粗体和字号）
但它只是我们自称的标题，我甚至也可以把它叫做段落标题，因为一个页面中理论上可以有无数个这类标题，且字体大小可以比较随意地设定，但它并不是网页本身的标题，下面即将说明的便是网页本身的标题“放眼”整个截图，除了浏览器本身的地址栏和书签栏以外，最上方网页的标题“填写信息 | 王老二餐厅预约服务”也是代码里一个组成部分
从HTML代码的语法来说，它是可有可无的，不过你会觉得有了它（实际做网站也会）是一种完美 ;)
代码的构成
什么是标签？这里可以事先了解一下：http://www.w3school.com.cn/html/html_primary.asp
第一行
<!DOCTYPE HTML>
“声明”自己是一个“合法的”html文档
注意，< 与 > 是始末配对标志，必须同时有，并且它俩对于html代码中的任意标签都是必须的
第二行及最后一行
<html> ...</html>
在这个物理范围内，写下咱们的html代码（以及后面要讲的css和javascript）
注意，这里在结束标签时，语法要求必须用 /
html头部（header）
<head> <title>填写信息 | 王老二餐厅预约服务</title></head>
道理类似，必须有首尾标签 <head> ... </head> 和 <title> ... </title>
这里切记，在 title 的物理范围以外的地方，不能有任何文本信息及符号（半角空格可）
body，是重点，直接决定了网页的展现内容
<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>
<h3>：是<h1>...<h5>的其中一个，字体由大到小，看似调整字体的作用，实则它们是作为页面的一些标识性标签，尤其是面向搜索引擎很适用（seo-friendly）<input>：输入型元素中常见的一类，由type指定表现内容，可以参考这里 http://www.w3school.com.cn/html/html_form_input_types.asp
本例中，除了text以外，都是HTML5里新增加的内容，比如number的输入框中，只能输入数字，date和time则适用于输入日期时间（tel目前只有 Safari 8 支持）submit，这里暂不作详细解释，大家理解为进入要下一个页面（预约内容的确认）的按钮即可
还有size，是<input>标签特有的属性，设定输入框在页面上显示出来的长度为15个半角字符<br>标签，起换行的作用，如果省略它，会是怎样的显示呢？
大家可以在jsfiddle里自行调整，看看效果，包括上面提到的size，现在是15，也可以调整数值大小，试试吧！
缩进
应该不难发现，上面第一次写出的完整代码中，除了第一行以外，其它行基本都是缩进的（2个半角空格），至少是开始标签的地方，这是为什么呢？
这完全是为了“美观”！对，年轻人爱美，咱们写代码也不能含糊（开个玩笑）
其实，缩不缩进，缩进几个空格，在语法上完全可以忽略，但这是作为一个程序员的素养，写出美观的代码是很有必要的，在工作中也是非常需要的
关于缩进，这里有一些说法，可作参考 https://doc.yonyoucloud.com/doc/java-code-conventions/page04.html
（因为每种编程语言的缩进都大同小异，所以暂时了解/实践一种就可以）其它
大家可能发现，使用jsfiddle操作实例时，并没有第一行以及<html>标签，这是为什么呢？
仅从HTML代码的语法来说，它们是可有可无的，但作为HTML文件来说，是必须的
所以通过jsfiddle等编程环境来练习时，可以省略这些部分，尽情玩弄html代码于股掌，而要作为开发网站为目的时，请务必写完整！（今后会有相关文章来讲解）
想把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/
分析页面与代码
页面的构成
在之间的基础项目上，加入了几个可选项目，作为细节，让顾客有更多选择性，也感到些许人性化
加入了几个不同的页面元素，提供稍微丰富的可视性，及提高了操作上的便利性
代码的构成
复选项
包间：<input type="checkbox">如需要请勾选
可以理解为想表达 YES / NO 的意思
实际生活中，经常看到的页面上会使用复选项让咱们确定某商品的筛选条件，比如颜色、大小、品牌
下拉列表
菜品：<select> <option selected>随意点菜</option> ...</select>
只要觉得想加入的内容，“恋人餐桌”“尊师餐桌”“哥们餐桌”...，可以随意增加N多个选项 option，其中我用 selected 属性把第一个选项设定成默认被选择的状态
理论上应该没有限制，不过，你不会想往里面加入上百个选项！！那会有多么地难看，以咱们这个例子，从jsfiddle试试便知 ;)
实际生活中，经常看到的页面上会使用下拉列表显示各省自治区的名称
单选项
酒水： <input type="radio" name="drink">酒水单点 <input type="radio" name="drink">酒水全包（+30元/人） <input type="radio" name="drink">仅软饮料（+10元/人）
与复选项类似，不过，这时只能选定其中一种
如果没有 name 这个属性，且必须要写成同一个属性值（因为是想表达河水，所以这里是drink），不然，选定后的效果会与复选项一样了，达不到单选的目的！以咱们这个例子，去掉所有 name="drink"， 挨个点击选项，从jsfiddle试试便知 ;)
实际生活中，经常看到的页面上会使用单选项让咱们选择性别：男 or 女
文本域（多行输入）
备注： <textarea rows="5" cols="30" placeholder="例：有老人和3岁小孩各一位，麻烦到时安排一下，谢谢"></textarea>
这个也很常见，可以改变属性 rows 以及 cols 的值大小试试效果
placeholder属性
看出例子中各输入框里的效果了吗？
这是HTML5里新增加的属性之一，主要是起到提示的作用，在它诞生之前，总会通过在旁边写上说明文，占用显示地盘还得考虑写怎样的文字描述才能让用户更容易地明白
以咱们这个例子，去掉所有placeholder属性和它的值，从jsfiddle看看效果吧
编辑软件/工具
那么多标签和代码，都得自己一个个敲键盘吗？！
大家可能有这样的担心，所以如果你不够勤奋的话，这确实是一个问题...
但又不用过于担心，有妙招，尤其在实际工作中，需要高效编码（不过，初学者还是多敲敲键盘吧，有益无害）
模板
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> </head> <body> </body></html>
这一段代码，我没有敲一个键盘，鼠标轻轻一点，自动生成，编码效率大幅提高（稍后讲解）
有些模板已经做得很人性化，甚至你连代码都不用怎么写，一个完整的页面就出来了
现在，作为html的骨架部分已经有具备，那么本篇前面部分讲述那些的 <title> <body>，接下来就该你来表演了
提示 ：虽然说骨架已经具备，但因为只是初学编写html，这样足够了，而实际工作中要开发一个网站的话，这里也是有很多学问的，今后的文章中会有涉及
自动补全
注：<input>标签有点特殊，可以忽略
开始标签（<h3><select><option><textarea>），可以从jsfiddle试试，只要键盘敲出了，那么结尾标签（</h3></select></option></textarea>） 自动就给咱们补全了，是不是很省心，而且会减少键盘敲打错误的几率，也即是降低了语法错误的几率编辑器/工具介绍
一方面，类似于jsfiddle这类在线编辑器，且能实时看到效果的还有很多，我自己一般都不去下载什么编辑软件了，直接在线上（云端）编程另一方面，现在收费或免费编辑工具很多，为程序员所钟爱的也不少，确实能极大地提升编码效率，大家可以参考一下主流的编辑器 https://zhuanlan.zhihu.com/p/29498175
由于种种原因，我平时用了一个叫做PSPad的编辑器，顺便推荐一下
通过它，鼠标轻轻一点，自动生成了稍前提到的模板代码的骨架，大家自行摸索实践吧
它好像没有在主流编辑器一览中，但我觉得挺好用，除了编码外相关功能也很齐全，它支持多国语言，官网提供汉化包还有一些“神作”，比如Emmet，大家可以在今后的工作实践中好好利用，这里不作讲解
页面显示太死板了，看不下去...
作者表示，这是一件很尴尬的事情 :(
本篇主要是想让大家知道怎样能写出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的用法等，期待下篇更精彩！
作者：一定要成长
链接：https://www.jianshu.com/p/1820da1ef933
共同学习，写下你的评论
评论加载中...
作者其他优质文章
