meta標簽的常見用法

一、定義和用法

<meta> 標簽始終位于 head 元素中。<meta> 元素可提供有關頁面的元信息(meta-information),元數據不會顯示在頁面上,但是對于機器是可讀的。比如針對搜索引擎和更新頻度的描述和關鍵詞。

元數據(metadata)是關于數據的信息。元數據總是以名稱/值的形式被成對傳遞的。

典型的情況是,meta 元素被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。

元數據可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。

二、可選的屬性

屬性描述
http-equiv
  • content-type
  • expires
  • refresh
  • set-cookie
把 content 屬性關聯到 HTTP 頭部。
name
  • author
  • description
  • keywords
  • generator
  • revised
  • others
把 content 屬性關聯到一個名稱。
schemesome_text定義用于翻譯 content 屬性值的格式。

?

注意:當有http-equiv或者name屬性時,必須要有content屬性,content 屬性提供了名稱/值對中的值,content屬性定義與 http-equiv 或 name 屬性相關的元信息。content始終要和 name 屬性或 http-equiv 屬性一起使用

?1、http-equiv 屬性

http-equiv 屬性為名稱/值對提供了名稱。并指示服務器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。

http-equiv
屬性是添加http頭部內容,對一些自定義的,或者需要額外添加的http頭部內容,需要發送到瀏覽器中,我們就可以是使用這個屬性。

使用帶有 http-equiv 屬性的 <meta> 標簽時,服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。

常用的有:

1、content-Type(顯示字符集的設定):設定頁面使用的字符集。  用法:<meta http-equiv="content-Type" content="text/html;charset=utf-8">
注意:
charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,charset一定要寫第一行,不然就可能會產生亂碼了。

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

兩個都是等效的。
2、Expires(期限):可以用于設定網頁的到期時間。一旦網頁過期,必須到服務器上重新傳輸。 

用法:
<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">
注意:必須使用GMT的時間格式。

3、Refresh(刷新):自動刷新并指向新頁面。

用法:
<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com"> //(注意后面的引號,分別在秒數的前面和網址的后面) 注意:其中的2是指停留2秒鐘后自動刷新到URL網址。

4、Set-Cookie(cookie設定):如果網頁過期,那么存盤的cookie將被刪除。

用法:
<meta http-equiv="Set-Cookie" content="cookie value=xxx; expires=Friday,12-Jan-200118:18:18GMT;path=/">
注意:必須使用GMT的時間格式。

?2、name 屬性

name 屬性提供了名稱/值對中的名稱。通常情況下,您可以自由使用對自己和源文檔的讀者來說富有意義的名稱。

如果沒有提供 name 屬性,那么名稱/值對中的名稱會采用 http-equiv 屬性的值。

常用的有:

分成兩部分:
一個是SEO部分(搜索引擎優化)
1
、Keywords(關鍵字):keywords用來告訴搜索引擎你網頁的關鍵字是什么。 舉例: <meta name="keywords" content="xxxx">2、description(網站內容描述):description用來告訴搜索引擎你的網站主要內容。 舉例: <meta name="description" content="xxx">3、author(作者):標注網頁的作者 舉例: <meta name="author" content="github.com/lihuijuan"> 另一部分是viewport viewport:主要是影響移動端頁面布局的 舉例: <meta name="viewport" content="width=device-width, initial-scale=1.0"> content 有參數: width viewport 寬度(數值/device-width);height viewport 高度(數值/device-height); initial-scale 初始縮放比例;maximum-scale 最大縮放比例; minimum-scale 最小縮放比例;user-scalable 是否允許用戶縮放(yes/no)

3、scheme 屬性(沒用過)

scheme 屬性用于指定要用來翻譯屬性值的方案。此方案應該在由 <head> 標簽的 profile 屬性指定的概況文件中進行了定義。

本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=2ackjb&title=meta標簽的常見用法

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370993.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370993.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370993.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

HttpClient的使用

新引入Hutool-HttpUtil的使用&#xff08;更簡單&#xff0c;更強大&#xff01;&#xff09;&#xff0c;詳見&#xff1a;http://www.cnblogs.com/jiangbei/p/7667858.html 一、概述 1.簡介 根據凡技術必登其官網的原則&#xff08;如果有&#xff09;&#xff0c;我們可以先…

四人幫–代理設計模式

代理是另一種結構設計模式 &#xff0c;可以“代表”另一個對象或“代替”另一個對象以訪問后面的對象。 何時使用此模式&#xff1f; 當我們需要創建一個包裝來覆蓋客戶端的主要對象的復雜性時&#xff0c;將使用代理模式。 有哪些使用場景&#xff1f; 虛擬代理–設想一種…

面試題38_數字在排序數組中出現的次數

題目描寫敘述 統計一個數字在排序數組中出現的次數。解題思路 數組是排序的&#xff0c;所以反復出現的數字是相鄰排列的。 用二分查找算法&#xff0c;找到第一次出現的位置。和 最后一次出現的位置。 推斷第一次出現的位置條件為&#xff1a;當前數字的前一個是否與之相等。若…

Hex hsl 轉換 php,關于 RGB,HEX,HSL 顏色相互轉換

最近一段時間在折騰一個微信在線編輯器的項目&#xff0c;使用 UEditor 進行二次開發。關于 UEditor 的定制&#xff0c;用到的都太粗淺&#xff0c;官方文檔上都能找得到。主題使用的樣式表是 ueditor.css 而不是ueditor.min.css&#xff0c;定制主題要注意這一點。而對整個項…

使用inetaddress測試目標可達性_PDPS軟件機器人虛擬仿真:Smart Place功能介紹與使用方法...

概述對于機器人工作站或生產線的虛擬仿真&#xff0c;很大一部分的作用是找出機器人與工裝夾具等外圍設備的最佳布局位置。市面上大多數的工業機器人虛擬仿真軟件都有這種專門用于檢測機器人與外圍設備之間最佳布局位置的功能&#xff0c;比如DELMIA軟件中的“Auto Place”功能…

JAVA基礎3——常見關鍵字解讀(1)

常見的JAVA中的關鍵字 static static靜態變量 靜態變量&#xff1a;使用static關鍵字定義的變量。static可以修飾變量和方法&#xff0c;也有static靜態代碼塊。被static修飾的成員變量和成員方法獨立于該類的任何對象。也就是說&#xff0c;它不依賴類特定的實例&#xff0c;被…

PostgreSQL PL / java簡介

現代數據庫允許以多種語言編寫存儲過程。 一種常見的實現語言是java.NB&#xff0c;本文討論了PostgreSQL特定的Java實現。 其他數據庫的詳細信息會有所不同&#xff0c;但是概念是相同的。 PL / Java的安裝 在Ubuntu系統上安裝PL / Java很簡單。 我將首先創建一個新模板templ…

強連通分量 圓桌騎士

題目描述 圓桌騎士是一個非常吸引人的職業。因此&#xff0c;在最近幾年里&#xff0c;亞瑟王史無前例的擴招圓桌騎士&#xff0c;并不令人驚訝。現在這里有許多圓桌騎士&#xff0c;每個圓桌騎士都收到一份珍貴的邀請函&#xff0c;被邀請去英靈殿圓桌。這些騎士將要環繞著坐在…

微信小程序echarts層級太高

項目中因為需求&#xff0c;底部的tab導航欄是自己寫的&#xff0c;在開發者工具中一切正常&#xff1b;但是在真機上頁面滑動時&#xff0c;echarts的層級比tab高&#xff0c;調過兩者的z-index后仍然如此。 經過查找后發現cover-view和cover-image替換tab的view后&#xff0…

php解密 碼表,php拼音碼表的生成

php拼音碼表的生成發布于 2014-09-07 11:12:52 | 90 次閱讀 | 評論: 0 | 來源: 網友投遞PHP開源腳本語言PHP(外文名: Hypertext Preprocessor&#xff0c;中文名&#xff1a;“超文本預處理器”)是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特點&#xff0c;入門門檻…

angular js 使用pdf.js_排名靠前的幾個JS框架發展趨勢和前景

轉載自&#xff1a;葡萄城官網&#xff0c;葡萄城為開發者提供專業的開發工具、解決方案和服務&#xff0c;賦能開發者。原文出處&#xff1a;https://blog.bitsrc.io/top-5-javascript-frameworks-past-present-and-future-8b6fda39de02隨著信息技術領域的發展&#xff0c;企業…

工廠設計模式案例研究

我有一份工作來檢查我們的項目代碼質量。 如果我在項目中發現任何障礙&#xff0c;必須將其報告給我的團隊負責人。 我發現了很多漏洞&#xff0c;我認為可以在博客上進行討論。 不是嘲笑作者&#xff0c;而是一起學習和改進自己。 像這段代碼一樣&#xff0c;這是我在我們的代…

【javascript】DOM操作方法(3)——document節點屬性

document.doctype //document.documentElement //來獲取html元素 document.defaultView //返回document對象所在的window對象 document.body //返回當前文檔的<body>節點 document.head //返回當前文檔的<head>節點 document.activeElement //返回當前文…

debian dhcp服務啟動不了_DHCP服務器配置

DHCP &#xff1d; Dynamic Host Configuration Protocol 基于TCP/IP&#xff0c;用于動態配置工作站網絡接口&#xff0c;使工作站的網絡接口管理自動化。DHCP服務器軟件dhcpd網站&#xff1a;http://www.isc.org安裝方法&#xff1a;#tar -zxvf dhcp-4.0.0.tar.gz#cd dhcp-4.…

澤西島的JSON模式生成

因此&#xff0c;在上一篇文章中&#xff0c;我討論了一個允許在WADL中使用JSON-Schema的建議&#xff0c;這篇文章探討了如何使它與最近構建的Jersey一起使用。 在1.16發布之前&#xff0c;您將必須下載/參考1.16SNAPSHOT。 如果您使用的是Maven&#xff0c;那么假設您已經有…

C++map類型 之 簡單介紹

一&#xff1a;map的前世今生&#xff08;1&#xff09;從關聯容器與順序容器說起。關聯容器通過鍵&#xff08;key&#xff09;存儲和讀取元素。而順序容器則通過元素在容器中的位置順序存儲和訪問元素&#xff08;vector,queue,stack,list等&#xff09;。關聯容器&#xff0…

MySql Socket 完成數據庫的增查Demo

需求: 利用MySql數據庫結合前端技術完成用戶的注冊(要求不使用Web服務技術),所以 Demo采用Socket技術實現Web通信. 第一部分:數據庫創建 數據庫采用mysql 5.7.18, 數據庫名稱為MyUser, 內部有一張表 user.字段有 Id,UserName,Psd,Tel 第二部分:數據庫連接與Socket通信 創建控…

oracle導數卡死,oracle-審計導數

1、因審計需求&#xff0c;需要將MySQL、Oracle數據庫中需要的表數據導入到SqlSERVER進行審計。2、之前的方法&#xff1a;A. oracle組將表dump下來&#xff0c;進行壓縮&#xff0c;傳送到oracle導數服務器(中轉服務器)&#xff0c;再進行還原&#xff0c;然后修改表結構&…

蘋果桌面主題_看膩了手機自帶的桌面主題,試試這個

在這個看臉的時代&#xff0c;顏值似乎越來越重要了。尤其是我們每天都要看到的手機桌面&#xff0c;如果它的顏值好一點&#xff0c;也許我們的心情會更好&#xff0c;所以有不少人都用手機自帶的主題來美化桌面&#xff0c;但是對于喜歡個性的我們&#xff0c;手機自帶的主題…

Java SE 11:推動Java向前發展

介紹 在我看來&#xff0c;這篇文章提出了Java語言應該如何發展以保持其作為首選語言的地位。 它還提供了一些我喜歡但有時&#xff08;可能永遠不會&#xff09;成為Java一部分的功能&#xff0c;由于我將要解釋的某些原因&#xff0c;這些功能有時我已經愛上了。 我真的很想…