HTML基本標籤
1、什麼是HTML?
HTML:超文本標籤語言
HTML:網頁的源碼
瀏覽器：「解釋和執行」HTML源碼的工具
2、HTML文檔的結構
HTML文檔主要包括三大部分：文檔聲明部分、<head>頭部部分、<body>主體部分。
一、<!DOCTYPE html> 這是HTML文檔的聲明部分，在html5中，已經被簡化成了此樣式。css
二、.<!---->html
註釋:寫給程序員看的，網頁中不會顯示
HTML中註釋的快捷鍵：Ctrl+/
須要注意的是：文檔聲明必須有！並且必須在文檔頁面的第一行！html5
HTML基本標籤
3、<head>頭部部分
1.<head>
head頭部做用：用於描述網頁的一些關鍵信息，好比網頁的配置，設置，關鍵字等等...
這些信息，大多在瀏覽器看不到，可是對網頁的解析相當重要！
2.<meta charset="utf-8" />
meta標籤，用於描述網頁的各類信息，
其中<meta charset="utf-8" />設置網頁的編碼格式爲UTF-8格式
常見的中文編碼格式：
GB2312：國標碼，簡體中文；
GBK：擴展的國標碼，簡體中文；
UFT-8：萬國碼，兼容各類語言編碼，經常使用！！！！！！
①<meta name="keywords"content="html,網頁開發">
設置網頁關鍵字，有助於搜素引擎的搜索。
name="keywords"表示這個meta標籤設置的是網頁的關鍵字，
content=""表示關鍵字的詳細信息，多個關鍵字，用英文逗號分隔；
②<meta name="description"content="這是的第一個網頁！">
設置網頁的描述信息，搜索引擎搜索時，標題下面的一段文字！很是重要！！！
name="description"表示這個meta標籤設置的是網頁的描述信息；
content=""表示描述信息的詳細內容！！！
3.<title>這是個人第一個網頁！</title>
title：網頁的標題，顯示在瀏覽器選項卡上面的文字
4.<link rel="icon"href="img/icon.jpg"/>
連接網頁的小圖標：網頁選項卡上的小圖片
rel="icon"表示當前link的做用，是連接網頁圖標；
href="img/icon.jpg"表示圖標的地址在何處
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords"content="網頁開發">
<meta name="description"content="這是我開發的第一個網頁！">
<title>這是個人第一個網頁！</title>
<link rel="icon"href="img/icon.jpg"/>
</head>
<body>
</body>
</html>
4、body主體部分程序員
（一）HTML標籤分類web
HTML標籤的分類：
塊級標籤：顯示爲塊狀，獨佔一行，自動換行。
行級標籤：在一行中，從左往右依次排列，不會自動換行。
【塊級標籤與行級標籤的區別】
一、塊級標籤：默認寬度100%（佔滿一行）；
塊級標籤自動換行（獨佔一行，右邊不能有任何東西）；
可使用css設置寬度高度
二、行級標籤：默認寬度由內容撐開（內容多寬，寬度就佔多寬）；
行級標籤不會自動換行（一行當中，從左往右依次排列）；
寬度高度不能設置
從寫法上，HTML標籤分爲「成對標籤」和「自閉和標籤（空標籤）」
①成對標籤：成對出現，有開始標籤，必須有結束標籤，內容包含在兩個標籤之間。
例如<h1></h1>
②自閉和標籤（空標籤）：只有一個標籤，用/表示標籤的自閉和（/能夠省略）
例如<link/><meta/><hr/>
①成對標籤：成對出現，有開始標籤，必須有結束標籤，內容包含在兩個標籤之間。
例如<h1></h1>
②自閉和標籤（空標籤）：只有一個標籤，用/表示標籤的自閉和（/能夠省略）
例如<link/><meta/><hr/>
（二）基本塊級標籤
1.標題標籤
h標籤：標題標籤，顯示爲黑體加粗
標題標籤，共分爲6種：h1-h6，h1最大，h6最小
2.分割線標籤
hr標籤：表示一條水平線
3.段落標籤
p標籤：表示段落標籤，至關於咱們文章中的一段文字
4.換行標籤
<br/>：換行符
注意：在代碼中，直接回車換行，瀏覽器並不認識，必須使用<br/>告訴瀏覽器這裏要斷行
5.預格式
pre標籤：預格式標籤。會保留代碼中的空格，回車等符號，直接在瀏覽器顯示
pre標籤經常使用於在網頁中顯示代碼，保留代碼格式！！
6.塊引用標籤<blockquote cite="http://www.baidu.com"></blockquote>
blockquote：塊引用標籤。代表一段話是從其餘網站引用的
有一個重要屬性：cite=""表示這段話的引用來源，常放一個網站地址，可是瀏覽器顯示並無任何區別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>這是h1標籤</h1>
<h2>這是h2標籤</h2>
<h3>這是h3標籤</h3>
<h4>這是h4標籤</h4>
<h5>這是h5標籤</h5>
<h6>這是h6標籤</h6>
<hr/>
<p>這是一段文字這是一段文字這是一段文字<br/>這是一段文字這是一段文字這是一段文字</p>
<p>這是一段文字這是一段文字這是一段文字<br/>這是一段文字這是一段文字這是一段文字</p>
<pre>
這是一段文字
這是一段文字
這是一段文字
這是一段文字
</pre>
<!--
pre標籤：預格式標籤。會保留代碼中的空格，回車等符號，直接在瀏覽器顯示
pre標籤經常使用於在網頁中顯示代碼，保留代碼格式！！
-->
<blockquote cite="http://www.baidu.com">
光明正大的抄你的！
</blockquote>
</body>
</html>
（三）、基於佈局的塊級標籤
一、無序列表
有多個列表項組成，每一個列表項前面帶小黑點，稱爲無序列表。
無序列表用<ul>表示，列表中的每一項用<li>表示
2.有序列表
有序列表用<ol>表示，標籤中的每一個列表項用<li>表示
三、定義列表（定義描述列表）
定義列表<dl>，裏面有一個標題<dt>，有多個描述項<dd>，
標題默認頂格顯示，描述項相對標題向後縮進顯示。
四、圖片組合標籤
組合標籤<figure>裏面有兩部分：
①圖片<img/>後續講解
②圖片的標題<figcaption></figcaption>
五、分區標籤div（最經常使用標籤）
div標籤沒有任何的特殊做用，僅僅起到一個包裹內容的做用。經常使用於網頁中劃分區塊
div標籤中能夠包裹任何內容，需配合css一塊兒使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>這是無序列表第一項</li>
<li>這是無序列表第二項</li>
<li>這是無序列表第三項</li>
<li>這是無序列表第四項</li>
</ul>
<ol>
<li>這是有序列表第一項</li>
<li>這是有序列表第二項</li>
<li>這是有序列表第三項</li>
<li>這是有序列表第四項</li>
<dl>
<dt>這是dl列表的標題</dt>
<dd>這是dl列表的描述項1</dd>
<dd>這是dl列表的描述項2</dd>
<dd>這是dl列表的描述項3</dd>
</dl>
<figure>
<img src="img/icon.jpg"/>
<figcaption>圖片的描述標題</figcaption>
</figure>
<div style="width:500px;height:100px;background-color:yellow ;">
這是div裏面的文字
<p>11111</p>
</div>
</body>
</html>
（四）、基本行級標籤
一、span標籤
：①只是包裹做用，沒有其餘任何含義；
②span做用與div相似，需配合CSS使用。只不過div是塊級標籤，span是行級標籤
二、【em/strong i/b區別】
①em和i都能傾斜，strong和b都能加粗。可是，i和b僅僅是單純的傾斜加粗，而em和 strong多了強調的語義。
②em和strong都表示強調，可是strong強調的級別更高
注意：
①強調的目的：讓搜索引擎知道網頁重點強調的內容！便於搜索引擎顯示！
②strong和em均可以多層嵌套，表示強調程度的遞增！
三、q標籤
q標籤：表示短引用
cite屬性：用於聲明引用的來源
【經常使用引用標籤】
<blockquote>用於引用一段內容</blockquote>
<q>用於引用一句話</q>
<cite>經常使用於引用做品名、書畫名等</cite>
相同點：三個引用標籤，都用city屬性表示引用來源
不一樣點：①引用內容不一樣
blockquote->一段話，q->一句話，city->做品名
②顯示的默認效果不一樣
blockquote->默認整段向右縮進；
q->默認加引號；
city->默認傾斜
四、small和big
small標籤：將字體縮小一號；
big標籤：將字體放大一號
注意：
①small和big能夠多層嵌套，直到字體達到最小或最大爲止
②這倆標籤已經被淘汰，並不建議使用
五、img圖片標籤：
5.1 src屬性：表示圖片的路徑
【圖片路徑的合法方式】
a、網絡鏈接：因爲圖片在其它網站，若是其餘網站刪除圖片，咱們也不能訪問，因此不建議使用這種方式
<img src="https://www.baidu.com/img/bd_logo1.png"/>
b、絕對路徑：使用絕對路徑的圖片，只有在本機使用file協議才能訪問！因此嚴禁使用這種方式
<img src="file:///E:/icon.jpg"/>
c、相對路徑：
① 圖片與當前文件在同一層文件夾：直接寫圖片名
<img src="icon.jpg"/>
② 圖片在當前文檔的下一層文件夾：文件夾名/圖片名
<img src="img/icon.jpg"/>
③ 圖片在當前文檔的上一層文件夾：../圖片名（../表示後退一層）
<img src="../icon.jpg"/>
可是，必定要注意：圖片必須包含在項目裏面，不能 訪問項目外的圖片。
5.2 height:圖片的高度 width:圖片的寬度
5.3 title：圖片的標題，鼠標指上後看到的提示文字
<img src="img/icon.jpg"title="鼠標指上後看到的提示文字"/>
5.4 alt:圖片沒法加載時顯示的文字
<img src="img/icon.jpg"alt="圖片沒法加載時看到的文字"/>
5.5 align:圖片周圍的文字相對於圖片如何對齊
可選值：top->圖片頂部center->圖片中部bottom->圖片底部
<img src="img/icon.jpg"align="bottom"/>12345
6.超連接標籤a
① href屬性：表示超連接須要跳轉的頁面
a.能夠寫網絡地址：
<a href="http://www.baidu.com">這是一個超連接</a>
b.能夠打開本地html文件：
採用相對路徑肯定文件地址，與img標籤肯定方式相同
<a href="02-HTML-基本塊級標籤.html">這是一個超連接</a>
② title屬性：鼠標指上後顯示的提示文字
<a href="http://www.baidu.com"title="hhh">這是一個超連接</a>
③ target屬性：設置新頁面打開的窗口位置
可選值：_self自身頁面打開（默認）_blank新窗口打開
<a href="http://www.baidu.com"target="_blank">這是一個超連接</a>
④ rel屬性：聲明即將跳轉的文件與當前文件的關係
rel="prev":即將打開的頁面是當前頁面的前一篇；
rel="next":即將打開的頁面是當前頁面的後一篇
<a href="next.html"rel="next">下一篇文章</a>
這個屬性設置之後對用戶沒有任何做用，但多搜索引擎是友好的，搜索引擎在抓取網頁時， 能夠很清楚的知道網頁中的上下文結構關係
【超連接的特殊應用】
1.功能性鏈接（瞭解）：
mailto://點擊連接給指定郵箱發送郵件
<a href="mailto://jianghao@jrel.com">點擊連接發封郵件</a>
tencent://message/?uin=251241143點擊與指定QQ聊天
還有：tell://手機端點擊打電話
message://手機端點擊發送短信
ftp://使用ftp協議進行文件的上傳下載
2.錨連接：
>>>本頁面錨連接
①在頁面的指定位置設置一個錨點，用name屬性表示錨點的名字
<a name="top"></a>
②將超連接的href屬性，設置爲#加錨點名字
<a href="#top">點擊連接，跳轉到top錨點位置</a>
>>>頁面間錨連接
①在新頁面的指定位置設置一個錨點，用name屬性表示錨點的名字
<a name="top"></a>
②將超連接的href屬性，設置爲新頁面地址#加錨點名字
<a href="text.html#top">點擊連接，跳轉到text.html的top錨點位置</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
江漢真<span style="color: red;font-size:48px ;">帥</span><br />
<em>這是em標籤</em><br />
<strong>這是strong標籤</strong><br />
<i>這是i標籤</i><br />
<b>這是b標籤</b><br />
<u>這是u標籤</u><br />
<q cite="http://www.666666.com">我是q標籤引用</q>
<blockquote>我是blockquote的引用</blockquote>
<cite>我是city標籤的引用</cite><br />
<small>我比正常小一號</small><br />
<big>我比正常大一號</big><br />
<img src="https://www.baidu.com/img/bd_logo1.png"/>
<img src="img/icon.jpg"height=""width=""title="鼠標指上後看到的提示文字"alt="圖片沒法加載時看到的文字"align="bottom"/>12345
<img src="../icon.jpg" /><br />
<div style="height: 800px;background-color: red;"></div>
<a href="http://www.baidu.com"title="hhh"target="_blank">這是一個超連接</a>
<a href="mailto://jianghao@jrel.com"title="hhh"target="_blank">點擊連接發封郵件</a>
<a href="#top">點擊跳轉到頂部！</a>
<a href="img/text.html#one">點擊跳到新頁面第一部分</a>
<a href="img/text.html#two">點擊跳到新頁面第二部分</a>
<a href="img/text.html#three">點擊跳到新頁面第三部分</a>
<a href="img/text.html#four">點擊跳到新頁面第四部分</a>
</body>
</html>
w3c規範：
1.w3c:萬維網聯盟，負責制定和維護web行業開發標準；
2.w3c要求的規範：
①w3c規範中倡導的兩個分離:
內容與表現分離：（HTML與css分離）
內容與行爲分離：（HTML與JavaScript分離）
②HTML語言要遵循語義化
③關於代碼書寫的規範：
HTML中的標籤與屬性必需要小寫；
HTML中的標籤必需要閉合；
屬性值必須用引號引發來；
HTML標籤必須正確嵌套
（五）、表格
表格用table表示，表格中的每一行用tr表示，一行中的每一列用td表示
th:表示表頭，表頭中的文字默認爲加粗居中，th要放在tr中，用於替換td
table的經常使用屬性
1.border：給表格加邊框。默認給全部td加邊框，而且給整個table加外邊框，當增大 border的值時，td上的邊框不變化，只有最外層大邊框變寬
2.cellspacing：單元格與單元格之間的距離。
【注意】表格邊框線合併的css寫法:
style="border-collapse：collapse;"
這條css與cellspacing="0"有什麼區別？
cellspacing="0"僅僅是將單元格之間的距離調整爲0，實際上單元格之間依然仍是兩條線
border-collapse：collapse；試講表格相鄰的兩條邊框進行合併處理，只有一條線存在
（一旦邊框合併，collapse屬性將會失效）
3.cellpadding:單元格中的文字與單元格邊框的距離
4.height:表格的高度
width:表格的寬度
使用表格寬高屬性設置大小：
<table height="400"width="500"></table>
使用css樣式設置大小：
<table style="height: 400px;width=500px"></table>
5.align:設置表格在瀏覽器中的位置，不建議使用了。
可選值：left/center/right
6.bgcolor:背景色
bordercolor：邊框顏色
background：背景圖
背景圖和背景色同時存在時，背景圖會覆蓋背景色
tr與td經常使用屬性
1.width：單元格寬度
height：單元格高度
2.bgcolor：單元格顏色
3.align：設置單元格中的文字，水平對齊方式
left/center/right
Valign：設置單元格中的文字，垂直對齊方式
4.nowrap="nowrap"當單元格文字過多時，設置單元格文字不斷行顯示。可是，
會把表格的寬度撐大
表格的跨行與跨列
1.跨列：在td上使用屬性colspan="n"進行跨列。若是一個單元格跨n列，
則單元格右邊的n-1個單元格需去掉
2.跨行：在td上使用屬性rowspan="n"進行跨列。若是一個單元格跨n行，
則單元格下邊的n-1個單元格需去掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1"cellspacing="0"style="border-collapse: collapse;"
cellpadding="15"bgcolor=""bordercolor=""background="">
<tr>
<th>標題一</th>
<th>標題二</th>
<th>標題三</th>
</tr>
<tr>
<td align="right"valign="bottom">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
<table border="1">
<tr>
<th>標題一</th>
<th colspan="2">標題二</th>
</tr>
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
</body>
</html>
（六）表單瀏覽器
一、form表單的兩個重要屬性
①action：表示表單提交的服務器地址
②method：表單提交數據的方式，可選值get和post
【get和post的區別】
get經過URL傳遞數據，全部內容在URL能夠看到，而post沒法看見
get傳遞數據不安全，而post傳遞數據安全。
get可以傳遞的數據量有限，且只可以傳遞文本信息。post能夠傳遞大量數據，而且 能夠傳遞圖片、文件等其餘內容
get的傳輸速度要比post快。
【get使用URL傳遞數據的格式】
http://URL地址.html?name1=value1&name2=value2
用?表示參數傳遞的開始，多個參數之間用&符號連接，同一個參數用name來標識value
因此使用表單時，input輸入框的name屬性必定不能省略。
若是省略input屬性，則這個input的數據，不會日後臺傳遞
二、input的經常使用屬性：
①type：聲明input輸入框是什麼類型
②name：給input輸入框起名字。傳輸數據時，使用name=value的形式傳遞
③value：input輸入框的默認值。
④placeholder：輸入的提示文本，當輸入框爲空時，顯示；當輸入框有value時消失
⑤checked="checked" 設置單選框或者複選框的默認選中
⑥disabled="disabled" 設置input禁用。一旦使用disabled禁用的輸入框，在傳
遞數據時，將再也不日後臺傳遞
⑦hidden="hidden" 隱藏輸入框，隱藏的內容依然能夠向後臺傳遞至關於
<input type="hidden"name="hidden"value="111" />
三、input的type類型
①text：表示input爲文本輸入框，輸入內容正常顯示
②password：表示input爲密碼輸入框，輸入內容會顯示小黑點
③radio：表示input爲單選輸入框
>>>radio標籤的value屬性不能省略，日後臺傳遞值時，傳遞的是value中的值
>>>radio標籤憑藉name屬性來判斷是不是同一組標籤。name相同爲同一組，同
一組當中只能選擇一個
>>>使用checked="checked"能夠設置默認選中項。這種屬性名=屬性值的寫法，
能夠省略屬性值
例如：<input type="radio"name="sex"value="男" checked/>男
④checkbox：表示複選框。其餘要求與radio相同
⑤file：表示文件上傳框。點擊能夠選擇文件上傳
accept屬性，能夠限制只能上傳何種類型的文件。
*表示能夠接受全部文件
image/*表示只能接受圖片文件
multiple=「multiple」設置能夠上傳多個文件
⑥submit：表示input會顯示爲提交按鈕，點擊能夠提交整張表單
⑦reset：表示重置按鈕，點擊將表單恢復到初始狀態
⑧image：圖形提交按鈕。使用src屬性導入一張圖片，與submit按鈕都具備提交
表單的功能
⑨button：只是按鈕形狀，沒有任何做用
⑩hidden：隱藏的輸入框。與普通輸入框+hidden=「hidden」做用相同
四、select下拉選擇區塊
① <select></select>標籤中有多個選項，用<option></option>表示
② 一個<select></select>組合只能有一個name，因此使用時需給select標籤起name， 而不是給option標籤起name
③ option標籤若是有value屬性，則傳遞數據時將傳遞value的屬性值；若是沒有value屬性 則傳遞時將傳遞<option></option>標籤中間的文字
④ option標籤的title屬性：表示鼠標指上後顯示的文字
⑤ 給option標籤加上selected="selected"表示默認選中項
⑥ 給select標籤加multiple="multiple"表示這個下拉框能夠多選，可是這個屬性幾乎不用
⑦ <optgroup lable=「組名」></optgroup>用於將全部的option標籤進行分組，使用lable 屬性表示組名
因此，完整的select下拉的結構以下：
<select name="city"> <optgroup label="group1"> <option>1</option> <option>2</option> </optgroup> <optgroup label="group2"> <option>3</option> <option>4</option> <option>5</option> </optgroup> </select>
五、textarea 文本域
①文本域可使用cols和rows設定寬高，但咱們幾乎不用
咱們使用style="height: 50px;width: 150px;"來設定大小
②使用css樣式style="resize: none;"設定文本域的大小不容許拖動縮放
③使用屬性readonly="readonly"設置文本域爲只讀，不容許修改
④css樣式overflow用於設置超出區域的文字如何顯示
可選值有三個：
hidden：超出區域的文字直接隱藏，沒法看到；
scroll：不管文字多少，都會顯示水平和垂直方向的滾動條；
auto：（默認效果）文字少的時候沒有滾動條，文字多的時候自動顯示垂直滾動條
也可使用overflow-x和overflow-y單獨設置水平和垂直方向滾動條是否顯示
六、HTML5智能表單
6.1 H5爲咱們提供了input和form關聯的新方式。並不要求input必須包含在form面。 若是input在form外面，只要給form標籤一個id，讓input標籤for屬 性關聯這id， 便可實現input與form的關聯
<form id="form1">
<input form="form1" />
6.2 H5給咱們提供了一系列新的input的type類型
6.3 H5給提供的input新屬性：
placeholder：輸入框的默認提示內容
form：讓表單外面的input關聯表單id，實現input與form表單的關聯
required=「required」設置input必填
autofocus="autofocus"：設置input自動得到焦點
autocomplete="off"關閉自動提示完成功能。此功能瀏覽器會默認打開。設置off爲關閉，設置爲on能夠打開
能夠給form標籤添加autocomplete屬性，設置整張表單的自動完成功能是否開 啓。若有個別不一樣的input，能夠單獨再設置
相關文章
- 1. HTML基本標籤
- 2. Html基本標籤
- 3. HTML 基本標籤
- 4. HTML的基本標籤
- 5. HTML常用（基本）標籤
- 6. HTML：基本的標籤
- 7. HTML基本標籤(二)
- 8. 02.html 基本標籤
- 9. 01-html基本標籤
- 10. HTML文本標籤
- 更多相關文章...
- • MyBatis if標籤 - MyBatis教程
- • MyBatis foreach標籤 - MyBatis教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML基本標籤
- 2. Html基本標籤
- 3. HTML 基本標籤
- 4. HTML的基本標籤
- 5. HTML常用（基本）標籤
- 6. HTML：基本的標籤
- 7. HTML基本標籤(二)
- 8. 02.html 基本標籤
- 9. 01-html基本標籤
- 10. HTML文本標籤