文章目錄
一、HTML介紹
1、介紹
HTML稱爲超文本標記語言，是一種標識性的語言。它包括一系列標籤．通過這些標籤可以將網絡上的文檔格式統一，使分散的Internet資源連接爲一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
2、HTML標籤
(1).介紹
形如下面這樣的就是HTML標籤。
<div>XXX</div>
由一個開始標籤開始，以對應的結束標籤結束。
當然也有些標籤只有開始標籤，比如<br>、<img>、input等。
(2).嵌套
HTML標籤可以進行嵌套，如下面這樣：
<div>
<span>Look!</span>
</div>
(3).屬性
標籤可以沒有屬性、或者擁有若干個屬性。
這些屬性
- 以鍵值對的形式呈現出來，形如
key="value" - 寫在開始標籤內，以空格分隔
<div class="nav" id="user">
3、HTML文檔結構
(1).完整結構
一個完整的HTML文檔，一般結構如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
</body>
</html>
Tips：很多IDE，可以用過輸入英文感嘆號按下回車，生成上述結構
(2).<!DOCTYPE html>標籤
告知瀏覽器該頁面文件的文檔類型，指示web瀏覽器使用哪個HTML版本編寫頁面。
Tips：必須放在文件第一行。
(3).<html>標籤
告知瀏覽器自身是一個HTML文檔，限定文檔的開始點和結束點
(4).<head>標籤
定義文檔的頭部，通常在這裏引用樣式表，其中的<title>標籤存放文檔的標題。
(5).<body>標籤
定義文檔的主題內容。
4、HTML註釋
用下面這樣的標籤來進行註釋
<!-- 這是註釋 -->
<!-- 多行註釋
多行註釋
多行註釋 -->
5、HTML標籤分類
簡單的劃分，一般可以分爲塊狀標籤和內聯標籤。
兩者的最大區別在於，塊級標籤會爲自己的內容佔據新的一行，內聯標籤不會。
二、常用HTML標籤整理
1、總體整理
(1).文本標籤
| 標籤 | 功能 | 屬性 | 塊狀/內聯 | 是否有閉合標籤 |
|---|---|---|---|---|
<h1>至<h6> |
標題（h1最大，h6最小） |
塊狀 | 有 | |
<p> |
段落 | 塊狀 | 有 | |
<span> |
普通文本 | 內聯 | 有 | |
<strong> |
加粗強調 | 內聯 | 有 | |
<img> |
圖片 | src |
內聯 | 無 |
<a> |
超鏈接 | href、title、target、 |
內聯 | 有 |
<ul> |
無序列表 | 塊狀 | 有 | |
<ol> |
有序列表 | 塊狀 | 有 | |
<li> |
列表元素 | 塊狀 | 有 | |
<label> |
標籤 | for |
內聯 | 有 |
(2).表單標籤
| 標籤 | 功能 | 屬性 | 塊狀/內聯 | 是否有閉合標籤 |
|---|---|---|---|---|
<form> |
表單 | action、method |
塊狀 | 有 |
<input> |
單行文本輸入框 | type、placeholder、name、value、readonly、disabled |
內聯 | 無 |
<textarea> |
多行文本輸入框 | placeholder、name、cols、rows |
內聯 | 有 |
<select> |
選項菜單 | name、multiple |
內聯 | 有 |
<option> |
選項 | value |
塊狀 | 有 |
<button> |
按鈕 | type |
內聯 | 有 |
2、整體示例
(1).文本標籤
Html文檔
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<h1>一級標題</h1>
<p>
一段文字，這段文字描述了ABCDEFGHIJKLMN
一段文字，這段文字描述了ABCDEFGHIJKLMN
一段文字，這段文字描述了ABCDEFGHIJKLMN
一段文字，這段文字描述了ABCDEFGHIJKLMN
一段文字，這段文字描述了ABCDEFGHIJKLMN
一段文字，這段文字描述了ABCDEFGHIJKLMN
一段文字，這段文字描述了ABCDEFGHIJKLMN
<span>突如其來的span標籤內容</span>
<strong>突如其來的strong標籤內容</strong>
</p>
<img src="https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1" alt="">
<a href="https://www.csdn.net/" target="_blank">新窗口打開CSDN首頁</a>
<ul>
<li>無序列表元素</li>
<li>無序列表元素</li>
<li>無序列表元素</li>
<li>無序列表元素</li>
</ul>
<ol>
<li>有序列表元素</li>
<li>有序列表元素</li>
<li>有序列表元素</li>
<li>有序列表元素</li>
</ol>
<labe>label元素一般用在表單裏，用for屬性給表單元素綁定id哦</labe>
</body>
</html>
效果圖示
(2).表單標籤
Html文檔
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<form>
<input type="text" name="nickname1" />
<br>
<input type="text" placeholder="暱稱" name="nickname2" />
<br>
<input type="text" placeholder="暱稱" name="nickname3" value="小明" />
<br>
<input type="text" placeholder="暱稱" name="nickname4" value="小明(不可修改)" readonly />
<br>
<input type="text" placeholder="暱稱" name="nickname4" value="小明(不可修改)" disabled />
<br>
<input type="password" placeholder="密碼" name="psw" />
<br>
<textarea rows="5" cols="40" placeholder="輸入你想輸入的一段話"></textarea>
<br>
<select>
<option value ="v1">v1</option>
<option value ="v2">v2</option>
<option value ="v3">v3</option>
</select>
<br>
<select multiple>
<option value="s1">s1</option>
<option value="s2">s2</option>
<option value="s3">s3</option>
</select>
<br>
<button type="button">樣式按鈕</button>
<button type="submit">提交按鈕</button>
</form>
</body>
</html>
效果圖示
