HTML零基礎，快速學習／復習
首先來熟悉一下html的基本結構
代碼實例 <--可以直接打開
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
這里是文檔的主體<br />
這里是文檔的主體<br />
這里是文檔的主體<br />
這里是文檔的主體<br />
這里是文檔的主體
<!--這是一行注釋，注釋不會在瀏覽器中顯示！-->
</body>
</html>
HTML規范
<!DOCTYPE HTML>
寫在<html>前，定義文檔類型，大小寫均可。
html標簽
<html></html>
其作用是告知瀏覽器其自身是一個 HTML 文檔。
Head標簽
<head></head>
其作用是定義關於文檔的信息。其中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息 、
頁面編碼
<meta charset= "utf-8" />
常用的編碼格式有utf-8和gb2312（中文）, 在<head></head>標簽內定義
其目的是告知瀏覽器此頁面屬於什么字符編碼格式
Title標簽
<title></title>
通常放在瀏覽器窗口的標題欄或狀態欄上
Body標簽：
<body></body>
定義文檔的主體，我們所敲得代碼主要在這里面
注釋
<!-- 這里填注釋內容 -->
換行
<br />
用於換行
特殊字符
| 符號代碼 | 具體符號 |
|---|---|
> |
大於號 (>) |
< |
小於號 (<) |
" |
引號 (") |
“ |
左引號 (") |
” |
右引號 (") |
® |
注冊商標(®) |
™ |
注冊商標(™) |
® |
版權(©) |
& |
and（&） |
— |
破折線（—） |
– |
短破折線（–） |
£ |
英鎊（£） |
€ |
歐元（€） |
¥ |
日元（¥） |
|
占位符，表示1個空格，直接敲空格無論連續敲多少個，都只顯示一個空格，用 敲幾次就有幾個空格 |
代碼實例 <--可以直接打開
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>特殊符號</title>
</head>
<body>
<p>大於號 ></p>
<p>小於號 <</p>
<p>引號 "</p>
<p>左引號 &8220;</p>
<p>右引號 &8221;</p>
<p>版權 ®</p>
<p>注冊商標 &8482;</p>
<p>and &</p>
<p>破折線 —</p>
<p>短破折線 –</p>
<p>英鎊 £</p>
<p>歐元 €</p>
<p>日元 ¥</p>
<p>十個個空格 直接敲得</p>
<p>十個空格 用占位符表示</p>
</body>
</html>
段落標簽
<p></p>
可以利用align來對段落進行左中右對齊。align的值為left, center, right, justify
其中justify是對行進行伸展，這樣每行都可以有相等的長度
代碼實例 <--可以直接打開
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>段落</title>
</head>
<body>
<P>這是一個最基本的段落</p>
<P align="left">這是一個左對齊的段落</p>
<P align="right">這是一個右對齊的段落</p>
<P align="center">這是一個居中的段落</p>
<center><P>這是一個用<center>居中的段落</p></center>
<P align="justify">每行都可以有相等的長度</p>
<!--感覺justify好像沒有什么用，那位大佬可以指點一下-->
</body>
</html>
標題
標題一共有6級，分別為<h1>~<h6>
從一級至六級，字體依次減小
例：
代碼實例 <--可以直接打開
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<!-zhi-->
<p> </p>
</body>
</html>
文本格式
| 代碼 | 含義 |
|---|---|
<strong> |
粗體 |
<em> |
斜體 |
<sup> |
字的上標 |
<sub> |
字的下標 |
例：
代碼實例 <--可以直接打開
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>字體</title>
</head>
<body>
<p>
正常<br/>
<strong>粗體</strong><br/>
<em>斜體</em><br/>
x<sup>2</sup><br/>
x<sub>1</sub>
</p>
</body>
</html>
有序列表
<ul><li></li></ul>
type= disc/circle/square
| 屬性值 | 含義 |
|---|---|
| disc | 實心圓點 |
| circle | 為空心圓 |
| square | 正方形 |
無序列表
<ol><li></li></ol>
Type=1/a/A/i/I
代碼實例 <--這個鏈接的格式沒有正常編譯，應該是因為markdown不兼容，代碼並沒有錯！！！
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>視頻</title>
</head>
<body>
<ul type="circle">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ul>
<ul type="disc">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ul>
<ul type="square">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ul>
<ol type="1">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type="a">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type="A">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type="i">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
<ol type="I">
<li>pubg</li>
<li>Ring of Elysium</li>
<li>Cyberpunk 2077</li>
<li>lol</li>
<li>gta</li>
</ol>
</body>
</html>
超鏈接
超鏈接可以是一個字，一個詞，或者一組詞，一幅圖，通過點擊這些內容來跳轉到指定的界面，當鼠標移動到超鏈接上時，箭頭會變為一只小手
<a href=”URL”>到達指定網址</a>
<a href=”tel:電話號碼”>撥打指定電話</a>
<a href="sms: 電話號碼">發送短信到指定號碼</a>
<a href = "mailto:郵件地址">向指定郵箱發送電子郵件</a>
<a href = "ftp://服務器IP地址或域名">訪問指定服務器</a>
<a href = "telnet://服務器IP地址或域名">訪問指定服務器</a>
代碼實例 <--可以直接打開
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>超鏈接</title>
</head>
<body>
<p>
<a href="https://www.cnblogs.com/yphnb/">歡迎訪問我的博客</a><br/>
<a href="https://www.cnblogs.com/yphnb/" target="_blank">歡迎訪問我的博客</a><br/>
<!-- target="_blank"表示在新的窗口打開這個鏈接-->
<a href="tel:110">報警電話</a><br/>
<a href="sms: 110">發送短信到指定號碼</a><br/>
<!--發信息電腦好像不能用-->
<a href = "mailto:yupengsmail@gmail.com">給我發電子郵件</a><br/>
<a href = "ftp://服務器IP地址或域名">訪問指定服務器</a><br/>
<a href = "telnet://服務器IP地址或域名">訪問指定服務器</a>
</p>
<!-zhi-->
<p> </p>
</body>
</html>
錨點
<a href="#所取名字"> </a> #號不能省略！
<a name="所取名字"> </a>
代碼實例 <--可以直接打開
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>錨點</title>
</head>
<body>
<center>
<p>點擊以下按鈕，直達歌詞目錄</p>
<a href="#maodian0">My Heart Will Go On</a><br />
<!--指向指定位置的錨點-->
<a href="#maodian1">Bohemian Rhapsody</a><br />
<a href="#maodian2">Call Me Maybe</a><br />
<a name="maodian0"><h3>My Heart Will Go On</h3></a>
<!--<a name="maodian0"></a>,這是一個錨點，用於定位-->
<p>Every night in my dreams<br>
I see you<br>
I feel you<br>
That is how I know you go on<br>
Far across the distance<br>
And spaces between us.<br>
You have come to show you go on<br>
Near far,<br>
wherever you are<br>
I believe that the heart does go on<br>
Once more,<br>
you open the door,<br>
And you're here in my heart.<br>
And my heart will go on and on<br>
Love can touch us one time.<br>
And last for a lifetime<br>
And never let go till we're gone,<br>
Love was when I loved you<br>
One true time I hold to.<br>
In my life we'll always go on.<br>
Near far,<br>
wherever you are<br>
I believe that the heart does go on<br>
Once more,<br>
you open the door,<br>
And you're here in my heart,<br>
And my heart will go on and on<br>
You're here,<br>
You're here,<br>
there's nothing I fear.<br>
And I know that my heart will go on<br>
we'll stay forever this way.<br>
You are safe in my heart,<br>
and my heart will go on and on</p>
<p> </p>
<a name="maodian1"><h3>Bohemian Rhapsody </h3></a>
<p>Is this the real life</p>
<p>Is this just fantasy</p>
<p>Caught in a landslide</p>
<p>No escape from reality</p>
<p>Open your eyes, look up to the skies and see</p>
<p>I'm just a poor boy, (oooh, poor boy)</p>
<p>I need no sympathy</p>
<p>Because I'm easy come, easy go</p>
<p>Little high, little low</p>
<p>Anyway the wind blows, doesn't really matter to me</p>
<p>To me</p>
<p>Mama, just killed a man</p>
<p>Put a gun against his head</p>
<p>Pulled my trigger now he's dead</p>
<p>Mama, life had just begun</p>
<p>But now I've gone and thrown it all away</p>
<p>Mama, oooh, ooh, ooh, ooh</p>
<p>Didn't mean to make you cry</p>
<p>If I'm not back again this time tomorrow</p>
<p>Carry on, carry on, as if nothing really matters</p>
<p>Too late, my time has come</p>
<p>Sends shivers down my spine</p>
<p>Body's aching all the time</p>
<p>Goodbye everybody, I've got to go</p>
<p>Gotta leave you all behind and face the truth</p>
<p>Mama, oooh, ooh, ooh, ooh</p>
<p>(Anyway the wind blows)</p>
<p>I don't wanna die</p>
<p>I sometimes wish I'd never been born at all</p>
<p>I see a little silhouetto of a man</p>
<p>Scaramouche, Scaramouche will you do the fandango?</p>
<p>Thunderbolts and lightning</p>
<p>Very, very frightening me</p>
<p>Galileo, galileo</p>
<p>Galileo, galileo</p>
<p>Galileo, figaro</p>
<p>Magnifico-o-o-o-oh</p>
<p>I'm just a poor boy, nobody loves me</p>
<p>He's just a poor boy from a poor family</p>
<p>Spare him his life from this monstrosity</p>
<p>Easy come, easy go, will you let me go</p>
<p>Bismillah! No, we will not let you go, let him go</p>
<p>Bismillah! We will not let you go, let him go</p>
<p>Bismillah! We will not let you go, let me go</p>
<p>Will not let you go, let me go</p>
<p>Never, never, never, never let me go-o-o-o-oh (Never let you go)</p>
<p>No, no, no, no, no, no, no</p>
<p>Oh, mama mia, mama mia</p>
<p>Mama mia let me go</p>
<p>Beelzebub has a devil put aside for me, for me, for me</p>
<p>So you think you can stone me and spit in my eye?</p>
<p>So you think you can love me and leave me to die?</p>
<p>Oh, baby, can't do this to me baby</p>
<p>Just gotta get out, just gotta get right outta here</p>
<p>Ooooh, ooooh, ooooh</p>
<p>Oooh yeah, oooh yeah</p>
<p>Nothing really matters</p>
<p>Anyone can see</p>
<p>Nothing really matters</p>
<p>Nothing really matters to me</p>
<p>Anyway the wind blows</p>
<p>Producers : Roy Thomas Baker / Queen</p>
<p>Lead & Backing Vocals : Freddie Mercury</p>
<p>Piano : Freddie Mercury</p>
<p>Electric Guitar : Brian May</p>
<p>Bass Guitar : John Deacon</p>
<p>Drums, Timpani & Gong : Roger Taylor</p>
<p>Operatic Vocals : Freddie Mercury (Middle Register) / Brian May (Low Register) / Roger Taylor (High Register)</p>
<p>Recorded at Rockfield Studio, Roundhouse, Sarm East Studios, Scorpio Sound, and Wessex Sound Studios</p>
<p> </p>
<a name="maodian2"><h3>Call Me Maybe</h3></a>
<p>I threw a wish in the well,</p>
<p>Don't ask me, I'll never tell</p>
<p>I looked to you as it fell,</p>
<p>and now you're in my way</p>
<p>I trade my soul for a wish,</p>
<p>pennies and dimes for a kiss</p>
<p>I wasn't looking for this,</p>
<p>but now you're in my way</p>
<p>Your stare was holdin', Ripped jeans, skin was showin'</p>
<p>Hot not, wind was blowin'</p>
<p>Where you think you're going, baby?</p>
<p>Hey, I just met you,</p>
<p>and this is crazy,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>It's hard to look right,</p>
<p>at you baaaabeh,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>Hey, I just met you,</p>
<p>and this is crazy,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>And all the other boys,</p>
<p>try to chaaase me,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>You took your time with the call,</p>
<p>I took no time with the fall</p>
<p>You gave me nothing at all,</p>
<p>but still, you're in my way</p>
<p>I beg, and borrow and steal</p>
<p>Have foresight and it's real</p>
<p>I didn't know I would feel it,</p>
<p>but it's in my way</p>
<p>Your stare was holdin', Ripped jeans, skin was showin'</p>
<p>Hot not, wind was blowin'</p>
<p>Where you think you're going, baby?</p>
<p>Hey, I just met you,</p>
<p>and this is crazy,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>It's hard to look right,</p>
<p>at you baaaabeh,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>Hey, I just met you,</p>
<p>and this is crazy,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>And all the other boys,</p>
<p>try to chaaase me,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>Before you came into my life</p>
<p>I missed you so bad</p>
<p>I missed you so bad</p>
<p>I missed you so, so bad</p>
<p>Before you came into my life</p>
<p>I missed you so bad</p>
<p>And you should know that</p>
<p>I missed you so, so bad</p>
<p>It's hard to look right,</p>
<p>at you baaaabeh,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>Hey, I just met you,</p>
<p>and this is crazy,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>And all the other boys,</p>
<p>try to chaaase me,</p>
<p>but here's my number,</p>
<p>so call me, maybe?</p>
<p>Before you came into my life</p>
<p>I missed you so bad</p>
<p>I missed you so bad</p>
<p>I missed you so so bad</p>
<p>Before you came into my life</p>
<p>I missed you so bad</p>
<p>And you should know that</p>
<p>So call me, maybe?</p>
<p> </p>
<p> </p>
</center>
</body>
</html>
相對路徑
| 代碼 | 含義 |
|---|---|
| ./ | 當前html文件所在目錄 |
| ../ | 回到html文件所在目錄的上一層目錄 |
| muluming/ | 進入到html文件所在目錄的同級目錄的muluming |
| ../muluming/ | 進入到html文件所在目錄的上一層的目錄下的muluming |
絕對路徑
C:\Users\yupeng\Desktop
圖像
<img />
<img src="相對路徑/絕對路徑/網址" width="數字" height="數字" alt="備注" />
例：
代碼實例 <--可以直接打開
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>圖片</title>
</head>
<body>
<img src="000.png" width="500" height="500" alt="圖像" /><br/>
<!--需要你的電腦中有這個圖片才能顯示，必須要在與html文件所在路徑相同的文件夾下，也可以修改src的參數來切換文件路徑，src可以為相對路徑，也可以為絕對路徑,也可以直接為網址-->
<!--width,height分別設定圖片的寬和高，修改此項參數可能會導致圖片變形-->
<!--alt規定在圖像在無法顯示時的替代文本。-->
<h3>Ladygaga</h3>
<img src="https://inews.gtimg.com/newsapp_bt/0/13799345350/1000" alt="ladygaga" />
<h3>世界上第二帥的頭像</h3>
<img src="https://pic.cnblogs.com/avatar/2332945/20210908171548.png" width="1000" height="1000" alt="我的頭像" />
</body>
</html>
視頻：
<video src="路徑" autoplay controls loop ></video>
代碼實例 <--本地視頻無法播放，在線視頻自動播放，注意關閉聲音
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>視頻</title>
</head>
<body>
<center>
<h3>本地視頻</h3>
<video src="C:\Users\yupeng\Videos\0.mkv" autoplay controls loop >您的瀏覽器不支持</video>
<!--如果想播放此視頻，需要更改路徑-->
<!--video 與 img 基本一致，也可以定義長和寬-->
<!--autoplay為自動播放，control為控制組件，loop為循環播放-->
<h3>在線視頻</h3>
<video src="https://vdse.bdstatic.com//192d9a98d782d9c74c96f09db9378d93.mp4" autoplay controls loop >您的瀏覽器不支持</video>
<!--autoplay為自動播放，我在測試時chrome不能播放，但是IE可以，具體原因未知-->
</center>
</body>
</html>
圖片進階——熱區的設置
目的：點擊圖像的不同位置，跳轉至不同的界面
原理：坐標（以圖片的右上角為坐標原點，向右為x軸，向下y軸，單位為像素，可以用ps測量）
shape=react/circle/poly/
| 屬性 | 含義 |
|---|---|
| circle | 圓形(需要圓心的橫坐標，縱坐標和圓的半徑) |
| react | 矩形(需要對角頂點的橫坐標，縱坐標) |
| poly | 多邊形(可以有任意多個頂點，依次輸入每個頂點的橫縱坐標即可) |
下面這個是原圖，感興趣可以自己試一下
代碼實例 <--可以直接打開，但是markdown不兼容！
代碼實例 <--github的鏈接，可以正常使用，注意點擊藍色陰影部分的區域
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>圖像進階</title>
</head>
<body>
<img src="https://img2020.cnblogs.com/blog/2332945/202109/2332945-20210909123646021-1112468575.png" width="1920" height="1080" usemap="#Map">
<map name="Map">
<area shape="rect" coords="383,140,572,415" href="https://www.cnblogs.com/yphnb/">
<area shape="circle" coords="906,588,95" href="https://www.cnblogs.com/yphnb/">
<area shape="poly" coords="387,755" href="https://www.cnblogs.com/yphnb/">
<area shape="poly" coords="1291,486,1380,488,1416,541,1412,590,1357,667,1320,665,1261,589,1261,533" href="https://www.cnblogs.com/yphnb/">
<area shape="poly" coords="1339,191,1332,194,1331,200,1335,205,1336,208,1330,211,1325,215,1315,223,1309,243,1302,260,1300,280,1303,284,1302,297,1305,296,1309,285,1313,282,1322,245,1319,278,1313,313,1307,339,1316,344,1315,369,1308,380,1310,385,1316,385,1322,379,1325,376,1335,336,1345,336,1354,360,1354,369,1362,374,1370,378,1376,377,1366,363,1362,347,1371,336,1373,331,1369,289,1376,288,1368,262,1363,246,1365,228,1353,217,1355,210,1355,194,1353,187,1345,185" href="https://www.cnblogs.com/yphnb/">
<area shape="rect" coords="385,445,570,721" href="https://www.cnblogs.com/yphnb/">
<area shape="circle" coords="908,278,94" href="https://www.cnblogs.com/yphnb/">
</map>
</body>
</html>