HTML的各种基本标签
一 .head中的各種標簽
1. <!DOCTYPE html><html>文檔類型聲明 聲明當前文件是一個HTML5文件文檔類型聲明在一個html文件中必不可少 而且必須在網頁第一行
2. <!----> 鍵盤按鍵為Ctrl+？ 注釋
3. <head> head中用于設置網頁的相關信息
4. <meta charset="utf-8" /> 聲明當前網頁所采用的字符編碼格式
常見的中文編碼格式 gb-2312 :國標碼簡體中文的編碼格式
GBK：擴展的國標碼 也是簡體中文，但是比GB2312多了更多的編碼格式
utf-8:unicode萬國碼 基本兼容各國語言編碼。現在最常用
5. <meta name="keywords"content="html5,web前端，網頁開發" />
name="keywords" 表示這一行meta語句是要設置網頁的關鍵字,content=""設置當前網頁的關鍵字內容，多個關鍵字用英文逗號分隔,name屬性與content屬性必須同時設置，name表示需要設置的項目 content表示設置的具體內容
設置網頁的描述，網頁描述在網頁中非常重要，在搜索引擎中搜索網頁時，網頁標題下面顯示的一段文字就是網頁的描述
6. <title>這是我的第一個網頁</title> title表示網頁的標題 ，1也就是網頁選項卡上的文字
7. <link rel="icon" href="img/icon.png"/> 形如<link />這樣的標簽叫做自閉合標簽 ,也叫空標簽 ,這樣的空標簽只有一個標簽 ,標簽在最后用/表示結束,link 標簽用于將網頁和其他文件進行連接
rel ="icon",rel屬性表示即將連接的文件與當前網頁的關系 , 屬性值選擇icon表示即將連接的文件是當前網頁的圖標,rel是標簽的屬性，“icon”是標簽的屬性值 屬性值必須用引號引起來href=""表示所要連接的圖片地址
二 .body中的各種標簽
1.從寫法上，HTML標簽分為成對標簽和自閉合標簽（空標簽）
①成對標簽：標簽成對出現有開始標簽就有結束標簽，內容包裹在兩個標簽之間
②自閉合標簽（空標簽），只有一個標簽用/標識標簽的自動閉合。
2.從功能上，HTML標簽分為塊級標簽和行級標簽
【塊級標簽和行級標簽的區別】
1.塊級標簽會自動換行，前后隔一行 行級標簽不會自動換行，從左向右依次排列
2.塊級標簽默認寬度都是100% 行級標簽寬度由里面的文字撐開
3.塊級標簽可以設置寬度高度內外邊距等屬性 行級標簽不能設置上述屬性
基本塊級標簽
塊級標簽自動換行 前后隔一行
1.h標簽：自動加粗 h1最大 h6最小
代碼示例為 <h1>這是h1標簽</h1> <h2>這是h2標簽</h2> <h3>這是h3標簽</h3><h4>這是h4標簽</h4> <h5>這是h5標簽</h5> <h6>這是h6標簽</h6>
2.hr標簽 表示水平線標簽
代碼示例為 <hr />
3.p標簽表示段落標簽，沒有特殊含義，僅僅表示當前文字是一個段落
代碼示例為 <p>這是一段文字這是一段文字</p>
4.br 標簽表示換行符號，代碼中直接敲回車，并不能在網頁中顯示  ；表示空格但是網頁開發中盡量不用
5.blockquote表示引用標簽，表明當前文字引用自其他地方，瀏覽器會默認向右縮進顯示但可以通過CSS進行調整 cite屬性表示引用的來源，通常是一個網站的地址
代碼示例為 <blockquote cite="www.baidu.com">這句話是我引用的</blockquote>
6.pre標簽表示預格式標簽，會保留代碼中的回車縮進空格等，并在網頁中顯示pre標簽最常用于在網頁中展示代碼，保留代碼格式
代碼示例為
<pre>
這是一段文字
這是一段文字
這是一段文字
這是一段文字
</pre>
7.有序列表：ol (order list) 有序列表中的每一項用li表示type屬性表示序號的類型：1表示數字， A/a表示字母，i/I表示羅馬數字
代碼示例為
<ol type="">
<li>www</li>
<li>www</li>
<li>www</li>
</ol>
8.無序列表：ul unorder list有序列表中的每一項用li表示type屬性表示序號的類型：circle表示。disc表示.square表示正方形
代碼示例為
<ul type="square">
<li>第一項
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</li>
<li>第二項</li>
<li>第三項</li>
</ul>
9.定義描述列表dl 使用dt表示標題 使用dd表示描述項 標題一般只有一個，描述項可以有多個標題頂格顯示，描述項相對于標題向右縮進顯示
代碼示例為
<d1>
<dt>標題</dt>
<dd>描述項</dd>
<dd>描述項</dd>
<dd>描述項</dd>
</d1>
10.圖片組合標簽figure 用于將圖片與下方的標題進行包裹，圖片用img表示，標題用figcaption表示
代碼示例為 <figure>
<img src="img/icon.png" />
<figcaption>圖片標題</figcaption>
</figure>
11.分區標簽div (px代表像素)是網頁開發過程中最常用的標簽，div標簽可以包裹任何標簽，通常配合css使用
代碼示例為 <div>
分區
</div>
基本行級標簽
1.span標簽 用于包裹行內的文字，沒有其他特殊的含義，可以配合CSS修改某一部分字體的樣式
代碼示例為 <span>文字</span>
2. 傾斜加粗標簽
em,strong,i,b的區別
①em和i都能傾斜 strong和b都能加粗，但是em和strong多了一層強調的含義。（強調的作用：可以讓搜索引擎抓取網頁的重點內容，實現代碼的語義化)
②em和strong都是強調，但是em顯示為傾斜，strong顯示為加粗，而且strong的強調含義要比em更高
3.引用標簽
常見的引用標簽blockquote/q/cite的區別
①從顯示效果上，blockquote是塊級標簽而且整段縮進，q為加引號，cite顯示為傾斜
②從功能上，blockquote用于引用一整段內容，q標簽用于引用一句話，cite通常用于書畫名，作品名等標題引用
4. 圖片標簽 img
【路徑的表示方法】
1.網絡圖片地址，但不建議使用
2.使用圖片在本機的絕對路徑，但是嚴禁使用。因為絕對路徑使用file：//協議引入圖片 而網頁使用的是 http：//協議 ，所以無法訪問file：//協議引入的文件
3.使用相對路徑，推薦使用的唯一方式
a.當圖片在當前文件的下一層時，使用“文件夾名/圖片名“表示
b.當圖片在當前文件的同一層時，使用“圖片名”表示
c.當圖片在當前文件的上一層時，使用”../圖片名“表示
注意：圖片必須包含在項目目錄里面，不能退出文件根目錄
圖片標簽的各種屬性
①src屬性：表示圖片的所在位置
②width/height 屬性 圖片的寬度高度
③title屬性 當鼠標指上后顯示的文字
④ait屬性 圖片無法加載時顯示的文字，如果省略alt屬性，則圖片無法加載時顯示title的文字
⑤align屬性 圖片兩邊文字的相對位置 top 文字居上 centenr文字居中 bottom 文字居下（默認）
5.超鏈接標簽 a
①href屬性 超鏈接即將要跳轉的頁面，可以是網絡地址也可以是本地的HTML文件
②target屬性 設置新頁面打開的位置_self 當前頁面打開（默認）_blank在新頁面打開
③title 當鼠標指上后顯示的文字
代碼示例為 <a >這是一個超鏈接</a>
[功能性鏈接]
<a href="mailto://jianghao@jerei.com">youjian </a> mailto 給指定郵箱發郵件
<a href="tencent://message/?uin=qq號">tenxunqq </a> Tencent 與指定QQ聊天
6.錨鏈接 點擊超鏈接，跳轉到指定位置（錨點）
①在頁面指定位置定義一個錨點<a name="ww"></a>
② 將超鏈接的href屬性，設置為#錨點名稱 <a href="#ww">點擊我回頂部</a>
③跳到其他其他頁面位置的方式 <a href="其他頁面地址.html#錨點名稱">跳到其他其他頁面位置</a>
其他行級標簽 （了解）
dfn標簽 用于定義專業術語
abbr標簽 用于定義縮寫詞，常配合dfn使用
code標簽 聲明當前為一段代碼，配合pre標簽使用。
var 標簽 定義變量
代碼示例為： <var>x</var>+<var>y</var>=<var>z</var> 顯示為 x+y=z
bdo標簽 定義文字的顯示方向使用dir屬性控制文字顯示：ltr從左往右顯示 rtl從右往左顯示
代碼示例為： <bdo dir="rtl">12345678</bdo> 顯示為87654321
kbd標簽 用于表示鍵盤輸入的文字
sup標簽 上標文本
sub 標簽 下標文本
mark標簽 顯示為高亮文本
time標簽 表示時間
表格標簽
表格標簽用 table表示，表格中的每一行用tr表示，一行中的每個單元格用td表示。表頭中的單元格用th表示，會默認加粗居中！層次關系：table>tr>td/th
[表格的各種屬性]---作用于table標簽
1. border： 給表格的每個td和整個table添加邊框。 如果border>1,則只有最外層邊框會加粗，td上的邊框不會變化。
2. width/height: 表格的寬度、高度。
3. cellspacing: 設置單元格與單元格之間的間距。如果cellspacing="0"，則單元格之間的間距為0，但是相鄰的邊框不會合并。而是顯示兩條邊框的寬度。
4. cellpadding： 設置單元格內邊距，單元格中的文字與邊框之間的距離。
5. align: 設置表格在父容器中居左、居中、居右。 align屬性相當于使表格浮動，會影響表格后面內容的布局。
6. bgcolor: 表格背景色background: 表格背景圖。 背景色和背景圖同時存在時，背景圖生效。 bordercolor: 邊框顏色。
設置表格邊框合并
可以CSS設置：設置邊框合并后，cellspacing屬性將會失效，因為兩條邊框已經合并到一起，不能再產生間距。
【行列的各種屬性】---作用于tr和td
1. width/height: 寬度、高度
2. bgcolor: 背景色 如果行列屬性與table屬性沖突，以行列屬性為準。
3. align：設置單元格中的文字，水平對齊方式；
4. valign： 設置單元格中的文字，垂直對齊方式。
[表格的跨行與跨列]
1.表格跨列，colspan如果一個單元格跨n列，則其右方n-1個單元格刪掉
2.表格跨行， rowspan如果一個單元格跨n行，則其下方n-1個單元格刪掉
表格的結構化
完整的表格應包含以下幾部分
caption，表格的標題，用于表格最上方居中
thead，表頭部分，無論thead在什么地方顯示時永遠在表格最上方
tbody，表格表格的的主體部分，在thead之下
tfoot，表格的尾部，無論tfoot在什么地方顯示時永遠在表格最下方
表格的直列化
表格有幾列，就可以在表格最上方寫幾個<col />標簽，每個都對應著表格的每一列，這就是表格 的直列化
如果要同時修改多列，可以將多個<col />標簽用<colgroup></colgroup>進行包裹，統 一修改
注意：直列化通常用于給每一列起統一的name或class名字，一般不直接修改樣式。
表單標簽
表單有兩個重要屬性
①action表示表單提交的后臺服務器地址
②method表單提交數據的方法，可選值有get和post兩種
【get和post的區別】
①get使用URL地址欄進行傳遞數據，所有數據在地址欄可見，不安全post傳遞數據在地址欄不可見，比較安全
②get傳遞的數據量有限，而且只能傳輸純文字數據post可以傳輸大量數據，而且可以傳輸圖片視頻文字等
③get傳遞數據的速度比post快
【get傳遞數據的URL格式】
http：//原來的地址.html?name1=valuel&name2=value2... 比如http://127.0.0.1:8020/H51801.html?username=123&password=123
所以，input使用時name屬性必不可少，缺少name將導致該輸入框的數據不向后臺傳遞
input標簽
input的常用屬性
①type 表示當前輸入框是什么類型
②name 給輸入框取名字，向后臺傳輸數據時必不可少
③value 給input賦默認值
④placeholder 輸入框的提示內容，當輸入框存在value時，提示內容消失
⑤disabled=disabled 禁用當前輸入框 ，可以顯示， 不能編輯，被disabled="disabled禁用的輸入框，數據將不再向后傳遞
⑥hidden=hidden 隱藏輸入框，隱藏的輸入框中的數據，依然可以向后臺傳遞
⑦readonly="readonly" 只讀 與disabled=disabled 的區別，readonly可以向后臺傳遞
input的type類型
①text 文本輸入框
②password 密碼輸入框 輸入的內容為小數點
③radio 單選框單選按鈕的value不能省略 ，這個value需要向后臺傳遞，radio憑借name是否相同區分是否同一組，同一組中name必須相同，而且只能選一個。checked="checked"設置單選按鈕的默認選中項
④checkbox 多選框 其他與radio相同
⑤file 文件上傳框，multiple=multiple設置可以多選文件上傳，accept屬性設置可以上傳的類型，*表示所有文件，image/*表示所有圖片
⑥submit 表單提交按鈕
⑦reset 表單重置按鈕 將表單恢復到最初狀態
⑧image 圖形提交按鈕 src屬性用于導入圖片，功能與submit相同
⑨button 顯示為按鈕形狀，但是沒有任何功能
⑩hidden 隱藏輸入框，隱藏的輸入框中的數據，依然可以向后臺傳遞
select下拉選擇組件
①下拉框用<select ></select>表示列表中的每一項用<option></option>表示
②下拉框的name要統一寫在<select >上
③如果<option></option>設置了value屬性，則向后臺傳輸的是value中的值
如果<option>沒有設置value屬性，則向后臺傳輸的是<option></option>標簽中的文字
④在<option>上使用selected="selected"屬性，可以設置默認選中項
⑤在select上使用multiple=multiple屬性，可以設置為多選
⑥使用<optgroup></optgroup>可以對所有的option進行分組，使用label屬性可以作為分組名
textarea文字區塊
①使用cols= rows=屬性，可以設置文本域的大小 注意cols表示多少列是每列多少的字符，一個漢字兩個字符 一般使用css調整寬高而不是使用這兩個屬性
②使用style="resize: none;",可以設置文本域大小不允許拖放
③使用readonly屬性，設置文本域為只讀
④使用style=overflow: 樣式可以設置，可以設置超出區域的文字如何顯示
auto 默認效果，文字少不顯示滾動條文字多時顯示垂直滾動條
hidden 無論文字多少都不顯示滾動條，文字超出時將隱藏不顯示
scroll 無論文字多少都顯示垂直水平兩根滾動條
可以使用style="overflow-y （-x）: scroll;單獨設置 兩個方向的固定滾動條
fieldset 表單的邊框
<legend></legend> 表單的標題
tabindex 設置跳轉順序
總結
以上是生活随笔為你收集整理的HTML的各种基本标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mac下Nginx、PHP、MySQL
- 下一篇： 专访驭势科技吴甘沙：无人驾驶硝烟弥漫，“