/本文末尾有用于展示标簽效果的html代碼，可以自行複制到vscode裡（不知道的自行百度查教程安裝下載下傳），建議一遍對照代碼一遍對照網頁效果來看/
用土話土講來描述html：
标簽：
你看到的html裡用<>包裹的東西就是标簽。标簽定義了你如何組織你的内容，比如p标簽，則你寫在裡面的内容會在浏覽器以段落形式呈現，比如title标簽，你寫的就會變成标題（一般的标簽都要閉合
<title>BIAOTI</title>
但是有的标簽不用，比如用于換行的br标簽 br）
<p> 這是你寫的段落 </p>
屬性：
标簽擁有各種屬性，這些屬性有許多用處，比如用class、id、name等等屬性來有效組織你的文檔，友善你用css來美化頁面，在你用js寫腳本時候也離不開這些屬性，具體用法看看w3c 教程就能明白。
比如 這裡就定義了一個type為radio的input輸入框标簽，type屬性=radio決定了這個input輸入框是一個單選框；如果type=“password” 那麼你的輸入框就會把輸入的密碼隐藏，等等。
DOM：
DOM 文檔對象模型，html的各個标簽就是由DOM 樹來組織的，當你在浏覽器中按F12 ，點選element，可以看到一個html文檔是以樹形結構組織的:
這種組織方式為REACT 、Vue等架構提供了接口，當你用React 寫了一個元件，可以直接在指定位置接入到這個DOM樹上。這裡可稍微提一下虛拟DOM樹，一般來講，每次DOM樹如果有變化的話，浏覽器都要重新渲染頁面（渲染就是把html文檔呈現成你看到的網頁的樣子），但是有了虛拟DOM樹之後，隻需要用算法對比DOM樹的前後變化，隻用在變化的地方重新渲染即可，而不用整個頁面重新渲染。這部分内容目前稍作了解即可，也可跳過。
HTML常用标簽（尾部有示例代碼可以檢視效果）
/以下是我個人的學習筆記，比較淩亂，最好移步w3cschool。/
a 标簽常放連結 <>
br 換行
h1 - h6表示标題
p表示段落
button
hr水準線
div 、 span 是html區塊 。html分塊級元素（div）和内聯元素（span），内聯元素不會換行。
li表示清單
img 放圖檔，可加尺寸屬性，width height，alt屬性用于顯示圖檔無法加載時顯示的文字
屬性總是以鍵值對的形式： name = shenkuo
屬性常有class 、 id、 style、 title
注釋
可以用#id 來指定連結
head裡可以加base标簽，來指定連結的預設位址
head裡可以加link來連結外部資源，一般連接配接到css
head裡可以加style 指定css樣式
meta裡除了指定編碼還可以指定搜尋引擎關鍵字： meta name = “keywords” content = “我的關鍵字”
script 用于加載js檔案 noscript 在無法加載script時候顯示此标簽内容
script 可以用document.write(‘
this is what u add
’) 來添加新标簽
script function … document.getElementbyid(‘ROOT’).InnoHTML(’'changed content")
表格 table标簽包裹 tr （行） td（列）th（表頭）caption 設定标題
跨行或者跨列要在屬性裡使用rowspan或者 colspan
表格間距在table屬性裡設定cellpadding =10
有序清單用ol 包裹li ，無序清單用ul包裹li
表單使用form标簽，裡面放置input标簽；屬性有action、method
form可以action =“mailto : [email protected]” method = “post” enctype=“text/plain” 發送郵件
input 标簽可以設定type = password 、 radio （單選框）、 checkbox（複選框）、submit 送出
送出的value屬性設定label顯示的字
select 包裹option 來選框
iframe 标簽規定了内聯架構，可以嵌入另一個文檔，通過使用架構可以在同一個浏覽器視窗中顯示不止一個頁面。
src="demo_iframe.htm" width="100" height="10">
html字元實體用于替換預留的字元,要使用& 或者&# ，用分号;結尾
html總是會截斷空格，如果想保留就要使用空白字元實體 #nbsp;
&#target_number
< (less than) >（greater than） × ÷  
html5 使用音頻建議mp3 ，視訊建議mp4格式
html 可以使用插件<object width\ height data = “index.html\ gif\png”>
也可以用embed ，embed沒有閉合标簽，不能使用替代文本
多媒體标簽：embed、object、audio、video、source
<!DOCTYPE html>
<html>
<head>
<meta charset=" UTF-8" ><!--這裡定義了編碼，使得網頁可以顯示中文，編碼相關請自行百度-->
<!--style标簽，定義了 h1 标簽的背景色，div标簽的顔色，li标簽的背景色， 具體css文法請自行百度或檢視後續文章-->
<style type="text/css">
h1 {background-color:yellow}
div {color:rgb(161, 235, 194)}
li {background-color:rgb(71, 118, 248);
color:rgb(48, 43, 41)}
</style>
</head><!---head标簽内容完畢-->
<body>
<h1>我的第一個标題</h1>
<h2>副标題</h2>
<p>我的段落：段落寫了10<20</p><!--有些字元比如小于号會和标簽沖突，是以要用<來表示，這個叫字元實體，具體看w3c-->
<script>
function myFunction(){alert('fuck!!!')
document.getElementById('root').innerHTML="changed content"}
</script>
<!---以上是script标簽，會執行當中的JavaScript代碼，學習JavaScript之後可以看懂其中内容-->>
<p id="root"> 這是個id為root的段落，下面有個按鈕，點選按鈕可以使這裡内容變化</p>
<button type="button" onclick="myFunction()">點選這個會有彈窗，并使id為root的标簽内容改變，具體學習JavaScript後會了解</button>
<br>
<a href="www.baidu.com" target="_blank" rel="external nofollow" >這個a标簽裡的連結指向百度</a>
<br><!----換行符-->>
<img src="127.0.0.1" width="120" height="80"><!---這裡連結一張圖檔-->
<br>
<table cellpadding="10"><!---border定義表格邊距，cellpadding定義内邊距-->
<caption>my table</caption><!--caption表示标題-->
<tr><!--tr定義行-->
<th>name</th><!--th定義首行-->>
<th>age</th>
<th>sex</th>
<th colspan="2">big colo</th><!--colspan 或者rowspan合并表格-->
</tr>
<tr>
<td>shenkuo</td><!--td表示列-->
<td>21</td>
<td>male</td>
</tr>
</table>
<ul><!--ul包裹li ，定義無序清單-->
<li>無序清單</li>
<li>無序清單</li>
</ul>
<ol><!--ol包裹li，定義有序清單-->
<li>有序清單</li>
<li>有序清單</li>
</ol>
<form action="xxx.php" method="GET"><!--form标簽定義表單，input 表示使用者填寫的内容，下面submit 可以送出表單内容給伺服器-->
name <input type="text"><br>
password <input type="password"><br>
<input type="radio" value="1">BOY
<input type="radio" value = "0">GIRl
<br>
<input type="submit" method = "GET" value="點選送出表單">
</form>
<!--select标簽提供選框-->>
<select name="time " id="TIME"><option value="a">a</option>
<option value="b">b</option></select>
<script>document.write("<p>This is a paragraph</p>")
</script>
</body>
</html>
效果圖
