【目錄】 標簽&標簽屬性 1、HTML 註釋 2、HTML 文檔基礎結構 3、head 內常用標簽 4、body 內常用標簽 常用文本標簽 特殊符號 div / span 分塊標簽 a 標簽 img 標簽 list 列表標簽 table 表格標簽 form 表單標簽 1、HTML 註釋 （選中內容或 ...
【目錄】 標簽&標簽屬性
1、HTML 註釋
2、HTML 文檔基礎結構
3、head 內常用標簽
link 鏈接標簽
meta 信息標簽
4、body 內常用標簽
常用文本標簽
特殊符號
div / span 分塊標簽
a 標簽
img 標簽
list 列表標簽
table 表格標簽
form 表單標簽
1、HTML 註釋 （選中內容或者游標置於註釋行，快捷鍵 ctrl+/ ）
# 註釋:註釋是代碼之母
<!--單行註釋-->
<!--
多行註釋1
多行註釋2
多行註釋3
-->
# 由於HTML代碼非常的雜亂無章並且很多，所以我們習慣性的用註釋來劃定區域方便後續的查找：
<!--導航條開始-->
導航條所有的html代碼
<!--導航條結束-->
<!--左側菜單欄開始-->
左側菜單欄的HTMl代碼
<!--左側菜單欄結束-->
2、HTML 文檔基礎結構 （編輯器里 搭建HTML格式文件 !(英文感嘆號)+tab ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
3、head 內常用標簽
<title>Title</title> 網頁標題 <style> h1 { color: greenyellow; } </style> 內部用來書寫css代碼 <script> alert(123) </script> 內部用來書寫js代碼 <script src="myjs.js"></script> 還可以引入外部js文件 <link rel="stylesheet" href="mycss.css"> 引入外部css文件 <meta name="keywords" content="老男孩教育,老男孩,老男孩培訓,Python培訓,Linux培訓,網路安全培訓,Go語言培訓,
人工智慧培訓,雲計算培訓,
Linux運維培訓,Python自動化運維,Python全棧開發,IT培訓">
<!-- 當你在用瀏覽器搜索的時候 只要輸入了keywords後面指定的關鍵字那麼該網頁都有可能被百度搜索出來展示給用戶;
網頁的描述性信息 -->
link 標簽
# 屬性 href = " 鏈接地址 "
<link rel="stylesheet" type="text/css" href="style.css"></link>
<link rel="shortcut icon" type="images/x-icon" href="http://www.baidu.com/favicon.ico">
meta標簽
Meta標簽介紹：
<meta>元素可提供有關頁面的元信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的。
meta標簽的組成：
meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
1.http-equiv屬性：
相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
<!--指定文檔的編碼類型(需要知道)-->
<meta http-equiv="content-Type" charset=UTF8">
<!--2秒後跳轉到對應的網址，註意引號(瞭解)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--告訴IE以最高級模式渲染文檔(瞭解)-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name屬性:
主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="老男孩教育Python學院">
4、body內常用標簽
【補充】
1.id值
類似於標簽的身份證號，在同一個html頁面上id值不能重覆
2.class值
該值有點類似於面向對象裡面的繼承，一個標簽可以繼承多個class值
標簽既可以有預設的屬性，也可以有自定義的屬性
<p id="d1" class="c1" username="jason" password="123"></p>
編輯器里快速編輯標簽的技巧——開始標簽的後半部分+tab 鍵（部分編輯器支持）
例如：span 標簽
span>（然後按tab鍵）
最後效果如下：
<span></span>
（1）格式排版/文本標簽
格式排版標簽
文本標簽
<!--一下文本標簽 作為瞭解--> <cite> 用於引證、舉例、(標簽定義作品（比如書籍、歌曲、電影、電視節目、繪畫、雕塑等等）的標題)通常為斜體字 <dfn> 定義一個定義項目 <code> 定義電腦代碼文本 <samp> 定義樣式文本 標簽並不經常使用。只有在要從正常的上下文中將某些短字元序列提取出來，對它們加以強調的極少情況下，才使用這個標簽。 <kbd> 定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與電腦相關的文檔或手冊中。 <abbr> 定義縮寫 配合title屬性 (IE6以上) <bdo> 來覆蓋預設的文本方向 dir屬性 值: lrt rtl <var> 定義變數。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。 <small> 標簽定義小型文本（和旁註） <b> 粗體字標簽 根據 HTML 5 的規範，<b> 標簽應該做為最後的選擇，只有在沒有其他標記比較合適時才使用它。 <i> 斜體字標簽 標簽被用來表示科技術語、其他語種的成語俗語、想法、宇宙飛船的名字等等。 <u> 下劃線字體標簽 標簽定義與常規文本風格不同的文本，像拼寫錯誤的單詞或者漢語中的專有名詞。 請儘量避免使用 <u> 為文本加下劃線，用戶會把它混淆為一個超鏈接。 <s> 刪除線 <q> 簽定義一個短的引用。瀏覽器經常會在這種引用的周圍插入引號。(小段文字) <blockquote> 標簽定義摘自另一個源的塊引用。瀏覽器通常會對 <blockquote> 元素進行縮進。(大段文字) (塊狀元素) <address> 定義地址 通常為斜體 (註意非通訊地址) 塊狀元素 <font> H5已刪除 字體標簽，可以通過標簽的屬性指定文字的大小、顏色及字體等信息 <tt> H5已刪除 打字機文字 <big> H5已刪除 大型字體標簽 <acronym> H5已刪除 首字母縮寫 請使用<abbr>代替 <bdi> H5新增 標簽允許您設置一段文本，使其脫離其父元素的文本方向設置。(經測試,各大瀏覽器都不起作用) <mark> H5新增 標簽定義帶有記號的文本 請在需要突出顯示文本時使用,如搜索引擎搜索頁面 <meter> H5新增 定義預定義範圍的度量 <progress> H5新增 標簽標示任務的進度（進程） <time> H5新增 定義時間和日期 <wbr> H5新增 規定在文本中的何處適合添加換行符。Word Break Opportunity其他文本標簽
空格
> 大於號
< 小於號
& &
¥ ¥ 人民幣符號
© © 版權
® ® 商標
（3）分塊標簽
div 塊兒級標簽
span 行內標簽上述的兩個標簽是在構造頁面初期最常使用的, 主要通過 CSS樣式為其賦予不同的表現。
# 頁面的佈局一般先用div和span占位之後再去調整樣式
尤其是div使用非常的頻繁
div你可以把它看成是一塊區域 也就意味著用div來提前規定所有的區域，之後往該區域內部填寫內容即可
而普通的文本先用span標簽
關於標簽嵌套：
通常,塊級元素 可以包含 內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
p標簽不能包含 塊級標簽，p標簽也不能包含 p標簽。
（4）img 標簽
# 圖片標簽
<img src="" alt="">#【屬性】
src=" 圖片路徑"
1.圖片的路徑 可以是本地的也可以是網上的
2.url:自動朝該url發送get請求獲取數據(什麼是URL？URL是統一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網頁地址，是網際網路上標準的資源的地址。)
alt="圖片描述信息"
當圖片載入不出來的時候 給圖片的描述性信息title="滑鼠懸浮停留時，自動提示信息"
當滑鼠懸浮到圖片上之後 自動展示的提示信息height="800px"
width=""高度和寬度當你只修改一個的時候 另外一個參數會等比例縮放
如果你修改了兩個參數 並且沒有考慮比例的問題 那麼圖片就會失真
（5）a 標簽
# 鏈接標簽
<a href=" " target=" " ></a>"""
當a標簽指定的網址從來沒有被點擊過 那麼a標簽的字體顏色是藍色
如果點擊過了就會是紫色（瀏覽器給你記憶了）
"""#【屬性】
href=" "
1.放url，用戶點擊就會跳轉到該url頁面
2.放其他標簽的id值 點擊即可跳轉到對應的標簽位置target=" "
預設a標簽是在當前頁面完成跳轉 target="_self"新建頁面跳轉 target="_blank"
# a標簽的錨點功能——使用 id 屬性 和 href 屬性
eg:點擊一個文本標題 頁面自動跳轉到標題對應的內容區域<a href="" id="d1">頂部</a> <h1 id="d111">hello world</h1> <div style="height: 1000px;background-color: red"></div> <a href="" id="d2">中間</a> <div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a> <a href="#d2">回到中間</a> <a href="#d111">回到中間</a>
（6）列表標簽
無序列表(使用較多) —— 快捷語法 ul>li*4
<ul>
<li>第一項</li>
<li>第二項</li>
<li>第二項</li>
<li>第二項</li>
</ul>
雖然ul標簽很醜 但是在頁面佈局的時候 只要是排版一致的幾行數據基本上用的都是ul標簽
有序列表(瞭解) —— 快捷語法 ol>li*3
<ol type="1" start="5">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
type屬性：
1 數字列表，預設值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
標題列表(瞭解)
<dl>
<dt>標題1</dt>
<dd>內容1</dd>
<dt>標題2</dt>
<dd>內容2</dd>
<dt>標題3</dt>
<dd>內容3</dd>
</dl>
（7）table 表格標簽
<!-- 表格標簽
<thead> 表頭
<tbody> 表單數據
<tr> 一個<tr> 就是一行
<th> 加粗文本，一般用於表頭標題
<td> 正常文本，一般用於其他表格內容
屬性（一般加在 開始標簽里）
<table border="1"> 加外邊框
<td colspan="2"></td> 水平方向占2個單元格（合併同一行中的單元格）
<td rowspan="2"></td> 垂直方向占2個單元格（合併同一列中的單元格）
-->
<table> /* 表格標簽里，由<thead></thead>和<tbody></tbody> 組成*/
<thead>
<tr>
<th>uername</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>mili</td>
<td>1314</td>
</tr>
<tr>
<td>cc</td>
<td>520</td>
</tr>
</tbody>
</table>
屬性:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合併單元格）
（8）form 表單標簽
form 標簽的屬性:
屬性 描述 accept-charset 規定在被提交表單中使用的字元集（預設：頁面字元集）。 action 規定向何處提交表單的地址（URL）（提交頁面）。 autocomplete 規定瀏覽器應該自動完成表單（預設：開啟）。 enctype 規定被提交數據的編碼（預設：url-encoded）。 method 規定在提交表單時所用的 HTTP 方法（預設：GET）。 name 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 novalidate 規定瀏覽器不驗證表單。 target 規定 action 屬性中地址的目標（預設：_self）。
input 標簽的屬性:
name：表單提交時的“鍵”，註意和id的區別
value：表單提交時對應項的值checked：radio和checkbox預設被選中的項
type="button", "reset", "submit"時，為按鈕上顯示的文本年內容
type="text","password","hidden"時，為輸入框的初始值
type="checkbox", "radio", "file"，為輸入相關聯的值
readonly：text和password設置只讀
disabled：所有input均適用
input 標簽的 type屬性值:
type屬性值 表現形式 對應代碼 text 單行輸入文本 <input type=text" /> password 密碼輸入框 <input type="password" /> date 日期輸入框 <input type="date" /> checkbox 覆選框 <input type="checkbox" checked="checked" /> radio 單選框 <input type="radio" /> submit 提交按鈕 <input type="submit" value="提交" /> reset 重置按鈕 <input type="reset" value="重置" /> button 普通按鈕 <input type="button" value="普通按鈕" /> hidden 隱藏輸入框 <input type="hidden" /> file 文本選擇框 <input type="file" />
select 標簽的屬性：
multiple：布爾屬性，設置後為多選，否則預設單選
disabled：禁用
selected：預設選中該項
value：定義提交時的選項值
textarea 標簽的屬性說明：
name：名稱
rows：行數
cols：列數
disabled：禁用
<!-- 表單標簽
#能夠獲取前端用戶數據(用戶輸入的、用戶選擇、用戶上傳...)基於網路發送給後端伺服器
1\
form 標簽的預設屬性 action:
控制數據提交的後端路徑(給哪個服務端提交數據)
1.什麼都不寫 預設就是朝當前頁面所在的url提交數據
2.寫全路徑:https://www.baidu.com 朝百度服務端提交
3.只寫路徑尾碼action='/index/'
自動識別出當前服務端的ip和port拼接到前面
host:port/index/
form表單提交文件需要註意
1.method必須指定為 post
（form表單預設提交數據的方式是get請求，數據是直接放在url後面的，
無法保證數據安全 http://127.0.0.1:5000/index/?username=sdadasdsda&gender=on）
2.enctype="multipart/form-data"
enctype類似於數據提交的編碼格式
預設是urlencoded 只能夠提交普通的文本數據
formdata 就可以支持提交文件數據
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
2\
# label 和 input都是行內標簽。ps:input不跟label關聯也沒有問題
label 標簽的預設屬性 for：
for的值要與相關聯的 input標簽的 id值一致
/* 第一種:直接將input框寫在label內 */
<label for="d1">
username:<input type="text" id="d1">
</label>
/* 第二種 通過id鏈接即可 無需嵌套 */
<label for="d2">password:</label>
<input type="text" id="d2">
input標簽 就類似於前端的變形金剛 ，通過type屬性變形
text:普通文本
password:密文
date:日期
submit:用來觸發form表單提交數據的動作
button:就是一個普普通通的按鈕 本身沒有任何的功能 但是它是最有用的，學完js之後可以給它自定義各種功能
reset:重置內容
radio:單選
預設選中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
當標簽的屬性名和屬性值一樣的時候可以簡寫
<input type="radio" name="gender" checked>女
checkbox:多選
<input type="checkbox" checked>DBJ
file:獲取文件 也可以一次性獲取多個
<input type="file" multiple>
hidden:隱藏當前input框 釣魚網站伎倆
3\
select 標簽 預設是單選 可以加mutiple參數變多選 預設選中selected
4\
textarea 標簽 獲取大段文本，多行文本
ps:
# 能夠觸發form表單提交數據的按鈕有哪些(一定要記住)
1、<input type="submit" value="註冊">
2、<button>點我</button>
# 所有獲取用戶輸入的標簽 都應該有name屬性
name就類似於字典的key
用戶的數據就類似於字典的value
# 針對用戶選擇的標簽 用戶不需要輸入內容，但是你需要提前給這些標簽添加內容value值
# 針對用戶輸入的標簽。如果你加了value 那就是預設值
<label for="d1">
username:<input type="text" id="d1" name="username" value="預設值">
</label>
其他input標簽屬性
disable 禁用
readonly 只讀
-->
示例代碼
<form action="">
<!-- 用戶輸入框 -->
<p>
<label for="d1">username:<input type="text" id="d1"></label>
</p >
<p>
<label for="d2">password:<input type="password" id="d2"></label>
</p >
<!-- 日期選擇功能 -->
<p>birthday:
<input type="date">
</p >
<!-- input標簽-單選 (將 name 的值設為一樣的，就可實現 單選) -->
<p>gender:
<input type="radio" name="gender">男
<input type="radio" name="gender" checked>女
<input type="radio" name="gender">其他
</p >
<!--input標簽-多選 -->
<p>hobby:
<input type="checkbox">read
<input type="checkbox" checked>DBJ
<input type="checkbox" checked>JBD
<input type="checkbox">hecha
</p >
<!-- select標簽-單選 -->
<p>province：
<select name="" id="">
<option value="">上海</option>
<option value="" selected>北京</option>
<option value="">深圳</option>
</select>
</p >
<!-- select標簽-多選 使用 multiple 屬性 -->
<p>前女友:
<select name="" id="" multiple>
<option value="" selected>新垣結衣</option>
<option value="" selected>斯佳麗</option>
<option value="">明老師</option>
</select>
</p >
<!-- select標簽-多級單選列表 嵌套 <optgroup>標簽 -->
<p>province1:
<select name="" id="">
<optgroup label="上海">
<option value="">浦東</option>
<option value="">黃埔</option>
<option value="">青浦</option>
</optgroup>
<optgroup label="北京">
<option value="">朝陽</option>
<option value="">昌平</option>
<option value="">沙河</option>
</optgroup>
<optgroup label="深圳">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</optgroup>
</select>
</p >
<!-- 上傳文件 multiple屬性可支持用戶能上傳多種文件 -->
<p>文件:
<input type="file" multiple>
</p >
<!-- 文本輸入框 -->
<p>自我介紹:
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p >
<input type="submit" value="註冊">
<!-- 當你沒有使用 value屬性 指定按鈕的文本內容 不同的瀏覽器打開之後可能渲染的文本內容不一致-->
<input type="button" value="按鈕">
<input type="reset" value="重置">
<button>點我</button>
</form>
