一、HTML語義化 （理解意思，因為有時候用的不是語義）
body中的標簽是會顯示到瀏覽器窗口中的，body內的標簽只有一個作用就是用來標記語義的，語義指的是從字面意思就可以理解被標記的內容是用來做什么的
雖然不同的標簽會有不同的顯示樣式，但我們一定要強制自己忘記所有標簽的顯示樣式，只記它的語義。因為每個標簽的樣式各不相同，記憶不同標簽的樣式來控制顯示樣式，對前端開發來說將會是一種災難，更何況添加樣式並不是HTML擅長的事情，而且在布局的時候多使用語義化的標簽，會方便搜索引擎在爬取網頁文件時更好地解析文檔結構，從而進行收錄。
對於那些只用來修改樣式的標簽將會被淘汰掉，比如以下標簽都是沒有語義的，都是用來修改樣式的=====》已廢棄
#1、<br> 換行
我是帥氣逼人的Egon老師
<br> 我是帥氣逼人的Egon老師 我是帥氣逼人的Egon老師 我是帥氣逼人的Egon老師 #2、<hr> 分割線 #3、<font> 修改文字大小，顏色 <font color="red" size="10px">我是哈哈哈</font> #4、<b> 加粗 <b>論顏值，我秒殺宇宙</b> #5、<u> 下划線 #6、<i> 傾斜 #7、<s> 刪除線
html5中推出了一些新的標簽=====》現在使用
strong == b
ins == u
em == i
del == s
新的標簽是有語義的，而老的只是單純的添加樣式（這是CSS干的事）
strong的語義：定義重要性強調的文字
ins的語義（inserted）：定義插入的文字
em的語義（emphasized）：定義強調的文字
del的語義（deleted）：定義被刪除的文字
具體使用：
<!--<br> 代表換行--> 你好啊<br>哈哈哈哈 <!--<hr> 代表加分割線--> <hr> 我擦了 <!--<b>加粗</b> 不要用這種--> <strong>強調</strong> <!--<u>下划線</u> 已廢棄，用下面的--> <ins>插入</ins> <!--<i>傾斜</i> 已廢棄，用下面的--> <em>傾斜</em> <!--<s>刪除</s> 已廢棄，用下面的 <del>刪除</del>
div與span標簽都是沒有語義的標簽，我們在css中講解
#1、div用來標記一塊內容，沒有具體的語義。
#2、span用來標記一行中的一小段內容，也沒有具體的語義。
二、字符實體
（1）在HTML中對空格／回車／tab不敏感，會把多個空格／回車／tab當作一個空格來處理 （2）字符實體指的是 在HTML中 有的字符是被HTML保留的比如大於號小於號 有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來的，那么這些東西想顯示出來就必須通過字符實體，如下
| 內容 | 代碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 注冊 | ® |
HTML特殊符號對照表: http://tool.chinaz.com/Tools/HtmlChar.aspx
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--字符實體之空格符--> 你好 我擦類 哈哈哈 <p><print></p> <p>100000000000¥</p> <p>egon&lxx</p> <p>©</p> <p>Θ</p> </body> </html>
三、h系列標簽
語義：標記內容為一個標題，全稱headline
h系列標簽從h1-h6共6個，沒有h7標簽，標記內容為1~6級標題，h1用作主標題（代表最重要的），其實是h2。。。
雖然h1-h6標簽的顯示樣式是從大到小，但再次強調：記憶HTML標簽的顯示樣式是沒有意義的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>我是標題1</h1> <h2>我是標題2</h2> <h3>我是標題3</h3> <h4>我是標題4</h4> <h5>我是標題5</h5> <h6>我是標題6</h6> <h7>我是標題7</h7> 我是標題7 <h1>egon</h1> <p>論顏值，</p> <p>論才華</p> </body> </html>
注意：在企業開發中一定要慎用h系列標簽，特別是h1標簽，在企業開發中一般一個界面中只能出現一個h1標簽（出於SEO考慮，搜索引擎會使用標題將網頁的結構和內容編制索引）,比如www.163.com。
四、p標簽
語義：標記內容為一個段落，全稱paragraph
用法舉例見 h 標簽
五、img標簽
語義：標記一個圖片，全稱image
#1、用法
<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "鼠標懸停到圖片上時顯示的內容" /> #2、注意 2.1 src指定的圖片地址可以是網絡地址，也可以是一個本地地址，本地地址可以用絕對或相對路徑，但通常用相對路徑，相對路徑是以html文件當前所在路徑為基准進行的 2.2 圖片的格式可以是png、jpg和gif 2.3 alt="圖片加載失敗時顯示的內容" 為img標簽加上該屬性可用於支持搜索引擎和盲人讀屏軟件。 2.4 title = "鼠標懸停到圖片上時顯示的內容" 2.5 如果沒有指定圖片的width和height則按照圖片默認的寬高顯示，如果指定圖片的width和height則可能讓圖片變形 那如果又想指定寬度和高度，又不想讓圖片變形，我們可以只指定寬度和高度的一個值即可 只要指定了一個值，系統會根據該值計算另外一個值，並且都是等比拉伸的，圖片將不會變形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<img src="img/1.jpg" title="這是一個美女" alt="圖片被怪獸吃掉了" width="300px" height="300px">--> <img src="img/1.jpg" title="這是一個美女" alt="圖片被怪獸吃掉了" width="300px" > </body> </html>
六、a標簽
語義：標記一個內容為超鏈接，全稱anchor，錨
#1、超鏈接標簽是超文本文件的精髓，可以控制頁面與頁面之間的跳轉，語法如下
<a href="跳轉到的目標頁面地址" target="是否在新頁面中打開" title="鼠標懸浮顯示的內容">需要展現給用戶查看的內容/也可以是圖片</a> #2、注意： 2.1 a標簽不僅可以標記文字，也可以標記圖片 <a href="https://www.baidu.com"><img src="mv.png" />百度一下，你就知道</a> 2.2 a標簽必須有href屬性，href的值必須是http://或https://開頭 2.3 a標簽還可以跳轉到自己的頁面 <a href="template/aaa.html">錘你胸口</a> 2.4 tarhet="_self"是不指定時的默認值，代表在現在的頁面中打開，
target="_blank"代表在新頁面中打開，其余的值均無需記憶， 如果頁面中大量的a標簽都需要設置target="_blank",那么我們可以在head標簽內新增一個base標簽進行統一設置 <base target="_blank"> 如果a標簽自己設置了target，那么就以自己的為准，否則就會參照base的設置 2.5 title="鼠標懸浮顯示的內容"
2.6假鏈接的兩種方式
<a href="#">點我啊</a>
<a href="javascript:">點我啊</a>
2.7 herf=""啥也不指定，就是刷新一下頁面，跳到頂部
herf="#"不刷新頁面，直接跳到頂部（推薦使用，防止頁面刷新頁面網卡）
2.8 a標簽默認有下划線，可以用style樣式里 text-decoration:none 取消下划線
2.9 ctrl+f 搜索，會直接跳到當前頁面的搜索框
a標簽舉例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--頁面的錨點--> <!--點擊 八八八八 跳轉到下面id為 p1的位置--> <!--方式一--> <p> <a href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px">八八八八</a> </p> <p> <a href="#p2" style="color: darkseagreen;text-decoration:none;font-size:18px">用戶與程序交互</a> </p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <a href="" name="p1"></a> <p style="color: red">1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <a href="" name="p2"></a> <p style="color: green">1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <!--方式二--> <p> <a href="#p1" style="color: darkseagreen;text-decoration:none;font-size:18px"> 八八八八</a> </p> <p> <a href="#p2" style="color: darkseagreen;text-decoration:none;font-size:18px"> 用戶與程序交互</a> </p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p id="p1" style="color: red">1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <p id="p2" style="color: green">1111111111</p> <p>1111111111</p> <p>1111111111</p> <p>1111111111</p> <a href="">跳到首頁</a> <a href="#">跳到首頁</a> </body> </html>