从零开始学WEB前端——HTML理论讲解
📓項目介紹
先做個自我介紹，本人是一個沒人寫前端所以就自學前端的后端程序員🙇。在此項目中我會和大家一起從零基礎開始學習前端，從后端程序員的視角來看前端，受限于作者的水平本項目暫時只會更新到前端框架VUE，不會涉及node.js。該項目適合零基礎的小白或者和我一樣開發網站沒人寫前端所以自學前端的后端程序員😂。
該項目的學習順序是按照我自己學習時總結出來的，其中的每個知識點都是我認真去理解的，同時也查了很多的資料，所有的參考資料我都放在了文章末尾。尊重開源，尊重知識產權。每一個案例我都親手寫過并覺得不錯才放上去的。每次的代碼和筆記我都放在了開源倉庫里，有需要的同學請不要吝嗇給我一個star。如果覺得本文寫的不錯的話記得點贊+關注，你們的支持是我堅持下去的動力😃。
六王畢，四海一，蜀山兀，阿房出。 ——杜牧《阿房宮賦》
語雀地址：https://www.yuque.com/beilayanmen
Github地址：https://github.com/SuZui-cn/my-web
Gitee地址：https://gitee.com/north_gate/my-web
個人博客地址：https://foollyone.cn/
?本文知識點
-
我們的第一個網頁
-
W3C
- 組織介紹
- WEB標準
-
HTML概念
-
HTML結構詳解
-
HTML規范
我們的第一個網頁
現在我們就正式進入WEB前端的學習，先和大家一起來編寫一個自己的網頁。
0x01 在桌面創建一個記事本
右鍵桌面->新建->文本文檔
有同學可能就會問：為什么我的創建的記事本文件名字叫“新建文本文檔”而不是“新建文本文檔.txt”呢？
這是因為.txt是后綴名，表示的是打開方式，就比如.docx后綴的都是默認用word打開，.xlsx的都是默認用excel打開。
常用文件擴展名，Windows系統文件按照不同的格式和用途分很多種類，為便于管理和識別，在對文件命名時，是以擴展名加以區分的，即文件名格式為： “主文件名.擴展名”。這樣就可以根據文件的擴展名，判定文件的種類，從而知道其格式和用途。主要ISO、RAR、html、zip、exe、pdf等。
——百度百科
沒有顯示后綴名的同學需要打開“此電腦”->左上角選擇查看->之后將文件拓展名勾選上。
這樣
0x02 編寫代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body>靚仔的第一個網頁</body> </html>直接將上面的代碼粘貼到剛剛新建的記事本中，這時候我們就已經寫好第一個網頁了，只需要讓谷歌瀏覽器去打開它我們就可以看到里面的內容了。
但是我們怎么讓谷歌來打開一個記事本文件呢？很簡單剛剛所提到的后綴名就可以解決，我們現在就把記事本的后綴名改成.html。
現在直接點擊他就可以用瀏覽器打開了。
有的同學因為默認瀏覽器不是谷歌瀏覽器，所以顯示的圖片就不是谷歌的，這不應該當前操作。但是強烈建議使用谷歌瀏覽器（千萬別用IE瀏覽器），在JavaScript一節中會詳細介紹瀏覽器對我們寫網頁的影響。
恭喜！做到這一步你已經超越很多人了。
道雖邇，不行不至。事雖小，不為不成。 ——《荀子·修身》
下一步我會給大家講解剛剛所寫的那一段代碼以及一些相關的專業知識。如果已經具備了專業知識的同學可以直接跳到標簽介紹那里。
W3C
W3C組織
聊到網頁我們就不得不提起一個組織：W3C
W3C：World Wide Web Consortium，萬維網聯盟組織，用來制定web標準的機構（組織）。
W3C 組織就類似于現實世界中的聯合國。W3C就是網頁世界的老大，規則都是由其來定的。所以我們在寫網頁的時候就需要遵守他的規則。
為什么要遵循WEB標準呢？因為很多瀏覽器的瀏覽器內核不同，導致頁面解析出來的效果可能會有差異，給開發者增加無謂的工作量。因此需要指定統一的標準。
規則并不是用于約束小白的，而是用于約束高手的，因為高手會的太多，掌握太多他人所不會的。為了方便管理，所以需要規則加以約束。
Web標準
Web標準：制作網頁要遵循的規范。
Web標準不是某一個標準，而是由W3C組織和其他標準化組織制定的一系列標準的集合。
Web標準包括三個方面：
-
結構標準（HTML）：用于對網頁元素進行整理和分類。
-
表現標準（CSS）：用于設置網頁元素的版式、顏色、大小等外觀樣式。
-
行為標準（JS）：用于定義網頁的交互和行為。
根據上面的Web標準，可以將 Web前端分為三層，如下。
Web前端分三層：
- HTML（HyperText Markup Language）：超文本標記語言。從語義的角度描述頁面的結構。相當于人的身體組織結構。
- CSS（Cascading Style Sheets）：層疊樣式表。從審美的角度美化頁面的樣式。相當于人的衣服和打扮。
- JS：JavaScript。從交互的角度描述頁面的行為。相當于人的動作，讓人有生命力。
HTML概念
HTML 全稱為 HyperText Markup Language，譯為超文本標記語言。
HTML 不是一種編程語言，是一種描述性的標記語言。
作用：HTML是負責描述文檔語義的語言。
這里我們需要注意兩個地方一個是超文本、一個是標記語言。
所謂的超文本，有兩層含義：
（1）圖片、音頻、視頻、動畫、多媒體等內容，成為超文本，因為它們超出了文本的限制。
（2）不僅如此，它還可以從一個文件跳轉到另一個文件，與世界各地主機的文件進行連接。即：超級鏈接文本。
HTML 不是一種編程語言，是一種描述性的標記語言。這主要有兩層含義：
（1）標記語言是一套標記標簽。比如：標簽<a>表示超鏈接、標簽<img>表示圖片、標簽<h1>表示一級標題等等，它們都是屬于 HTML 標簽。
說的通俗一點就是：網頁是由網頁元素組成的，這些元素是由 HTML 標簽描述出來，然后通過瀏覽器解析，就可以顯示給用戶看了。
（2）編程語言是有編譯過程的，而標記語言沒有編譯過程，HTML標簽是直接由瀏覽器解析執行。
HTML結構詳解
在記事本中編寫代碼雖然可以實現最終的效果，但是不免有些難以操作，所以現在我們用vscode來打開剛剛到記事本文件
打開方式一：點擊左上角的文件然后選擇打開文件，之后選中剛剛的記事本文件。
pass: 如果vscode界面是英文的說明沒有安裝漢化的插件，具體的安裝步驟請看工具篇。
打開方式二：直接將文件拖動到vscode
文件和文件夾都是可以直接拖到vscode里面的，這樣可以快捷打開。
我們要知道HTML標簽都是有開始和結束的（雙邊標記），比如 <html> 和 </html>，在尖括號里多一個反斜杠表示結束。又或者有的標簽是在末尾以/反斜杠直接閉合，這稱為自閉合標簽（單邊標記）。
雙邊標記的標簽在里面編寫的是他的內容。
而自閉合標簽大多數是編寫的屬性。
這些標簽里有很多用等號的就稱為標簽的屬性。
等號左邊是要設置的屬性名，右邊是設置的屬性值。
至于這些屬性有什么用會在之后進行詳細講解。
一個最基本的網頁應該包含一下的內容
<!DOCTYPE html> <html><head><title>標題</title></head><body>內容</body> </html>pass:這里的title標簽的標題是瀏覽器標簽的標題，如下圖。
其層級結構應該如下：
- DOCTYPE
- html
- head
- title
- body
- head
補充：頭標簽內部的常見標簽如下：
- <title>：指定整個網頁的標題，在瀏覽器最上方顯示。
- <base>：為頁面上的所有鏈接規定默認地址或默認目標。
- <meta>：提供有關頁面的基本信息
- <body>：用于定義HTML文檔所要顯示的內容，也稱為主體標簽。我們所寫的代碼必須放在此標簽內。
- <link>：定義文檔與外部資源的關系。
HTML規范
（1）所有標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>
（2）所有的標記都必須小寫。
（3）所有的標簽都必須閉合。
-
雙標簽：<span></span>
-
單標簽：<br> 建議寫成 <br /> <hr> 建議轉成 <hr />，還有<img src=“URL” />
（4）所有的屬性值必須加引號。<font color="red"></font>
（5）所有的屬性必須有值。<hr noshade="noshade">、<input type="radio" checked="checked" />
（6）XHTML文檔開頭必須要有DTD文檔類型定義。
1）HTML對換行不敏感，對tab不敏感
HTML只在乎標簽的嵌套結構，嵌套的關系。誰嵌套了誰，誰被誰嵌套了，和換行、tab無關。換不換行、tab不tab，都不影響頁面的結構。
也就是說，HTML不是依靠縮進來表示嵌套的，而是看標簽的嵌套關系。但是，我們發現有良好的縮進，代碼更易讀。建議大家都正確縮進標簽。
百度為了追求極致的顯示速度，所有HTML標簽都沒有換行、都沒有縮進（tab），HTML和換不換行無關，標簽的層次依然清晰，只不過程序員不可讀了。
2）空白折疊現象
HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。
3）標簽要嚴格封閉
標簽不封閉的結果是災難性的。
總結
以上是生活随笔為你收集整理的从零开始学WEB前端——HTML理论讲解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大数（小于10000）N的阶乘准确值（效
- 下一篇： 2017年html5行业报告,云适配发布