前端重要的H標簽詳解（干貨！）-有解無憂

重要的H標簽

主要標簽

h系列標簽主要用來做標題，h1到h6 依次縮小，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>1</h1>
		<h2>1</h2>
		<h3>1</h3>
		<h4>1</h4>
		<h5>1</h5>
		<h6>1</h6>
	</body>
</html>

運行結果
在這里插入圖片描述

p標簽：段落，

p 元素會自動在其前后創建一些空白（段間距），瀏覽器會自動添加這些空間，您也可以在樣式表中規定，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p>p 元素會自動在其前后創建一些空白，瀏覽器會自動添加這些空間，您也可以在樣式表中規定，</p>
		<p>p 元素會自動在其前后創建一些空白，瀏覽器會自動添加這些空間，您也可以在樣式表中規定，</p>
		<p>p 元素會自動在其前后創建一些空白，瀏覽器會自動添加這些空間，您也可以在樣式表中規定，</p>
		<p>p 元素會自動在其前后創建一些空白，瀏覽器會自動添加這些空間，您也可以在樣式表中規定，</p>
		<p>p 元素會自動在其前后創建一些空白，瀏覽器會自動添加這些空間，您也可以在樣式表中規定，</p>
	</body>
</html>

在這里插入圖片描述

div標簽：表示大的容器，

標簽可以把檔案分割為獨立的、不同的部分，它可以用作嚴格的組織工具，并且不使用任何格式與其關聯，

如果用 id 或 class 來標記，那么該標簽的作用會變得更加有效，

注意：
Div span兩個標簽沒有特殊的功能，只是作為一個內容容器，但使用頻率很高，主要與CSS配合使用，
Div：塊標簽(它會獨占一行，主要用于布局)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="ooo">
			周杰倫的情歌不只有R&B，《彩虹》就是證明，
		</div>
		<div id="ooo">
			周杰倫的情歌不只有R&B，《彩虹》就是證明，
		</div>
		<div id="ooo">
			周杰倫的情歌不只有R&B，《彩虹》就是證明，
		</div>
		<div id="ooo">
			周杰倫的情歌不只有R&B，《彩虹》就是證明，
		</div>
	</body>
</html>

運行結果
在這里插入圖片描述

span:放一些文本，

Span:行內標簽(不會獨占一行)
標簽被用來組合檔案中的行內元素，
注意：span 沒有固定的格式表現，當對它應用樣式時，它才會產生視覺上的變化，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<span>	哪里有彩虹告訴我
				能不能把我的愿望還給我
				為什么天這么安靜
				所有的云都跑到我這里
				有沒有口罩一個給我
				釋懷說了太多就成真不了
				也許時間是一種解藥
		</span>
		<span>  也是我現在正服下的毒藥
				看不見你的笑 我怎么睡得著
				你的聲音這么近我卻抱不到
				沒有地球太陽還是會繞
				沒有理由我也能自己走
				你要離開 我知道很簡單
				你說依賴 是我們的阻礙
		</span>
		<span>
			        就算放開 但能不能別沒收我的愛
				當作我最后才明白
				有沒有口罩一個給我
				釋懷說了太多就成真不了
				也許時間是一種解藥
				也是我現在正服下的毒藥
				看不見你的笑 我怎么睡得著
		</span>
	</body>
</html>

運行結果
在這里插入圖片描述

a標簽：超鏈接，

頁面的切換：一個網站一般由很多個頁面組成，這些頁面之間的切換是通過超鏈接來完成的，
超鏈接可以鏈接到站點內部的頁面，也可以鏈接到外面站點的頁面，
如果要鏈接到站點下面某個子目錄里面的檔案，需要加上路徑的名稱，
如果要從當前頁面鏈接到上一級目錄里面的頁面，需要用到…/ 表示回到上一級目錄，如果還有再上一級 …/…/
在新的頁簽打開頁面，需要給a標簽添加一個target屬性，_blank：新頁簽打開，_parent：在父視窗打開， _self:表示在當前視窗打開（默認），_top:在頂層視窗打開，
在網頁中添加一個錨點，給這個錨點取一個name屬性，就可以在其他地方添加一個錨點鏈接，點擊鏈接就可以打開一個頁面的指定的錨點，
注意：錨點所在的位置，前面和后面都要有距離，
mailto:后面跟上一個郵箱地址，當點擊鏈接的時候，會自動打開發郵件的軟體（前提是你的電腦已經安裝了發郵件的軟體），
< a href=“javascript:void(0);”>點擊我< /a> ：這種寫法，就屏蔽了a標簽默認的行為（鏈接），就相當于是一個獨立的按鈕，

例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.qq.com">騰訊(外部站點)</a>
		<a href="index.html">首頁(內部站點)</a>  <!--我在同級目錄中有index.html-->
		<a href="admin/login.html">登錄</a><!--某個檔案夾下的子目錄-->
		<a href="http://www.qq.com" target="_blank">打開新的頁簽訪問騰訊(外部站點)</a> <!--在新標簽頁打開外部站點-->
		<a href="#aa">去購買住房</a> <!--鏈接到其他的錨點-->
		<a href="mailto:123@qq.com">123@qq.com</a><!--自動打開發郵件的軟體-->
		<a href="javascript:void(0);">點擊我</a> <!--獨立按鈕-->
		
		<div style="height: 2600px; background-color: seagreen;"></div>
		<a name="aa">住房層</a>
		<div style="height: 2600px; background-color: red;"></div>
		
	</body>
</html>

這個不好演示，你去運行一下就知道啦！

img標簽：增加背景圖片

比如說，我在同級目錄img下面增加了一張圖片

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/dog.jpg" alt="這是alt內容" title="這是一張背景圖片"/>
		<!--
			通過img標簽在網頁中加入一張圖片，
			
			title：當滑鼠移動到圖片上的時候，顯示title里面的文字內容，
			alt：當圖片加載失敗的時候，顯示alt屬性中的內容，
			
			table  / form 
		-->
	</body>
</html>

運行效果
在這里插入圖片描述
當圖片加載錯誤的時候回提示

塊級標簽和行內標簽

任何一個標簽都相當于一個容器，不管是塊級的還是行內的，都可以通過display這個屬性去設定它，

??塊級元素：獨占一行，div p ul 塊級元素可以設定它的寬高，

??行內元素：都排在一行，一行排滿之后，再從第二行開始排列，span a 行內元素不能設定它的寬高，設定了寬高也沒有效果，注意：行內元素如果設定了浮動屬性，也可以對它設定寬高，

行內元素和塊級元素是可以相互轉換的，
display: inline; 這個元素就是行內元素，
display: block; 這個元素就是一個塊級元素，

例如看下面的代碼來理解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 100px;
				background-color: red;
				display: inline;
			}
			#box2{
				width: 200px;
				height: 150px;
				background-color: salmon;
				display: inline;
			}
			
			span{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			我是
		</div>
		<div id="box2">
			周杰倫
		</div>
		
		
		<span>我是行內元素，但display: block了</span>
		<span>我是行內元素，但display: block了</span>
		<span>我是行內元素，但display: block了</span>
		<span>我是行內元素，但display: block了</span>
		<span>我是行內元素，但display: block了</span>
		<span>我是行內元素，但display: block了</span>
		<span>我是行內元素，但display: block了</span>
		<span>我是行內元素，但display: block了</span>
	</body>
</html>

運行結果
在這里插入圖片描述

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

標籤：其他

上一篇：JavaScript 技術篇-一段js代碼展示可以隨滑鼠移動變換樣式的卡通人物，動態女生眼睛跟著鼠轉動

下一篇：win10淺色主題