018 - 无敌是多么寂寞（I）

上一集：017 - 虽千万人吾往矣

登录/注册后可看大图

万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！

在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。

很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？

作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：

会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

登录/注册后可看大图
猛戳

登录/注册后可看大图超清

1、input元素的type属性

本节课我们来掌握input元素的一个神奇属性，type。

所有玩法，在宝典上已经更新，鱼油可以去复习：传送门

不得不说，input元素已经变成HTML标签中具有最多样式的标签哈！

所以可见“无敌是多么寂寞”？！

2、XAMPP

前端开发人员必备神器，前面讲过了，不会的请看：教你如何在本地搭建服务器测试环境

在localhost或者127.0.0.1的XAMPP路径下纺织文件，然后启动面板中“Apache”，加载相应的".html"和".php"文件即可。

3、按钮

input元素可以变身为三种按钮：普通、提交、重置。

认真的鱼油会反应过来，和上一讲我们介绍的button元素的功能是一样滴。

没错，除了input按钮是单标签外，二者没有本质区别。

如果鱼油恰巧使用的是Mac系统，而且是Chrome浏览器，那么样式上会有不同：

按钮

button就是最普通的按钮，往往通过一些全局事件onclick()来绑定JS：

onclick()方法用来实现，当用户单击绑定该事件的元素，便会触发相应的JS事件。

关于这些全局事件我们后续课程会讲到，这一讲先接受。

reset按钮是用来重置表单，submit用来提交表单和button中完全一样。

4、单选框

当把type值设置为radio，便可以实现单选框。

就像：

女
男非男非女

登录/注册后可看大图

怎么肥四？！说好的单选呢。

没错，我们需要将相同一组的选项设置相同的name属性才可以，修改：

登录/注册后可看大图

name属性很关键哦，用来定义一组标签，这样才能执行“互斥”的单选。

5、多选

理解了单选，多选就很简单了，没错还是需要设置相同的name属性：

西瓜
香蕉蓝莓

登录/注册后可看大图

6、时间与日期

input元素设置为时间与日期，大家不用“记”下来，只需要直到用的时候如何设置即可。

type值总共有5类：time、date、month、week、datetime-local

覆盖了日常开发中，对时间和日期格式的需要，一段代码：

时间：
日期：
年月：
星期：
本地日期和时间：

登录/注册后可看大图

当我们将这些数据提交后，会在浏览器中看到：

登录/注册后可看大图

画红线的字符都是什么呢？

请看下个知识点。

7、百分号编码

百分号编码（英语：Percent-encoding）, 也称作URL编码（英语：URL encoding）, 是特定上下文的统一资源定位符 (URL)的编码机制。

实际上也适用于统一资源标志符（URI）的编码。

上面是定义，有点晦涩，说白了就是：