1、什么是HTML？
HTML是超文本標(biāo)記語言（Hyper Text Markup Language）是用來描述網(wǎng)頁的一種語言
注意：
HTML不是編程語言，而是標(biāo)記語言
HTML文件也可以直接稱為網(wǎng)頁，瀏覽器的作用就是讀取HTML文件，并且以網(wǎng)頁的形式去展示它們
2、HTML結(jié)構(gòu)
2.1 HTML 標(biāo)簽
HTML 代碼是由 “標(biāo)簽” 構(gòu)成的
<body>hello world</body>
??標(biāo)簽名 (body) 放到 < > 中
??大部分標(biāo)簽成對出現(xiàn). 為開始標(biāo)簽, 為結(jié)束標(biāo)簽.
??少數(shù)標(biāo)簽只有開始標(biāo)簽, 稱為 “單標(biāo)簽”.
??開始標(biāo)簽和結(jié)束標(biāo)簽之間, 寫的是標(biāo)簽的內(nèi)容. (hello)
??開始標(biāo)簽中可能會帶有 “屬性”. id 屬性相當(dāng)于給這個(gè)標(biāo)簽設(shè)置了一個(gè)唯一的標(biāo)識符(身份證號碼)：<body id = 1>hello world</body>
2.2 HTML 文件基本結(jié)構(gòu)
<html>
<head>
<title>第一個(gè)頁面</title>
</head>
<body>
hello world!
</body>
</html>
??html 標(biāo)簽是整個(gè) html 文件的根標(biāo)簽(最頂層標(biāo)簽)
??head 標(biāo)簽中寫頁面的屬性.
??body 標(biāo)簽中寫的是頁面上顯示的內(nèi)容
??title 標(biāo)簽中寫的是頁面的標(biāo)題.
打開之后：
2.3 標(biāo)簽層次結(jié)構(gòu)
2.4 如何快速生成HTML代碼框架
在vscode中輸入就會有提示
點(diǎn)擊后生成框架：
3、HTML常見標(biāo)簽
3.1 注釋標(biāo)簽
3.2 標(biāo)題標(biāo)簽: h1-h6
有六個(gè), 從 h1 - h6. 數(shù)字越大, 則字體越小
<h1>Hello</h1>
<h2>Hello</h2>
<h3>Hello</h3>
<h4>Hello</h4>
<h5>Hello</h5>
<h6>Hello</h6>
打開文件：
3.3 段落標(biāo)簽: p
把一段比較長的文本粘貼到 html 中, 會發(fā)現(xiàn)并沒有分成段落：
<body>
本項(xiàng)目基于樹莓派構(gòu)建了一個(gè)實(shí)驗(yàn)設(shè)備管理系統(tǒng)，通過人臉識別驗(yàn)證用戶身份并與用戶進(jìn)行人機(jī)交互，以實(shí)現(xiàn)實(shí)驗(yàn)設(shè)備的安全和高效利用[1]。
隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，物聯(lián)網(wǎng)設(shè)備已經(jīng)從傳統(tǒng)的計(jì)算機(jī)和移動(dòng)設(shè)備向各種物理設(shè)備拓展，包括汽車、家居、城市基礎(chǔ)設(shè)施等等[2]。此外，人機(jī)交互作為一項(xiàng)核心技術(shù)也不斷得到重視。人與智能設(shè)備之間的自然語音或者手勢交互方式對于改善人們?nèi)粘Ｉ钅酥凉I(yè)生產(chǎn)、醫(yī)療衛(wèi)生等領(lǐng)域都有較大幫助。因此，本項(xiàng)目具有廣闊應(yīng)用前景。
在硬件方面，樹莓派被廣泛應(yīng)用于各種物聯(lián)網(wǎng)設(shè)備和嵌入式系統(tǒng)中，由其提供強(qiáng)大的計(jì)算和控制能力，成為受歡迎的單板計(jì)算機(jī)之一。[4]同時(shí)人臉識別技術(shù)也不斷得到提高，深度學(xué)習(xí)技術(shù)尤其是卷積神經(jīng)網(wǎng)絡(luò)已成為主流研究思路。
在軟件方面，微信小程序在人機(jī)交互領(lǐng)域應(yīng)用較廣[7]，具備實(shí)時(shí)性、易用性等特點(diǎn)。同時(shí)Python語言在物聯(lián)網(wǎng)設(shè)備的控制和操作中得到廣泛應(yīng)用，具有靈活性、高效性等優(yōu)點(diǎn)。
因此，通過對硬件軟件結(jié)合、樹莓派、人臉識別、微信小程序、Python語言等進(jìn)行綜合運(yùn)用，該項(xiàng)目在未來有望進(jìn)一步拓展其應(yīng)用場景和發(fā)展空間[10]。
</body>
我們使用p標(biāo)簽改進(jìn)：
<body>
<p>本項(xiàng)目基于樹莓派構(gòu)建了一個(gè)實(shí)驗(yàn)設(shè)備管理系統(tǒng)，通過人臉識別驗(yàn)證用戶身份并與用戶進(jìn)行人機(jī)交互，以實(shí)現(xiàn)實(shí)驗(yàn)設(shè)備的安全和高效利用[1]。</p>
<p>隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，物聯(lián)網(wǎng)設(shè)備已經(jīng)從傳統(tǒng)的計(jì)算機(jī)和移動(dòng)設(shè)備向各種物理設(shè)備拓展，包括汽車、家居、城市基礎(chǔ)設(shè)施等等[2]。此外，人機(jī)交互作為一項(xiàng)核心技術(shù)也不斷得到重視。人與智能設(shè)備之間的自然語音或者手勢交互方式對于改善人們?nèi)粘Ｉ钅酥凉I(yè)生產(chǎn)、醫(yī)療衛(wèi)生等領(lǐng)域都有較大幫助。因此，本項(xiàng)目具有廣闊應(yīng)用前景。</p>
<p>在硬件方面，樹莓派被廣泛應(yīng)用于各種物聯(lián)網(wǎng)設(shè)備和嵌入式系統(tǒng)中，由其提供強(qiáng)大的計(jì)算和控制能力，成為受歡迎的單板計(jì)算機(jī)之一。[4]同時(shí)人臉識別技術(shù)也不斷得到提高，深度學(xué)習(xí)技術(shù)尤其是卷積神經(jīng)網(wǎng)絡(luò)已成為主流研究思路。</p>
<p>在軟件方面，微信小程序在人機(jī)交互領(lǐng)域應(yīng)用較廣[7]，具備實(shí)時(shí)性、易用性等特點(diǎn)。同時(shí)Python語言在物聯(lián)網(wǎng)設(shè)備的控制和操作中得到廣泛應(yīng)用，具有靈活性、高效性等優(yōu)點(diǎn)。</p>
<p>因此，通過對硬件軟件結(jié)合、樹莓派、人臉識別、微信小程序、Python語言等進(jìn)行綜合運(yùn)用，該項(xiàng)目在未來有望進(jìn)一步拓展其應(yīng)用場景和發(fā)展空間[10]。</p>
</body>
3.4 換行標(biāo)簽: br
br 是 break 的縮寫. 表示換行
<body>
hello<br>world
</body>
3.5 格式化標(biāo)簽
??加粗: strong 標(biāo)簽 和 b 標(biāo)簽
??傾斜: em 標(biāo)簽 和 i 標(biāo)簽
??刪除線: del 標(biāo)簽 和 s 標(biāo)簽
??下劃線: ins 標(biāo)簽 和 u 標(biāo)簽
（推薦使用簡潔的）
<b>hello world</b> <br>
<i>hello world</i> <br>
<s>hello world</s> <br>
<u>hello world</u>
3.6 圖片標(biāo)簽: img
img 標(biāo)簽必須帶有 src 屬性. 表示圖片的路徑
img 標(biāo)簽的其他屬性：
??alt: 替換文本. 當(dāng)文本不能正確顯示的時(shí)候, 會顯示一個(gè)替換的文字.
??title: 提示文本. 鼠標(biāo)放到圖片上, 就會有提示.
??width/height: 控制寬度高度. 高度和寬度一般改一個(gè)就行, 另外一個(gè)會等比例縮放. 否則就會圖片失衡.
??border: 邊框, 參數(shù)是寬度的像素. 但是一般使用 CSS 來設(shè)定
<img src = "goat.png" alt="山羊吐舌圖" title="山羊吐舌" width="200px" height="200px">
圖片丟失則顯示：
上述我們使用的圖片地址為相對地址
圖片地址分類如下：
??網(wǎng)絡(luò)地址
??絕對地址
??相對地址
（后兩個(gè)為本地地址）
3.7 超鏈接標(biāo)簽: a
<a href="https://blog.csdn.net/m0_68101404?spm=1000.2115.3001.5343" target="_blank">我的博客主頁</a>
??href: 必須具備, 表示點(diǎn)擊后會跳轉(zhuǎn)到哪個(gè)頁面.
??target: 打開方式. 默認(rèn)是 _self. 如果是 _blank 則用新的標(biāo)簽頁打開
打開后：
點(diǎn)擊后就打開了對應(yīng)鏈接：
上面介紹的是外部鏈接，接下來介紹其他類型：
??內(nèi)部鏈接: 網(wǎng)站內(nèi)部頁面之間的鏈接. 寫相對路徑即可.
<a href="HTML_Test2.html" target="_self">我的Test2網(wǎng)頁</a>
??空鏈接: 使用 # 在 href 中占位.
<a target="#">空鏈接</a>
??下載鏈接: href 對應(yīng)的路徑是一個(gè)文件
<a href="goat.png"target="_self">下載山羊吐舌圖</a>
??網(wǎng)頁元素鏈接: 可以給圖片等任何元素添加鏈接(把元素放到 a 標(biāo)簽中)
<a href="http://www.sogou.com" target="_blank">
<img src="goat.png"alt=""> <!--點(diǎn)擊圖片跳轉(zhuǎn)鏈接-->
</a>
??錨點(diǎn)鏈接: 可以快速定位到頁面中的某個(gè)位置
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集劇情 <br> ...
</p>
<p id="two">
第二集劇情 <br>...
</p>
<p id="three">
第三集劇情 <br> ...
</p>
3.8 表格標(biāo)簽
3.8.1 基本使用
??table 標(biāo)簽: 表示整個(gè)表格
??tr: 表示表格的一行
??td: 表示一個(gè)單元格
??th: 表示表頭單元格. 會居中加粗
??thead: 表格的頭部區(qū)域(注意和 th 區(qū)分, 范圍是比 th 要大的)
??tbody: 表格得到主體區(qū)域
table 包含 tr , tr 包含 td 或者 th
<body>
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="500">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td>男</td>
<td>18</td>
</tr>
</table>
</body>
表格標(biāo)簽有一些屬性, 可以用于設(shè)置大小邊框等. 但是一般使用 CSS 方式來設(shè)置
這些屬性都要放到 table 標(biāo)簽中
??align 是表格相對于周圍元素的對齊方式. align=“center” (不是內(nèi)部元素的對齊方式)
??border 表示邊框. 1 表示有邊框(數(shù)字越大, 邊框越粗), “” 表示沒邊框
??cellpadding: 內(nèi)容距離邊框的距離, 默認(rèn) 1 像素
??cellspacing: 單元格之間的距離. 默認(rèn)為 2 像素
??width / height: 設(shè)置尺寸
注意, 這幾個(gè)屬性, vscode 都提示不出來
3.8.2 合并單元格
基本步驟：
1. 先確定跨行還是跨列
2. 找好目標(biāo)單元格(跨列合并, 左側(cè)是目標(biāo)單元格; 跨行合并, 上方是目標(biāo)單元格)
3. 刪除的多余的單元格
??跨行合并: rowspan="n"
<body>
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="500">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td rowspan="2">男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
</tr>
</table>
</body>
??跨列合并: colspan="n"
<body>
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="500">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三</td>
<td colspan="2">男</td>
</tr>
</table>
</body>
3.9 列表標(biāo)簽
3.9.1 無序列表（unorderedList）
使用：<ul> <li>
<body>
<ul>
<li>唐僧</li>
<li>八戒</li>
<li>沙師弟</li>
</ul>
</body>
3.9.2 有序列表（orderedList）
使用：<ol> <li>
<body>
<ol>
<li>唐僧</li>
<li>八戒</li>
<li>沙師弟</li>
</ol>
</body>
3.9.3 自定義列表
<body>
<dl>
<dt>標(biāo)題</dt>
<dd>第一點(diǎn)</dd>
<dd>第二點(diǎn)</dd>
<dd>第三點(diǎn)</dd>
</dl>
</body>
3.10 表單標(biāo)簽
表單是讓用戶輸入信息的重要途徑
分成兩個(gè)部分:
??表單域: 包含表單元素的區(qū)域. 重點(diǎn)是 form 標(biāo)簽.
??表單控件: 輸入框, 提交按鈕等. 重點(diǎn)是 input 標(biāo)簽
下面介紹具體的標(biāo)簽：
3.10.1 from標(biāo)簽
描述了要把數(shù)據(jù)按照什么方式, 提交到哪個(gè)頁面中
<from action="HTML_Test1.html">
....
</from>
3.10.2 input 標(biāo)簽
各種輸入控件, 單行文本框, 按鈕, 單選框, 復(fù)選框.
??type(必須有), 取值種類很多多, button, checkbox, text, file, image, password, radio等
??name: 給 input 起了個(gè)名字. 尤其是對于 單選按鈕, 具有相同的 name 才能多選一
??value: input 中的默認(rèn)值
??checked: 默認(rèn)被選中 (用于單選按鈕和多選按鈕)
??maxlength: 設(shè)定最大長度
下面逐個(gè)演示：
（1）文本框
<input type="text">
（2）密碼框
密碼：<input type="password">
（3）單選框
注意: 單選框之間必須具備相同的 name 屬性, 才能實(shí)現(xiàn) 多選一 效果
性別：<input type="radio" name="sex">男 <input type="radio" name="sex">女
（4）復(fù)選框
愛好：<input type="checkbox">吃飯<input type="checkbox">睡覺<input type="checkbox">打游戲
（5）普通按鈕
<input type="button" value="這是個(gè)按鈕">
（6）提交按鈕
<from action="HTML_Test1.html">
<input type="text" name="username">
<input type="submit" value="提交按鈕">
</from>
（7）清空按鈕
<from action="HTML_Test1.html">
<input type="text" name="username">
<input type="submit" value="提交按鈕">
<input type="reset" value="清空按鈕">
</from>
（8）選擇文件
<input type="file">
3.10.3 label 標(biāo)簽
for 屬性: 指定當(dāng)前 label 和哪個(gè)相同 id 的 input 標(biāo)簽對應(yīng). (此時(shí)點(diǎn)擊才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">
3.10.4 select 標(biāo)簽
option 中定義 selected=“selected” 表示默認(rèn)選中
<select>
<option selected="selected">--請選擇年份--</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
3.10.5 textarea 標(biāo)簽
<textarea rows="3" cols="50">11 1</textarea>
3.10.6 無語義標(biāo)簽：div & span
文章來源：http://www.zghlxwxcb.cn/news/detail-714810.html
<div>
<span>西游記</span>
<span>西游記</span>
<span>西游記</span>
<span>西游記</span>
</div>
<div>
<span>水滸傳</span>
<span>水滸傳</span>
<span>水滸傳</span>
<span>水滸傳</span>
</div>
文章來源地址http://www.zghlxwxcb.cn/news/detail-714810.html
到了這里，關(guān)于【HTML】HTML基礎(chǔ)知識掃盲的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
