最近突然就對靜態頁面很有興趣，主要是看到幾個比較酷炫的頁面效果，也想自己做一下，但是我的前端頁面就是菜雞，還停留在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腳本弄出比較華麗的動態效果，於是一個看起來就很牛的頁面就出來了。。。。。
當然后續會用到很多的前端框架，暫時也不熟悉就不瞎說了！