簡單學習HTML
最近突然就對靜態頁面很有興趣，主要是看到幾個比較酷炫的頁面效果，也想自己做一下，但是我的前端頁面就是菜雞，還停留在html+css+jquery的簡單使用上，而且還忘記得差不多了！
而且我感覺前端比後端麻煩一點，可能是我沒有什麼審美吧，自己做的頁面總是很醜陋，哈哈哈！就記錄一下學習html的過程吧！學習主要是參考菜鳥教程，連結：https://www.runoob.com/html/html-tutorial.html
1.EditPlus編輯器的簡單使用
寫前端頁面還是有一款編輯器比較好，就好像寫java需要IDEA或者eclipse一樣，雖然你也可以一直用記事本寫，那估計會勸退n多新人，用編輯器對新人比較友好，等以後變牛了之後再用記事本寫吧！
選擇適合自己的編輯器，這裡推薦幾個，可以自行下載：
- Notepad++：https://notepad-plus-plus.org/
- Sublime Text：http://www.sublimetext.com/
- VS Code：https://code.visualstudio.com/
我看了很多的編輯器，最終用了一款叫做EditPlus的軟體，為什麼呢？因為簡單，不需要什麼外掛，而且最初我是將這個軟體當作是開啟各種格式檔案的工具來用的，今天才發現居然還能用於寫很多變成語言編寫程式碼，而且功能上也支援程式碼補全（功能比較弱，不支援程式碼提示），下載的話隨便下載吧！貌似正版是需要收費，我下載的剛好就是正版（有的時候嫌找破解版太麻煩了），開啟會出現下面這個提示（記住，別點選任何按鈕），我們只需要用滑鼠左鍵將這個框框拖到螢幕看不見的位置，OK了，這個軟體照用不誤，現在可以正常使用了。。。。
下面我們就簡單說說這個編輯器常用的用法，點選下面這個地方：
幾個常用的設定，我們現在重點看看程式碼自動補全，後期可以根據我們的需要設定檔案模板；
隨意看看HTML補全程式碼：
我們就以h1標籤為例，我們只需要輸入h1,不區分大小寫，然後回車（空格鍵也行）就會自動補全，貌似還有更牛的程式碼補全方式，一下子可以補全一大塊程式碼，我們現在不需要，後面用到的時候再說
程式碼補全之後我們就需要測試一下標籤有沒有用，這裡就會用到瀏覽器渲染（記住，千萬不要用EditPlus預設的瀏覽器，預設的好像的IE瀏覽器，比較坑爹）：
簡單測試一下：
結果如下：
注意：用這個EditPlus這個編輯器有點不舒服的地方，就是用空格鍵也會自動補全，所以打出類似<h1 style="xx">這樣的程式碼，在h1後面的那個空格會打不出來，查了好半天都沒辦法移除空格這個快捷鍵，emmmm。。。。暫時只能用下面這種方式，如果有其他的方式請在評論區告訴我，謝謝！
2.認識靜態頁面
記得最開始學html靜態頁面的時候學了好久都沒入門，始終都是一臉蒙逼，始終都在想html和css、js到底有什麼關係呢？舉個很簡單的例子，我們看的動漫一般是怎麼製作出來的呢？首先，我們要用素描畫出人物的全貌，然後進行上色，最後就是想辦法讓它動起來，這裡的三個步驟就對應於html，css和js；
那麼問題來了，什麼是靜態頁面呢？我們用瀏覽器開啟的一個頁面很好看，就比如百度，下圖所示，可以看作是由很多小塊組成的，這些小塊對應於HTML中是對應一個標籤，也就是類似<div></div>這樣的，我們可以在標籤內部繼續插入標籤、圖片、文字等等，然後我們可以用css對這些div標籤進行染色和移動位置等，最後我們還可以新增一些特效讓這個頁面有些動畫的特效，後面我們簡單做一個類似這個百度首頁的頁面吧，就當練練手！
3.簡單介紹HTML頁面
我們可以看到每一個新建的HTML文件都有一些相同的東西，那就是最簡單的標籤，下圖所示：最上面的<!doctype html>表示這是一個html文件，然後整個文件都由一個<html></html>標籤包著,在每一個html標籤中，包括兩個大標籤，頭（head）和身體（body），就跟一個人一樣有頭和身體；
在頭部中有個<title>標籤這裡就是在瀏覽器中顯示的標題，而且後面的css程式碼一般都是寫在頭部，用<style></style>包著；在身體中我們就可以再巢狀其他標籤，而且還可以寫js程式碼（js程式碼必須用<script></script>包著），不知道大家沒有沒發現我下面的這個h1標籤中有個style，這個和再頭部中的<style>標籤中寫的css程式碼是等效的，所以說css程式碼有兩種寫法，一種是直接寫在html標籤內部，另外一種是寫在頭部的<style></style>標籤中。。。。
4.HTML基本標籤
這裡的HTML標籤大多是寫在身體中，那麼有一些什麼標籤呢？
（1）<p></p>，這個標籤其實就是相當於新開一個段落
（2）<a href="xxx"></a>這個標籤就是生成一個連結，經常網頁上就有各種連結，點選文字就會進入href這個連結中去
（3）<img src="xxx" width="xxx" height="xx" />這個標籤就是插入一張圖片，src表示圖片的url地址，width圖片長度，height圖片寬度；而這裡可以看出標籤有兩種，一種是兩個標籤<p></p>，另一種是<img />，
而且每一個標籤內部都有一個特殊的東西，比如h1標籤中的style，img標籤中的src、widfth、height等，這些也叫做屬性
（4）<h>標籤，有很多個，其實就是字型逐漸變大的過程，可以用於標題；
（5）<hr>標籤，就是一條黑色直線;<br>標籤是換行
（6）粗體b和斜體i
（7）class屬性和id屬性，這兩個屬性很重要，是為了可以唯一的標識一個標籤，因為在html文件中可能有多個相同的標籤，那麼我們怎麼樣確定其中哪一個標籤呢？每個標籤都可以有這兩個屬性，其中，每個標籤的id屬性值一定要唯一，class屬性值可以相同；這兩個屬性是寫css經常要用到的東西
補充一點：有的時候這種style中的css程式碼太多了很影響整個html的佈局，我們可以將整個css程式碼提取出來在外面新建一個文件，然後在頭部那裡用link標籤引用一下就可以了，例如：
<head>
// ./mystyle.css就是外界的當前目錄下css檔案的url地址
<link rel="stylesheet" type="text/css" href="./mystyle.css">
</head>
（8）表格標籤table：如果我們要在頁面上畫一個表出來，那麼必須用到一些表格的標籤，table表示整個表格（屬性border表示表格最外邊沿線的寬度），tr表示行，th表示第一行的每一列（也叫做表頭），td表示從第二行開始的每一列
（9）無序列表標籤ul和有序列表ol
（10）塊級標籤<div></div>,這個標籤是最常用的標籤了，這個標籤有什麼用呢？說實話沒有什麼特殊的效果，既然如此為什麼要用這個啊？你想想啊，一個頁面上有很多個不同的標籤（幾百上千個），我們每次都要去修改一個個的標籤的內容有點太坑爹了，我們可以將頁面分成一塊塊的，每一塊就是一個div標籤，div標籤內部還可以巢狀各種標籤，這樣佈局起來我們只需要對div標籤進行操作了，更方便佈局！！！
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>選單</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
內容在這裡
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
</div>
</div>
</body>
（11）表單標籤form，就是每次使用者名稱密碼登入的那個介面，通常配合input標籤一起使用，這個也是很常用的一個標籤，其中input標籤中的type屬性決定這個input標籤具體有什麼用，name屬性和value屬性值是以鍵值對的形式傳給後端，後端可以進行邏輯判斷並進行後續處理。。。
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Password: <input type="password" name="pwd"><br>
單選：<br>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
多選：<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car<br>
<input type="submit" value="提交">
</form>
（12）<ifram>標籤，這個標籤可以在頁面中顯示一個小頁面，src表示小頁面的url地址，我這裡是我本地的一個特效html；這個標籤和a標籤一起使用可以看到很有趣的東西；
<iframe src="./star.html" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">點選這裡進入百度</a></p>
---------------------------------------------------------------------------------------------------------------------------
到這裡基本的html標籤就說的差不多了，後面碰到新的再學一下就ok了，下面我們來看一些其他的有趣的東西；
5.顏色
在頁面上我們可以調整任意標籤文字的顏色，只需要用css程式碼中宣告一個color屬性然後賦值就可以了，計算機中的任何顏色都可以由三種顏色 紅，綠，藍的組合得到，而且計算機中每種顏色都數值化以便我們進行調整，每種顏色的數值都是0到255，所以計算機中顏色共有255x255x255=1600多萬種顏色，使用顏色有兩種用法：一種是RGB表示，一種是顏色十六進位制表示，我們隨便看看這兩種方式：
注意這個不用記，我們只需要用的時候去查顏色對照表就行了，或者自己慢慢除錯到自己喜歡的顏色；
由於這兩種形式顏色都不好記憶，於是就設計了一些英語單詞和這些常用的顏色對應，我們可以直接用這些單詞就好，比如red，green等，比較詳細的可以看看菜鳥教程https://www.runoob.com/html/html-colornames.html，這裡大概列舉了一些顏色對應的英語單詞。。。。
6.HTML指令碼
什麼叫做指令碼呢？大白話說一下就是根據我們滑鼠的點選，會動態的生成需要的html標籤，頁面就會發生變化了，這個指令碼語言最常用的就是js，記住哦，js程式碼必須下載身體標籤中的<script>標籤中，我們隨便看看一個例子：
可以看到堆出現這個彈窗，這是最簡單的js指令碼了，下面我們簡單說說js指令碼中一些其他的東西，建議自己去學一下js這個指令碼語言（全稱是javascript，注意，和java沒什麼鳥關係），很容易，就是一些資料型別，迴圈呀，函式什麼的，可以說門檻極低，即使是零基礎快的話幾天應該也差不多了，要多用就可以了；
而且在指令碼中，js指令碼是基於事件的，說起來很抽象，什麼是事件呢？舉個很簡單的例子：我們開啟一個頁面，只要我們的滑鼠移動了或者點選了什麼按鈕，指令碼都可以捕捉到這個變化，是不是很厲害，這個變化就是一個事件，根據這個事件我們可以新增一下特效，根據上面的例子修改一下，點選一下這個按鈕就會出現彈窗；
<body>
<button type="button" onclick="myFunction()">點我一下你就知道！</button>
<script>
function myFunction(){
alert("hello,我是java小新人");
}
</script>
</body>
------------------------------------------------------------------------------------------------------------------------------------------------------------------
7.特殊符號
在html標籤中有一些特殊符號是不能直接用的，為什麼呢？看下面這個簡單的例子，我想在頁面上顯示這樣一句話：這裡不是</button>點我一下你就知道！，然而當瀏覽器解析到第一個</button>標籤就以為是結束標籤，於是顯示的結果和我們要額不一樣下圖所示！！！所以我們要對<、>等特殊符號做一些處理，防止這種情形發生；
<button type="button" onclick="myFunction()">這裡不是</button>點我一下你就知道！</button>
我隨便截了一下圖，這個也不用記，用到的時候來查一下就可以了，我們直接用表中的實體名稱來代替特殊符號即可：
修改後的程式碼和顯示的結果為：
<button type="button" onclick="myFunction()">這裡不是</button >點我一下你就知道！</button>
8.URL路徑
這個其實很容易，我們經常用www.baidu.com這種方式進行訪問百度首頁，那麼這些單詞代表什麼意思呢？我們隨便說一下，比如有一個URL為 http://www.runoob.com/html/html-tutorial.html ，對應的語法規則是：scheme://host.domain:port/path/filename，說明如下：
- scheme - 定義因特網服務的型別。最常見的型別是 http
- host - 定義域主機（http 的預設主機是 www）
- domain - 定義因特網域名，比如 runoob.com
- :port - 定義主機上的埠號（http 的預設埠號是 80）
- path - 定義伺服器上的路徑（如果省略，則文件必須位於網站的根目錄中）。
- filename - 定義文件/資源的名稱
新手看這個肯定看不懂，我就用大白話來說說：schema表示一些協議，或者叫做約束，其實就是兩臺電腦通訊的約定規則，一般有如下幾種；
host.domain一起看作是每臺電腦上網的ip地址，port表示電腦通訊的埠，path表示目標計算機的某個資料夾，filename表示該資料夾下確定的檔案；
9.總結
看起來這麼多，其實內容不多，就是一些最基本的html標籤，記住html標籤是瀏覽器內部去解析的，所有說到的標籤總結：https://www.runoob.com/html/html-quicklist.html，除了這些標籤之外我們還簡單的使用的使用了一下CSS對標籤內容進行渲染，並且用了一下簡單的js指令碼，其實一個網頁做的怎麼樣，最重要的首先是佈局（用的最多的是div標籤），然後經過一些有藝術細胞的人用CSS進行渲染，再由js指令碼弄出比較華麗的動態效果，於是一個看起來就很牛的頁面就出來了。。。。。
當然後續會用到很多的前端框架，暫時也不熟悉就不瞎說了！
&n