1、首先我們先了解一下什麼是前端，簡單說，就是我們平常所瀏覽的網頁啊，以及app首頁和小程序。
2、我們經常訪問瀏覽器的時候，經常會輸入網址，又可稱爲域名http://www...com.
有時候是http有時候又是https，二者的區別在於後者更加安全些，有祕鑰。www就是萬維網，後綴com、org、edu、cn以及DNS稱爲域名。
3、web開發設計的基礎之一是html。html基本框架有以下幾部分組成：
結構
<html>
<!DOCTYPE html> .//聲明網頁類型
lang="en" // 語言 en ch
<meta charset="UTF-8"> //信息標籤 charset="UTF-8" 網頁的編碼類型 utf-8
<head>
<title>標題</title>
</head>
<body>
內容
</body>
</html>
以上標籤都是帶結尾的閉合，當然也有自閉和。
3、瞭解過html的結構，下面我們配置開發環境，我所用的軟件是JetBrains WebStorm10.這個軟件是要錢的，然後登錄後首先進入File-setting-font-color 或者alt+ctrl+s設置字體大小和顏色。然後在file-new-dicrectory新建一個目錄，然後在這目錄下建html5文件 即file-new-html5 file.
4、創建完一個文件後，瞭解基本用法和相關標籤
alt+F2 瀏覽或右上角也可快速瀏覽
按alt鍵+鼠標單擊，可以在不同地方輸入相同文字
在每一行的末尾ctrl+D 進行行復制
輸入lorem按tab鍵，可以添加測試文本
p*數字 按tab鍵，可以輸入多行標籤P
5、建立一個網頁
在body下編輯內容，設計網頁常用標籤
a）超鏈接
<a href="鏈接的目標地址" target="打開目標窗口"></a>
target: _blank 在新窗口打開
_parent 在源窗口打開錨記：
1、跳轉到同一個頁面的不同位置
在跳轉位置處添加一個錨記，<a name="名稱"></a>
創建鏈接 <a href=“#錨記名稱”>點擊內容</a>
2、跳轉到不同頁面的不同位置
在跳轉位置處添加一個錨記，<a name="名稱"></a>
創建鏈接 <a href=“文件名#錨記名稱”>點擊內容</a>
b）發送郵件：mailto:郵箱地址
c）路徑：
絕對路徑 ：從根目錄開始
相對路徑 ：從當前目錄開始
d）常用標籤
水平線 <hr width="寬度" color="顏色" size="線粗細"/>
html註釋 <!--註釋文本--> ctrl+shift+/
換行 <br/>
空格： 全角狀態下空格
標題 h1~h6
<pre></pre> 預格式化
<em></em>斜體 <i></i>
<b></b>加粗 <strong></strong>
<big></big>字體放大 <small></small>
<code></code>放置代碼
<del></del>刪除線
<sub></sub>下標
<sup></sup>上標
單位： 像素( px) 百分比(%) em rem
圖片插入所用標籤：
<img src="圖片路徑" alt="信息提示" title=“圖片描述” width=“圖片寬度”height=“圖片高度”/>
e）表格
<table border="邊框線" cellspacing="邊框單元格間距" cellpadding="單元格填充" width="表格寬度">
<caption>表頭</caption>
<tr>
<th>標題行</th>
</tr>
<tr align="對方方式">
<td>單元格</td>
</tr>
</table>
跨行跨列
rowspan colspan
f）列表
無序列表
<ul type="">
<li></li>
</ul>
type:disc(默認實心圓) square 方塊 circle 空心圓
有序列表
<ol type="" start="">
<li></li>
</ol>
type:1 a A i I start:起始位置
自定義列表
<dl>
<dt></dt>
<dd></dd>
</dl>
g）表單
文本框 <input type="text"/>
密碼框 <input type="password"/>
單選按鈕 <input type="radio"/>
複選框 <input type="checkbox"/>
文件域 <input type="file"/>
按鈕 <input type="submit"/> 提交
<input type="reset"/> 重置
<input type="button" value="值"/>
<button></button>
下拉列表
<select>
<option></option>
<option selected></option>
</select>
文本域
<textarea rows="行數" cols="列數"></textarea>
h）表單分組
<fieldset>
<legend></legend>
name:~~
</fieldset>
label 標籤