??HTML必備知識詳解??

第一部分：HTML框架簡介
- 1.是什么&怎么學&用什么工具
- - （1）什么是HTML？
  - （2）怎么學HTML？
  - （3）使用的工具：
- 2.HTML的基本結構
- 3.HTML檔案的規范
- 4.HTML的基本模板
第二部分：標簽
- 1.標簽的使用樣式及屬性
- - （1）標簽的使用樣式：
  - （2）標簽屬性：
  - （3）塊狀標簽
  - - 第一部分知識點——塊狀標簽的特點：
    - 第二部分知識點——常用的塊狀標簽：
    - 深入講解：emmet語法————快速敲代碼小技巧之快速敲標簽語法！
  - （4）行內標簽（行內標簽）
  - - 第一部分知識點——行內標簽的特點：
    - 第二部分知識點——常用的行內標簽：
In The End！

???????👇
👉🚔直接跳到末尾🚔👈 ——>領取專屬粉絲福利💖
?????????

?👻上一篇博文兩萬字博文教你python爬蟲requests庫，看完還不會我把我女朋友都給你【??熬夜整理&建議收藏??】被眾多爬蟲愛好者/想要學習爬蟲的小伙伴們閱讀之后，很多小伙伴私信我說——爬是會爬了，但是爬下來的都是網頁原始碼資料，真心看不懂鴨！該怎么辦？👻

?😬（苦笑）為了能讓小伙伴們對日后所學的頁面決議庫理解更深，所以本博主又連夜加班加點，苦苦熬制本文（分上下兩篇哦！），為大家深入全面的講解一下常見的前端知識——學啥技術都是從底層抓起，萬丈高樓平地起，它也是基于地基穩！ 所以本文（共分上下兩篇哦！）是比頁面決議庫要先一步總結給小伙伴們哦！😬

?😜在這兩篇博文中，本博主就帶領小伙伴們認真地學習一下HTML（超文本標記語言）相關的必備知識（爬蟲爬到資料之后決議頁面資料你得多少能看懂頁面結構！）——HTML是一門標記語言，標記語言由一套標記標簽組成，學習HTML，就是學習標簽，！😜

在這里插入圖片描述

重點來啦！重點來啦！！💗💗💗

??相信有不少小伙伴已經通過我的上篇博文完全地學費了requests庫，而本篇（以及下篇）文講解的HTML知識，將會使你日后決議爬取到的頁面資料信手拈來哦~

這是幾幾年的雪都記不清了！

知識點補給站：

如果把網頁比作一個人的話，HTML相當于骨架，JavaScript相當于肌肉，CSS相當于皮膚，三者結合起來
才能形成一個完善的網頁，

首先要普及的一個概念是一個網頁組成部分：
	①HTML：用于定義網頁里面有什么內容；
	②CSS:對內容進行排版；
		（1）找到要排版的內容————如何找到要排版的標簽；
		（2）設定樣式————標簽都能設定哪些樣式，
	③JavaScript:用于動態的控制頁面，

第一部分：HTML框架簡介

在這里插入圖片描述

1.是什么&怎么學&用什么工具

（1）什么是HTML？

HTML:（HyperText Markup Language）【超文本標記語言】
??狹義的HTML指的是網頁；
??廣義的HTML指的是前端技術（html,css,js,以及各種框架）——網頁，移動端網頁，小程式，公眾號，移動端的app，快應用等，
詳細介紹：
??HypertText：超文本——超出文本的范疇，簡單地說，不僅僅是文本，還可以是影像，音頻，視頻，flash等等；
??Markup：標記——網頁中會有很多標記，不同的標記有不同的含義和功能，標記也叫標簽，Html會包含各種各樣的標簽，這些標簽不能亂寫，必須寫w3c規范中包含的標簽，
標簽的舉例：
??①<body></body> -- 雙標簽
??②<br> -- 單標簽

在這里插入圖片描述

（2）怎么學HTML？

??HTML是一門標記語言，標記語言由一套標記標簽組成，學習HTML，就是學習標簽，

（3）使用的工具：

??編輯器：pycharm（搞python的肯定得用pycharm！）
??瀏覽器：Firefox，Chrome（建議使用這倆哦！）

在這里插入圖片描述

2.HTML的基本結構

在這里插入圖片描述

3.HTML檔案的規范

html檔案以開始，以結尾，其他任何標簽，需要寫在和之間；
Html標簽只包含兩個子標簽：head和body；
和網頁設定相關的內容都寫在head標簽里；
需要顯示的內容都寫在body標簽里；

在這里插入圖片描述

4.HTML的基本模板

如果你再pycharm里新建一個html檔案就會像下面這樣！

<!DOCTYPE html>						#檔案型別的宣告
<html lang="en">					#根標簽,即檔案的開始， lang（language），en(english)，宣告語言型別是英語
<head>								#網頁頭部
    <meta charset="UTF-8">			#國際編碼     meta配置  字符集編碼的型別 
    <title>Title</title>			#網頁標題
</head>
<body>								#網頁的主體，可視化區域

</body>
</html>

知識點補給站：

<!DOCTYPE html> 標簽：作用：在html檔案最前面進行宣告，定義檔案型別，告知瀏覽器用html規范去決議檔案，
在pycharm中撰寫HTML檔案時， 為注釋，快捷鍵是Ctrl+/，
在pycharm中撰寫HTML檔案時，打標簽時可直接打標簽名，再Tab即可實作自動補全，如：輸入p,再Tab會自動補全為：<p></p>

在這里插入圖片描述

第二部分：標簽

什么是標簽？

	由尖括號包裹單詞構成，如：<html>，所以標簽不可能以數字開頭，

標簽不區分大小寫，但推薦小寫，
標簽可以嵌套，但不能交叉嵌套，
標簽也稱為元素，比如：行內標簽亦可成行內元素，

錯誤示例：<a><b></a></b>
正確示例：<a><b></b></a>

在這里插入圖片描述

1.標簽的使用樣式及屬性

（1）標簽的使用樣式：

開始標簽又稱開放標簽<a>標簽體</a>結束標簽又稱閉合標簽或關標簽
自閉合標簽/單標簽，如：<meta charset="UTF-8">，<br>等

	單標簽有兩種寫法：
			寫法一：只寫開標簽即可<br>
			寫法二：在開標簽的結尾寫一個/，如<br/>

（2）標簽屬性：

通常為鍵值對形式出現，比如：<meta charset="UTF-8"> 里面的charset為標簽的屬性，對應的單引號或者雙引號里的稱為屬性值；
屬性只能出現在開始標簽和自閉合標簽內，但不能出現在結束標簽里；
屬性名字全部小寫，屬性值必須用單引號或者雙引號包裹；
如果屬性名和屬性值完全一樣，直接寫屬性名即可，如：“readonly”(input標簽屬性)

在這里插入圖片描述

（3）塊狀標簽

在這里插入圖片描述

第一部分知識點——塊狀標簽的特點：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塊狀標簽的特點</title>
</head>
<body>

	<!--塊狀標簽的特點:(通過段落標簽p進行說明)-->
	<!--1.設定寬高有效，以及外邊距和內邊距都可控制-->
	<!--2.在不設定寬度的情況下，寬度始終與父標簽保持一致，與內容無關，是父標簽容器的100%；-->
	<!--3.可以獨占一行，實作自動換行，一個段落標簽不管多少內容都占一行-->
	<!--4.當多個塊狀標簽寫一起時，默認排列方式是從上向下-->
	<!--5.可以容納行內元素和其他塊元素-->
	<p style="width:100px; height:100px">這是個段落標簽，我是塊狀標簽</p>

</body>
</html>

知識點補給站： 1.px是像素，是長度單位； 2.在網頁查看元素（ELements）顯示的是寬度*高度，

第二部分知識點——常用的塊狀標簽：

小知識點：網頁的默認字號是1em（1em=16px）！

總共有四個：

標題標簽；

	<!--第一個：標題標簽，h1到h6  （一般放在文章的標題）  字體會加粗！-->
	<!-- h1字號是2em--32px；h2字號是1.5em--24px；h3字號是1.17em--18.72px;h4字號是默認字號16px;
		h5字號是0.83em--13.28px；h6字號是0.67em--換算應該是10.72px，但是網頁有最小字號限制，所以會變為12px！   -->
	<h1>我是一級標簽，一個網頁只能有一個，別的可以有多個</h1>
	<h2>我是二級標簽</h2>

段落標簽；

	<!--第二個：段落標簽，  大小跟四級標題標簽一樣 （會把HTML檔案分割成若干個段落）-->
	<!-- p標簽默認有段前段后間距--16px；但是段落標簽并不會首行縮進！ -->
	<p>我是段落標簽</p>

串列標簽：分為有序串列，無序串列和定義串列三大類；

	<!--第三個：串列標簽-->
	
		<!--（1）有序串列-->
		<ol type="A" start="3">        <!--ol是order list的縮寫，本行是有序串列的開始   
		type有五個選擇——1:按1,2,3,4...顯示序號（默認）；
					  A:按A,B,C,D..顯示序號；
					  a：按a,b,c,d..顯示序號；
					  I：按I,II,III,IV，V..顯示序號（羅馬數字）；
					  i：按i,ii,iii,iv,v..顯示序號（羅馬數字小寫），
									  start規定從第幾個開始排-->
		    <li>這是有序串列1</li>
		    <li>這是有序串列2</li>
		    <li>這是有序串列3</li>
		</ol>
		
		<!--（2）無序串列-->
		<ul type="circle">             <!--ul是unorder list的縮寫，本行是無序串列的開始
		可以設定none（空的）,circle（空心圓）,square（實心方塊），disc（實心圓）[默認值]等樣式-->
		    <li>這是無序串列1</li>	   <!-- 一個li代表一個串列項， -->
		    <li>這是無序串列2</li>
		    <li>這是無序串列3</li>
		    <li>這是無序串列4</li>
		</ul>
		
		<!--(3)定義串列-->
		<dl>       					 <!--本行是定義串列的開始-->
		    <dt>水果</dt>        	 <!--代表一個大的列項-->
		    <dd>葡萄</dd>             <!--代表對上面列項的解釋，即細分，-->
		    <dd>榴蓮</dd>			 <!-- dd有縮進，dt沒有縮進 -->
		
		    <dt>蔬菜</dt>
		    <dd>花菜</dd>
		    <dd>包菜</dd>
		</dl>

div標簽，

	<!--第四個：div標簽：用來分劃一個一個的區域
			         （width和height來規定區域大小；background-color是設定區域背景色）-->
	<!--div是一個純凈的塊元素——所謂純凈意思是沒有任何的默認樣式，不宜過多使用，后期維護不好-->
	<!-- div最大的優勢：布局，作為容器，承載其他標簽，因為div沒有默認樣式，所以盡管用div包裹了標簽，
					  但不影響標簽的展示， -->
	<div style="width:500px;height: 500px;background-color: #66a9fe;">我是一個div</div>

知識點補給站：

??如果嫌打串列標簽太麻煩，可使用快捷方法:（n表示相應的標簽的個數，直接輸入下面陳述句Tab一下即可生成！）
在這里插入圖片描述

深入講解：emmet語法————快速敲代碼小技巧之快速敲標簽語法！

*是乘的作用，后面跟一個數字，數字是幾，就會生成幾個標簽！
舉例：

實作：
$可以代表一個數字，這個數字從1開始，逐步增大，通常和*連用，
舉例：

實作：
{}里面用于書寫標簽的文本內容，
舉例：

實作：
[]里面用于書寫屬性名和屬性值（如果不加屬性值，則創建屬性值為空的屬性）
舉例①：

舉例②：

實作①：

實作②：
>用于指示下一級標簽，他們構成父子關系（包含關系）
舉例：

說明：
+在當前標簽的后面生成一個平級的標簽（兄弟關系）
舉例：

實作：
#a生成一個id位a的div標簽

舉例：

實作：
綜合使用：
舉例①：

實作①：

舉例②：

實作②：

舉例③：

實作③：

舉例④：

實作④：

舉例⑤：

實作⑤：

（4）行內標簽（行內標簽）

在這里插入圖片描述

第一部分知識點——行內標簽的特點：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行內標簽，又稱行內標簽的特點</title>
</head>
<body>

	<!--行內標簽的特點（通過文本標簽span說明）-->
	<!--1.設定寬高無效，以及外邊距和內邊距都無法控制-->
	<!--2.寬度就是其文字或者圖片寬度，無法控制-->
	<!--3.不會進行自動換行，只有本行放滿才會放下一行-->
	<!--4.當多個行內標簽寫在一起時，默認排列方式是從左往右-->
	<!--5.行內元素只能容納文本或者其他行內元素-->
	<span>我是個文本標簽</span>

</body>
</html>

第二部分知識點——常用的行內標簽：

總共有四種：

圖片標簽

	<!--第一個：圖片標簽  img + Tab-->
	<img src="" alt="" width="" height="">   <!--src是圖片的地址，可以直接是網頁里的圖片地址，
											也可以是本地圖片的地址（推薦使用相對路徑——相對的含義：圖片相對于Html檔案的位置，參照物是html檔案！-->
		                      <!-- alt是當圖片加載失敗時顯示的內容-->
							  <!-- width是圖片寬度；height是圖片高度，不指定按原圖大小顯示注意，：如果二者只指定一個，另外一個會等比例縮放 -->
		                      <!-- img不是塊元素(block)，也不算行元素(inline)，它是行級塊元素（inline-block）  -->

粗體/斜體標簽

	<!--第二個：粗體/斜體標簽   b+ Tab  i+ Tab -->
	<b>我是粗體</b>
	<i>我是斜體</i>

超鏈接標簽

	<!--第三個：超鏈接標簽     _self本身網頁上打開；_blank打開一個新網頁-->
	<a href="" title="超鏈接的一個說明（滑鼠放上會顯示的文本）" target="_self">我是超鏈接</a>   					
						   <!--href里可以寫網址，可以寫檔案路徑-->
						   <!-- 如果href="" 那么點擊后會重繪當前網頁，而且會回到頂部 -->
						   <!-- 如果href="#" 那么點擊后，會回到頂部，但不會重繪頁面 -->
						   <!-- 如果href="#錨點" 那么點擊后，會跳到指定的錨點處（錨點其實就是一個id值）！ -->

文本標簽

	<!--第四個：文字標簽   和css配合使用才有用哦！-->
	<!-- span是一個純凈的行元素；所謂的純凈——沒有任何默認樣式； -->
	<!-- span最大的優勢：設定樣式，主要作用于行元素或者文字等 -->
	<span>我是文本標簽</span>

知識點補給站第一站點：

如果圖片標簽里填的是本地圖片的地址（相對路徑）：
??1.如果圖片在同級目錄下，直接：當前目錄名/圖片名
或者： ./當前目錄名/圖片名
??2.如果圖片在上級目錄下，直接： . ./圖片名

知識點補給站第二站點：

在這里插入圖片描述
至于為什么要實作行內標簽和塊狀標簽的相互轉換，小伙伴們在設定css樣式時會get到這個點哦，
??比如：塊狀標簽是不能放在一行了，但我們可以通過先轉換為行內標簽就可以了！！！

在這里插入圖片描述

In The End！

在這里插入圖片描述

從現在做起，堅持下去，一天進步一小點，不久的將來，你會感謝曾經努力的你！

?本博主會持續更新爬蟲基礎分欄及爬蟲實戰分欄（為了小伙伴們更好的進行頁面決議，也會更新部分前端必備知識點博文！），認真仔細看完本文的小伙伴們，可以點贊收藏并評論出你們的讀后感，并可關注本博主，在今后的日子里閱讀更多爬蟲文！

	如有錯誤或者言語不恰當的地方可在評論區指出，謝謝！
	如轉載此文請聯系我說明用以意并標注出處及本博主名，謝謝！

👇🏻可通過點擊下面——>關注本人運營 公眾號👇🏻

【可以公眾號里私聊并標明來自CSDN，會拉你進入技術交流群（群內涉及各個領域大佬級人物，任何問題都可討論~）--->互相學習&&共同進步（非誠勿擾）】

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/310587.html

標籤：python

上一篇：用Python搓一個太陽系

下一篇：C語言檔案讀寫 fgetc 函式 - C語言零基礎入門教程

保姆級教程HTML兩萬字筆記大總結【建議收藏】（上篇）

??HTML必備知識詳解??

第一部分：HTML框架簡介

1.是什么&怎么學&用什么工具

（1）什么是HTML？

（2）怎么學HTML？

（3）使用的工具：

2.HTML的基本結構

3.HTML檔案的規范

4.HTML的基本模板

第二部分：標簽

1.標簽的使用樣式及屬性

（1）標簽的使用樣式：

（2）標簽屬性：

（3）塊狀標簽

第一部分知識點——塊狀標簽的特點：

第二部分知識點——常用的塊狀標簽：

深入講解：emmet語法————快速敲代碼小技巧之快速敲標簽語法！

（4）行內標簽（行內標簽）

第一部分知識點——行內標簽的特點：

第二部分知識點——常用的行內標簽：

In The End！