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