那麼今天的話呢，帶大家來學習的是三個內容
文章首發於公眾號：程式設計師一凡
本節大綱：
01.認識HTML02.表單的運用03.阿里巴巴註冊界面的實現
我們要去實現阿里巴巴註冊界面，一個前端界面。
我們應該去做一個什麼內容？
我們這個的實現是用HTML語言來寫的，所以首先第一個呢，我們來認識一下什麼是HTML，我們再來學習在HTML中間我們怎麼樣去用它的語言，來把阿里巴巴註冊界面的一個實現。
認識HTML
如果我要問小夥伴們，什麼是網頁，這個東西大家都會，都知道。
比如說用瀏覽器輸入網址打開的頁面，我們就把它叫做網頁。
那如果我要問你，這個網頁它是怎麼組成的？它是用什麼語言來顯示的，那這一塊可能有些小夥伴就不知道了。
那麼我告訴你的話呢，我們所謂的這一些網頁，其實它就是由HTML語言呢，來構建的。
Hyper Text Markup Language(超文本標記語言)
我們在用工具，或者說文件，這類記事本的這種編輯器去把HTML代碼去進行編寫，編寫了之後通過瀏覽的渲染跟處理，然後就編程了我們熟知的這一種網頁。
就像你看到的某度，或者你看到的某寶，某貓，然後我們的知乎首頁，凡是這些網站其實都是由HTML這個語言來組成的。
其實除了HTML呢，我們前端的三大主要部分，HTML，CSS以及JS。
那麼今天的話，我們就講我們要把界面弄出來之後，我們怎麼樣進行一個解釋，那麼HTML的代碼又是長什麼樣子的？
比如說我想要知道百度首頁源碼是長什麼樣子的，直接按一下F12，那麼它的HTML代碼就是長這個樣子的
裡面包含了很多的內容，比如說我想知道百度這個按鈕，它的代碼是怎麼寫的
百度的按鈕它就是一個input標籤
或者說百度這個LOGO它代碼是一個什麼樣子的呢
它就是一個area 這樣子的一個標籤
你在這個界面上看到的每一個控制項，其實它都有對應的一個語言來進行實現，那麼它不同的一個標籤呢，它有不同的作用，因此我們想要學好這個HTML的話呢，其實你就是去學習HTML這些標籤的使用。
HTML是所有的程式語言中，最為簡單的。
因為第一個，它沒有所謂的這一種循環，判斷，也沒有類，對象之類的。
你就只需要某個地方需要一個文字，我就在這裡堆積一個文字，另外一個地方需要一個圖片，我就堆積一個圖片，按鈕同理。
其實它就是由各式各樣的控制項給堆砌而成，這樣子的一門語言，相對來說是很好學的
我們寫入的代碼
通過瀏覽器渲染之後
我們呈現的網頁
我們為什麼要學HTML，它的一個好處是什麼。
其實對於測試來說的話呢，如果你知道了它實現的原理，你要去測試的話可以更全面。
第二個的話呢，HTML大家都知道，我們很多網頁、網站在我們市面上做一個流通，包括我們微信上面用到的一些小程序、H5的技術，其實都離不開這個HTML，包括我們主要用到的瀏覽器，HTML也是很支持的，正是因為它有這些優勢，所以我們更需要來了解它。
HTML的優勢
世界知名瀏覽器廠商對HTML5的支持
微軟:IE/EdageGoogle:Chrome蘋果:sarifisoperaMozilla:Firefox
市場的需求
跨平臺:微信小程序、H5技術
那我們要怎麼樣去學會寫這個代碼，其實這個代碼很容易去寫，用什麼工具來寫，是我們首先要來考慮的第一個問題。
對於工具這一塊，我們有很多的選擇
第一個，你可以用非常簡單的記事本來寫，就是我不需要安裝任何的環境，直接新建一個TXT的文本文檔，我就可以去寫HTML的代碼，你只需要把它的後綴改為.html就可以了。
只是說像這種方式的話呢，它非常不便於咱們去開發，因為它沒有關鍵字的提示，沒算錯了你也不知道。
因此在這一塊都會用到一些集成的開發工具，比如說有
Visual Studio Code、Sublime、Webstorm、Atom、HBuilder等等之類的
HTML編輯器：注意:任何的文本編輯器都能夠編寫HTML代碼。也就是說，開發網頁不限制軟體。我們一般使用IDE(intergrate development enviroment，集成開發環境)常見的IDE有: Visual Studio Code、Sublime、Webstorm、Atom、HBuilder等。Visual Studio Code:微軟公司的產品，免費的
那麼我們今天用的呢，就是Visual Studio Code，那麼這個工具能，也不需要小夥伴們去下載，如果你想要的話呢，公眾號主頁點擊領取資料，有機器小助手會發送給大家，拿到安裝包後直接雙擊把它打開，下一步下一步下一步，然後安裝完成就OK了。
這個工具就是我們去做HTML代碼編寫的一個工具，可以很快的幫助你去做一些提示，如果遇到錯誤他會檢索出來，就很方便你去做開發、寫代碼。
那麼在這個裡面的話呢，首先給大家來看一下我們要實現的HTML，阿里巴巴註冊界面長什麼樣子
1.對於圖片我們改怎麼去放？
2.對於文本怎麼樣去放？
3.連結怎麼去放？
4.需要輸入的信息框怎麼去放？
第一個HTML網頁
在VSCode中新建一個文件，保存為.html格式，然後輸入html:5按tab鍵，即可創建出一個網頁。
為什麼要輸入5呢?因為我們學習的是HTML最新的版本，就是HTML5創建出一個標準的骨架
HTML圖像-image標籤
常見的圖像格式:JPG/GIF/PNG/BMP
在HTML中，圖像由<img>標籤定義。
HTML超連結-a標籤
HTML使用超級連結與網絡上的另一個文檔相連。超連結可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。當您把滑鼠指針移動到網頁中的某個連結上時，箭頭會變為一隻小手。
我們通過使用<a>標籤在HTML中創建連結。
這一系列的問題，文字描述難免會有些片面，不是很好理解，錄製成了視頻教程，更多軟體測試資源分享，公眾號程式設計師一凡，首頁點擊免費領取資料即可。
願你我相遇，皆有所獲！