1.1、開發工具
目前前端開發工具繁多，例如Dreamweaver、Sublime、Hbuilder、Vscide等等，對于新手開發來說，我比較推薦使用HBuilder，
1.2、使用HBuilder
我們在開發的時候，都需要新建一個HTML頁面，我都在頁面中撰寫代碼，
HBuilder為前端打造一款開發工具，容易上手，一般初學者首選，
1.2.1：新建Web專案
在HBuilder的左上角，依次點擊“檔案”->“新建”->“Web專案”,如下圖所示，
1.2.2：選擇檔案路徑及其命名檔案名
在對話框中，給檔案夾起一個名字，并且選擇檔案夾路徑，
1.2.3：新建HTML檔案
1.2.4：給HTML檔案命名
1.2.5：預覽頁面
這里我以一個登錄頁面作為例子介紹：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XX登錄</title>
<link rel="stylesheet" href="css/Login-Demo.css" />
<script type="text/javascript" src="js/Login.js" ></script>
</head>
<body>
<div class="header">
<div class="top-auto">
<div class="top-right">
<a href="#">關于登錄</a>
<span>|</span>
<a href="#">關于XX</a>
<span>|</span>
<a href="index.html">回傳首頁</a>
</div>
<div class="LOGO">
XX登錄
</div>
</div>
</div>
<div id="Login">
<div class="LOGIN">
<div class="LOGIN-TOP">
<div class="text-1">賬號密碼登錄</div>
<div class="text-2">
推薦使用
<a href="#">
掃碼登錄
</a>
，謹防盜號，
</div>
</div>
<!--左邊-->
<form name="myForm" action="#" onsubmit="return validateForm()" method="post">
<div>
<div class="input">
<input type="text" name="fname" method='post' placeholder="請輸入手機號或郵箱" />
<input type="password" method='post' placeholder="請輸入密碼" />
</div>
<div id="login-submit">
<a herf="#"><input type="submit" value="登錄" /></a>
</div>
<div class="login-buttom">
<a href="#">忘記密碼？</a>
<span>| </span>
<a href="register.html">注冊賬號</a>
<span>| </span>
<a href="#">舉報/意見反饋</a>
</div>
</div>
</form>
</div>
<!--右邊-->
<div class="inpRight fl">
<div class="txt1">還沒有賬號</div>
<div class="txt2">
<a href="register.html">立即注冊<img src="img2/icon-arrow-right.png" alt="" />
</a>
</div>
<div class="txt3">
<p>使用一下站好直接登錄</p>
<a href="//www.weibo.com"><img class="fl" src="img2/icon-sina1.png" alt="" /></a>
<a href="//www.weixin.com"><img class="fl" src="img2/icon-wechat.png" alt="" /></a>
<a href="//www.qq.com"><img class="fl" src="img2/icon-tencent.png" alt="" /></a>
<a href="//www.baidu.com"><img class="fl" src="img2/icon-baidu.png" alt="" /></a>
</div>
</div>
</div>
</body>
</html>
頁面預覽：
最后，對于HBuilder的使用，還有兩點說明下：
- 對于站點、檔案、HTML頁面等的命名、一定不要使用中文，而應該使用英文
- 我們可以在HBuilder上方的工具列中，依次選擇”幫助“->”HBuilder入門“->，查看詳細的使用教程，
下一篇：HTML（二）：基礎結構
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292685.html
標籤：其他
上一篇：分布式搜索引擎ElasticSearch(三)---ElasticSearch進階使用、深入理解搜索技術、集群架構原理