HTML(一、语法规范，二、结构标签，三、开发工具，四、HTML常用标签，五、注释和特殊字符)
文章目錄
- 前言
- 一、html語法規范
- 1. html基本語法規范
- 2. 標簽關系
- 二、基本結構標簽
- 1. 第一個 HTML 網頁
- 2. 基本結構標簽總結：
- 三、開發工具
- 1. vscode工具的創建工程的使用
- 2.插件的安裝：
- 3. vscode 工具生成骨架標簽新增代碼
- 1. doctype 標簽
- 2. lang 語言
- 3. charset 字符集
- 4. 總結
- 四、HTML常用標簽
- 1. 標簽語義
- 2. 標題標簽 h1-h6(重要)
- 3. 段落和換行標簽（重要）
- 1.段落標簽
- 2.換行標簽
- 4. 體育新聞案例
- 5.文本格式化標簽
- 1.加粗
- 2.傾斜
- 3.刪除
- 4.下劃線
- 6. div 和 span 標簽
- 7. 圖像標簽和路徑標簽（重點）
- 1.圖像標簽
- 1. img標簽
- 2. alt標簽
- 3. title標簽
- 4. width和height標簽
- 5.border標簽
- 2.路徑(前期鋪墊知識)
- 1.文件夾
- 2.路徑
- 8. 超鏈接標簽（重點）
- 1.超鏈接的語法格式
- 2.超鏈接的分類
- 1.外部鏈接，例如`百度`。
- 2.內部鏈接
- 3.空鏈接
- 4.下載鏈接
- 5.網頁元素鏈接
- 6.錨點鏈接
- 五、HTML中的注釋和特殊字符
- 1.注釋
- 2.特殊字符
前言
注：這是在b站學習pink老師的視頻所做的筆記，全文都是參考的pink老師，文章只做自己學習筆記用。
一、html語法規范
1. html基本語法規范
2. 標簽關系
標簽關系可以分為兩類：包含關系和并列關系。
包含關系：
<head><title> </title> </head>并列關系：
<head> </head> <body> </body>二、基本結構標簽
1. 第一個 HTML 網頁
每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫。
| <html> </html> | html標簽 | 頁面最大的標簽，我們稱之為根標簽 |
| <head> </head> | 文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title |
| <title> </title> | 文檔的標題 | 讓頁面擁有一個屬于自己的頁面標題 |
| <body> </body> | 文檔的主體 | 元素包含文檔的所有內容，頁面內容基本都是放到body里面的 |
html 文檔的后綴名必須是 .html 或者 .htm, 瀏覽器的作用是讀取 html 文檔，并以網頁的形式顯示出它們。此時用瀏覽器打開這個網頁，我們就可以預覽我們寫的第一個 html 文件了。
案例：
2. 基本結構標簽總結：
三、開發工具
這里以visual studio code 為開發工具。
1. vscode工具的創建工程的使用
打開文件軟件：
2.插件的安裝：
上一個需要安裝的open in browse就是在這安裝。注意安裝插件需要聯網。
上一個需要安裝的open in browse插件：
以下是幾個實用插件。
3. vscode 工具生成骨架標簽新增代碼
1. doctype 標簽
<!DOCTYPE>文檔類型聲明，作用是告訴瀏覽器使用哪種 html 版本來顯示網頁。
這句代碼的意思是：當前頁面采取的是 html5的版本來顯示網頁的。
注意：
1) <!DOCTYPE>聲明必需放在文檔中的最前面，處于<html>標簽之前。
2) <!DOCTYPE>不是一個 html 標簽，它就是文檔類型聲明標簽。
2. lang 語言
用來定義當前文檔顯示的語言：
簡單來說，定義en就是英文頁面，定義ch-CN就是中文網頁
其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義為zh-CN的文檔也可以顯示英文
這個屬性對瀏覽器和搜索引擎（百度，谷歌等）還是有作用的。
3. charset 字符集
字符集(Characterset)是個多字符的集合，以便計算機能夠識別和存儲各種文字。
在<html>標簽內，可以通過<meta>標簽的 charset 屬性來規定html文檔應當使用哪種字符編碼。
charset 常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被稱為萬國嗎，基本包含了全世界所有國家需要用到的字符。
4. 總結
四、HTML常用標簽
1. 標簽語義
學習標簽是有技巧的，重點是記住每個標簽的語義。簡單理解就是指標簽的含義，即這個標簽是用來干嘛的。
根據標簽的語言，在合適的地方給一個最為合適的標簽，可以讓頁面結構更清晰。
2. 標題標簽 h1-h6(重要)
為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽。html提供了6個等級的網頁標簽。即<h1>-<h6>。
<h1>我是一級標題</h1>h是head的縮寫，意為頭部，標題。
標簽語義:作為標題使用，并且依據重要性遞減。
特點：
示例：
<!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>Document</title> </head><body><h1>標題標簽</h1><h1>標題一共六級選，</h1><h2>文字加粗一行顯，</h2><h3>由大到小依次減，</h3><h4>從重到輕隨之變，</h4><h5>語法規范書寫后，</h5><h6>具體效果刷新見。</h6>------pink老師 </body></html>運行結果：
3. 段落和換行標簽（重要）
1.段落標簽
在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在html標簽中，<p>標簽用于定義段落，它可以將整個網頁分為若干個段落。
<p>我是一個段落標簽</p>“p”單詞paragraph的縮寫，意味段落。
標簽語義：可以把html文檔分割為若干個段落。
特點：
1.文本在一個段落中會根據瀏覽器窗口的大小自動換行。
2.段落和段落之間保有空隙。
示例：
1.沒有段落標簽：
運行網頁顯示效果：
2.加了<p></p>標簽（除body部分不一樣其他都和上面一樣）
運行結果：
2.換行標簽
在html中，一個段落的文字回從左到右依次排列，直到瀏覽器的右端，然后才自動換行，如果希望某段文本強制換行顯示，就需要使用換行標簽<br />
<br /><br />是break的縮寫，意為打斷，換行。
標簽語義：強制換行。
特點：
1.<br />是個單標簽。
2.<br />標簽只是簡單地開始新的一行，那段落不一樣，段落之間會插入一些垂直的間距。
4. 體育新聞案例
<!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>Document</title> </head><body><h1>水花61分伊戈達拉制勝搶斷 西決勇士再勝開拓者總分2-0</h1><h4>數據統計：水花兄弟合砍61分</h4><p>庫里22投11中，三分14投4中，罰球11罰全中得到37分8籃板8助攻，職業生涯季后賽得分30+次數來到35次， 超過哈登排名現役第3位，僅次于詹姆斯和杜蘭特。</p><p>湯普森22投8中，三分8投4中得到24分3籃板2助攻，德拉蒙德-洛林得到16分10籃板7助攻5蓋帽， 凱文-魯尼得到14分7籃板2助攻，今天勇士有7名替補出場。</p><h4>兄弟對決升級：小庫里給哥哥造成壓力</h4><p>庫里兄弟是NBA歷史上第一對在分區決賽相遇的兄弟。在西決第1場中，小庫里沒有給哥哥造成壓力， 他出場19分鐘，7投1中只得到3分3籃板2助攻，在場期間輸掉10分。</p><p>但在西決第2場中，小庫里攻防兩端都打出杰出的表現，全場送出4次搶斷，包括直接搶斷自己的哥哥庫里， 在防守端給庫里造成了極大的困擾。</p><p>作者:<br />pink老師</p> </body></html>5.文本格式化標簽
在網頁中，有時需要文字設置粗體、斜體或者下劃線等操作，這時需要用到html的文本格式化標簽，使文字以特殊的方式顯示。
標簽語義：突出重要性，比普通文字更重要。
| 加粗 | <strong></strong>或者<b></b> | 更推薦使用<strong></strong>標簽加粗 語義更強烈 |
| 傾斜 | <em></em>或者<i></i?> | 更推薦strong標簽傾斜，因為語義更強烈 |
| 刪除 | <del></del>或者<s></s> | 更推薦del標簽刪除，因為語義更強烈 |
| 下劃線 | <ins></ins>或者<u></u> | 更推薦ins標簽加下劃線，因為語義更強烈 |
1.加粗
<strong></strong>
相關代碼：
結果：
<b></b>
代碼：
結果：
2.傾斜
代碼：
<body>我是<em>傾斜</em>的文字。 我是<i>傾斜</i>的文字。 </body>結果
3.刪除
代碼：
<body>我是<del>刪除</del>的文字。 我是<s>刪除</s>的文字。 </body>結果：
4.下劃線
代碼：
<body>我是<ins>加下劃線</ins>的文字。 我是<u>加下劃線</u>的文字。 </body>結果：
6. div 和 span 標簽
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容。
<div>這是頭部</div> <span>今日特價</span>div是division的縮寫，表示分割，分區，
span意為跨度，跨距
特點：
1.<div>標簽用來布局，但是現在一行只能放一個<div>。是大盒子。
2.<span>標簽用來布局，一行上可以有多個<span>。是小盒子。
例：
代碼：
結果：
7. 圖像標簽和路徑標簽（重點）
1.圖像標簽
圖像標簽注意點：
1. img標簽
在html標簽中，<img>標簽用于定義html頁面中的圖像。
<img src="圖像URL"/><img>是image的縮寫，意為圖像。
src 是<img>標簽的必須屬性，它用于指定圖像文件的路徑和文件名。
所謂屬性：簡單理解就是屬于這個圖像標簽的特性。
例：
<body><h4>圖像標簽的基本使用</h4><img src="ldh.jpg" /> </body>
圖像的其他屬性：
| src | 圖片路徑 | 必需屬性 |
| alt | 文本 | 替換文本，圖像不能顯示的文字 |
| title | 文本 | 提示文本，鼠標放在圖像上，顯示文字 |
| width | 像素 | 設置圖像的寬度 |
| height | 像素 | 設置圖像的高度 |
| broder | 像素 | 設置圖像的邊緣粗細 |
2. alt標簽
<body><h4>alt替換文本，圖像顯示不出來的時候用文字替換：</h4><img src="ldh.jpg" alt="這是劉德華" /><h4>alt替換文本，圖像顯示不出來的時候用文字替換：</h4><img src="ldh1.jpg" alt="這是劉德華" /> </body>3. title標簽
<body><h4>title顯示圖像信息</h4><img src="ldh.jpg" title="這是劉德華" /></body>當鼠標放在圖片上時會彈出文字提示：“這是劉德華”，由于不好截屏所以不放截圖了。
4. width和height標簽
<body><img src="ldh.jpg" title="這是劉德華" /><h4>width顯示圖像寬度，height顯示圖像高度</h4><img src="ldh.jpg" title="這是劉德華" width="300" height="100" /> </body>
注：
只修改高度或者只修改寬度的時候，圖片會等比例縮小。一般可以只修改一個。
5.border標簽
<body><img src="ldh.jpg" title="這是劉德華" /><h4>border給圖片設定邊框</h4><img src="ldh.jpg" title="這是劉德華" border="15" /> </body>2.路徑(前期鋪墊知識)
1.文件夾
(1). 目錄文件夾和根目錄。
目錄文件夾：就是普通文件夾。
根目錄：打開目錄文件夾的第一層就是根目錄。
(2). vscode可以打開文件夾
文件—>打開文件夾
2.路徑
頁面中圖片會非常多，通常我們會新建一個文件夾來存放圖像文件(image)，這時再查找圖像，就需要采用“路徑”的方式來指定圖像文件的位置。
路徑可以分為：
以引用文件所在位置為參考，而建立出的目錄路徑。
這里簡單地說就是圖片相對于html頁面的位置。
符號用“/”
|相對路徑|符號|說明|
|–|--|–|
|同一級路徑||圖像文件位于html文件的同一級，如<img src="baidu.gif" />|
|下一級路徑|/|圖像文件位于html文件的上一級，如<img src="images/baidu.gif" />|
|上一級路徑|…/|圖像文件位于html文件的上一級，如<img src="../baidu.gif" />|
示例：
<body><h2>同一級圖像</h2><img src="同一級.jpg"><h2>下一級圖像</h2><img src="image/下一級圖片.jpg" width="500"><h2>上一級圖片</h2><img src="../上一級圖片.jpg" width="500"> </body>絕對路徑：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑。
例：C:\Users\HP\Desktop\web\案例\image\下一級圖片.jpg；
或者完整的網址，例：https://www.bilibili.com/video/BV14J4114768?p=25&spm_id_from=pageDriver
符號用“\”
例：
8. 超鏈接標簽（重點）
在html標簽中，<a>標簽用于定義超鏈接，作用是從一個頁面鏈接到另一個頁面。
1.超鏈接的語法格式
<a href="跳轉目標" target="目標窗口彈出方式">文本或者圖像</a>
a 是單詞 anchor的縮寫，意為：錨。
兩個屬性的作用如下：
| href | 用于指定鏈接目標的url地址，（必須屬性）當為標簽應用href屬性時，它具有了超鏈接的功能 |
| target | 用于指定鏈接頁面的打開方式，其中_self為默認值，_blank為在新窗口中打開方式。 |
2.超鏈接的分類
1.外部鏈接，例如<a href="http://www.baidu.com">百度</a>。
例：
<body><h4>外部鏈接</h4><a href="http://www.qq.com">騰訊</a> </body>點擊騰訊后（默認是在當前頁面打開網頁）。
若在href定義后面再定義一個屬性 target:
默認為target="_self",即在當前窗口打開網頁，和上一個不寫target是一個效果。
“tragret=”_blank"時，則會在當前窗口外用另一個窗口打開這個網頁：
2.內部鏈接
內部鏈接：網站內部頁面之間的相互鏈接，直接鏈接，直接鏈接內部頁面名稱即可，例如<a href="公司簡介.html">首頁</a>。
例：
如上圖所示，可以打開同級目錄下的另外一個html文件，是網站內部頁面之間的相互鏈接
3.空鏈接
如果當時沒有確定的鏈接目標時，<a href="#">首頁</a>
4.下載鏈接
如果href里面地址是一個文件或者壓縮包，會下載這個文件。
5.網頁元素鏈接
在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接。
上圖將名為“同一級.jpg”設置為圖片形式的鏈接。
6.錨點鏈接
點擊鏈接，可以快速定位到網頁中的某個位置。
如下圖所示
代碼：
網頁：
點擊早年經歷后：
五、HTML中的注釋和特殊字符
1.注釋
如果在html文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽
<!--注釋語句--> 快捷鍵：ctrl + /2.特殊字符
在HTML中，一些特殊的符號很難或者不方便直接使用，此時我們可以使用下面的字符來代替。
| 空格符 | | |
| < | 小于號 | < |
| > | 大于號 | > |
| & | 和號 | & |
| ￥ | 人民幣 | ¥ |
| ? | 版權 | © |
| ? | 注冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| 2 | 平方2（上標2） | ² |
| 3 | 立方3（上標3） | ³ |
空格、大于號、小于號使用較多，其他的使用較少。不需要全部記住。
總結
以上是生活随笔為你收集整理的HTML(一、语法规范，二、结构标签，三、开发工具，四、HTML常用标签，五、注释和特殊字符)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： crawler（七）:Scrapy的Re
- 下一篇： 0.前端简历编写和面试前准备