目錄
一，什么是HTML
二，HTML基本結構
1，HTML的標簽解釋
2，HTML的基本結構
3，HTML的常用標簽
（1）文本控制標簽：
? (2)文本樣式標簽：
? (3)文本格式標簽：
? (4)語意標簽：
? (5)特殊字符：
? (7)影像標簽:
一，什么是HTML
HTML(英文Hyper Text Markup Language的縮寫)是網頁制作的標準語言,中文譯為“超文本標簽語言”，主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述，
網頁：可以看做承載各種網站應用和資訊的容器，所有可視化的內容都會通過網頁展示給用戶，主要由文字、影像和超鏈接（超鏈接為單擊可以跳轉的網頁元素）等元素構成，還可以包含音頻、視頻以及影片等，
（1）靜態網頁：用戶無論何時何地訪問，網頁都會顯示固定的資訊，除非網頁源代碼被重新修改上傳， 靜態網頁更新不方便，但是訪問速度快，
（2）動態網頁：顯示的內容則會隨著用戶操作和時間的不同而變化， 動態網頁可以和服務器資料庫進行實時的資料交換，
（3）常見網頁名詞：
| 名詞 | 名詞釋義 |
| Internet網路 | 就是通常所說的互聯網，是由一些使用公用語言互相通信的計算機連接而成的網路， |
| WWW | WWW（英文World Wide Web的縮寫）中文譯為“萬維網”是Intertnet提供的一種網頁瀏覽服務， |
| URL | URL（英文Uniform Resource Locator的縮寫）中文譯為“統一資源定位符” URL其實就是Web地址，俗稱“網址”， |
| DNS | DNS （英文Domain Name System的縮寫）是域名決議系統， |
| HTTP和HTTPS | HTTP (英文Hypertext transfer protocol的縮寫) 中文譯為超文本傳輸協議，是一種詳細規定了瀏覽器和萬維網服務器之間互相HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，要比HTTP協議安全， 通信的規則， |
| Web | Web通常指互聯網的使用環境，但對于網站制作者來說，它是一系列技術的復合總稱，通常稱之為網頁， |
| W3C組織 | W3C（英文World Wide Web Consortium的縮寫）中文譯為“萬維網聯盟”，萬維網聯盟是國際最著名的標準化組織， |
二，HTML基本結構
（主要講述HTML5,更加兼容，合理，易用）
1，HTML的標簽解釋
（1）什么是標簽：在HTML頁面中，所謂標簽就是放在“< >”符號中表示某個功能的編碼命令，也稱為HTML標簽或HTML元素,統一稱作HTML標簽，
（2）標簽的分類：
雙標簽：也稱體標簽，是指由開始和結束兩個標簽符組成的標簽，<標簽名>內容</標簽名>
單標簽：也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽，< 標簽名 />
HTML標簽的作用原理就是選擇網頁內容，從而進行描述，也就是說需要描述哪個元素，就選擇哪個元素，所以才會有雙標簽的出現，用于定義標簽作用的開始與結束，而單標簽本身就可以描述一個功能，不需要選擇，例如，水平線標簽<hr />,按照雙標簽的語法，它應該寫成“<hr></hr>”，但是水平線標簽不需要選擇，本身就代表一條水平線，此時寫成雙標簽就顯得有點多余，但是又不能沒有結束符號，所以在標簽名稱后面加一個關閉符，即<標簽名 />，
（3）標簽的關系：嵌套關系與并列關系，
2，HTML的基本結構
<!DOCTYPE html> -->表示當前的網頁支持html5標準
<html lang="en"> -->語言為英文
<head>
<meta charset="UTF-8"> -->指定頁面的編碼格式(字符集)
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -->自適應終端的視窗
<title>Document</title> -->網頁標題
</head>
<body>
</body>
</html><head>標簽：定義HTML檔案的頭部資訊，也稱為頭部標簽，緊跟在<html>標簽之后，主要用來封裝其他位于檔案頭部的標簽，
<body>標簽：定義HTML檔案所要顯示的內容，也稱為主體標簽，瀏覽器中顯示的所有文本、影像、音頻和視頻等資訊都必須位于<body>標簽內，
<meta />標簽：用于定義頁面的元資訊，可重復出現在<head>頭部標簽中，
<title>標簽：用于定義HTML頁面的標題，即給網頁取一個名字，必須位于<head>標簽之內，且一個HTML檔案只能含有一對<title></title>標簽，<title></title>之間的內容將顯示在瀏覽器視窗的標題欄中，
3，HTML的常用標簽
（1）文本控制標簽
A,、標題標簽：HTML提供了6個等級的標題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>標題的重要性依次遞減，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<h1>第一行</h1>
<h2>第二行</h2>
<h3>第三行</h3>
<h4>第四行</h4>
<h5>第五行</h5>
<h6>第六行</h6>
</body>
</html> 
B、段落標簽：在網頁中使用<p>標簽來定義段落，<p>標簽是HTML檔案中最常見的標簽，默認情況下，文本在一個段落中會根據瀏覽器視窗的大小自動換行，
<p align="對齊方式">段落文本</p>
未使用<p>標簽前：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<h1>世上無難事只怕有心人</h1>
</body>
</html> 
使用<p>標簽后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<h1>
<p>世上無難事</p>
<p>只怕有心人</p>
</h1>
</body>
</html>
C、水平線標簽：在網頁中常常看到一些水平線將段落與段落之間隔開，使得檔案結構清晰，層次分明，水平線可以通過<hr />標簽來定義，
<hr 屬性="屬性值" />
| 屬性名 | 含義 | 屬性值 |
| align | 設定水平線的對齊方式 | 可選擇left、right、center三種值，默認為center，居中對齊顯示， |
| size | 設定水平線的粗細 | 以像素為單位，默認為2像素， |
| color | 設定水平線的顏色 | 可用顏色名稱、十六進制#RGB、rgb(r,g,b)， |
| width | 設定水平線的寬度 | 可以是確定的像素值，也可以是瀏覽器視窗的百分比，默認為100%， |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<h1>
世上無難事，只怕有心人
<hr align="center" size="3" color="red" width="1000"/>
</h1>
</body>
</html>
D、換行標簽：在網頁中，如果想要將某段文本強制換行顯示，需要使用換行標簽<br />，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<h1>
世上無難事<br/><br/><br/>只怕有心人
</h1>
</body>
</html>
E、顯示文本：<span>內容</span>,不會自動換行，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<h1>
<span>世上無難事，只怕有心人</span>
</h1>
</body>
</html>
(2)文本樣式標簽
用來控制網頁中文本的字體、字號和顏色，
<font face='字體' color='文字顏色' size='字號'></font>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<p>
<font color="blue" face="隸書" size="20">
世上無難事，只怕有心人
</font>
</p>
</body>
</html>
(3)文本格式標簽
A、文字加粗:<b></b> 或 <strong></strong>
B、斜體：<i></i> 或 <em></em>
C、洗掉線：<s></s> 或 <del></del>
D、下劃線：<u></u> 或 <ins></ins>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<font size="20" color="purple" face="隸書">
<p>
<b>世上無難事</b> <strong>只怕有心人</strong>
</p>
<p>
<i>世上無難事</i> <em>只怕有心人</em>
</p>
<p>
<s>世上無難事</s> <del>只怕有心人</del>
</p>
<p>
<u>世上無難事</u> <ins>只怕有心人</ins>
</p>
</font>
</body>
</html>
(4)語意標簽
只表示某種特定的含義
A、mark：主要功能是在文本中高亮顯示某些字符；
B、cite：cite標簽可以創建一個參考，用于對檔案參考參考文獻的說明，一旦在檔案中使用了該標簽，被標注的檔案內容將以斜體的樣式展示在頁面中，以區別于段落中的其他字符，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<font size="20" color="purple" face="隸書">
<p>
世上<mark>無難事</mark>，只怕有心人
</p>
<p>
俱往矣，數風流人物，還看今朝，<cite>--《沁園春·雪》</cite>
</p>
</body>
</html>
(5)特殊字符
A、空格：
B、上標：<sup></sup>
C、下標：<sub></sub>
D、著作權符號: ©
E、注冊商標：®
F、攝氏度：°
G、正負號：±
H、除號：÷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<h1>世上 無難事</h1><br/>
x<sup>2</sup>+y<sup>2</sup>=z<sup>2</sup><br/>
co<sub>2</sub><br/>
©<br/>
®<br/>
30°<br/>
±2<br/>
20÷2=10<br/>
</body>
</html>
(6)影像標簽
A、常見的影像格式：
GIF：GIF最突出的地方就是它支持影片，同時GIF也是一種無損的影像格式，也就是說修改圖片之后，圖片質量幾乎沒有損失，再加上GIF支持透明（全透明或全不透明），因此很適合在互聯網上使用，常用于Logo、小圖示及其他色彩相對單一的影像，
PNG：包括PNG-8和真色彩PNG（PNG-24和PNG-32），相對于GIF，PNG最大的優勢是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持影片，
JPG(JPEG)：JPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的影像，但是JPG是一種有損壓縮的影像格式，這就意味著每修改一次圖片都會造成一些影像資料的丟失，
所以，小圖片考慮GIF或PNG-8，半透明影像考慮PNG-24，類似照片的影像則考慮JPG，
B、影像標簽：
基本語法格式：<img src="影像URL" />，src屬性用于指定影像檔案的路徑和檔案名
路徑：插入影像時需要采用“路徑”的方式來指定影像檔案的位置，通過設定“路徑”來幫助瀏覽器找到影像檔案，
a、絕對路徑：一般是指帶有盤符的路徑，例如“D:\HTML+CSS網頁制作\chapter02\img\logo.gif”，或完整的網路地址，例如“http://www.itcast.cn/images/logo.gif”，
b、相對路徑：不帶有盤符，通常是以HTML網頁檔案為起點，通過層級關系描述目標影像的位置，
實際應用路徑時一般有三種情況：
a、影像檔案和html檔案位于同一檔案夾：只需輸入影像檔案的名稱即可，如<img src=“logo.gif” />，
b、影像檔案位于html檔案的下一級檔案夾：輸入檔案夾名和檔案名，之間用“/”隔開，如<img src="img/img01/logo.gif" />，
c、影像檔案位于html檔案的上一級檔案夾：在檔案名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如<img src="../logo.gif" />，
影像標簽屬性：
| 屬性 | 屬性值 | 描述 |
| src | URL | 影像的路徑 |
| alt | 文本 | 影像不能顯示時的替換文本 |
| title | 文本 | 滑鼠懸停時顯示的內容 |
| width | 像素（XHTML不支持%頁面百分比） | 設定影像的寬度 |
| height | 像素（XHTML不支持%頁面百分比） | 設定影像的高度 |
| border | 數字 | 設定影像邊框的寬度 |
| vspace | 像素 | 設定影像頂部和底部的空白（垂直邊距） |
| hspace | 像素 | 設定影像左側和右側的空白（水平邊距） |
| align | left | 將影像對齊到左邊 |
| right | 將影像對齊到右邊 | |
| top | 將影像的頂端和文本的第一行文字對齊，其他文字居影像下方 | |
| middle | 將影像的水平中線和文本的第一行文字對齊，其他文字居影像下方 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二十一塊石頭</title>
</head>
<body>
<img src="../images/001.png" alt="..圖片加載中" title="cheer" width="700"
height="500" border="2" vspace="20" hspace="20" align="left">
</body>
</html> 
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304498.html
標籤：其他
上一篇：八，熔斷、降級