前言：網絡安全中有一個漏洞叫xss漏洞，就是利用網頁引發彈窗，這就要求我們看得懂源碼，所以我會持續更新前端學習，可以不精通，但是一定要會，主要掌握HTML，css，js這三項技術，今天就講講HTML入門。

本文學習自嗶哩嗶哩中的

【HTML+CSS+JS+Vue】比大學課程還詳細的Web前端教程，整整180集，學完即可兼職就業！附學習文檔PDF，隨時都能學_前端開發_WEB入門_嗶哩嗶哩_bilibili

1.下載vscode

vscode作為一個快捷工具，十分的好用，這里先教大家如何下載。

先搜索vscode官網，

選擇紅框所選擇的，進入后正常下載

下載之后根據提示一步步來，在選擇路徑可以自己選擇，在一個選擇附加任務時把所有的都選上，等待一段時間就可以了。接下來我們來下載一些要安裝的插件。

選擇擴展模塊，第一個就是中文插件，我現在時應經下載好的，輸入Chinese，選擇中文簡體，下載，同時下載HTML css support（后期寫css使用），live server（快速編譯HTML文件），最后一個auto rename tag，下載好后就完成了準備工作。

2.正式學習html

HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的新一代標準，是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進，雖然技術人員在開發過程中可能不會將這些新技術投入應用，但是對于該種技術的新特性，網站開發技術人員是必須要有所了解的。

2.1一些基本標簽

在講標簽之前，我們要知道一般的網頁都包含什么

這是一個網頁最開始的樣子，包含head，body（網頁所呈現的），html，接下來我們學習一些標簽。首先說一下如果我們每一次都要手敲這段代碼是非常難受且費事的，所以我們按住“!”在按tab鍵即可一鍵補全

2.1.1標題標簽（<h1> ~<h6>標簽）

從這個圖中不難發現<h1>~<h6>?? 字體不斷變小，這里要申明一點，就是h標簽只有到h6，沒有h7h8等東西。當然如果要一個一個敲似乎有點麻煩，這里給大家一個公式，h$*6即可一鍵生成h1到h6。在h1到h6中還可以添加屬性，比如align，改變位置。

大家可以看到align是紅色的，應為這是他不建議你這樣用，一般都是用css進行改變，這個我們后面再說，不過也是可以用的。（這里講一下，接下來的介紹中我不會在講解屬性的問題，關于標簽屬性我會單獨拿出來來講，同時在后期的css會解決大部分屬性）。

2.1.2段落，換行，水平線。

首先是段落<p>標簽。

可以看到輸出了一個“我是一個段落標簽”，這里大家就可能有疑問了，為什么要用段落標簽，不是可以用h標簽嗎，其實是應為內容太短了，實際上在開發的過程中段落內容非常長，所以用p標簽。

接下來是換行標簽<br>

可以看到使用br之后就換行了，這里要提醒以下br是單標簽，千萬不能后面加一個</br>。當然br標簽有兩種寫法，一個是<br> ,另一個是<br/>,所以要記住，這兩個都代表換行，如果加上就是換兩行。

接下來是水平線標簽

<hr>為水平標簽，可以在網頁中創造一個水平線，同時換行。

可以看到這里創造了一個水平線同時換行。

2.1.3圖片標簽

大家在網上看到的網頁，因該都是花里胡哨的，沒有我的這么樸素的吧，那么接下來講講圖片標簽。<img src=”” alt=””>這就是圖片標簽，大家可能有點看不懂，這個src就是圖片路徑，這個路徑可以是絕對路徑，可以是相對路徑，也可以是網絡路徑。而這和alt引號內則是圖片加載不出來所要呈現的內容。

這里就是絕對路徑，相對路徑，還有網絡路徑的不同結果，這里要須知，絕對路徑無法用liver server訪問，所以我們要找到我們的網頁訪問。

在這里講一下相對路徑的級關系，分為同級關系，子級與父級關系，分別是/，./，../。

2.1.4超鏈接

在我們日常訪問網頁的時候，我們點擊網頁都會跳轉，這里就涉及到超鏈接。接下來講講如何使用超鏈接。<a href=""></a>使用a標簽達到超鏈接的目的，在href中輸入我們要跳轉到的網頁url，比如百度，而在兩個a標簽中則是網頁上展示的連接內容，

這里我點擊百度就會跳轉到百度的訪問頁面。這里講一個內容叫做空跳轉，在我們開發的時候，有時候會不知道要跳轉到哪里，這時候我們在href中寫入#即可實現空調轉。

2.1.4常見的文本標簽

<em>定義著重字

<b>定義粗體字

<i>定義斜體字

<strong>定義著重語氣

<del>定義刪除字

<span>沒有實際意義，相當于一個容器，對內部的字體做屬性變換

也可以嵌套使用

2.1.4列表

1.有序列表

<ol>

?????? <li>

?????? </li>

</ol>

這是有序列表的代碼

大家以后在寫代碼時，可以在第一個li標簽后按住鍵盤shift和alt鍵再按鍵盤上下鍵就可以快速編輯li標簽了。

2.無序標簽

<ul>

?????? <li>

?????? <li>

<ul>

這是無序標簽的代碼

同時無論是有序和無序都是可以嵌套的，這里拿無序的做演示

大家可以看到這里的嵌套形式發生改變，這個屬性問題我會單獨拿出來講，這里就是告訴大家可以嵌套使用。

2.1.5表格標簽

再我們的日常生活中，表格是非常常見的，那么如何再網頁中制作網頁呢，這就要講講表格標簽。

<table>

?? <tr>

<td></td>

?????? <td></td>

?? </tr>

</table>

在這里大家可以清楚的看到tr是行標簽，而td是列標簽。

這里再給大家一個快捷方式table>tr*4>td*4{1}

給大家解釋一下，這個是生成表格的快捷方式，生成4*4的表格，同時全部覆蓋為1。

接下來講講單元格合并

為了大家看的方便，我先創建一個4*4的列表，接下來講一講合并單元格，

首先是橫向合并

可以看到單元格2的位置沒有了，大家看一下源代碼，我們要刪除單元格二，否則會被擠到旁邊去。Colspan里面數是幾，就合并幾個單元格，不過要注意要刪除掉多余的單元格。接下來講講豎著合并單元格

一樣的刪除，但大家可以看到，單元格9到了中間，應為單元格默認再左中位置，所以到了中間，如果我們刪除9和13，保留5，則更明顯

3.1.6 form表單

再我們的網頁中有很多輸入框，可以查詢，這就是我們的form表單

<form>

?????? <input>

</form>

Form表單主要是form和input組成，其實這個需要講一講他的屬性，from相當于一個容器，放置你的表單。實際就是你的input起作用。

大家看一下這段源代碼，這個action其實就是我們要提交的地方，這里沒有就可以空著，而input中type是比較重要的，所以我在這里講一下。

1.單行輸入框< input type=“text”/>

單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號等，常用的屬性有name、value、 maxlength。

2.密碼輸入框< input type=" password"/>

密碼輸入框用來輸入密碼，其內容將以圓點的形式顯示。就是你看不到密碼，而是小圓點。

3.單選按鈕< input type=" radio"/>

單選按鈕用于單項選擇，如選擇性別、是否操作等。需要注意的是，在定義單選按鈕時，必須為同一組中的選項指定相同的name值，這樣“單選”才會生效.

4.復選框< input type=" checkbox"/>

復選框常用于多項選擇，如選擇興趣、愛好等，可對其應用 checked屬性，指定默認選中項。

5.普通按鈕< input type=" button"/>

普通按鈕常常配合JavaScript腳本語言使用，初學者了解即可。

6.提交按鈕< nput type=" 'submit"/>

提交按鈕是表單中的核心控件，用戶完成信息的輸入后一般都需要單擊提交按鈕才能完成表單數據的提交。可以對其應用 value屬性，改變提交按鈕上的默認文本。

7.重置按鈕< input type=" reset"/>

當用戶輸入的信息有誤時，可單擊重置按鈕取消已輸入的所有表單信息。可以對其應用 value屬性，改變重置按鈕上的默認文本。

8.圖像形式的提交按鈕< input type=" image"/>

圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認的按鈕，外觀上更加美觀。需要注意的是，必須為其定義src屬性指定圖像的url地址。

9.隱藏域< input type=" hidden"/>

隱藏域對于用戶是不可見的，通常用于后臺的程序，初學者了解即可。

10.文件域< input type=“file”/>

當定義文件域時，頁面中將出現一個“選擇文件”按鈕和提示信息文本，用戶可以通過單擊按鈕然后直接選擇文件的方式，將文件提交給后臺服務器。

3.HTML5新增標簽（以下內容來自百度）

新增標簽

1. <article>?- 定義文檔、頁面或站點內的獨立內容區域。
2. <aside>?- 定義與頁面內容幾乎無關的部分，例如側邊欄。
3. <audio>?- 用于嵌入音頻內容。
4. <canvas>?- 用于通過JavaScript繪制圖形。
5. <details>?- 定義用戶可以展開或折疊的細節部分。
6. <dialog>?- 定義對話框或窗口。
7. <figcaption>?- 定義<figure>元素的標題。
8. <figure>?- 用于對文檔中的獨立內容進行分組，通常包含圖片、圖表、代碼段等。
9. <footer>?- 定義文檔或節的頁腳。
10. <header>?- 定義文檔或節的頁眉。
11. <main>?- 指定文檔的主要內容區域。
12. <mark>?- 定義高亮顯示的文本。
13. <nav>?- 定義導航鏈接的部分。
14. <section>?- 定義文檔中的一個區域（或節）。
15. <summary>?- 與<details>標簽一起使用，定義可展開或折疊部分的標題。
16. <video>?- 用于嵌入視頻內容。
17. <time>?- 定義日期/時間。

其實這些了解即可，很多時候我們都是用老的標簽，因為瀏覽器兼容問題導致一些新的標簽用不了，所以大多時候都是用老標簽。

4.結語

那么HTML入門的就講這么多，希望大家都上手操作一下。本文僅僅記錄重要內容，如果要學習，建議去看原視頻，連接放在文章開頭。