作為一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：C#，Java，SQL ，Python等，對前端的知識則不太精通。在一些比較完善的公司或者項目中，一般會搭配前端工程師，UI工程師等，來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師，在一些小型項目或者初創公... ...

作為一名全棧工程師，在日常的工作中，可能更側重於後端開發，如：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技能

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

作者：小六公子
出處：http://www.cnblogs.com/hsiang/
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新技術及職場文章