閱讀目錄
- 一、head內常用標簽
- 二、 HTML語義化
- 三、 字符實體
- 四、 h系列標簽
- 五、 p標簽
- 六、 img標簽
- 七、 a標簽
- 八、 列表標簽
- 九、 table標簽
- 十、 form標簽
一、 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> 換行
#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中是有特殊含義的，是不能在瀏覽器中直接顯示出來的，那么這些東西想顯示出來就必須通過字符實體，如下注釋：實體名稱對大小寫敏感！
內容 代碼 #一定要以';'結束
空格
> >
< <
& &
￥ ¥
版權 ©
注冊 ®HTML特殊符號對照表
四、 h系列標簽
語義：標記內容為一個標題，全稱headline
h系列標簽從h1-h6共6個，沒有h7標簽，標記內容為1~6級標題
雖然h1-h6標簽的顯示樣式是從大到小，但再次強調：記憶HTML標簽的顯示樣式是沒有意義的
<!DOCTYPE HTML>
<html>
<head lang='en'>
<meta charset="utf-8">
<title>多多才華無敵</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>多多無敵</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>大娃</li>
<li>二娃</li>
<li>三娃</li>
<li>四娃</li>
<li>五娃</li>
</ol>
<!--有序列表能干的事，完全可以用無序列表取代-->
<h1>智商排名</h1>
<ul style="list-style: none">
<li>1. 大娃</li>
<li>2. 二娃</li>
<li>3. 三娃</li>
<li>4. 四娃</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、寬度和高度
可以給table和td設置width和height屬性
1.1 默認情況下表格的寬高是按照內容的尺寸來調整的，也可以通過給table標簽設置widht和height來手動指定表格的寬高
1.2 如果給td標簽設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度
#2、水平對齊和垂直對齊
水平對齊align可以給table、tr、td標簽設置
垂直對齊valign只能給tr、td標簽設置
========水平對齊===========
取值
align=“left”
align=“center”
align=“right”
2.1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊
強調：table只能設置水平方向
2.2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊
2.3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為準
========垂直對齊===========
取值
valign=“top”
valign=“center”
valign=“bottom”
2.4 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊
2.5 給td設置垂直對齊可以讓當前單元格內容垂直對齊
#3、外邊距和內邊距
只能給table設置
3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值為2px
3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px"細線表格的制作方式：
1、給table標簽設置bgcolor
2、給tr標簽設置bgcolor
3、給table標簽設置cellspacing="1px"
注意：
table、tr、td標簽都支持bgcolor屬性
<table width="200px" height="200px" bgcolor="black" cellspacing="1px">
<caption>學員信息統計</caption>
<thead>
<tr bgcolor="white">
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr bgcolor="white">
<td>多多</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>多多2</td>
<td>male</td>
<td>18</td>
</tr>
<tr bgcolor="white">
<td>多多3</td>
<td>male</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
<tr bgcolor="white">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tfoot>
</table>表格的結構?
為了方便管理維護以及提升語義，我們將表格中存儲的數據分為四類：
#1、表格的標題:caption
特點:相對于表格寬度自動居中對齊
注意:
1.1 該標簽一定要寫在table標簽里，否則無效
1.2 caption一定要緊跟在table標簽內的第一個
#2、表格的表頭信息:thead
特點：專門用來存儲每一列的標題，只要將當前列的標題存儲在這個標簽中就會自動居中 加粗文字
#3、表格的主體信息:tbody
注意：
3.1 如果沒有添加tbody，瀏覽器會自動添加
3.2 如果指定了thread和tfoot，那么在修改整個表格的高度時，thead和tfoot有自己默認的高度，不會隨著
表格的高度變化而變化
#4、表尾信息:tfoot單元格合并?
#1、水平向上的單元格colspan
可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待
<td colspan="2"></td>
#2、垂直向上的單元格rowspan
可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待
#注意注意注意:
1、由于把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格
2、一定要記住，單元格合并永遠是向后或者向下合并，而不能向前或向上合并十、 form標簽
語義：標記表單
#1、什么是表單？
表單就是專門用來接收用戶輸入或采集用戶信息的
#2、表單的格式
<form>
<表單元素>
</form>鏈接：https://www.processon.com/view/link/5aeea789e4b084d6e4bf6911?
圖片:https://pan.baidu.com/s/1db6o--q557aKmtYJSBsyqA
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hiccchaa&title=前端基礎-HTML的的標簽詳解
![洛谷P3045 [USACO12FEB]牛券Cow Coupons](http://pic.xiahunao.cn/洛谷P3045 [USACO12FEB]牛券Cow Coupons)
