目錄
HTML 中的元標記清單
HTML 中元標記的工作
HTML 中元標記的範例
範例#1
Example #3
Conclusion
首頁 web前端 html教學 HTML 中的元標記

HTML 中的元標記

Sep 04, 2024 pm 04:20 PM
html html5 HTML Tutorial HTML Properties HTML tags

HTML 中的元標記用於定義有關網頁或 HTML 文件的資料。借助元標記,可以定義文件的描述、上次更新時的作者資訊;它用於給出 HTML 文件的詳細屬性。元標記在 中定義。 HTML 標籤,包含在

中部分。對於網頁設計者來說,顯示網頁的實際顯示部分是最有用的。整個視窗控制將由他們使用 HTML 5 中的元標記來完成。大多數瀏覽器都會引用元標記來實現許多有用的功能,例如刷新頁面、顯示網頁內容以及它們使用的 Web 服務。

文法

head 部分使用的元標記如下:

<meta charset="utf-8">
登入後複製

在上面的語法中,它指出 charset=”utf-8” 為顯示任何類型的語言提供了最佳支援。
這是另一個具有某些值的元標記的語法是:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
登入後複製

它用於處理視窗的大小及其所有頁面尺寸值和頁面滾動,以完美地適應我們的網頁在任何類型的設備上。

HTML 中的元標記清單

HTML 中使用了不同類型的 Meta 標籤;我們來一一看看:

1。 這是一個非常基本的元標記,用於定義任何類型的語言。

2。  用來定義最多 150 個字的內容說明。

3。  用來保留所定義公司的所有版權。

4。  用來定義特定網頁的摘要。

5。  它用來定義 HTML 文件的作者。

6。  用於定義標籤屬性中定義的特定公司的URL位址。

7。  它用於處理我們文件中的評級。

8。  如果我們想為 HTML 文件定義副標題,那麼可以使用此標籤。

9。  它用於在指定的時間刷新我們的網頁垃圾郵件。

10。  它是用來依照定義的實體值來分類我們的文件。

11。  這個標籤用來指​​定Meta標籤中的一些關鍵字,這樣就可以在我們的文件中輕鬆搜尋這些內容。

12。  此標籤用於定義我們文件的摘要。

HTML 中元標記的工作

HTML中的Meta標籤主要用於在我們的網頁文件中包含機器可讀的信息,這些信息在網頁上實際上是不可見的。這個標籤在 HTML 中的另一個最重要的工作是,借助這個標籤,人們可以使用這個元標籤功能輕鬆重定向到另一個網頁。

元標記可以正常運作的一些屬性清單如下:

1。內容: 元標記中的內容就像其包含的元標記的值一樣。

2。名稱: 名稱用作元標記的屬性。它以詳細資訊、所有者、關鍵字等形式出現。

3。 http-equiv: 此屬性用於定義文件中的標頭詳細資訊。

4。 Charset: 它是 Meta 標籤中的主要屬性,用於定義字元編碼以在其文件中進行聲明。

5。方案: 此屬性用於定義將使用實際元標記的方案。但 HTML5 不支援這種類型的屬性。

HTML 中元標記的範例

讓我們來看一些例子

範例#1

我們將使用Meta標籤,它會被電腦系統讀取,但網頁的訪客看不到任何內容。

HTML 程式碼:

<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Meta tag details information here">
<meta name="robots" content="Robotics"/>
<meta name="hotmail:card" content="summary"/>
</head>
</html>
登入後複製

輸出:它將顯示空白螢幕作為輸出。

HTML 中的元標記

Example #2

Here is this example we are going to use different kinds of Meta tags and show the output; the web page will be refresh at every specific time and store cookies for your page, also mentioning its expiry date.

HTML code:

<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta http-equiv = "cookie" content = "userid = xyz;
expires = Tuesday, 31-Dec-19 23:59:59 IST;" />
<meta name = "revised" content = "EDUCBA -Online courses, 3/7/2019" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<h1>EDUCBA</h1>
<h2>Become an Awesome Design Expert</h2>
<p>EDUCBA- All about online certification courses</p>
<h4>Learn Graphic designing, Animation, Game Development, Video Editing & more with our Online Certification Courses</h4>
<p>Choose your interest area and get certified with our online Courses in Finance, Data Science, Software Development, Excel, Design, Project Management, Personal Development, Marketing and Human Resources.</p>
</body>
</html>
登入後複製

Output: The webpage shown in output will refresh every 5 seconds.

HTML 中的元標記

Example #3

Let’s see another example using meta tags, it will reflect the same as above, but after refreshing the webpage, it will redirect to another webpage which URL’s will be mentioned in the Meta tag as shown in the below HTML code:

HTML code:

<head>
<title>Meta Tags in HTML 5</title>
<meta name = "keywords" content = "HTML 5, Meta Tag" />
<meta name = "description" content = "Detail description of Meta Tags in
HTML 5."/>
<meta http-equiv = "refresh" content = "10; url = https://www.educba.com/" />
</head>
<body>
<p>EDUCBA- All about online certification courses</p>
</body>
登入後複製

Output:

HTML 中的元標記

HTML 中的元標記

Conclusion

So, a Meta tag in Html is used to define metadata about HTML documents. The code included in it is a machine-readable format that works well with a webpage but doesn’t show any content on the page to the visitors. Meta tag containing 3 different types of attributes like global, element-specific, and event handler attributes.

以上是HTML 中的元標記的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1659
14
CakePHP 教程
1416
52
Laravel 教程
1310
25
PHP教程
1258
29
C# 教程
1233
24
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

您如何在PHP中解析和處理HTML/XML? 您如何在PHP中解析和處理HTML/XML? Feb 07, 2025 am 11:57 AM

本教程演示瞭如何使用PHP有效地處理XML文檔。 XML(可擴展的標記語言)是一種用於人類可讀性和機器解析的多功能文本標記語言。它通常用於數據存儲

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles