分享一個認(rèn)知 —— 現(xiàn)代社會需要的是知識檢索的能力沟启，而不是知識儲備的能力。
w3school https://www.w3school.com.cn/h.asp
菜鳥教程 https://www.runoob.com/html/html-tutorial.html
mdn https://developer.mozilla.org/zh-CN/
百度 https://www.baidu.com/
微軟的搜索引擎必應(yīng) https://cn.bing.com/
1.HTML骨架
<HTML> // 所有標(biāo)簽的一個根節(jié)點(diǎn) 最大的一個標(biāo)簽
<head> // 文檔的頭部 主要是給搜索引擎看的
<title>骨架格式</title> // 文檔標(biāo)題 頁面頂部的標(biāo)題
</head>
<body> // 文檔的所有內(nèi)容 內(nèi)容是給用戶看的
hello world
</body>
<HTML>
2.HTML語法規(guī)范
HTML 文檔的的后綴名必須是 .html 或 .htm 法梯，瀏覽器的作用是讀取 HTML 文檔勾缭，并以網(wǎng)頁的形式顯示出它們。此時溉旋，用瀏覽器打開這個網(wǎng)頁，我們就可以預(yù)覽我們寫的第一個 HTML 文件了嫉髓。
2.1 基本語法概括
- HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞观腊，例如 <html>邑闲。
- HTML 標(biāo)簽通常是成對出現(xiàn)的，例如 <html> 和 </html> 梧油，我們稱為雙標(biāo)簽苫耸。標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽儡陨。
- 有些特殊的標(biāo)簽必須是單個標(biāo)簽（極少情況）褪子，例如 <br />，我們稱為單標(biāo)簽骗村。
2.2 標(biāo)簽關(guān)系
雙標(biāo)簽關(guān)系可以分為兩類：包含關(guān)系(父子關(guān)系)和并列關(guān)系(兄弟關(guān)系)嫌褪。
3.骨架標(biāo)簽新增代碼
3.1 文檔類型聲明標(biāo)簽
<!DOCTYPE> 文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網(wǎng)頁胚股。
<!DOCTYPE html>
注意:
- <!DOCTYPE> 聲明位于文檔中的最前面的位置笼痛，處于 <html> 標(biāo)簽之前。
- <!DOCTYPE>不是一個 HTML 標(biāo)簽琅拌，它就是文檔類型聲明標(biāo)簽缨伊。
3.2 lang 語言種類
用來定義當(dāng)前文檔顯示的語言。
- en定義語言為英語(最好默認(rèn)不修改)
- zh-CN定義語言為中文
3.3 字符集
在<head>標(biāo)簽內(nèi)进宝，可以通過<meta> 標(biāo)簽的 charset 屬性來規(guī)定 HTML 文檔應(yīng)該使用哪種字符編碼倘核。
<meta charset=" UTF-8" />
charset 常用的值有：GB2312 、BIG5 即彪、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼活尊，基本包含了全世界所有國家需要用到的字符.
總結(jié)
- 以上三個代碼 vscode 自動生成,基本不需要我們重寫.
- <!DOCTYPE html> 文檔類型聲明標(biāo)簽,告訴瀏覽器這個頁面采取html5版本來顯示頁面.
- <html lang=“en”> 告訴瀏覽器或者搜索引擎這是一個英文網(wǎng)站. 本頁面采取英文來顯示.
- <meta charset=“ UTF-8” /> 必須寫. 采取 UTF-8來保存文字. 如果不寫就會亂碼.
4.HTML常用標(biāo)簽
4.1 標(biāo)題標(biāo)簽h
特點(diǎn)：
- 加了標(biāo)題的文字會變的加粗隶校，序號越大字號越小。
- 一個標(biāo)題獨(dú)占一行蛹锰。
- 只有1~6級標(biāo)題,五級和六級標(biāo)題小于正常字號16px的大小深胳。
<body>
<h1>一級標(biāo)題<h1>
<h2>二級標(biāo)題<h2>
<h3>三級標(biāo)題<h3>
<h4>四級標(biāo)題<h4>
<h5>五級標(biāo)題<h5>
<h6>六級標(biāo)題<h6>
<body>
4.2 段落和換行標(biāo)簽
在 HTML 中，一個段落中的文字會從左到右依次排列铜犬，直到瀏覽器窗口的右端舞终，然后才自動換行。如果希望某段文本強(qiáng)制換行顯示癣猾，就需要使用換行標(biāo)簽 <br />敛劝。
<body>
<p>段落內(nèi)容<p>
<br>
<body>
4.3 文本格式化標(biāo)簽
在網(wǎng)頁中，有時需要為文字設(shè)置粗體纷宇、斜體 或下劃線等效果夸盟，這時就需要用到 HTML 中的文本格式化標(biāo)簽，使文字突出重要性像捶。重點(diǎn)記住加粗和 傾斜上陕。
4.4 <div> 和<span>標(biāo)簽
<div> 和 <span> 是沒有語義的桩砰，它們就是一個盒子，用來裝內(nèi)容的释簿。
特點(diǎn)：
- <div> 標(biāo)簽用來布局亚隅，但是現(xiàn)在一行只能放一個<div>。 大盒子
- <span> 標(biāo)簽用來布局庶溶，一行上可以多個 <span>煮纵。小盒子
<body>
<div> 這是div盒子 </div>
<span> 這是span盒子 </span>
</body>
4.5 圖像標(biāo)簽和路徑
在 HTML 標(biāo)簽中，<img> 標(biāo)簽用于定義 HTML 頁面中的圖像渐尿。src 是<img>標(biāo)簽的必須屬性醉途，它用于指定圖像文件的路徑和文件名。
<img src="圖像URL" />
4.5.1 圖像標(biāo)簽的其他屬性:
src(圖像路徑) :必須屬性
alt(文本):替換文本.圖像不能顯示時出現(xiàn)的文字.
title(文本):提示文本.鼠標(biāo)放在圖像上,顯示的文字.
圖像標(biāo)簽屬性注意點(diǎn)：
- 圖像標(biāo)簽可以擁有多個屬性砖茸，必須寫在標(biāo)簽名的后面隘擎。
- 屬性之間不分先后順序，標(biāo)簽名與屬性凉夯、屬性與屬性之間均以空格分開货葬。
- 屬性采取鍵值對的格式，即 key=“value" 的格式劲够，屬性 =“屬性值”震桶。
4.5.2 路徑可以分為 : 相對路徑和絕對路徑
相對路徑：以引用文件所在位置為參考基礎(chǔ)，而建立出的目錄路徑征绎。
絕對路徑:通常用于寫官網(wǎng)網(wǎng)址的跳轉(zhuǎn)
4.6超鏈接標(biāo)簽
在 HTML 標(biāo)簽中蹲姐，<a> 標(biāo)簽用于定義超鏈接，作用是從一個頁面鏈接到另一個頁面人柿。
鏈接語法格式
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式"> 文本或圖像 </a>
兩個屬性的作用:
鏈接分類：
- 外部鏈接: 例如 < a href="http:// www.baidu.com "> 百度</a >柴墩。
- 內(nèi)部鏈接:網(wǎng)站內(nèi)部頁面之間的相互鏈接. 直接鏈接內(nèi)部頁面名稱即可，例如 < a href="index.html"> 首頁 </a >凫岖。
- 空鏈接: 如果當(dāng)時沒有確定鏈接目標(biāo)時江咳，< a href="#"> 首頁 </a > 。
- 下載鏈接: 如果 href 里面地址是一個文件或者壓縮包哥放，會下載這個文件歼指。
- 網(wǎng)頁元素鏈接: 在網(wǎng)頁中的各種網(wǎng)頁元素，如文本甥雕、圖像踩身、表格、音頻社露、視頻等都可以添加超鏈接.
- 錨點(diǎn)鏈接: 點(diǎn)我們點(diǎn)擊鏈接,可以快速定位到頁面中的某個位置.
6.1 在鏈接文本的 href 屬性中惰赋，設(shè)置屬性值為 #名字 的形式，如<a href="#two"> 第2集 </a>
6.1找到目標(biāo)位置標(biāo)簽，里面添加一個 id 屬性 = 剛才的名字 赁濒，如：<h3 id="two">第2集介紹</h3>
5. HTML 中的注釋和特殊字符
5.1 注釋
注釋標(biāo)簽里面的內(nèi)容是給程序猿看的, 程序是不會執(zhí)行注釋內(nèi)容的,不執(zhí)行不顯示到頁面中.添加注釋是為了更好地解釋代碼的功能轨奄，便于相關(guān)開發(fā)人員理解和閱讀代碼。
HTML中的注釋以“”結(jié)束拒炎。
<!-- 注釋語句 --> 快捷鍵: ctrl + /
5.2 特殊字符
在 HTML 頁面中挪拟，一些特殊的符號很難或者不方便直接使用，此時我們就可以使用下面的字符來替代击你。
重點(diǎn)記子褡椤：空格 、大于號丁侄、 小于號 這三個惯雳， 其余的使用很少，如果需要回頭查閱即可鸿摇。
6.表格標(biāo)簽
6.1 表格基本語法:
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
- <table> </table> 是用于定義表格的標(biāo)簽石景。
- <tr> </tr> 標(biāo)簽用于定義表格中的行，必須嵌套在 <table> </table>標(biāo)簽中拙吉。
- <td> </td> 用于定義表格中的單元格潮孽，必須嵌套在<tr></tr>標(biāo)簽中。
- 字母 td 指表格數(shù)據(jù)（table data）筷黔，即數(shù)據(jù)單元格的內(nèi)容往史。
6.2 表頭單元格標(biāo)簽:
一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內(nèi)容加粗居中顯示.突出重要性, <th> 標(biāo)簽表示 HTML 表格的表頭部分
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
6.3 表格結(jié)構(gòu)標(biāo)簽:
<thead>標(biāo)簽 表格的頭部區(qū)域佛舱、<tbody>標(biāo)簽 表格的主體區(qū)域,<caption>表格標(biāo)題. 這樣可以更好的分清表格結(jié)構(gòu)椎例。
- <thead></thead>：用于定義表格的頭部。<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽请祖。 一般是位于第一行订歪。
- <tbody></tbody>：用于定義表格的主體，主要用于放數(shù)據(jù)本體 损拢。
- 以上標(biāo)簽都是放在 <table></table> 標(biāo)簽中。
總結(jié)
7.列表標(biāo)簽
根據(jù)使用情景不同撒犀，列表可以分為三大類：無序列表福压、有序列表和自定義列表。
7.1 無序列表
<ul> 標(biāo)簽表示 HTML 頁面中項(xiàng)目的無序列表或舞，一般會以項(xiàng)目符號呈現(xiàn)列表項(xiàng)荆姆，而列表項(xiàng)使用 <li> 標(biāo)簽定義。
特點(diǎn):
- 無序列表的各個列表項(xiàng)之間沒有順序級別之分映凳，是并列的胆筒。
- <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。
- <li> 與 </li> 之間相當(dāng)于一個容器仆救，可以容納所有元素抒和。
- 無序列表會帶有自己的樣式屬性，但在實(shí)際使用時彤蔽，我們會使用 CSS 來設(shè)置摧莽。
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
...
</ul>
7.2 有序列表
在 HTML 標(biāo)簽中，<ol> 標(biāo)簽用于定義有序列表顿痪，列表排序以數(shù)字來顯示镊辕，并且使用 <li> 標(biāo)簽來定義列表項(xiàng)。
特點(diǎn):
- <ol></ol>中只能嵌套<li></li>蚁袭，直接在<ol></ol>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的征懈。
- <li> 與 </li>之間相當(dāng)于一個容器，可以容納所有元素揩悄。
- 有序列表會帶有自己樣式屬性卖哎，但在實(shí)際使用時，我們會使用 CSS 來設(shè)置虏束。
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
...
</ol>
7.3 自定義列表
在 HTML 標(biāo)簽中棉饶，<dl> 標(biāo)簽用于定義描述列表（或定義列表），該標(biāo)簽會與 <dt>（定義項(xiàng)目/名字）和<dd>（描述每一個項(xiàng)目/名字）一起使用镇匀。
特點(diǎn):
- <dl></dl> 里面只能包含 <dt> 和 <dd>照藻。
- <dt> 和 <dd>個數(shù)沒有限制，經(jīng)常是一個<dt> 對應(yīng)多個<dd>汗侵。
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dl>
總結(jié)
8.表單標(biāo)簽
8.1 表單域
在 HTML 標(biāo)簽中幸缕， <form> 標(biāo)簽用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞晰韵。
<form> 會把它范圍內(nèi)的表單元素信息提交給服務(wù)器
<form action=“url地址” method=“提交方式” name=“表單域名稱">
各種表單元素控件
</form>
常用屬性:
- 文/潘曉璐 我一進(jìn)店門纵菌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人休涤，你說我怎么就攤上這事咱圆。” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵序苏，是天一觀的道長手幢。 經(jīng)常有香客問我，道長杠览，這世上最難降的妖魔是什么弯菊？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮踱阿，結(jié)果婚禮上管钳，老公的妹妹穿的比我還像新娘。我一直安慰自己软舌，他們只是感情好才漆，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著佛点，像睡著了一般醇滥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上超营，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼吕座！你這毒婦竟也來了虐译？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對情侶失蹤吴趴，失蹤者是張志新（化名）和其女友劉穎漆诽，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體锣枝，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡厢拭，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了惊橱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蚪腐。...
- 正文 年R本政府宣布泡一，位于F島的核電站，受9級特大地震影響觅廓，放射性物質(zhì)發(fā)生泄漏鼻忠。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒙蒙 一杈绸、第九天 我趴在偏房一處隱蔽的房頂上張望帖蔓。 院中可真熱鬧，春花似錦瞳脓、人聲如沸塑娇。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽埋酬。三九已至，卻和暖如春烧栋，著一層夾襖步出監(jiān)牢的瞬間写妥，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓邑跪，卻偏偏與公主長得像次坡，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子画畅，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 一砸琅、注釋標(biāo)簽 在很多代碼技術(shù)中都可以添加注釋內(nèi)容，我們也可以向 HTML 源代碼添加注釋 HTML注釋語法： vs...
- HTML學(xué)習(xí)(二)常用標(biāo)簽，屬性 參考 HTML 教程| 菜鳥教程HTML 教程 - w3school 在線教程 ...
- <!DOCTYPE html> 文檔類型聲明標(biāo)簽淫僻，告訴瀏覽器這個頁面采取html5版本來顯示頁面诱篷。 告訴瀏覽器，搜...
- Html學(xué)習(xí)總結(jié) 1.什么是html:HyperTextMarket language雳灵，超文本標(biāo)記語言,是用來描述...
