前言
關鍵詞：前端自學，html入門，html基礎，前端學習路線。
本部分的內容主要是對html入門的一個介紹。在這里需要強調一件事情，許多前端的初學者容易犯的錯誤就是希望將html的所有標簽都要學習到位，這在學習前端是很錯誤的一種想法，在html中你通常只需要學習一些常用的標簽即可，其他標簽需要用到時候再去查文檔即可，這里給出一個官方文檔的地址：https://developer.mozilla.org/zh-CN/docs/Web/HTML
如果你覺得光看文字資料非常的枯燥，這里提供了我認為講解的很好的兩個免費html入門視頻，希望可以幫到你：https://www.bilibili.com/video/BV11t411K74Q
https://www.bilibili.com/video/BV1vs411M7aT
下面是前端的學習路線：
一、HTML
0.系統結構
B/S架構：Browser/Serve (瀏覽器/服務器的交互形式)
Browser支持的語言：HTML CSS JavaScript
Serve是服務器，其支持的語言：C C++ Java python
優點：升級方便，只用升級服務器端代碼即可。維護成本低。企業內部解決方案。
缺點：速度慢（初始化的所有數據都來自服務器端）、體驗不好。
C/S架構：Client/Serve（客戶端/服務器端的交互形式）
缺點：升級麻煩、維護成本高。
優點：速度快、體驗好。
兼容問題？世界5大主流瀏覽器。
1.簡介
HTML全稱“Hyper Text Markup Language（超文本標記語言）”，是網頁的標准語言。HTML並不是一門編程語言，而是一門描述性的標記語言。
超文本：流媒體、圖片、聲音、視頻.....
HTML由 W3C（世界萬維網聯盟）制定規范。可以在W3 school中查看中文幫助文檔
<標簽符>內容</標簽符>
那么學習HTML時究竟要學些什么呢？用一句簡單的話來說，就是學習各種標簽，來搭建網頁的“骨架”。在HTML中，標簽有很多種，如文字標簽、圖片標簽、表單標簽等你不需要花費太多精力去記憶其中的內容，只需要多敲代碼。總而言之，學習HTML就是學習各種各樣的標簽，然后針對你想顯示什么東西，再對應地使用正確的標簽，非常簡單。HTML不區分大小寫。
2.結構
<!DOCTYPE html> <!--文檔聲明,加上表示HTML5語法-->
<html>
<head>
</head> <!--頁頭-->
<body>
</body> <!--頁身-->
</html>
在vscode中基本結構可以用‘！+回車’ 來快速生成
3.head標簽
事實上，只有一些特殊的標簽才能放在head標簽內，其他大部分標簽都是放在body標簽內的，在HTML中，一般來說，只有5個標簽能放在head標簽內。
- title標簽
- meta標簽
- link標簽
- style標簽
- script標簽
3.1 title
定義網頁的標題
<html>
<head>
<title>jimmy的個人網頁</title>
</head>
</html>
3.2 meta
meta標簽一般用於定義頁面的特殊信息，例如頁面關鍵字、頁面描述等。這些信息不是提供給用戶看的，而是提供給搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的
name，content，http-equiv是meta便簽的屬性
！如果網頁出現中文亂碼，可能是你沒有定義編碼！
<html>
<head>
<meta name="keyword" content = "這是個人網站" />
<meta name="descripition" content = "這里記錄我的學習情況" />
<meta name="author" content = "Jimmy" />
<!--定義編碼，在html5中可以直接簡寫為<meta charset="utf-8" />-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--6s后自動跳轉到指定網站-->
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
</head>
</html>
3.3 link
link標簽用於引入外部樣式文件（CSS文件），這屬於CSS部分的內容，這里不需要深究
<html>
<head>
<link type = "text/css" rel="stylesheet" herf="css/index.css"/>
</head>
</html>
3.4 style
<html>
<head>
<style type="text/css">
/*這里寫CSS樣式*/
</style>
</head>
</html>
3.5script
script標簽用於定義頁面的JavaScript代碼，也可以引入外部JavaScript文件
<html>
<head>
<script>
/*這里寫javascript代碼*/
</script>
</head>
</html>
4.body標簽
在HTML中，head標簽表示頁面的“頭部”，而body標簽表示頁面的“身體”，在靜態頁面中主要由文本、圖片、超鏈接、音頻和視頻組成。這里注意靜態頁面和動態頁面的區別在於：是否與服務器進行數據交互
4.1 標題標簽
<html>
<head>
<meta charset="utf-8"/>
<title>h標簽</title>
</head>
<body>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
</body>
</html>
4.2 段落標簽
段落標簽p會自動換行，並且段落與段落之間有一定的間距.
<p>段落內容</p>
如果想在P標簽內換行，可以使用br標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>換行標簽</title>
</head>
<body>
<h3>靜夜思</h3>
<p>床前明月光，疑是地上霜。<br/>舉頭望明月，低頭思故鄉。</p>
</body>
</html>
預留格式pre,在代碼中是什么格式，呈現在網頁上就是什么格式
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>預留格式</title>
</head>
<body>
<pre>
床前明月光，疑是地上霜。
舉頭望明月，低頭思故鄉。
</pre>
</body>
</html>
4.3 文本標簽
-
粗體標簽：strong、b
-
斜體標簽：i、em、cite
-
上標標簽：sup
-
下標標簽：sub
-
中划線標簽：s
-
下划線標簽：u
-
大字號標簽：big
-
小字號標簽：small
-
字體標簽：font
這里你不用全部記憶，需要用的時候去查詢文檔即可，只需簡單記住有哪些功能。注意：這些標簽是可以嵌套在p標簽內
4.4 水平線標簽
<hr /> <!--實現效果如下-->
*4.5 div標簽
在HTML中，我們可以使用“div標簽”來划分HTML結構，從而配合CSS來整體控制某一塊的樣式。div和span的作用就是布局，可以稱為“圖層”作用是為了保證頁面可以靈活的布局。
<html>
<head>
<meta charest="utf-8"/>
<title>div標簽的學習</title>
</head>
<body>
<div>
<h2>輸入內容</h2>
<p>輸入內容</p>
</div>
<div>
<h2>輸入內容</h2>
<p>輸入內容</p>
</div>
</body>
</html>
4.6 自閉合標簽（獨目標記）
我們接觸的大部分標簽都是成對出現的，都有一個“開始符號”和一個“結束符號”。但是有些標簽是沒有結束符號的，比如：
<meta/> <!--定義網頁信息-->
<link/> <!--引入“外部CSS文件”-->
<br/> <!--換行標簽-->
<hr/> <!--水平線標簽-->
<img/> <!--圖片標簽-->
<input/> <!--表單標簽-->
*4.7 塊元素和行內元素
在HTML中，塊元素在瀏覽器顯示狀態下將占據整一行，並且排斥其他元素與其位於同一行。此外，一般情況下，塊元素內部可以容納其他塊元素和行內元素。
常見塊元素表：
| 塊元素 | 說明 |
|---|---|
| h1~h6 | 標題元素 |
| p | 段落元素 |
| div | div元素 |
| hr | 水平線 |
| Ol-li | 有序列表 |
| Ul-li | 無序列表 |
常見行元素：
| 行內元素 | 說明 |
|---|---|
| strong | 粗體元素 |
| em | 斜體元素 |
| a | 超鏈接 |
| span | 常用行內元素，結合CSS定義樣式 |
4.8 實體符號
當在網頁上呈現的符號與HTML代碼沖突時，可以采用實體符號，實體符號的特點是：以&開始，以；結束。
比如空格為
<html>
<head>
<title>實體符號</title>
</head>
<body>
b<a>c
<!-- 上述內容表示b<a>c-->
</body>
</html>
*4.9 表格
table表示表格，tr代表行，td代表一行中的一個小格子,rowspan表示占幾行（也可以稱作合並單元格）,colspan表示占幾列（合並單元格）。th和td一樣也是一個小格子，只是多了加粗居中，可以認為是head。
table也可以分為3部分，thead，tbody，tfoot。並不是必須的，但是有益於后期js代碼編寫以及維護
<html>
<head>
<title>table</title>
</head>
<body>
<table border="1px" width="30%" height ="100px">
<!--頭部-->
<thead>
<tr align = "center">
<td colspan="2">a</td>
</tr>
</thead>
<tr>
<td>c</td>
<td rowspan="2">d</td>
</tr>
<tr>
<td>e</td>
</tr>
</table>
</body>
</html>
4.10 背景色和背景圖片&圖片
設置圖片高寬時，只設置寬度，圖片高度會隨之改變。同時設置高寬，會讓圖片失真。
<body bgcolor = "red" background="img/123.png">
<img src = "img/22.png" width = "100px" title="鼠標懸停，這是圖片" alt = "圖片加載失敗"/>
</body>
*4.11 超鏈接
通過超鏈接可以從瀏覽器向服務器發送請求。
request、response
<a href="http://www.google.com" target="_self">谷歌</a>
<!--target:_blank(新窗口) _self(當前窗口) _top(頂級窗口) _parent(父窗口)-->
*4.12 表單
最重要的應用就是接收用戶信息。第一個代碼片段是普通的表單，第二個代碼片段是將表單嵌套在表格中。其中需要注意的是所有內容一定要包含在form中，這樣才會提交的action地址。在input中必須寫上name才會被提交。
提交格式：action?name=value&name=value&name=value......(注意form的提交方法有兩種，一種是post請求，一種是get請求，兩者的區別是post請求不會在地址欄上顯示表單信息，而get會顯示)
<!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>form</title>
</head>
<body>
<form action="服務器地址" method="post">
name:<input type="text" name="username" />
<br />
password:<input type="password" name="userpwd" />
<br />
<!-- type=“submit”時具有提交表單的能力-->
<input type="submit" value="submit"/>
</form>
</body>
</html>
<!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>
<form action="https://198.1.1.1" method="post">
<table>
<tr>
<td>name:</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>password:</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="login" />
<input type="reset" value="reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
4.13 上傳文件
將input的type屬性改為file即可上傳文件。type屬性為hidden表示不會在頁面上顯示，其value值會隨表單的提交而傳給服務器（主要用於一些不想讓用戶看見的信息的提交）
<!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>
<!--this is used for push file -->
<input type="file" />
<form action="192.168.1.1" method="get">
<!--不會在頁面上顯示，會直接提交給服務器-->
<input type="hidden" name="usrid" value="111" />
usercode <input type="text" name="usercode" id="" />
<input type="submit" value="提交" />
</form>
</body>
</html>
4.14 表單擴展
input標簽中的readonly和disabled。用戶都無法修改，但是能看到，注意disabled的數據是無法提交的。
<!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>
<form action="192.168.1.0" method="post">
<!--readonly和disabled用戶都不能修改，但是能看到，注意disabled的數據是
無法提交的-->
用戶代碼<input type="text" name="usercode" value="111" readonly />
<br />
用戶姓名<input type="text" name="username" value="jimmy" disabled />
<br />
<input type="submit" value="提交數據" />
</form>
</body>
</html>