HTML的概述和基本語法

2020-10-04 17:00:16

HTML概述

明確什麼是HTML?

​ html即是一種超檔案標示語言(Hyper Text Makeup Language),是一種標識性語言。
​ html主要是包含一系列的標籤,通過標籤將網路上的檔案格式統一,將分散的internet資源連線成一個邏輯整體。
所謂超文字就是一種資訊的組織方式,就是通過超連結將文字的中的文字、圖表與其他資訊媒體相關聯。這種組織資訊的方式就是將分佈在不同位置的資訊資源用隨機方式進行連線,為人們查詢、檢索資訊提供方便。
舉個例子:A召喚師在地球,被他標記的B、D、E…等召喚獸分佈在太陽系各處,當A召喚師與某個敵人對戰時,不可能跑到星系各處去先帶著召喚獸前往決鬥,所以A召喚師就會使用召喚法陣(超連結)將召喚獸從各地召喚而來,這時C召喚獸確無法進行戰鬥,因為C召喚獸之前生活的環境與A召喚師所戰鬥的環境有很大差異,為此,A召喚師創造了一種環境適應法術(標籤),可以幫助召喚獸變成在召喚師所在環境下可以正常生存的狀態。

HTML可以做什麼?

​ HTML作為網頁基礎,它的首要功能就是製作網頁,當然它的主要作用還是製作靜態網頁,而更多更酷炫的功能就需要CSS和JavaScript來實現了。

HTML的基本語法

HTML的基本框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>

宣告當前 html 的語言版本為 html 5。

​ 2.

<html> </html>

html 標籤,所有程式碼都要在這個標籤內寫入。

​ 3.

<head></head>

head 標籤,頭部標籤,內容一般不在瀏覽器主介面顯示,可以通過CSS和Javascript來製作瀏覽器主介面的樣式。

​ 4.

<meta >

meta 標籤,用來設定字元集,告訴瀏覽器,這個網頁中的漢字是用什麼編碼解析的。

​ (1)utf-8 多國語言編碼,每個國家語言都能正常顯示。

​ (2)GB2312 簡體中文編碼,一共對6763個漢字進行編碼。

​ (3)GBK 簡體中文編碼,一共對2.3萬個漢字進行編碼。

​ (4)JIS 日文編碼。

​ (5)BIG5 簡體中文編碼。

​ 5.

<title>***</title>

title標籤,網頁的標題。

​ 6.

<body>***</body> 

body標籤,網頁的正文內容,一般會在瀏覽器的主介面顯示。

​ 7.

<!-- 註釋 --> 

註釋。一般為ctrl + /。

標籤分類

​ 1.閉合標籤(雙標籤):開始 標籤內容 結束 例:

<b> 標籤內容 </b> --->加粗字型

​ 2.自閉和標籤(單標籤):標籤名 內部結束 完成某個特定功能

<link href="icon地址" rel="icon" /> --->引入一個小圖示

標籤屬性

​ 1.定義:通過標籤對內容樣式做進一步修改。

​ 2.語法:<標籤 屬性=「屬性值」>xxx</標籤> 例:

<p align="center">內容</p>  --->內容文字居中

基本常用標籤

​ 1.標題標籤:由大到小依次為< h1 >內容< /h1 >…< h6>內容< /h6> 例:

<h1>文字</h1>  --->文字內容字型為1號

​ 2.段落標籤:< p>內容< /p> 將文字內容分段。 例:

<p>啊,大海呀!全是水。</p>
<p>蛤蟆呀,四擡腿!</p>

​ 3.換行標籤:可以對一長段文字進行換行。< br />

<p>我愛你<br />中國</p>

​ 換行標籤針對一段話需要分兩行以上描述時使用,這將會是你在學習HTML中最常使用的標籤。

4.列表標籤:列表標籤分為有序標籤< ol>< li> < /li>< /ol>和無序標籤< ul>< li> < /li>< /ul>,需注意這個標籤中的有序和無序指的是序號。

<!-- 有序標籤 -->
<ol>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ol>

<!-- 無序標籤 -->
<ul>
<li>內容1</li>
<li>內容2</li>
<li>內容3</li>
</ul>

5.超連結:< a>< /a>通過超連結中的href屬性引入需要跳轉連結的地址。例

<a href="www.baidu.com" target="_blank">點選開啟百度</a>

​ 可以看到在上面例子中的標籤內除了href屬性之外還有一個target屬性,這個屬性是決定你開啟超連結時在哪裡視窗開啟。

target="_self":這個屬性值表示在自己本身的視窗通過超連結開啟新的介面;

target="_blank":這個屬性值表示開啟一個新視窗,在新視窗中通過超連結開啟一個新的介面。

這裡我們只介紹target屬性的兩種屬性值,剩下的三種我們會在HTML內聯框架中進行講解。

6.圖片標籤:< img > 通過src屬性引入圖片地址,達到顯示圖片的功能。例:

<img src="圖片.png" />

7.通過超連結制作錨點:這時一個關於超連結的小技巧,我們知道超連結可以引入地址讓我們直接開啟一個新視窗,那麼當我們在同一個介面給超連結一個類似地址的準確定位時,我們是不是就可以準確到達當前網頁的一個位置中了呢。

<a href="#內容1">內容1</a>
		
<a name1="內容1">內容一</a>

可以看到我們在超連結標籤屬性href中引入的是第二個超連結的name屬性,這樣做的目的就是當我們點選上面"內容1"時,會觸發超連結直接跳轉到"內容一",學會製作錨點,就可以讓我們在製作一個很長的頁面時製作目錄,使用者就可以通過相應的的目錄指示直接跳轉到相應的位置,給使用者更好的使用體驗。

後面我們會持續更新,敬請期待!!!!