在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
写好的两个网页页面(html文件), 怎么放到网上可以访问的那种啊
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我猜题主是想说：部署静态HTML到网上吧？
可以用github来部署
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
放到服务器上。。
上然后分享链接。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
感觉上面的都太麻烦或者是不太清楚，我推荐几个
3.随便找个虚拟主机
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先你要有一个域名，域名的作用相当于门牌号，例如西安市太白南路二号
其次你要有一个主机，相当于房子
最后你将网页上传到房子里，这样别人就可以通过门牌号（域名）找到你(网页).
例如我的blog
www.52coder.net
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
有推荐用jsfiddle的，但是我觉得RunJs（）好用些，个人看法，可以试试。
如果是要搭建服务器的话，可以试试搭在SAE上，然后绑定自己的域名，个人使用基本免费。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。怎么实现链接到数据库啊、我用HTML写好了登陆界面的_百度知道
怎么实现链接到数据库啊、我用HTML写好了登陆界面的
怎么实现链接到数据库啊、我用HTML写好了登陆界面的、网上查了很多说要用PHP/ASP/JAVA来写代码才能链接进去，谁有这方面的资料啊、谢谢网站的前台登陆界面 并链接到数据库！
要实现登陆验证、用户注册和一些基本的查询，数据库的查询基本都会
我有更好的答案
用Java，jsp，可以写出来写个连接数据库的类utildao类现登陆验证、用户注册和一些基本的查询的方法等jsp写细节
你到底想学哪一种？要操作数据库，那么只懂html是不行的，还要懂一样服务器端动态语言比如：asp、php、net、jsp、java等数据库有：access、 sql server、mysql等一个人不可能把这些学齐了并精通能精通其中一两项就算高人了，所以，请问你，你想学那个？？？
用的数据库是SQL sever 2008的 、我想学的是PHP的
因为都说php比较流行
数据库已经做好了，登陆界面也写好了就是没办法连接...........
php最佳搭配是mysql而且，传言php在将来会取消对 sql server的支持而且，php搭配sql server 就失去了php跨平台的特性因为php可以在多种操作系统下运行，而sql server只限于运行在window操作系统所以，不建议使用php搭配 sql server
噢噢、那可以给我一些关于PHP的学习资料不？我先把现在的任务搞定，然后再去学其他数据库
没有资料，自己百度一下或者下载别人的程序，研究一下别人是怎么做的
纯粹的html是不支持链接数据库的，你可以用js，但是不推荐，还是使用编程语言吧
为您推荐：
其他类似问题
您可能关注的内容
登陆界面的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供常用开发手册和开发工具
您现在的位置：& >
HBuilder 入门(4) / 编写一个登录页面
通过之前的介绍，我们应该对HTML5+ 有了一个较为直观的认识。但是正所谓&好记性不如烂笔头&，能够实际地做出一个页面才是最重要的。
& & 接下来我们就来做一个最基本的页面：登录页面。
& & 那我们先构思一下登录页面都需要什么内容：用户名，密码，登录按钮。如果你有一个得力的美工，我们还可以加上酷炫的美工设计。
& & 提供一组UI组件，请参看这里：。
& & 对于一个熟悉web开发的人来说，上面的这些都太简单了，分分钟就可以搞定了。但是别忘了这是移动开发，与普通的浏览器应用还是有所不同。接下来我们来看看页面的布局应该怎么设计。
& & 这里大家不要忘记一个原则，因为目前HTML5+ 的实现仅此一家(HBuilder)，所以我们在实现各种功能的时候，一定要遵循HBuilder官方推荐的方法。
& & 接下来我们从一个index.html开始。
& & HBuilder默认生成的index.html里的meta部分，只有viewport一个属性：
Html代码&&
&name=&viewport&&content=&width=device-width,&initial-scale=1,maximum-scale=1,&user-scalable=no&&&
& & 其实这完全是不够的，我们还需要手动增加几个属性：
Html代码&&
&name=&viewport&&content=&width=device-width,&initial-scale=1,maximum-scale=1,&user-scalable=no&&&
&name=&apple-mobile-web-app-capable&&content=&yes&&&
&name=&apple-mobile-web-app-status-bar-style&&content=&black&&&
& & 其次，我们要引入 mui 需要的 css，以及相应的 javascript 文件。
Html代码&&
&rel=&stylesheet&&href=&css/mui.min.css&&&
&src=&js/mui.min.js&&&
&src=&js/app.js&&&
& & &如果你想问如果不用 mui 和默认的 app.js 可以吗？答案是肯定的。但是，你可能会遇到很多意想不到的问题。所以，对于一个界面组件 mui 来说，个人如果你有强大的美工小伙伴，那么不用 mui 是完全可以的。但是 app.js ，还是最好用吧！
& & 另外，按照官方的说法，尽量不要用 jquery等 js 类库，这会严重影响你的应用的速度。所以，请遵循官方的建议。其实在移动端现代浏览器上， jquery 也真的是可有可无了。
& & 至此，HTML 的 head 部分就结束了。接着我们开始写body部分了。
& & 按照官方的说法，页面中所有的内容都应该放入一个 div 中，并且这个 div 的class 应该是 &mui-content& --- 当然，这是你使用 mui 的时候。这里我们暂定会使用 mui 。
& & 按照一般的方式，我们都会在窗口的底部加一个 copyright 之类的文字。按照标准的说法，我们需要有一个class=&mui-bar mui-bar-tab& 的 div，而且要注意：这个 mui-bar DIV 一定要放到 mui-content 之上。总之，最后的代码应该是这个样子：
Html代码&&
&&&&&class=&mui-bar&mui-bar-tab&&style=&height:20line-height:20font-size:10text-align:&&&
&&&&&&&&&&&&这是底部信息&&
&&&&&class=&mui-content&&&
&&&&&&&&&&
& & 上面的 mui-bar 里，又额外加了一些样式，用于控制高度，大家可以根据需要自行订制。
& & 接下来，我们来放入一些 mui 的组件：输入框
Html代码&&
&class=&mui-content-padded&&style=&margin:&5&&&
&&&&&class=&mui-input-group&&&
&&&&&&&&&class=&mui-input-row&&&
&&&&&&&&&&&&用户名&&
&&&&&&&&&&&&&type=&text&&id=&username&&placeholder=&用户名&&&
&&&&&&&&&&
&&&&&&&&&class=&mui-input-row&&&
&&&&&&&&&&&&密码&&
&&&&&&&&&&&&&type=&password&&id=&userpassword&&placeholder=&密码&&&
&&&&&&&&&&
&style=&margin-top:20text-align:&&&&
&&&&&class=&mui-btn&mui-btn-primary&&id=&loginBtn&登录&&
&&&&&&&class=&mui-btn&mui-btn-primary&&id=&regBtn&注册&&
& & 这里的输入框和button 按钮都是 mui 提供的组件。我使用了一些 margin 等属性控制了一下位置。个人觉得，输入框组件还好，按钮组件的样式就比较一般了。如果你有好的美工，还是自己打造好看的按钮比较好。
& & 在 html 对象的命名上，也秉承了一贯的原则，用唯一的ID 来标示一个对象。总之，这个内容对于有web开发经验的人来说，没有什么特别的地方。
& & 至于你想让输入框垂直居中，请自行查找&如何让 div 垂直居中&，解决方案是一样的。
& & 接下来就是重头戏了，登录按钮如何与服务器进行交互？按照web开发的理解，有这么几种选择：
定义一个表单(form)，点击登录按钮的时候提交到后台。后台处理完毕后，显示新的页面给前端。
在登录按钮上绑定一个click方法。点击的时候，使用Ajax发送数据到后台，接受到数据后，前端页面更新。
& & 对于一个手机应用，如果出现页面刷新，或者大白页这样的状态肯定是不好的体验。所以，在手机的HTML5开发中，我们绝对不会使用 form 提交这样的东西的。可以肯定的说：我们只用 Ajax。
& & 按照官方的说法，尽量不要使用JQuery，同时，也不要使用 onclick 这样的方式，取而代之应该使用的是绑定一个事件：
document.getElementById(&loginBtn&).addEventListener('tap',&function(){&&
&&&处理内容；当然肯定是ajax&了。&&
& & &这个事件的名字叫 &tap&，也就是点击屏幕的事件。
& & 那好学的同学肯定会问有多少个事件可以用啊？请参看这里：。这是mui 提供的一个特性--- 就这个特性来说，你很难不用 mui 这个组件，毕竟你自己再实现一个的话，又要费不少事。
& & 那我们把这个事件的代码写在哪里好呢？最开始，还是最后边？都不是。
& & 按照官方的说法，我们应该写在 mui 组件和页面组件全部加载完毕后 --- &就如同 JQuery一样，mui 也有一个 ready 的方法：
&script&&&
&&&&mui.init();&&
&&&&mui.plusReady(&&
&&&&&&&&function()&{&&
&&&&&&&&&&&&&&&&&&&&这里写上刚才的事件绑定方法。&&
&&&&&&&&}&&
&/script&&&
& & 到了这里，画面的部分基本完事了，整个代码大概是这个样子：
Html代码&&
&&&&&charset=&utf-8&&&
&&&&测试&&
&&&&&name=&viewport&&content=&width=device-width,&initial-scale=1,maximum-scale=1,&user-scalable=no&&&&&
&&&&&name=&apple-mobile-web-app-capable&&content=&yes&&&&&
&&&&&name=&apple-mobile-web-app-status-bar-style&&content=&black&&&&&
&&&&&rel=&stylesheet&&href=&css/mui.min.css&&&&&
&&&&&src=&js/mui.min.js&&&&&
&&&&&src=&js/app.js&&&
&&&&&class=&mui-bar&mui-bar-tab&&style=&height:20line-height:20font-size:10text-align:&&&&&
&&&&&&&&&&&&这是底部信息&&&&
&&&&&class=&mui-content-padded&&style=&margin:&5&&&&&
&&&&&&&class=&mui-input-group&&&&&
&&&&&&&&&class=&mui-input-row&&&&&
&&&&&&&&&&&&用户名&&&&
&&&&&&&&&&&&&type=&text&&id=&username&&placeholder=&用户名&&&&&
&&&&&&&&&&&&
&&&&&&&&&class=&mui-input-row&&&&&
&&&&&&&&&&&&密码&&&&
&&&&&&&&&&&&&type=&password&&id=&userpassword&&placeholder=&密码&&&&&
&&&&&&&&&&&&
&&&&&style=&margin-top:20text-align:&&&&&&
&&&&&&&&&class=&mui-btn&mui-btn-primary&&id=&loginBtn&登录&&&&
&&&&&&&&&&&class=&mui-btn&mui-btn-primary&&id=&regBtn&注册&&&&
&&&&&mui.init();&&&&
&&&&&mui.plusReady(&&&&
&&&&&&&&function()&{&&&&
&&&&&&&&&&&document.getElementById(&loginBtn&).addEventListener('tap',&function(){&&&&
&&&&&&&&&&&&&&&&&alert(&点击了登录按钮&);&&
&&&&&&&&&&&&});&&&
&&&&&&&&}&&&&
&&&&&&);&&&&
& & 这时，你可以把手机连接到电脑上，然后进行调试，就可以看到第一个登录的画面了。点击登录按钮，会弹出&点击了登录按钮&这个对话框。
& & 对于mui，虽然你可以不使用mui 组件，但是一些基本的规则，例如 mui.init，mui.plusReady 这样的方法，还是要使用的。
& & 另外，mui 的布局方案中没有垂直居中的方式（希望以后能增加上），虽然方式有很多，但是仍然推荐这个：
& & 接下来，我们就要实现登录按钮通过ajax与后台进行交互。
& & 由于这篇内容已经够多，将在下一篇里分享给大家。没有更多推荐了，
其它技术地址
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！