雖然以前用過一些工具製作網頁但還是第一次認真學習HTML代碼的編寫。最近開始學習前端開發，作爲一個菜鳥還是認真寫一下學習筆記吧，畢竟HTML的標籤好難記哇。
0.開始前的準備
在開始學習HTML之前我們先得找一個稱手的工具。雖然實際上作爲一種標記語言，和C語言不同，不需要一個編譯器進行編譯，也不像Java需要先轉化爲字節碼然後才能在Java虛擬機中運行。我們只需要找一個文本編輯器然後用常用編碼形式，然後標記爲HTML文件就可以用瀏覽器查看了。像下面這個工具實際上就可以了。
所以我們不需要安裝任何額外的程序，就可以做一個簡單的頁面。
我們可以在其中寫上如下代碼：
<p>hello world!</p>
然後保存爲index.html文件，然後雙擊打開！如果你之前沒做過網頁，這就是你的第一個網頁了！！！它長這樣：
雖然很簡陋它的確是一個網頁，可能有點低於預期，因爲感覺大家學習前端開發的目的如果是做網站的話至少期望做這樣的：
有些朋友可能想做更復雜更炫的。
那麼首先我們得有個稱手的工具，當然包括HTML、CSS和JavaScript，但是一個比較舒服的環境也很重要，畢竟記事本無法自動補全也不能代碼高亮顯示。
我個人比較喜歡下面三個：
如果你是新手，且希望在開發過程中儘可能可視化的話，可以先嚐試在Dreamweaver中嘗試下一個網頁。如果你對自己比較自信可以選擇Sublime和visual code這兩個本質都是文本編輯器但可以加載額外的組件，且代碼高亮顯示在配置好後自動補全代碼。這裏不介紹環境配置，不太清楚的話請參考這些文章：
SublimeText3安裝Emmet插件步驟
Visual Studio Code配置 HTML 開發環境
在安裝完開發環境後我們來正式學習前端開發的第一部分HTML。
1.認識HTML
1.1認識標籤
HTML 是指超文本標記語言: Hyper Text Markup Language，它並非一種編程語言，所以和C、Java、Python很不一樣具有自身的特性，它是一種標記語言。標記語言是一套標記標籤 (markup tag)，在使用的過程中我們所敲的HTML文檔包含了HTML 標籤及文本內容，其通過標記標籤描述網頁。所謂標記標籤通常長這個樣子：
<p></p>
它往往是成對出現的，但有時也會是單獨一個，比如像下面這個標籤：
<hr>
通過這個標籤我們可以創建一個水平線，顯然這並不需要一對標籤。就像我們第一個例子，成對的標籤中可填入我們想顯示的內容。
但光一行行的輸入這樣的組合還不夠，標籤是允許嵌套的，像這樣：
<p><a href="http://www.baidu.com">百度</a></p>
這樣就形成了P標籤與A標籤的嵌套，這裏我們需要指出，在編寫標籤時大小寫是不區分的，均是允許出現的。
需要說明的是我們通過標籤的編寫只能決定網頁的構成與內容至於樣式與行爲是無法通過HTML語言直接決定的，之後我們將學習的CSS與JavaScript將彌補這一不足。
1.2編寫格式
通常我們會以某種固定的格式編寫網頁，通常我們先用html標籤標明文檔的起止，並P標籤A標籤等網頁內容放在body標籤內形成這樣的結構：
但這樣是不夠的有些內容我們希望不直接顯示在網頁上，因而我們需要其他標籤比如head的標籤，我們會將瀏覽器顯示的標題和搜索引擎需要的信息放在裏面，實際上我們創建的HTML5文檔通常是以這樣的結構編寫的：
<!DOCTYPE html>
<html>
<head>
<title>文檔標題</title>
</head>
<body>
文檔內容......
</body>
</html>
第一行!DOCTYPE html標明這是一個HTML5文檔，它必須位於首行接下來是標明起止的 html標籤，內嵌head和body。這看上去有點麻煩，但如果我們用的不是記事本，這一框架可以自動生成。比如在配置好的sublime中輸入html:5再按tab鍵就可以自動生成如下框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
如果你仍堅持使用記事本請關注編碼形式這一行：
<meta charset="UTF-8">
標註的編碼形式必須與記事本保存的編碼形式一致，否則將出現大名鼎鼎的亂碼！
2.常用標籤介紹
接下來我們將介紹一些常用的標籤，也就是一個網頁通常具有的成分。
0.註釋
首先我們需要學會註釋，我們可以通過如下標籤添加註釋
<!--這是一個註釋，註釋在瀏覽器中不會顯示-->
通過將需要的註釋放在該標籤內我們可以進行代碼的註釋，這樣能改善代碼的可讀性。
1.標題
和CSDN博客的Markdown文本編輯器一樣標題是分級的可分爲h1至h6六級，標題標籤也是成對出現的。
<h1>這是一個標題</h1>
<h2>這是一個標題</h2>
<h3>這是一個標題</h3>
效果類似這樣：
具體的樣式調整我們接下來會在CSS部分介紹。
2.正文
接下我介紹正文中常用的標籤。首先是我們之前提到的p標籤;
<p>change the world</p>
<p>hello world!!!</p>
<p>404 not found</p>
其顯示效果如下：
change the world
hello world!!!
404 not found
這裏有個問題是即便我們添加了多個空格或者換行，這些變動並不會在頁面顯示。如下所示：<p>change the
world</p>
其空格和換行並沒有體現在頁面上：
change the world
所以我們需要一些其他標籤的配合。<p class="tssx">唐 詩 賞 析</p>
這樣的顯示效果如下：
唐 詩 賞 析
能夠在其中插入多個空格。在需要換行時除了添加段落，還可以選擇段內換行：<p>人生不相見，動如參與商。<br>
今夕復何夕，共此燈燭光。<br>
少壯能幾時，鬢髮各已蒼。</p>
其效果如下：
人生不相見，動如參與商。
今夕復何夕，共此燈燭光。
少壯能幾時，鬢髮各已蒼。
<pre>人生不相見，動如參與商。
今夕復何夕，共此燈燭光。
少壯能幾時，鬢髮各已蒼。</pre>
其顯示效果如下：
人生不相見，動如參與商。 今夕復何夕，共此燈燭光。 少壯能幾時，鬢髮各已蒼。
符合預期。
有的時候我們需要在段內顯示不同的樣式，比如段內某段文字標藍的等，我們可以使用span標籤，這我們未來會在CSS部分詳細介紹方法，現在僅給出代碼形式。
<p><span></span></p>
爲了分隔一些內容我們有時需要添加一條分隔線。像這樣：
我們只需要寫一個hr標籤就行了：
<hr>
3.超鏈接
超鏈接也是一個網頁的重要組成部分，我們經常需要依靠超鏈接來實現站內頁面和站外頁面的跳轉。鏈接的可以是一個網址也可以是一個文件位置，因爲網站本質是一個文件夾。我們使用a標籤來創建超鏈接。
以創建一個指向百度的鏈接爲例：
<a href="http://www.baidu.com">百度</a>
href屬性中填入了你希望鏈接的網址，a標籤間填入的是超鏈接所顯示的內容。比如上面的超鏈接具體的顯示形式是這樣的：
百度
在鏈接向其他站內頁面時我們填入的是文件名。像這樣：
<a href="index.html">首頁</a>
如果不在同一目錄下還需要補全其相對位置。
如果是文件夾中嵌套文件夾，我們只需要在文件名前加上文件夾名像這樣：
<a href="HTML/index.html">首頁</a>
如果是上級文件夾我們可以這麼寫：
<a href="../HTML/index.html">首頁</a>
只需要其路徑前加兩點就可以了。以上述例子爲例，它指的是上級文件夾中的文件夾HTML文件夾中的網頁index.html。這種描述路徑的方法，在很多地方可以用到，比方link標籤：
<link rel="stylesheet" href="styles/tssx.css">
CSS中也這樣表示路徑：
background-image: url(../images/bg1.gif);
4.多媒體
單調的網頁一幅圖片啥的都沒有估計不能滿足大家的預期，所以我們還需要在網頁上添加一些媒體文件，比如圖片、視頻、音頻等。
插入圖像的語法是這樣的：
<img src="圖像的地址" alt="圖像內容介紹">
圖像的地址的撰寫規則和超鏈接部分是一致的，同時注意撰寫圖像內容介紹。
插入視頻的寫法略複雜一些：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 HTML5 video 標籤。
</video>
我們可以先寫一層video標籤同時 video元素也提供了 width 和 height 屬性控制視頻的尺寸。如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。video 元素支持多個 source 元素，該元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式。source標籤的src屬性需要填寫視頻的文件地址，而type會指明視頻格式，如果瀏覽器不支持視頻的播放則出現文本 “您的瀏覽器不支持 HTML5 video 標籤。”
音頻的插入方法是一樣的：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>
這裏不再介紹，有關支持格式等信息可參考官網文檔。
5.網頁區域、表格、與列表
首先爲我們介紹div標籤：
<div></div>
爲了使網頁的格式易於編輯我們考慮將網頁劃分成多個區域，div標籤就提供了這個方法，我們可以統一規定各個區域的CSS樣式，同時div標籤允許嵌套。
早期的網站通過表格來控制網頁各個元素的位置，但現在表格的作用變得單一，僅僅用於展示信息，像其原先的職能已經被其他路徑分擔，因而我們可以簡單學習一下如何在頁面上創建表格即可。
| 1 | 2 | 3 |
| 4 | 5 | 6 |
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
在table標籤內用tr標籤標示行，td標籤容納單元格元素。
有的時候需要表頭像這樣：
| 年份 | 序號 | 型號 |
|---|---|---|
| 2020 | 5 | A |
<table>
<tr>
<th>年份</th>
<th>序號</th>
<th>型號</th>
</tr>
<tr>
<td>2020</td>
<td>5</td>
<td>A</td>
</tr>
</table>
網頁上除了表格外還需要列表展示信息，列表分爲兩種有序表與無序表，區別也就在於一種帶序號一種不帶序號。
- 參與商：星座名，參星在西而商星在東，當一個上升，另一個下沉，故不相見。
- 間：摻合。
- 故意：故交的情意。
<ol class="zs">
<li>參與商：星座名，參星在西而商星在東，當一個上升，另一個下沉，故不相見。</li>
<li>間：摻合。</li>
<li>故意：故交的情意。</li>
</ol>
無序表只需要做非常小的改動：
<ul>
<li>中國</li>
<li>日本</li>
<li>韓國</li>
</ul>
其效果是這樣的：
- 中國
- 日本
- 韓國
5.表單
我們需要在網頁中輸入信息，並交由後端處理這就需要用到表單元素與表單區域。
我們可以用form標籤創建一個表單區域，像這樣：
<form>
.
input 元素
.
</form>
其中包含input元素，input元素有很多種包括文本框，密碼框，按鈕，單選框、複選框等。
<form>
user name: <input type="text" name="name">
</form>
這裏通過input標籤創建了一個輸入用戶名的文本框，標籤前的文字是提示作用，name用於標記採集信息的類型，type屬性決定了它是一個文本框。其效果如下：
將type屬性改爲password，像這樣：
<form>
Password: <input type="password" name="pwd">
</form>
我們就能得到一個密碼框，其特點是輸入的信息爲變爲黑點不直接顯示其他與普通的文本框一樣。
通過將type改爲radio，同時增加value屬性我們就能得等單選框：
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
其效果是這樣的：
注意這裏的name屬性必須一致。
複選框的形式是類似的，只需將type屬性改爲checkbox：
<form>
<input type="checkbox" name="place" value="Bike">city<br>
<input type="checkbox" name="place" value="Car">country
</form>
我們就能實現複選了，注意name屬性也需要保持一致。
在收集了信息後我們希望提交給後端處理，這個時候就需要一個按鈕和網頁的行爲提交數據，我們可以這樣做：
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
我們通過input標籤將type屬性改爲submit就可以得到一個按鈕，配合表單區域的action屬性就能實現提交，這裏我們先不詳細敘述。
以上便是html部分的筆記！很多用詞並不準確且存在一定的錯誤懇請指正！謝謝。終於寫完了好累。。。其他標籤等信息請參考官網文檔，這裏不再做進一步介紹。