HTML基本知識
在本文中,我們將介紹HTML編碼的所有基本知識。在開始使用HTML進行編碼時,我們必須考慮並包括各種標籤。這些標籤有助於組織或腳本或網頁中元素的基本格式。這些分步過程將指導您完成編寫HTML的過程。
基本HTML文檔
下面提到的是基本的HTML標記,該標記將整個文檔分為頭部,正文等各個部分。
- 每個HTML文檔都以HTML文檔標籤開頭。儘管這不是強制性的,但是使用下面提到的標記開始文檔是一個好習慣:
<!DOCTYPE html>
- <html>*:每個HTML代碼都必須包含在基本HTML標記之間。它以\*<html>**開頭並以</ html>**標記結束。
- <head>*:接下來是head標籤,其中包含網頁或文檔的所有標題信息,如頁面標題和其他雜項信息。這些信息包含在head標記內,該標記以\*<head>**開始,以</ head>**結尾。該標籤的內容將在後面的課程中進行說明。
- <title>:我們可以使用<title>**標籤提及網頁的標題。這是標題信息,因此在標題標籤中提到。標籤以**<title>**開頭,以</ title>**結尾
- **<body>:到目前為止,下一步是我們已經了解的所有標籤中最重要的。body標籤包含頁面的實際正文,所有用戶都可以看到該正文。這以<body>打開,以</ body>**結尾。此標籤中包含的所有內容都會在網頁上顯示,包括文字,圖像,音頻或視頻,甚至是鏈接。我們將在本節的後面部分看到如何使用各種標記將提及的內容插入我們的網頁。
代碼的整個模式如下所示:
<html>
<head>
<!-- Information about the page -->
<!--This is the comment tag-->
<title>基本HTML文檔</title>
</head>
<body>
<!--Contents of the webpage-->
</body>
</html>
此代碼不會顯示任何內容。它只是顯示瞭如何編寫HTML代碼的基本模式,並將頁面標題命名為“基本HTML文檔”。<!– –在此處註釋– –>是HTML中的註釋標記,它不讀取該標記內的行。
HTML標題
這些標籤可幫助我們為網頁內容提供標題。這些標籤主要寫在body標籤內部。HTML為我們提供了從**<h1>到<h6>的**六個標題標籤。每個標籤以不同的樣式和字體大小顯示標題。
範例:
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<h2>Hello GeeksforGeeks</h2>
<h3>Hello GeeksforGeeks</h3>
<h4>Hello GeeksforGeeks</h4>
<h5>Hello GeeksforGeeks</h5>
<h6>Hello GeeksforGeeks</h6>
</body>
</html>
輸出:
HTML段落
這些標記幫助我們在網頁中編寫段落語句。他們開始與<p>標籤和結束與<p> 。在這裡,
<br>
標記用於換行並用作回車符。
<br>
是一個空標籤。
範例:
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
</body>
</html>
HTML水平線
所述**<HR>**標記用於打破頁分成各個部分,創建與由左到頁面的右側延伸的水平行的水平幫助利潤率。這也是一個空標記,不包含任何其他語句。
範例:
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>
</body>
</html>
輸出:
HTML圖片
image標籤用於將圖像插入我們的網頁。要插入的圖像的源位於<img src =” *source_of_image* “>標記內。
範例:
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<img src="https://asset.1ju.org/cmsstatic/html-basics.png">
</body>
</html>
輸出:
HTML中還有各種其他標籤可用於插入鏈接,音頻和各種其他格式標籤,我們將在後面的部分中學習這些標籤。