1. HTML介紹
1.1. 超文本標記語言
超文本標記語言（HyperTextMarkedLanguage），是一種標識性的語言。它包括一系列標記標簽，通過這些標記標簽可以將網(wǎng)絡上的文檔格式統(tǒng)一，使分散的internet資源連接為一個邏輯整體。
1.2. 標簽
HTML標簽也可以稱為元素，不同的標簽有不同的功能解釋，用來表示不同的功能。每個標簽都是由一對尖括號包裹的單詞組成。一般的標簽是成對出現(xiàn)的，一般稱第一個標簽是開始標簽，第二個是結(jié)束標簽。開始和結(jié)束標簽也稱為開放標簽和閉合標簽。
1.3. W3C
HTML由W3C制定的，W3C（World Wide Web Consortium）是一個非盈利組織,在中國的北京航空航天大學設有分部。
2. 常見標簽
2.1. 常見分類
根元素、文檔元數(shù)據(jù)、分區(qū)根元素
內(nèi)容分區(qū)、文本分區(qū)
內(nèi)聯(lián)文本語義、圖片和多媒體
內(nèi)嵌內(nèi)容、腳本
編輯標識、表格內(nèi)容
表單、交互元素
Web組件
2.2. 標簽及使用
2.2.1. 標簽
1.由一對尖括號包裹單詞構(gòu)成，如：
<body>
2.標簽不區(qū)分大小寫，推薦小寫。
2.2.2. 嵌套
標簽可以嵌套，但不能交叉嵌套
正確用法如：<body><table></table></body>
錯誤用法如：<body><table></body></table>
2.2.3. 使用規(guī)則
1.開始標簽-標簽體-結(jié)束標簽，如：
<a>百度</a>
2.自閉合標簽直接使用，如：換行：<br>；水平線：<hr>；輸入框：<input>；圖片：<img>。
2.2.4. 標簽屬性
- 通常為鍵值對形式出現(xiàn)，如：
color="red"；- 屬性只能出現(xiàn)在開始標簽和自閉合標簽內(nèi)；
- 屬性名字全部小寫，屬性值必須用單引號或雙引號包裹；
- 如果屬性名和屬性值完全一樣，直接寫屬性名即可。
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>標簽特點</title>
</head>
<body>
你好，我是陳宏，今年20
<!--
標簽特點：
1、都是由尖括號包裹的
2、大部分標簽都是成雙成對出現(xiàn)
3、第一個標簽是開始標簽（開放標簽），第二個標簽就是結(jié)束標簽（閉合標簽）
4、單獨出現(xiàn)的就是自閉合標簽
-->
</body>
</html>
運行結(jié)果
2.3. 標簽介紹
塊級（塊狀）標簽和內(nèi)聯(lián)（行內(nèi)）標簽
2.3.1. 塊級標簽
<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>
2.3.2. 內(nèi)聯(lián)（行內(nèi)）標簽
<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>
2.3.3. 塊級元素的特點
- 總在新行上開始；
- 高度、行高以及外邊距和內(nèi)邊距都可以控制；
- 寬度缺省，則是它容器的100%；
- 它可以容納內(nèi)聯(lián)元素和其它塊元素。
2.3.4. 內(nèi)聯(lián)元素的特點
- 和其它元素在一行上；
- 高，行高以及外邊距和內(nèi)邊距不可改變；
- 寬度就是其文字或圖片寬度，不可改變；
- 內(nèi)聯(lián)元素只能容納文本或其它內(nèi)聯(lián)元素。
2.3.5. 內(nèi)聯(lián)元素注意
- 設置寬度width無效；
- 設置高度height無效；
- 設置margin只有左右margin有效，上下無效；
- 設置padding只有左右padding有效，上下則無效，注意元素范圍是增大了，但是對元素周圍的內(nèi)容毫無影響。
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>塊狀標簽和行內(nèi)標簽的特點</title>
<!--p是塊狀標簽，span是行內(nèi)標簽-->
</head>
<body>
<p style="height: 100px">我是段落標簽一</p>
<p>我是段落標簽二</p>
<!--
塊狀標簽特點：
1、會自動換行，每一個塊狀標簽都獨占一行；
2、寬度跟瀏覽器有關(guān)；
3、從上往下排序。
4、可以設置寬高
-->
<span style="height: 500px">我是文本標簽一</span>
<span>我是文本標簽二</span>
<!--
行內(nèi)標簽特點：
1、不會自動換行；
2、寬度只與自己的內(nèi)容有關(guān)
3、從左往右排序
4、寬高設置無效
-->
</body>
</html>
運行結(jié)果
2.4. 塊級標簽介紹：
- 標題標簽：h1到h6 h1只能存在一個；
- 段落標簽：<p></p>用于文章段落；
- 列表標簽：分為有序列表、無序列表以及自定義列表；
- div標簽：分割一塊區(qū)域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的塊狀標簽</title>
</head>
<body>
<!--標題標簽：h1到h6 h1只能存在一個-->
<h1>我是一級標簽</h1>
<h2>我是二級標簽</h2>
<h3>我是三級標簽</h3>
<h4>我是四級標簽</h4>
<h5>我是五級標簽</h5>
<h6>我是六級標簽</h6>
<!--段落標簽:<p></p>-->
<p>我是段落標簽，和h4差不多大小</p>
<!--ol是有序列表-->
<!--快捷生成列表ol>li*3,tab鍵-->
<ol type="a" start="3">
<li>bd</li>
<li>ch</li>
<li>mr</li>
</ol>
<!--ul是無序列表-->
<!--快捷生成列表ul>li*3,tab鍵-->
<ul type="square"> <!--默認圓形，改成正方形-->
<li>bd</li>
<li>ch</li>
<li>mr</li>
</ul>
<!--自定義列表，以水果fruits和蔬菜vegetables進行分類-->
<dl>
<dt>fruits</dt>
<dd>apple</dd>
<dd>honey peach</dd>
<dd>pineapple</dd>
<dt>vegetables</dt>
<dd>carrot</dd>
<dd>cabbage</dd>
<dd>broccoli</dd>
</dl>
<!--分割一塊區(qū)域: div標簽-->
<div>
<!--換行標簽<br>-->
<span>我是分割線1</span>
<br> <!--br是換行標簽-->
<span>我是分割線2</span>
</div>
</body>
</html>
運行結(jié)果
2.5. 行內(nèi)標簽介紹
- 圖片標簽：用于在網(wǎng)頁中插入圖片；
- 斜體/粗體標簽：用于網(wǎng)頁中突出字體；
- 超鏈接標簽：用于鏈接其它資源，可以用來跳轉(zhuǎn)或者錨點；
- 文字標簽：span標簽是純文本，配合CSS則可以展示不同效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的行內(nèi)標簽</title>
</head>
<body>
<a href="#bottom" name="top">點擊我去最下面</a>
<!--文本標簽：span-->
<span>我是文本標簽</span>
<span>我是文本標簽</span>
<span>我是文本標簽</span>
<!--換行標簽：br-->
<br>
<!--斜體標簽：i-->
<i>我會讓你的文字傾斜</i>
<br>
<!--加粗標簽：b-->
<b>我會讓你的文字加粗</b>
<b><i>我會讓你的文字既傾斜又加粗</i></b>
<br>
<!--
圖片標簽：img:
src:推薦用第2種
1、網(wǎng)頁地址
2、從此html文件出發(fā)，相對路徑
3、絕對路徑，從磁盤出發(fā)，找到文件
alt:
當src屬性無值時，顯示alt屬性的值
-->
<!--<img src="" alt="抱歉，圖片溜走了">-->
<!--網(wǎng)頁地址，絕對路徑-->
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640918883&t=eabea030f11705f8306df246cfc25bad" alt="">
<!--從此html文件出發(fā)，相對路徑-->
<!--<img src="imgs/1.jpg" alt="抱歉，圖片溜走了">-->
<!--從磁盤出發(fā)，絕對路徑-->
<!--<img src="F:\需更新：----學習記錄-----\U1 2021.9.26\未更新-Python碼趣16期\03、web前端核心技術(shù)\01、HTML介紹\imgs\1.jpg" alt="抱歉，圖片溜走了">-->
<!--
超鏈接標簽：a，可做錨點
href：
放地址
target:
可以設置跳轉(zhuǎn)到新的網(wǎng)頁
-->
<a >點擊我去百度</a>
<a href="./imgs/1.jpg" target="_blank">點擊我去看上面的那張圖</a>
<a href="#top" name="bottom">點擊我去最上面</a>
</body>
</html>
2.6. HTML轉(zhuǎn)義
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>HTML轉(zhuǎn)義</title>
</head>
<body>
<span><h1>我想展示h1標簽和 空格</h1></span>
</body>
</html>
運行結(jié)果
3. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--table表格-->
<table border="1" cellspacing="0">
<caption>花名冊</caption>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>地址</th>
</tr>
<tr>
<td>吳某</td>
<td align="center">男</td>
<td>33</td>
<td>中國</td>
</tr>
<tr>
<td>陳某</td>
<td rowspan="2" align="center">男</td> <!--行合并-->
<td>32</td>
<td>巴基斯坦</td>
</tr>
<tr>
<td>余某</td>
<!-- <td>男</td>-->
<td colspan="2">28 俄羅斯</td>
<!-- <td>俄羅斯</td>-->
</tr>
</table>
</body>
</html>
運行結(jié)果
4. 表單
介紹：表單是搜集用戶數(shù)據(jù)信息的各種表單元素的集合區(qū)域。
作用：用于收取用戶數(shù)據(jù)并向后臺發(fā)送，前后交互的方式之一。
應用：表單常應用于登錄注冊，搜索，文件上傳等。
<!DOCTYPE html>
<html lang="en"> <!--en即English，ch即中文-->
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<!--
form表單：
屬性：
action：提交時候的地址，默認使用當前頁面
method：提交時候的方法，有g(shù)et和post兩種方法，默認使用get，登錄注冊用post，get不安全，會顯示
entype：設置編碼格式
-->
<form action="" method="post">
<!--
input屬性：
type：選框類型；
name：表單與后臺交互時最重要的一個屬性，要求input標簽都帶上表單提交項的鍵，與id不同，name屬性是和服務器通信時使用的名字，而id屬性是瀏覽
器端使用的名字，該屬性主要方便客戶編程而在css和js中使用；
value：表單提交項的值，input的值，單選多選下拉框必須設置value屬性，這樣后臺才能獲得你選中的到底是哪個或哪幾個選項；
placeholder：提高用戶體驗度；
readonly：只讀；
disabled：禁用。
-->
<!--
input常用type屬性值：
text：文本框
password：密碼框
radio：單選框
hidden：隱藏域
checkbox：復選框
file：文件選擇
submit：提交
reset：重置
-->
姓名：<input type="text" placeholder="請輸入姓名" name="user">
<br>
密碼：<input type="password" placeholder="請輸入密碼" name="password"> <!--密碼框type的值為password-->
<br>
手機號：<input type="text" placeholder="請輸入電話號碼" name="telephone">
<br>
<!--
select下拉框：
size：表示下拉框，顯示多少個，默認為一個；
option：下拉選項，下拉框的基本標簽，有多少個option就有多少個下拉選項；
selected：表示選中某個下拉選項；
name：下拉框的名字，表示下拉框向后臺提交數(shù)據(jù)的時候，所傳的名字。
-->
地區(qū)：
<select name="area" id="">
<option value="">中國</option>
<option value="">俄羅斯</option>
<option value="">巴基斯坦</option>
</select>
<br>
性別：<!--radio單選框，用戶選擇的需寫value值-->
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="-1">保密
<br>
愛好：<!--checkbox復選框-->
<input type="checkbox" name="hobby" value="run">跑步
<input type="checkbox" name="hobby" value="eat">吃飯
<input type="checkbox" name="hobby" value="game">玩游戲
<br>
<input type="submit" value="注冊">
<input type="reset" value="重置">
</form>
</body>
</html>
文章到這里就結(jié)束了！希望大家能多多支持Python（系列）！六個月帶大家學會Python，私聊我，可以問關(guān)于本文章的問題！以后每天都會發(fā)布新的文章，喜歡的點點關(guān)注！一個陪伴你學習Python的新青年！不管多忙都會更新下去，一起加油！
Editor：Lonelyroots
