??????個人簡介：以山河作禮。
??????:Python領(lǐng)域新星創(chuàng)作者，CSDN實力新星認證，阿里云社區(qū)專家博主
????:Web全棧開發(fā)專欄：《Web全棧開發(fā)》免費專欄，歡迎閱讀！
（一）HTML基礎(chǔ)
1.1瀏覽器發(fā)展史
瀏覽器的主要功能就是向服務(wù)器發(fā)出請求，在瀏覽器窗口中展示HTML文檔、PDF、圖片、視頻等網(wǎng)絡(luò)內(nèi)容。這些網(wǎng)絡(luò)資源的位置由用戶使用
URI（統(tǒng)一資源標示符）來指定指定。
或許在大多數(shù)人眼中，瀏覽器是這樣的：
一個展示前端，一個未知的中間層連接著網(wǎng)絡(luò)世界
甚至，網(wǎng)絡(luò)世界也可以省略：一臺顯示器，一個神秘的幕后黑盒。
1.2瀏覽器的誕生和發(fā)展
瀏覽器誕生于上個世紀八九十年代。
下圖展示的是幾款瀏覽器的圖標：
-
同學們可能想知道 Web 瀏覽器到底是什么，簡而言之，它是一個計算機程序（軟件）。
-
當我們在瀏覽器中輸入內(nèi)容（URL）時，實際上是在輸入地址，瀏覽器將使用該地址來獲取我們想要查看的信息。
-
瀏覽器的另一個關(guān)鍵功能是以易于理解的方式向您解釋和呈現(xiàn)計算機代碼，這個過程叫做渲染。
-
1990年：Timothy John Berners-Lee 設(shè)計并構(gòu)建了第一個瀏覽器（WorldWideWeb），后來改名為Nexus；
-
1993年：NCSA(美國國家超級計算應(yīng)用中心)中Mosaic項目的負責人Marc Andreessen辭職并建立了網(wǎng)景通訊公司；
-
1995年：微軟推出IE1.0瀏覽器；
-
1998年：網(wǎng)景瀏覽器與微軟的IE瀏覽器競爭失利后，網(wǎng)景公司成立了Mozilla 基金會組織，并開源其瀏覽器代碼； 同年KHTML誕生；
-
2001年：蘋果將把WebKit作為KHTML的一個分支開始研發(fā)；
-
2002年：蘋果采納了KHTML，作為Safari的瀏覽器內(nèi)核；
-
2003年：蘋果發(fā)布Safari瀏覽器；
-
2004年：Mozilla Firebird改稱Mozilla Firefox，簡稱Firefox；
-
2005年：蘋果宣布將WebKit完全開源；
-
2008年：谷歌把WebKit為內(nèi)核，開始了Chromium項目的研發(fā)；
-
2013年：谷歌宣布與蘋果的WebKit分道揚鑣，在Chromium項目的基礎(chǔ)上研發(fā)Blink內(nèi)核 ；
-
2015年：win10發(fā)布，并將Edge作為內(nèi)置瀏覽器；
（二） 什么是網(wǎng)頁
2.1 網(wǎng)站是什么？
網(wǎng)站是由一個一個網(wǎng)頁構(gòu)成的，要想理解網(wǎng)站是什么，首先要理解網(wǎng)頁是什么。
網(wǎng)頁其實就是放在服務(wù)器上的一個文件，當我們?yōu)g覽網(wǎng)頁時，這個文件會被下載到我們本地的電腦，然后再由瀏覽器解析，渲染出各種漂亮的界面，比如表格、圖片、標題、列表等。
- 網(wǎng)頁文件的后綴有很多種，比如
.html、.php、.jsp、.asp等 但不管網(wǎng)頁的后綴是什么，它的本質(zhì)都是一樣的，就是由
HTML 代碼構(gòu)成的純文本文件。
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>這是網(wǎng)頁標題</title>
</head>
<body>
<p>這是一段文本</p>
<a href="http://c.biancheng.net/">這個一個超鏈接</a>
<ul>
<li>條目1</li>
<li>條目2</li>
<li>條目3</li>
</ul>
</body>
</html>
這就是 HTML 代碼！我們可以看到很多由<>包圍的特殊標記，這叫做 HTML 標簽（Tag），瀏覽器通過識別這些 HTML 標簽來渲染出各種界面和效果。
2.2 什么是網(wǎng)站
一個網(wǎng)站由很多網(wǎng)頁組成，可以將多個網(wǎng)頁放在一個文件夾中。
可以認為，網(wǎng)站就是一個綁定了域名的文件夾，該文件夾中可以包含子文件夾以及各種各樣的文件，這些文件都可以通過域名來訪問。
當然，你也可以不綁定域名，只要在服務(wù)器上設(shè)置某個文件夾提供 Web 服務(wù)，用戶也可以通過 IP 地址來訪問。
互聯(lián)網(wǎng)上的所有服務(wù)器都是通過 IP 地址來定位的，域名只是 IP 地址的一種助記符，幫助用戶記住網(wǎng)站的鏈接以及品牌。使用域名訪問網(wǎng)站時，瀏覽器會先找到域名對應(yīng)的 IP 地址，然后再通過 IP 地址請求服務(wù)器上的文件；這個過程叫做域名解析，是通過 DNS 服務(wù)器來完成的。
網(wǎng)站的作用是把計算機上的數(shù)據(jù)（文章、博客、圖片、視頻等）分享出去，讓別人也能獲取到有用的信息；同時，別人也能發(fā)布自己的數(shù)據(jù)（發(fā)布文章、留言、上傳視頻等），讓網(wǎng)站的內(nèi)容更加豐富。網(wǎng)站和用戶之間是一個相互促進的關(guān)系，網(wǎng)站用戶越多，積累的數(shù)據(jù)也就越多，然后就會吸引更多用戶繼續(xù)分享數(shù)據(jù)，這是一個良性循環(huán)，是一個健康的生態(tài)。
網(wǎng)站是互聯(lián)網(wǎng)的基石，它讓用戶獲取信息，也讓用戶分享信息，所以現(xiàn)在的互聯(lián)網(wǎng)才能豐富多彩。
2.3 網(wǎng)站服務(wù)器
我們都知道網(wǎng)站放在服務(wù)器上，服務(wù)器其實就是一臺計算機，它和我們平時使用的筆記本、臺式機并沒有什么區(qū)別，都由主板、CPU、內(nèi)存、風扇等部件構(gòu)成。不過，服務(wù)器一般是不帶顯示器、鍵盤、音響等外設(shè)的（當然它也支持這些外設(shè)），因為服務(wù)器的唯一用途就是運行網(wǎng)站，沒有其它作用，所以用家庭臺式機的主機箱來類比服務(wù)器更加恰當。
服務(wù)器一般放在專業(yè)的機房中，這些機房溫度恒定、網(wǎng)絡(luò)暢通、有備用電源、有容災備份，能夠保證服務(wù)器 7×24 小時不間斷運行。
另外，為了讓服務(wù)器能夠放入機柜中，避免占用太多空間，服務(wù)器一般看起來很薄，是扁平的，這就是人們常說的“刀片”。
2.4 總結(jié)
網(wǎng)站可以認為是放在服務(wù)器上的一個文件夾，它包含了很多網(wǎng)頁文件以及很多子文件夾。用戶訪問網(wǎng)站就是讀取文件的內(nèi)容，用戶分享數(shù)據(jù)就是修改文件的內(nèi)容，或者刪除現(xiàn)有的文件，或者創(chuàng)建一個新的文件。
（三）HTML基礎(chǔ)
3.1 什么是HTML
HTML是用來描述網(wǎng)頁的一種語言。
- HTML指的是超文本標記語言（Hyper Text Markup Language）
- HTML不是一種編程語言，而是一種標記語言（markup language）
- 標記語言是一套標記標簽（markup tag）
- HTML使用標記標簽來描述網(wǎng)頁
3.2 HTML標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
- HTML標簽是由尖括號包圍的關(guān)鍵詞，比如
<html> - HTML標簽通常是成對出現(xiàn)的，比如
<b>和</b> - 標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
- 開始和結(jié)束標簽也被稱為開發(fā)標簽和閉合標簽
3.3 實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落</p>
</body>
</html>
例子解釋：
-
<html>與</html>之間的文本描述網(wǎng)頁 -
<body></body>之間的文本時可見的頁面內(nèi)容 <h1>與</h1>之間的文本被顯示為標題<p>之間的文本被顯示為段落</p>
3.4 HTML常用標簽
3.4.1 標題標簽（h1-h6）
<h1>一級標題</h1><h2>一級標題</h2><h3>一級標題</h3><h4>一級標題</h4><h5>一級標題</h5><h6>一級標題</h6>
3.4.2 段落標簽（p）
<p>第一個段落</p><p>第二個段落</p>
主要用于將一段內(nèi)容裹起來，便于后期的統(tǒng)一設(shè)置
p標簽本身沒有效果，標簽內(nèi)的內(nèi)容與標簽外的內(nèi)容空一行（自動換行）
3.4.3 換行標簽（br）
<br/>
此標簽屬于單標簽
3.4.4 水平線標簽（hr）
<hr/>
此標簽屬于單標簽
3.4.5 圖片標簽（img）
<img src='圖片地址'/>
3.4.6 超鏈接標簽（a）
<a herf='xxx.html'>我的第一個超鏈接</a>
超鏈接：使用超鏈接可以訪問另一個頁面 # web項目 音樂網(wǎng)站
3.4.7 列表標簽
-
有序列表
<ol> <li>登錄</li> <li>注冊</li> <li>退出</li> </ol> -
無序列表
<ul> <li>登錄</li> <li>注冊</li> <li>退出</li> </ul>
<li>表示列表項
3.4.8 文本格式標簽
-
<strong></strong>加粗 -
<em></em>傾斜 -
<del></del>刪除線 -
<ins</ins>下劃線
在網(wǎng)頁中，有時需要為文字設(shè)置粗體、斜體或者下劃線效果，這時就需要用到HTML中的文本格式化標簽，使文字以特殊的方式顯示。
3.4.9 表格（table）
<table>
<tr> <!--表格第一行-->
<td></td> <!--表格第一行第一個空格-->
<td></td>
……
</tr>
<tr> <!--表格第二行-->
……
</tr>
</table>
<table>用于定義一個表格
- 合并單元格（難點）
- 跨行合并：
rowspan='個數(shù)' - 跨列合并：
colspan='個數(shù)'
- 跨行合并：
3.4.10 表單
一般用于搜集用戶的信息。
在HTML中，一個完整的表單通常由表單控件、提示信息、表單域3個部分組成。
- 表單域：相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器。
- 表單控件：表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等
- 提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
3.4.11表單域
-
是一個包含表單元素的區(qū)域
-
<form></form>標簽用于定義表單域，會把范圍內(nèi)的表單元素信息提交給服務(wù)器屬性 屬性值 作用 action url地址 用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址 method get/post 用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post name 名稱 用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單域
3.4.12表單控件
-
input：輸入表單元素
-
type屬性設(shè)置不同的類型（文本、單選、復選、按鈕等）
-
type屬性的屬性值及描述如下：
-
除 type 屬性外，
<input>標簽還有很多其他很多屬性，其常用屬性如下：
-
-
select：下拉列表單元素
-
<select>中至少包含一對<option> - 在
<select>中定義selected='selected'時為默認選項
-
-
textarea：多行文本域元素
- cols=“每行中的字符數(shù)”
- rows=“顯示的行數(shù)”
- 以上兩個操作實際開發(fā)中用的很少
-
表單元素總結(jié)
- 表單元素我們學了三大組
- input輸入表單元素
- select下拉表單元素
- textarea多行文本域表單元素
- 表單元素我們學了三大組
3.4.13特殊字符
實戰(zhàn)演示
實現(xiàn)如下樣式的表單：
HTML源碼：文章來源：http://www.zghlxwxcb.cn/news/detail-454027.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<!-- 用戶名稱-->
用戶名:<input name="user" type="text">
<br>
<br> <!-- 用戶密碼-->
<label>密 碼:
<input type="password" name="password">
</label>
<br>
<br> <!-- 年齡-->
年 齡:<input name="age" type="text">
<br>
<br> <!-- 用戶性別-->
性 別:
 <label>男<input type="radio" name="gender" value="male"></label>
 <label>女<input type="radio" name="gender" value="female"></label>
<br>
<br> <!-- 用戶技能，可以單選也可以多選-->
技 能:
<label>Python<input type="checkbox" name="skills" value="python"></label>
<label>C++<input type="checkbox" name="skills" value="c++"></label>
<label>Java<input type="checkbox" name="skills" value="java"></label>
<label>C<input type="checkbox" name="skills" value="C"></label>
<label>php<input type="checkbox" name="skills" value="php<"></label>
<br>
<br>
城 市: <!-- 用戶所在城市，單選-->
<select name="city">
<option value="">請選擇</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">廣州</option>
<option value="shenzhen">深圳</option>
</select>
<label>
<br><br>
</label>
自我介紹：
<textarea name="introduction" rows="6"></textarea>
</label>
<br><br>
<!-- 對輸入數(shù)據(jù)進行重置 -->
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
</style>
</body>
</html>
運行結(jié)果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-454027.html
到了這里，關(guān)于〖Web全棧開發(fā)④〗— HTML基礎(chǔ)詳講(超詳細)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)26（HTML5、CSS3、JavaScript ）JavaScript基礎(chǔ)——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
