时间：2023-09-07 05:36:02 | 来源：网站运营
时间：2023-09-07 05:36:02 来源：网站运营
你需要一个开始编程的契机~入门篇：来自于一个HTML页面的成就感：以下，一点不算废话的闲言碎语不管你现在学的是C系列语言还是类似于VB的 可视化编程语言 ，都这个时代了，你不另外学点HTML网页编程，还真是跟不上时代了
我尽量以HTML5为例解说第一次的 扫盲篇，给大家拿出了案例“餐厅预约系统”
另外，网上数不尽的各种官方的非官方的对于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，免费而无需在自己电脑上安装任何编程软件/编辑器，也不需要搭建什么服务器（目前这个阶段），只要能写出代码，展现出页面构成，是多么很有成就感的一件事
什么是标签？这里可以事先了解一下：http://www.w3school.com.cn/html/html_primary.asp
<!DOCTYPE HTML>“声明”自己是一个“合法的”html文档< 与 > 是始末配对标志，必须同时有，并且它俩对于html代码中的任意标签都是必须的<html> ... </html>在这个物理范围内，写下咱们的html代码（以及后面要讲的css和javascript）/<head> <title>填写信息 | 王老二餐厅预约服务</title></head>道理类似，必须有首尾标签 <head> ... </head> 和 <title> ... </title>title 的物理范围以外的地方，不能有任何文本信息及符号（半角空格可） <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.asptext以外，都是HTML5里新增加的内容，比如 number 的输入框中，只能输入数字，date 和 time 则适用于输入日期时间（tel 目前只有 Safari 8 支持）submit，这里暂不作详细解释，大家理解为进入要下一个页面（预约内容的确认）的按钮即可size，是 <input> 标签特有的属性，设定输入框在页面上显示出来的长度为15个半角字符<br> 标签，起换行的作用，如果省略它，会是怎样的显示呢？size，现在是15，也可以调整数值大小，试试吧！<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属性把第一个选项设定成默认被选择的状态酒水： <input type="radio" name="drink">酒水单点<input type="radio" name="drink">酒水全包（+30元/人）<input type="radio" name="drink">仅软饮料（+10元/人）与复选项类似，不过，这时只能选定其中一种name 这个属性，且必须要写成同一个属性值（因为是想表达河水，所以这里是drink），不然，选定后的效果会与复选项一样了，达不到单选的目的！以咱们这个例子，去掉所有 name="drink"， 挨个点击选项，从jsfiddle试试便知 ;)备注：<textarea rows="5" cols="30" placeholder="例：有老人和3岁小孩各一位，麻烦到时安排一下，谢谢"></textarea>这个也很常见，可以改变属性 rows 以及 cols 的值大小试试效果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>这一段代码，我没有敲一个键盘，鼠标轻轻一点，自动生成，编码效率大幅提高（稍后讲解）<title> <body>，接下来就该你来表演了提示 ：虽然说骨架已经具备，但因为只是初学编写html，这样足够了，而实际工作中要开发一个网站的话，这里也是有很多学问的，今后的文章中会有涉及
<input> 标签有点特殊，可以忽略<h3> <select> <option> <textarea>），可以从jsfiddle试试，只要键盘敲出了，那么结尾标签（</h3> </select> </option> </textarea>） 自动就给咱们补全了，是不是很省心，而且会减少键盘敲打错误的几率，也即是降低了语法错误的几率作者表示，这是一件很尴尬的事情 :(“前端工程师”，想必大家经常听到，尤其是准备就职的朋友们，html + css + ?，这个组合是必备技能
本篇主要是想让大家知道怎样能写出html代码，且讲解了页面构成和相关元素的使用
为了进一步激发大家的兴趣化解迷局，接下来把原本放在下一篇要讲的内容稍作提示，也为本篇作个了结
<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 属性希望能为社会尽一份绵薄之力，更多和您类似的迷惘中的朋友能看到
无论点赞、收藏、分享或是打赏，您的关注，便是我继续写作的动力
原创作品，欢迎转发，但求注明出处，谢谢合作！
关键词：成就,契机,入门
