物聯網技術部培訓——網頁前端之HTML
此博文用Markdown所寫，會自動將標籤轉換成HTML，故以下有關標籤都以代碼塊表示
網頁
1. 什麼是網頁
1.1 網頁類型
網頁分爲靜態網頁和動態網頁兩種類型。
1.1.1 靜態網頁
不是說頁面是靜止的稱爲靜態網頁，而是頁面內容不涉及到後端數據庫，每個人進入這個頁面都是一樣的內容。
1.1.2 動態網頁
也不是說頁面是動態的稱爲動態網頁，而是和後端數據庫有交互，在網頁裏的操作需要後端數據庫的支持。
2. HTML
HTML是用來描述網頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)用一套標籤來作爲標記 (markup tag)
HTML 使用標籤來描述網頁
HTML 運行在瀏覽器上，由瀏覽器來解析。
HTML文件的後綴名可以是.html也可以是.htm。
2.1 HTML文件
HTML文件由 HTML 元素組成 ，一個 HTML 元素包含了一個開始標籤與結束標籤以及之間包含的內容，如下實例:
HTML 元素:
<p>紅色的部分是一個元素</p>
2.2 Web瀏覽器
Web瀏覽器（如谷歌瀏覽器，Edge，Firefox，Safari）讀取HTML文件，並將其作爲網頁顯示，但是不會顯示 HTML 標籤，因爲標籤是用來決定如何展現頁面內容的。
2.3 在正式寫代碼之前的準備工作
sublime安裝和準備
安裝包鏈接: https://pan.baidu.com/s/1SJdApwOV7KjJT3TTR-365g.
2.4 html有什麼基礎語法？
2.4.1 文本標籤
我們上面講過，html是一種標記語言，和你們現在接觸到的C語言和C++在代碼風格上有很大的不同，但都是英文輸入法！！
html中，用標籤作爲標記，爲了對網頁中的文本元素進行修飾、排版，使網頁豐富多彩，往往需要使用大量的標籤符。
文本標籤分爲文本的基本設置與文本的修飾設置。
1、HTML 標籤是由尖括號包圍的關鍵詞，比如
2、HTML 標籤通常是成對出現的，比如 和 ，但是也有單個出現的，比如說
3、標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤，這個和C語言中的大括號對{}很像
4、開始和結束標籤也被稱爲開放標籤和閉合標籤
HTML的主要組成部分就是這些標籤對和標籤！！！
2.4.2 基本結構
<!DOCTYPE html>
<html>
<head>
<title>網頁在瀏覽器工具欄上顯示的標題</title>
</head>
<body>
主體內容
</body>
</html>
每次修改後一定要按Ctrl + S 保存！第一次在瀏覽器中打開是鼠標右鍵“在瀏覽器中打開（open in Browser）”。已經在瀏覽器中打開過的保存後刷新那個頁面就好。
2.4.3 HTML標籤+元素的注意事項
1、不要忘記結束標籤
在HTML語法中，你即使忘記了使用結束標籤，大多數瀏覽器也會正確地顯示 HTML，因爲關閉標籤是可選的，但但但千萬不要依賴這種做法！忘記使用結束標籤會產生不可預料的結果或錯誤。
2、HTML 空元素（類似C語言的轉義字符）
沒有結束標籤的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。
<br> 就是沒有關閉標籤的空元素（<br> 標籤定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
嚴謹寫法：在開始標籤後添加斜槓，比如 <br/> （ = <br>……</br> ）、 <hr/>、<input/>、<img/>、<link/>、<meta/> ，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br/> 其實是更長遠的保障。
3、HTML使用小寫標籤
HTML並不像C和C++一樣對大小寫很敏感，比如說<P>等同於<p>。建議統一使用小寫標籤。
2.4.4 HTML的註釋
註釋作用同C語言，只是符號不一樣
C: //…… (一般快捷鍵：Ctrl + / )
*……*\
HTML:
(只有這一種，快捷鍵也是：Ctrl + / )
2.4.5 語法
① <!DOCTYPE> 聲明
聲明必須是 HTML 文檔的第一行，位於 標籤之前。 聲明不是 HTML 標籤；它是指示 web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：
doctype 聲明是不區分大小寫的，聲明方式以下均可：
② HTML頭部和主體
<head>元素是所有頭部元素的容器。
<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。以下標籤都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 、<style>。
如：如果發現你打開的網頁出現了亂碼，在<head>下一行加上
<meta charset=“utf-8”>來指定使用utf-8編碼格式，有些瀏覽器（如360瀏覽器）會設置GBK爲默認的編碼，則這時你需要設置爲<meta charset=“gbk”>
<body>元素定義網頁的主體。包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等）
③ 基礎標籤對
標題標籤<hn>
<hn>標籤用於設置網頁中各個層次的標題文字，被設置的文字將以黑體顯示，並自成段落。
<hn>中的n是一個1-6的數字，通過<h1> - <h6>來定義從大到小的標題。
語法示例：
<h1 align=“center”>這是一個h1標題</h1>
屬性說明：
align屬性用於設置標題的對齊方式，其屬性值有 left （默認） 、center、right。
段落標籤<p>
瀏覽器是以無格式的方式顯示HTML文檔的，也就意味着HTML文檔中的空格和Enter鍵是被瀏覽器所忽略的。要將文本劃分段落就必須使用分段標籤<p>。兩個段落間的間距等於兩次換行的距離。
語法格式舉例：
<p align="center"> 段落內容 </p>
屬性說明：
align（對齊）屬性的屬性值有3個參數：left（默認）、center和right。
鏈接標籤<a>
超鏈接是網頁的靈魂，web上的網頁正是依靠點擊設置在文本、圖像、flash等元素上的超鏈接才能實現相互間的訪問。
<a href="https://www.w3school.com.cn/">這是一個鏈接</a>
由於定義超鏈接時常常需要設置文件的路徑，所以先介紹文件路徑的寫法，然後再介紹鏈接標籤的用法。
絕對路徑和相對路徑： https://blog.csdn.net/Yeoman92/article/details/52736504.
圖像標籤<img>
Web上常用的圖像格式有三種：jpg、gif、png。
使用<img>在網頁上直接加入圖像的語法舉例爲：
<img src=“0.jpg” width=“100%” height=“100” border=“1” alt=“照騙”/>
可以看到<img>標籤是一個空元素，不需要結束標籤，但後面有個 / 。
換行標籤<br/>或者<br>
<br>是換行標籤，在網頁設計中比較常用。使用<br>標籤能夠使文檔在該標籤處強制換行，這一點與<p>相同。但與<p>不同的是換行後行之間不留空白行，頁面看起來比較緊湊。<br>屬於空標籤，沒有結束標籤。但是在使用的過程中，爲了正常關閉空元素，我們最好使用<br/>。
空格： 
水平標籤<hr>
<hr>標籤是水平線標籤，可以在頁面中產生一條水平線，用於分隔文檔和修飾網頁。<hr>屬於空元素標籤，沒有結束標籤。故最好使用<hr/>
語法格式舉例：
<hr color="red" align="center" width="200" size="10“/>
常用屬性說明：hr標籤的常用屬性如右表所示。
④ 列表
（Unordered List）無序列標籤<ul>
整個無序列表始於<ul>標籤。每個列表項始於<li>標籤。
語法格式舉例：
<ul>
<li type="circle">列表項1</li>
<li type="square">列表項2</li>
</ul>
屬性說明：<ul>的常用屬性只有一個type，用來設定列表項前面出現的符號，可取屬性值有：
disc：列表項前面加上符號●。
circle：列表項前面加上符號○。
square：列表項前面加上符號■。
有序列標籤<ol>
語法格式舉例：
<ol type="A" start="2">
<li>列表項1</li>
<li>列表項2</li>
</ol>
<ol>屬性說明：
type： 序號類型
start：開始順序編號
reversed：規定列表順序爲降序
⑤ 表格
<table>稱爲表格標籤，整個表格始於<table>而終於</table>，它是一個容器標籤，用於聲明一個表格，<tr>、<td>等只能在它的範圍內使用。例如：
<table border="1">
<tr>
<th>表頭</th>
</tr>
<tr>
<td>1,1</td>
<td>1,2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
</tr>
</table>
<tr>用來標籤表格行，是單元格（<td>或<th>）的容器，使用時要放在<table>容器裏。<tr>常用的屬性有：
align：設定這一行單元格中內容的水平對齊方式，屬性值爲left、center、right。
valign：設定這一行單元格中內容的垂直對齊方式，屬性值有：top、middle、bottom。
bgcolor：用來設定這一行的背景顏色。
⑥ 表單
HTML 表單用於收集用戶輸入，比如註冊、登錄等等。
類似於表格的<table>……</table>，表單用<form>……</form>作爲大容器包含表單元素。
表單元素指的是不同類型的 input 元素、複選框、單選按鈕、提交按鈕等等。
<form>
姓名： <input type="text" name="name"<br>
性別： <input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">
</form>
input標籤
<input type="text">
文本框除了type屬性外，其它常用屬性有：
name：設定文本框的名稱，在所在表單中屬性值不能相同，名稱 字符串中不能包含空格或特殊字符，可以使用字母數字字符 和下劃線 (_) 的任意組合。表單提交到服務器後需要使用指 定的名稱來獲取文本框的值。
value：設定文本框的默認值，也就是用戶輸入前文本框裏顯示 的文本。
size：設定文本框最多可顯示的字符數，也就是文本框的長度。
maxlength：用來設定文本框中最多可輸入的字符數。通過此屬 性可以將郵政編碼限制爲6位數，將密碼限制爲10個字符等等。
密碼框用來讓用戶輸入密碼，當用戶在密碼框中鍵入時，輸入內容顯示爲項目符號或星號，以保護它不被其他人看到。定義密碼框的語法爲：
<input type="password">
密碼框的其它屬性設置與文本框相同，只是type不同。
單選按鈕用來讓用戶只能從一組選項中選擇一個選項，例如，性別的選擇。定義單選按鈕的語法爲：
<input type="radio">
單選按鈕除type外其它常用屬性有：
name：用來設定單選按鈕的名稱，作用同文本框的name。同 一組中所有單選按鈕的此屬性必須設置相同的值，否 則，各選項不會相互排斥。
value：用來設定在單選按鈕被選中時發送給服務器的值。
checked：是否默認被選中。如果開始標籤里加入checked一 詞，則初始被選中。
複選框用來讓用戶可以從一組選項中選擇多個選項。定義複選框的語法爲：
<input type="checkbox">
複選框除type外其它常用屬性有：
name：用來設定複選框的名稱，作用同文本框的name。
value：用來設定在複選框被選中時發送給服務器的值。
checked：用來確定在瀏覽器中載入表單時，該複選框是否被選中。如果開始標籤里加入checked一詞，則初始被選中。
1.提交按鈕用來將表單數據提交到服務器。
定義提交按鈕的語法爲：<input type="submit">
2.重置按鈕用來還原表單爲初始狀態。
定義重置安鈕的語法爲：<input type="reset">
3.定義普通按鈕的語法爲：<input type="button">
三種按鈕的屬性除type外，其它常用屬性有：
value：用來指定按鈕上顯示的文本。
name：用來指定按鈕的名稱。
input總結
<input type="text"> 文本框
<input type="password"> 密碼
<input type="radio"> 單選
<input type="checkbox"> 複選
<input type="button"> 普通按鈕
<input type="submit"> 提交按鈕
<input type="reset"> 重置按鈕
下拉菜單
下拉菜單，也稱下拉列表，用來讓訪問者從一個列表中選擇一個項目。當頁面空間有限，但需要顯示許多菜單項時，下拉菜單非常有用。
定義一個下拉菜單的語法爲：
<select>
<option>江蘇省</option>
<option selected>湖南省</option>
</select>
一個下拉菜單由<select>和<option>來定義，<select>提供容器，它的name屬性意義同文本框的相同。<option>用來定義一個菜單項，<option>與</option>之間的文本是呈現給訪問者的，而選中一項後傳送的值是由value屬性指定的，如果省略value屬性，則value的值與文本相同，加入selected屬性可以使菜單項初始爲選中狀態。
列表
列表的作用與下拉列表相似，但顯示的外觀不同，列表在瀏覽器中顯示時列出部分或全部選項，另外列表允許訪問者選擇一個或多個項目。
定義列表的語法如下：
<select size=“2" multiple>
<option>常州市</option>
<option selected>濟南市</option>
</select>
跟下拉列表相比，<select>多了兩個屬性：size和multiple。 size：設定列表中顯示的選項個數；multiple：允許選擇多項。
在不同操作系統中，選擇多個選項的差異：
windows：按住 Ctrl 按鈕來選擇多個選項
Mac：按住 command 按鈕來選擇多個選項
由於上述差異的存在，同時由於需要告知用戶可以使用多項選擇，對用戶更友好的方式是使用複選框。
文本區域
文本區域使用戶可以輸入多行信息，例如，輸入留言、自我介紹等。
定義文本區域的語法爲：
<textarea>燃燒我的卡路里！</textarea>
開始標籤與結束標籤之間的文本爲初始值，可以爲空，但結束標籤一定要有且正確。
marquee標籤
<marquee>可以使其標籤的內容產生滾動效果，網上常見的滾動信息公告板或者廣告就是用它來實現的。
<marquee>標籤的使用語法：
<marquee>內容產生滾動效果</marquee>
值得一提的是，因爲html可以進行嵌套使用，在<marquee>標籤內的內容可以是超鏈接，也可以是圖片等等。