Web 程序員為什么要遵循 HTML 優先原則？

者通過實踐來闡述HTML 優先原則的主要目標是擴大能夠從事 Web 軟件編程工作的人員范圍。

原文鏈接：https://html-first.com/

未經允許，禁止轉載！

作者 | Tony Ennis 譯者 | 彎月

責編 | 夏萌

出品 | CSDN（ID：CSDNnews）

HTML優先是一組原則，旨在通過以下方式使構建 Web 軟件更容易、更快、更具包容性且更易于維護：

利用現代網絡瀏覽器的默認功能。
利用 HTML 屬性語法的極致簡單性。
利用 Web 的查看源代碼功能。

目標

HTML優先原則的主要目標是擴大能夠從事 Web 軟件編程工作的人員范圍。從個人角度來看，這是件好事，因為這可以讓更多的人成為Web 程序員，構建出色的 Web 軟件，并提高他們的收入。從業務角度來看，這些原則也有好處，因為這可以降低構建軟件的成本，并減少招聘所需的資源量（眾所周知，這是一個資源密集型流程）。

HTML優先原則的第二大目標是讓構建 Web 軟件的工作變得更加愉快和無縫。對于大多數 Web 程序員來說，在快速構建產品期間能夠流暢地在文本編輯器和瀏覽器之間來回切換，而不會遇到各種磕磕絆絆，也不需要切換上下文，他們會感到非常興奮。但如今程序員需要幾年的時間來掌握工具和框架才能達到這個階段。HTML 優先原則能夠讓人們在學習編程的早期階段體會這種感覺，并達到這種水平。

為了實現這些目標，首先必須承認 HTML 非常容易理解，因此我們將 HTML 作為產品的基石，不僅用 HTML 來定義內容和結構，還用它來設置樣式和行為。

原則

1. 推薦使用 HTML 原生的方法。

2. 使用 HTML 屬性來設置樣式和行為。

3. 使用利用了 HTML屬性的庫。

4. 避開構建過程。

5. 推薦使用“裸” HTML。

6. 保留查看源代碼的功能。

1.使用 HTML 原有的方法通過外部框架實現所需的功能

瀏覽器支持的開箱即用的功能范圍很廣，而且數量還在不斷增長。在將庫或框架添加到代碼庫之前，請檢查是否可以使用原汁原味的 html/css 來實現它。

鼓勵的寫法：

不鼓勵的寫法：

2.如有可能，默認使用內聯 HTML 屬性定義樣式和行為

我們可以使用 Tailwind 或 Tachyons等 SPC 庫來實現樣式。同時使用 hyperscript、Alpine 或類似的庫來實現行為。這意味著很多功能都需要使用 HTML 來實現。但這也意味著其他開發人員更容易找到和理解行為、瀏覽并修改它們。

鼓勵的寫法：

不鼓勵的寫法：

你可能會注意到，這種方法似乎違反了關注點分離——備受吹捧的軟件設計原則之一。我們認為，非黑即白的關注點分離原則是有缺陷的，因此我們提倡采用一種考慮到行為局部性以及兩者之間權衡的方法。

3.如果需要庫，請使用利用 html 屬性的庫，不推薦使用圍繞 JavaScript 或自定義語法構建的庫

鼓勵的寫法：

不鼓勵的寫法：

4.避開構建過程

需要將文件從一種格式轉換為另一種格式的庫會導致維護開銷增加大量，嚴重影響查看源代碼的功能或導致其無法使用，而且通常開發人員需要學習新工具才能使用它們。現代瀏覽器已不再有當初引入這些實踐時的性能限制。如果我們使用 HTML 優先的庫（例如 static tailwind 或 htmx），則額外所需的 CSS 和JS 量為最少。

鼓勵的寫法：

不鼓勵的寫法：

5.推薦使用“裸” HTML，不推薦編譯為 HTML的各個混亂層

這條原則適用于后端實現。基本思想是可讀性。熟悉 HTML 但不熟悉后端框架的開發人員查看視圖文件，仍然應該能夠理解 90% 以上的內容。如上所述，這意味著犧牲簡潔性而換取易于理解性。

鼓勵的寫法：

不鼓勵的寫法：

6.如有可能，保留右鍵單擊查看源代碼的功能

早期網絡的美妙之處在于，我們總能 "窺探 "到網頁任何部分的代碼。對于有抱負的開發人員來說，這是一項福利，因為這為我們在理論（閱讀代碼如何工作）和實踐之間架起了一座橋梁，將代碼和界面并排展示在我們眼前。對于許多網站來說，我們只需復制并粘貼 html 或 css，然后放到自己的網站上運行，就可以獲得近乎相同的復制品。新舊代碼的混合不僅是一種學習方式，而且往往也是我們創作新作品的基礎。

后來，業界采用了一些 "改進 "方法，導致這種做法變得更為罕見。例如，如果我們使用流行的前端框架 React，就不能點擊 "查看源代碼"，復制代碼并重新混合，因為首先 React 有構建過程，這意味著我們在開發人員工具中看到的代碼與開發人員編寫的代碼不同；其次，React 代碼片段必須封裝在 react 應用程序中才能工作。

遵循 HTML 優先原則的網站能夠重新獲得查看源代碼的功能。事實上，HTML 優先的網站往往更進一步。因為如果使用 HTML 屬性定義用戶界面交互，那么在復制粘貼到新的代碼庫時，也可以保留這些交互（前提是目標文件包含相同的 js 庫）。我們打算將來將其擴展到 HTML 優先的代碼片段庫。

總結

本文中描述的實踐和原則在整個行業中仍然很小眾，而且使用的社區也很少。我希望通過建設網站（https://html-first.com/）的方式來尋找同道合的人，共同探討并完善這些想法。

今天，前端工程師已經成為研發體系中的重要崗位之一。

可是與此相對的是，極少大學的計算機專業愿意開設前端課程，大部分前端工程師的知識，也都是在實踐和工作中不斷學習的。

最近收到很多同學的后臺留言，說希望多推出一些前端方向的教程。

今天我們就帶來一門適合前端初學者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創建一個待辦事項的管理應用～

項目效果：

課程從最基礎的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進，如果你想快速上手 React 框架，這門課會是你非常好的選擇。

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內容。

以下是課程第一節的內容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進入前端的大門看看吧：

「HTML 簡介」

實驗介紹

本實驗是對 HTML 進行學習，并且較詳細的說明了 Web 是如何工作的。主要內容有：HTML 常見標簽、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。通過本節學習，可以構建簡單的 HTML 網頁。

知識點

什么是 HTML
Web 是如何工作的
文檔結構
常見標簽
表格
表單
有序列表和無序列表

什么是 HTML

HTML（超文本標記語言）是一種用于創建網頁的標準標記語言。HTML 不需要編譯，可以直接由瀏覽器執行，它的解析依賴于瀏覽器的內核。它不是一種編程語言，而是一種標記語言。

Web 是如何工作的

下面我們來演示用戶是如何看到一個網頁顯示的。

具體來講：

當用戶通過瀏覽器輸入網址后，瀏覽器先在 DNS 服務器上找到它，然后對它進行解析。
解析完成后，瀏覽器給服務器發送 http 請求。
服務器同意這個請求，就把 HTML 文件發送回瀏覽器。
瀏覽器拿到 HTML 文件，對其解析執行，顯示在用戶屏幕上。

HTML 文檔結構

首先我們來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。

文檔類型聲明

<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。

html 標簽

html 標簽即根元素，此處表示文檔的開始，該標簽包含兩個子標簽：head 和 body。

head 元素

head 標簽下面所包含的標簽由 title、meta、link、style、script 等（后面會講到）。

title 標簽

作用：設置文檔的標題或者名稱。瀏覽器通常將該標簽的內容顯示在窗口頂部或者標簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標簽。

meta 標簽

<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。

body 標簽

body 標簽定義文檔的主體，也就是我們的主要內容（比如文本、超鏈接、圖像、表格和列表等）。

常見標簽

1.h 系類標簽

h 標簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標題。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
  </body>
</html>

為了大家能更有效的學習，請使用實驗樓的環境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。

最終效果為：

2.p 標簽

p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<p>我是第一段文字，實驗樓，做實驗，學編程</p>
<p>我是第二段文字，實驗樓，做實驗，學編程</p>

3. 圖片標簽

HTML 的圖像是通過標簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標簽

<a> 標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<a href="https://www.shiyanlou.com/">實驗樓</a>

點擊文字：

跳轉到指定網頁：

篇幅有限，后續的課程內容，請在“實驗樓”邊敲代碼邊學習～

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”，就能找到課程，繼續學習啦！

本篇文章開始成哥將帶大家一起學習一下前端的基礎知識，我們先講解前端的基礎HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內容吧！

01 HTML簡介

HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。

HTML是由Web的發明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創立的一種標記語言，它是標準通用化標記語言SGML的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺(如UNIX， Windows等)。

使用HTML語言，將所需要表達的信息按某種規則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現在所見到的網頁。HTML 不需要編譯，可以直接由瀏覽器執行，非常方便開發時調試。

02 HTML實例

我們現在創建一個典型的HTML結構具體如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML實例</title>  
6. </head>  
7. <body>  
8.   <h1>我是標題</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html>

如上頁面中各個標簽代表的意思如下：

1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當前處理的內容是HTML頁面

2）html是 HTML 頁面的根元素，用于標識HTML內容的開始與結束

3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數據這邊charset="UTF-8"標識當前頁面編碼格式為UTF-8，title為文檔的標題

4）body是HTML主體也是游覽器在顯示頁面時的內容。h1是body內容中定義的標題，p是body內容中定義的段落

我們現在通過游覽器打開編寫的HTML內容，具體內容如下

在HTML中的內容可以通過以下格式進行內容注釋具體如下：

03 HTML標簽、元素、屬性、實體編碼與事件

（1）HTML標簽

HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應用）最重要的組成部分。HTML標簽具有如下特點：

1）標簽一般是成對出現的如:<div></div>;也有空標簽如:<br />

2）標簽由<>包括,分為開始標簽(開放標簽)和結束標簽(閉合標簽)

3）標簽不區分大小寫,根據W3C(萬維網聯盟)推薦,統一使用小寫字母

標簽的示列如下：

標簽按照<>的對數可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。

1）雙標簽

雙標簽指由開始和結束兩個標記符組成的標記。其基本語法格式如下：

1. <標記名></標記名>

常見的雙標簽有如下幾種：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 塊級元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超鏈接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>

2）單標簽

單標簽是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：

1. <標記名/>

常見的單標簽有如下幾種：

1. <!-- 換行標簽 -->  
2. <br />  
3.   
4. <!-- 分隔線標簽 -->  
5. <hr />  
6.   
7. <!-- 圖片標簽 -->  
8. <img />

（2）HTML元素

HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼，如<p>段落</p>。元素可以進行嵌套具體如下：

1. <div>  
2.   <h1>我是標題</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>

（3）HTML屬性

屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構成,存在于開始標簽中，示列如下:

（4）HTML實體編碼

對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應的"實體編碼"，如< <> >空格。

（5）HTML事件

通過某個動作,執行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：

04 HTML常用標簽示列

（1）h標簽

h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應六種樣式的標題，我們現在來編寫這六種h標簽，演示代碼如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1標題</h1>  
9.   <h2>H2標題</h2>  
10.   <h3>H3標題</h3>  
11.   <h4>H4標題</h4>  
12.   <h5>H5標題</h5>  
13.   <h6>H6標題</h6>  
14. </body>  
15. </html>

我們來運行該HTML文件，來看看這六種h標簽有什么樣式差異，從示列中可以發現h1標簽字體最大然后依次減小。

（2）p標簽

p 標簽是文本標簽，現在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>標題一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>標題二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>

（3）a標簽

a標簽是超鏈接標簽，點擊a標簽可以跳轉到其設置的網站，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">點我跳轉到百度頁面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">點我跳轉到騰訊頁面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>

（4）div標簽

div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>

（5）列表標簽

列表作為網頁設計的重要內容之一，能夠用來制作導航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）

1）有序列表ul

有序列表的順序是有序的，默認情況下會以數字來排列，但也可以通過設置其type屬性以大寫字母、小寫字母、大寫羅馬數字、小寫羅馬數字來排列，我們現在來寫一個示列，具體如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默認方式數字排列 -->  
10.   <p>有序列表默認方式數字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大寫字母排列 -->  
18.   <p>有序列表大寫字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>

2）無序列表ol

無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過type屬性來設置成空心圓或者小方塊，無序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>無序列表默認type樣式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>無序列表方塊樣式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>

3）自定義列表dl

自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始，其列表內容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定義列表</p>  
10.   <dl>  
11.     <dt>東岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>華山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>

（6）其它標簽

1）換行標簽<br/>

在HTML中如果想給內容進行換行可以使用換行標簽，具體示列如下：

2）分割線標簽<hr/>

<hr/> 標簽用于在 HTML創建一條分割線，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是張三</p>  
10.   <!-- 分割線標簽 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>

05 總結

至此我們《HTML基礎教程上篇》就講完了，下篇內容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

一文秒懂Web框架基礎之WSGI協議
IT工程師都需要掌握的容器技術之掃盲篇

在線咨詢

上一篇：單元測試實戰-四種覆蓋詳解、測試實例
下一篇：將Sublime Text 3打造成強大的Pytho

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web 程序員為什么要遵循 HTML 優先原則？

目標

原則

1.使用 HTML 原有的方法通過外部框架實現所需的功能

2.如有可能，默認使用內聯 HTML 屬性定義樣式和行為

3.如果需要庫，請使用利用 html 屬性的庫，不推薦使用圍繞 JavaScript 或自定義語法構建的庫

4.避開構建過程

5.推薦使用“裸” HTML，不推薦編譯為 HTML的各個混亂層

6.如有可能，保留右鍵單擊查看源代碼的功能

總結

實驗介紹

知識點

什么是 HTML

Web 是如何工作的

HTML 文檔結構

常見標簽

01 HTML簡介

02 HTML實例

03 HTML標簽、元素、屬性、實體編碼與事件

04 HTML常用標簽示列

05 總結

您的項目需求