作爲一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師，在一些小型項目或者初創公司中，職能劃分並不明確，往往要一個人前後端全都會做， 所以作爲一名全棧工程師或者後端工程師，掌握必備的前端知識，也是必不可少的一項技能。今天就着重講解一下，作爲一名全棧工程師，前端Html方面的必須要掌握的相關知識。

HTML介紹

Html是用來描述網頁的一種語言，被稱之爲超文本標記語言。用HTML編寫的文件，後綴以.html結尾。HTML是一種標記語言，一套標記標籤。

標籤是由尖括號包圍的關鍵字。如：<html>
標籤有兩種表現形式：

雙標籤如：<html> </html>
單標籤，如：<img />

HTML5的DOCTYPE聲明

HTML5是HTML的最新修訂版本，2014年10月由萬維網聯盟(W3C)完成標準制定。DOCTYPE是doucment type的縮寫，<!DOCTYPE html> 是H5的聲明，位於文檔的最前面，處於標籤之前，它是網頁的必備組成部分，可以避免瀏覽的怪異模式。

HTML5基本骨架

通過Visual Studio Code創建的Html默認骨架，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
</body>
</html>

對於HTML5基本骨架中的標籤說明，如下所示：

1. html標籤

定義Html文檔，瀏覽器看到後就明白這是HTML文檔，所以其他的元素要包裹在它的裏面，標籤限定了文檔的開始和結束位置。

2. head標籤

head標籤用於定義文檔的頭部。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題，在web中的位置以及和其他文檔的關係等。絕大多數的文檔頭部信息包含的數據都不會真正作爲內容顯示給讀者。

3. body標籤

body標籤，定義文檔的主體。body元素包含文檔的所有內容（比如：文本，超鏈接，圖形，表格，列表等等），它會直接的在頁面中顯示出來，也就是用戶可以直觀的看到的內容。

4. title標籤

title標籤，可以定義文檔的標題。它顯示在瀏覽器窗口的標題欄或狀態欄上。title標籤是head標籤中唯一必須要求包含的信息，寫head 一定要寫title。title增加有利於SEO優化，即通過對網站的內容調整，滿足搜索引擎的排名需求。

5. meta標籤

meta標籤用來描述一個html網頁文檔的屬性，關鍵詞等，如 charset=”utf-8”是說明當前使用的是utf-8編碼格式，在開發中我們經常看到utf-8或者是gbk 這些都是編碼格式，通常使用utf-8。

標題標籤

1. 標題介紹與應用

標題是通過h1到h6標籤進行定義的。h1定義最大的標題，h6定義最小的標題。如下所示：

<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>

在Visual Studio Code中生成h1到h6的快捷鍵爲：h$*6

2. 正確使用標題

請確保將Html標題標籤只用於標題，不要僅僅是爲了生成粗體或大號的文本而使用標題。
正確使用標題有益於SEO
應該將h1用作主標題（最重要的）其次是h2（次要的），再其次是h3，依次類推。

3. 標題標籤的位置擺放

在標籤中，添加屬性 align=”left|center|right”，可以設置位置，默認居左。

段落標籤

段落是通過P標籤來定義的，如：

<p>這是一個段落</p>
<p>這是另外一個段落</p>

換行標籤

如果您希望在不產生一個新段落的情況下進行換行，請使用br

br標籤是一個空的HTML元素。如下所示：

<p>同一個段落內<br />有換行,也可以<br />再換一行</p>

水平線

hr標籤在html頁面中，創建水平線，如下所示：

<hr width="200" color="red" align="left" size="4">

hr所擁有的屬性，如下所示：

color:設置水平線的顏色
width:設置水平線的長度
size: 設置水平線的高度
align: 設置水平線的對齊方式，默認居中，可取值left|right

注意：換行標籤br,水平線標籤hr 都是單標籤

圖片標籤

網站中最多的元素，img標籤定義html頁面中的圖像。如下所示：

<img src="1.jpg" alt="這是一張照片" width="300" height="300" title="這是圖片的標題">

img標籤是單標籤，不需要閉合。主要屬性如下所示：

src:圖片路徑與名字，可以是相對路徑，絕對路徑，網絡路徑
alt:規定圖像的替代文本，即圖像不顯示時顯示的內容
widht:設置圖像的寬度
height:設置圖像的高度
title:鼠標懸停在圖片上顯示的提示信息

img標籤的路徑，如下所示：

絕對路徑：電腦的盤符存儲與訪問的具體地址
網絡路徑：表示網絡上的一張圖片所對應的路徑
相對路徑：兩者相對關係，同一路徑下可直接訪問。相對路徑之間的關係，主要有以下幾種：

子級關係：/
父級關係：../
同級關係：./

圖片示例如下所示：

<!--絕對路徑,不建議使用-->
<img src="D:\test\1.png" alt="這是一張絕對路徑的圖片">
<!--相對路徑-->
<img src="1.jpg" alt="這是一張相對路徑照片" width="300" height="200" title="這是圖片的標題">
<!--網絡路徑-->
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="這是一張網絡圖片">

超鏈接標籤

1. 超鏈接描述

html使用標籤a 來設置超文本鏈接

2. 超鏈接屬性

在a標籤中使用href屬性來描述鏈接的跳轉地址。默認情況下，鏈接將以如下形式出現在瀏覽器中：

一個未訪問過的鏈接顯示爲藍色字體，並帶有下劃線。
訪問過的鏈接顯示爲紫色並帶有下劃線。
點擊鏈接時，鏈接顯示爲紅色並帶有下劃線。

後期可通過CSS樣式修改掉這些效果。

超鏈接可以是一個字，一個詞，或者一組詞，也可以是一副圖像，您可以點擊這些內容來跳轉到新的頁面。如下所示：

<a href="https:www.baidu.com">百度一下，你就知道</a>
<a href="https:www.baidu.com">  
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="這是一張網絡圖片">
</a>

當您把鼠標指針移動到網頁中的某個超鏈接上時，箭頭會變爲一隻小手形狀。可以用來區分超鏈接和非超鏈接。

文本標籤

常用的文本標籤有以下幾種：

em標籤，定義着重文字
b標籤，定義粗體文字
i標籤，定義斜體文字
strong標籤，定義加重語氣
del標籤，定義刪除字
span標籤，元素沒有特定的含義

注意：常用文本標籤和段落p是不同的，段落代表一段文本，而文本標籤一般表示文本詞彙。

文本標籤示例如下所示：

<em>着重文字標籤em</em>
<b>粗體文字標籤b</b>
<i>斜體標籤i</i>
<strong>加重語氣標籤strong</strong>
<del>定義刪除文本del</del>
<span>無特殊含義標籤span，爲以後css做準備</span>

有序列表標籤

有序列表是一列項目，列表項目使用數字進行標記。有序列表始於ol,每個列表項始於li標記。

<ol>
    <li>第一項</li>    
    <li>第二項</li>    
    <li>第三項</li>
</ol>

1. 有序列表的type屬性

ol標籤的type屬性擁有的選項，如下所示：

1 表示列表項目用數字標號（1,2,3...）
a 表示列表項目用小寫字母標號（a,b,c,...）
A 表示列表項目用大寫字母標號（A,B,C...）
i 表示列表項目用小寫羅馬字符標號（i,ii,iii...）
I表示列表項目用大寫羅馬字符標號（I,II,III...）

2. 有序列表嵌套

列表是可以嵌套的。

<ol>    
    <li>第一項</li>    
    <li>        
        <ol>            
            <li>第1.1項內容</li>            
            <li>第1.2項內容</li>           
            <li>第1.3項內容</li>        
        </ol>    
    </li>    
    <li>第二項</li>    
    <li>第三項</li>
</ol>

無序列表標籤

無序列表是一個項目的列表，此項目列表使用粗體圓點進行標記。無序列表始於ul標籤，沒有列表項始於li標籤

<ul>    
    <li>蘋果</li>    
    <li>橘子</li>    
    <li>梨</li>
</ul>

1. 無序列表的type屬性

ul的type屬性擁有的選項，如下所示：

disc,默認實心圈
circle，空心圓
square 默認小方塊
none 不顯示

2. 無序列表嵌套

列表是可以嵌套的

<ul>    
    <li>蔬菜</li>    
    <li>水果        
        <ul>            
            <li>蘋果</li>            
            <li>橘子</li>            
            <li>梨</li>        
        </ul>    
    </li>    
    <li>樹木</li>
</ul>

3. 常見應用場景

無序的列表效果，如新聞列表等
導航效果，絕大多數的導航都是基於無序列表實現的。

表格標籤

表格在數據展示方面非常簡單，並且表現優秀。

1. 表格組成與特點

表格右行，列，單元格組成
單元格特點：同行等高，同列等寬。

表格在html中通過以下標籤表示：

表格標籤：table
行：tr
單元格：td

表格示例：

<table>    
    <tr>        
        <td></td>        
        <td></td>        
        <td></td>        
        <td></td>    
    </tr>    
    <tr>        
        <td></td>        
        <td></td>        
        <td></td>        
        <td></td>    
    </tr>
</table>

在vistual studio code中，快速生成表格的快捷鍵爲table>tr*2>td*3{單元格內容}。

2. 表格屬性

表格具有如下屬性：

border 設置表格的邊框
width 表格的寬度
height 表格的高度

3. 單元格合併

單元格合併分爲以下兩種：

水平合併，colspan=”合併的列數”
垂直合併，rowspan=”合併的行數”

表單標籤

表單讓網頁具備交互功能。

表單在web網頁中，用來給用戶填寫信息，從而能採集用戶信息，使得網頁具有交互的功能。所有的用戶輸入內容的地方都用表單來寫，如登錄註冊，搜索框等。

表單的由容器和控件組成的，一個表單一般應該包含用戶填寫信息的輸入框，提交按鈕等。這些輸入框，按鈕叫做控件。表單就是容器，它能容納各種各樣的控件。

<form action="" method="post">    
    <input type="text" name="" id="">    
    <input type="button" value="">
</form>

表單具有如下屬性：

action 服務請求的地址
name 表單的名稱
method 提交數據的方式，主要有get和post兩種，主要區別如下：

數據提交方式，get提交的數據url可以看到，post看不到
get一般用於提交少量的數據，post用來提交大量的數據。

表單元素

一個完整的表單包含三個基本組成部分：表單標籤，表單域，表單按鈕。

1. 文本框

文本框，通過input type=”text”標籤來設定，當用戶要在表單中輸入字母，數字等內容時，就會用到文本框。

2. 密碼框

密碼框字段通過標籤 input type=”password” 來定義。密碼框中的內容不會以明文顯示，默認密碼顯示爲實心圓點

3. 提交按鈕

提交按鈕通過標籤input type=”submit”來定義。當用點擊提交按鈕時，表單內容會被傳送到另一個文件進行處理。由form表單的action屬性進行定義。

塊元素和行內元素（內聯元素）

HTML5出現之前，經常把元素按照塊級元素和內聯元素來區分，在HTML5中，元素不再按照這種方式來區分，而是按照內容模型來區分。主要分爲：

元數據類型（metadata content）
區塊型（sectioning content）
標題型（heading content）
文檔流型（flow content）
語句型（phrasing content）
內嵌型（embedded content）
交互型（interactive content）

元素不屬於任何一個類別的，被稱爲穿透的，元素可能數據不止一個類型，稱之爲混合型。

雖然HTML5版本，對元素分類更細緻了，但是對於初學者並太好理解，所以我們仍然按照塊級元素和內聯元素進行區分，這對我們的佈局起到了至關重要的作用。

1. 內聯元素和塊級元素的區別

塊元素

塊元素會在頁面中單獨佔一行（多個塊級元素，自上而下排列）
可以設置width，height屬性
一般塊級元素可以包含行內元素和其他塊級元素。

內聯元素

行內元素不會在頁面中單獨佔據一行，只佔自身的大小。
行內元素設置width,height無效
一般內聯元素不包含塊級元素。

2. 常見示例

常見塊級元素

div form h1~h6 hr p table ul ol 等

常見內聯元素

a b em i span strong 等

行內塊級元素（特點：不換行，能夠識別寬度，高度）

button img input

HTML5新增標籤

在HTML5出現之前，一般採用DIV+CSS佈局頁面，但是這樣的佈局方式不僅使文檔結構不夠清晰，而且不利於搜索引擎爬蟲對頁面的爬取。

爲了解決上述缺點，HTML5新增很多新的語義化標籤。

div是容器元素，是頁面中見到的最多的元素。

用div+css實現頁面佈局，一般如下所示：

H5新標籤實現

關於H5中新增的標籤，常見如下所示：

header標籤，頭部
nav標籤，導航
section 定義文檔中的章節，頁眉，頁腳
aside 側邊欄
footer 頁面底部
article 代表一個獨立的，完整的相關內容塊，例如一篇完整的論壇帖子，一篇博客文章，一個評論等。

以上就是全棧工程師必須要掌握的前端Html技能全部內容。關於同系列文章，鏈接如下：

全棧工程師必須要掌握的前端JavaScript技能

全棧工程師必須要掌握的前端CSS技能

希望可以拋磚引玉，一起學習，共同進步。學習編程，從關注【老碼識途】開始，爲大家分享更多文章！！！