一 head內常用標簽
1、meta相關
#1、指定字符集 <meta charset="gbk"> #2、頁面描述 <meta name="Description" content="具體描述。。。"> #3、關鍵字：有助於搜索引擎SEC優化，再怎么優化也抵不過競價排名 <meta name="Keywords" content="網易，郵箱，游戲，新聞"> #4、3秒后跳轉 <meta http-equiv="refresh" content="3,http://www.baidu.com"> #5、三秒刷新 <meta http-equiv="refresh" content="3">
2、非meta標簽
#1、標題 <title>百度一下，你就知道</title> #2、網站的圖標 <link rel="icon" href="https://www.baidu.com/favicon.ico"> #3、定義內部樣式 <style></style> #4、引入外部樣式文件 <link rel="stylesheet" href="mystyle.css"> #5、定義JavaScript代碼或引入JavaScript文件 <script src="hello.js"></script>
一 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）：定義被刪除的文字
二 字符實體
#1、在HTML中對空格／回車／tab不敏感，會把多個空格／回車／tab當作一個空格來處理 #2、字符實體指的是 在HTML中 有的字符是被HTML保留的比如大於號小於號 有的HTML字符，在HTML中是有特殊含義的，是不能在瀏覽器中直接顯示出來的，那么這些東西想顯示出來就必須通過字符實體，如下
注釋：實體名稱對大小寫敏感！
| 內容 | 代碼 |
|---|---|
| 空格 | |
| > | > |
| < | < |
| & | & |
| ¥ | ¥ |
| 版權 | © |
| 注冊 | ® |
三 h系列標簽
語義：標記內容為一個標題，全稱headline
h系列標簽從h1-h6共6個，沒有h7標簽，標記內容為1~6級標題
雖然h1-h6標簽的顯示樣式是從大到小，但再次強調：記憶HTML標簽的顯示樣式是沒有意義的
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon才華無敵</title>
</head>
<body>
<h1>一級標題</h1><h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
<h7>沒有七級標題</h7>
沒有七級標題
</body>
</html>
注意：在企業開發中一定要慎用h系列標簽，特別是h1標簽，在企業開發中一般一個界面中只能出現一個h1標簽（出於SEO考慮）,比如www.163.com。
四 p標簽
語義：標記內容為一個段落，全稱paragraph
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>Egon無敵</title>
</head>
<body>
<h1>Egon</h1>
<p>論顏值，鶴立雞群</p>
<p>論才華，天下無敵</p>
</body>
</html>
五 img標簽
語義：標記一個圖片，全稱image
#1、用法 <img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "鼠標懸停到圖片上時顯示的內容" /> #2、注意 2.1 src指定的圖片地址可以是網絡地址，也可以是一個本地地址，本地地址可以用絕對或相對路徑，但通常用相對路徑，相對路徑是以html文件當前所在路徑為基准進行的 2.2 圖片的格式可以是png、jpg和gif 2.3 alt="圖片加載失敗時顯示的內容" 2.4 title = "鼠標懸停到圖片上時顯示的內容" 2.5 如果沒有指定圖片的width和height則按照圖片默認的寬高顯示，如果指定圖片的width和height則可能讓圖片變形 那如果又想指定寬度和高度，又不想讓圖片變形，我們可以只指定寬度和高度的一個值即可 只要指定了一個值，系統會根據該值計算另外一個值，並且都是等比拉伸的，圖片將不會變形
六 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 target="_blank"代表在新頁面中打開，其余的值均無需記憶，
如果頁面中大量的a標簽都需要設置target="_blank",那么我們可以在head標簽內新增一個base標簽進行統一設置
<base target="_blank">
如果a標簽自己設置了target，那么就以自己的為准，否則就會參照base的設置
2.5 title="鼠標懸浮顯示的內容"
假鏈接
#1、什么是假鏈接？
就是點擊之后不會跳轉的鏈接，我們稱之為假鏈接
#2、假鏈接存在的意義：
在企業開發前期，其他界面都還沒有寫出來，
那么我們就不知道應該跳轉到什么地方，所以就只能使用假鏈接來代替
#3、假鏈接的定義格式
1、href="#" :會自動回到網頁的頂部
2、href="javascript:" ：不會返回頂部
頁面內錨點
#1、要想通過a標簽跳轉到指定的位置，那么必須告訴a標簽一個獨一無二的身份證號碼， 這樣a標簽才能在當前界面中找到需要跳轉到的目標位置 #2、如何為html中的標簽綁定一個獨一無二的身份證號碼呢？ 在html中，每一個標簽都有一個名稱叫做id的屬性 這個屬性就是用來給標簽指定一個獨一無二的身份證號碼的 #3、所以要想實現通過a標簽跳轉到指定的位置，分為兩步 3.1、給目標位置的標簽添加一個id屬性，然后指定一個獨一無二的值 3.2、告訴a標簽你需要跳轉到的目標標簽對應的獨一無二的身份證號碼是多少 #4、a標簽除了可以跳轉當前頁面，還可以跳轉到其他頁面的指定位置
跳到首頁
#1、跳到首頁
<a href="">刷新頁面，回到頂部，人類感覺不出來區別</a>
<a href="#">回到頂部</a>
#2、注意點：
通過我們的a標簽跳轉到指定的位置，是沒有過度動畫的
是直接一下子就跳轉到了指定位置,比如京東主頁
如果跳到首頁需要過渡動畫，則不用a標簽做，比如天貓主頁
頁面錨點+跳回首頁練習
七 列表標簽
語義：標記一堆數據是一個整體/列表
html中列表標簽分為三種
1、無序列表（列表標簽中使用最多的一種，非常重要）：unordered list
#1、作用：
制作導航條、商品列表、新聞列表等
#2、組合使用ul>li
<ul>
<li>秒殺</li>
<li>優惠券</li>
<li>PLUS會員</li>
<li>閃購</li>
<li>拍賣</li>
<li>京東服飾</li>
<li>京東超市</li>
<li>生鮮</li>
<li>全球購</li>
<li>京東金融</li>
</ul>
#3、ul標簽的屬性type（這屬於列表的樣式，所以了解即可）
type：列表標識的類型
disc：實心圓(默認值)
circle：空心圓
square：實心矩形
none：不顯示標識
可以通過css直接去掉小圓點
<style type="text/css">
ul {
list-style: none;
}
</style>
#4、注意
ul與li是組合標簽應該一起出現，並且ul的子標簽只應該是li，而li的子標簽則可以是任意其他標簽
無序列表練習
2、有序列表（極少使用）
<h1>智商排名</h1>
<ol>
<li>Egon</li>
<li>劉清正</li>
<li>武佩奇</li>
<li>alex</li>
<li>元昊</li>
</ol>
<!--有序列表能干的事，完全可以用無序列表取代-->
<h1>智商排名</h1>
<ul style="list-style: none">
<li>1. Egon</li>
<li>2. 劉清正</li>
<li>3. 武佩奇</li>
<li>4. alex</li>
<li>5. 元昊</li>
</ul>
3、自定義列表（也會經常使用）
#1、作用分析 選擇用什么標簽的唯一標准，是看文本的實際語義，而不是看長什么樣子 無序列表：內容是並列的,沒有先后順序 有序列表：內容是有先后順序的 自定義列表：對一個題目進行解釋說明的時候，用自定義列表,可以做網站尾部相關信息，網易注冊界面的輸入框 #2、自定義列表也是一個組合標簽：dl>dt+dd dl:defination list，自定義列表 dt：defination title，自定義標題 dd：defination description，自定義描述
<dl>
<dt>自定義標題1<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定義標題2<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
<dt>自定義標題3<dt>
<dd>描述1<dd>
<dd>描述2<dd>
<dd>描述3<dd>
</dl>
#3、注意: 3.1 dl>dt+dd應該組合出現，dl中只應該存放dt和dd，而可以在dt和dd中添加任意其他標簽 3.2 一個dt可以可以沒有對應的dd，也可以有多個，但建議一個dt對應一個dd
自定義列表練習
八 table標簽
語義：標記一段數據為表格
#1、作用
表格標簽是一種數據的展現形式，當數據量非常大的時候，使用表格的形式來展示被認為是最清晰的
#2、格式
<table>
<tr>
<td></td>
</tr>
</table>
tr代表表格的一行數據
td表一行中的一個單元格
#3、注意點：
表格標簽有一個邊框屬性，這個屬性決定了邊框的寬度。默認情況下這個屬性的值為0，所以看不到邊框
小練習
表格屬性
表格屬性（了解知識點）
兩種方式實現細線表格
表格的結構
表格結構詳解
單元格合並
#1、水平向上的單元格colspan
可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待
<td colspan="2"></td>
#2、垂直向上的單元格rowspan
可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待
#注意注意注意:
1、由於把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格
2、一定要記住，單元格合並永遠是向后或者向下合並，而不能向前或向上合並
練習：
View Code
View
九 form標簽
語義：標記表單
#1、什么是表單？
表單就是專門用來接收用戶輸入或采集用戶信息的
#2、表單的格式
<form>
<表單元素>
</form>