2. 程式人生 > 其它 >前端二向箔03-HTML元資料和連結

前端二向箔03-HTML元資料和連結

阿新 • • 發佈：2021-02-20

技術標籤：前端二向箔html5

03 HTML元資料和連結

html元資料即在head標籤中的部分, 主要是描述了網頁的一些重要的資訊和媒體連結. 大多情況下是提供給瀏覽器爬蟲和機器閱讀的. 連結作為網頁的互聯的基石, 在head中連結有link和script兩種形式.

本文歸納常見的元資料和連結的重要知識.

元資料

  • head

    head本身沒有意義, 只提供儲存容器, 是Document的元資料集合. 不會在頁面上顯示, 且只有一個title和base.

  • title

    網頁html文件標題, 而非網頁內容標題( h1~h6), 主要在搜尋中體現重要性, 對於整個文件的概括性. 這個標題在其他上下文中也會被使用，例如在使用者的歷史、書籤，或搜尋結果中

  • base

    給網頁上的URL提供相對地址的基礎, 相當於根目錄字首, 只能有一個base. 它會改變全域性的連結, 並不提倡使用.

    <base href="https://www.example.com/news/index.html">
...
<p>Visit the <a href="archives.html">archives</a>.</p>

    上面例子中的連結地址是 “https://www.example.com/news/archives.html”。

  • style

    css樣式表

最重要的meta

meta是作為title, base, link等的補充, 而實際上meta型別是開發者常見的優化方向. 本質是key-value.

使用meta要注意:

  • 必須指定任意一個: name，http-equiv，charset， 和 itemprop( 除了itemprop其他的都要同時指定content)
  • 每個文件必須存在不少於一個有 charset 屬性的 meta 元素。

可以自定義meta, 約定好name和value即可, 也可以使用預定義的規範meta.

主要預定義的型別有這幾項:

  1. html5簡化了meta的charset寫法, 新增charset屬性用於設定網頁的編碼. 即:

    <
     
    meta     charset="UTF-8">

    進行utf-8(ASCII是utf-8的子集)編碼是因為一般http請求過程, 伺服器會設定編碼格式, 但應對一些非http協議無請求頭, 如file, 就可以避免亂碼情況.

  2. 具有http-equiv屬性的meta, 執行命令, 一般是新增http頭, 即content-type, 可以同時設定編碼:

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

  3. name為viewport的meta, 設定網頁縮放, 響應式設計中最常用.

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    上述是移動端響應式設計中最典型的使用, 其中content設定key=value, 中間使用逗號分隔.

    屬性解釋:

    • width：頁面寬度，可以取數值，一般設定成 device-width，即裝置寬度。
    • height：頁面高度，可以取數值，一般設定成 device-height，即裝置高度。
    • initial-scale：初始縮放比例. (一般為1)
    • minimum-scale：最小縮放比例。 (一般為1)
    • maximum-scale：最大縮放比例。 (一般為1)
    • user-scalable：是否允許使用者縮放。(對於移動端已有響應式設計就設定為no)

  4. description\application-name, 前者描述網頁, 後者提供網頁應用的名稱

    <meta name=application-name content="mugu">
<meta name="description" content="this is a description>

    對於description, 在網頁搜尋中比較重要, 對於資訊的提取也比較高效

    而application-name是為網頁應用設定的, 可以用作標籤收藏時的使用, 利於瀏覽器演算法生成.

  5. keyword棄用, 很多搜尋引擎不會考慮這些關鍵字，因為該特性是不可靠的甚至會導致垃圾結果，對使用者並沒有幫助。特別是面對一些作弊, 惡意填充的keyword, 瀏覽器搜尋引擎基本不作為考量.

  6. referrer, generator, theme-color…

連結

連結包括兩種, 超連結和外部資源連結, 其中核心就是網際網路的URL和URI系統.

URI 指的是一個資源，URL 指的是用地址定位一個資源，URN 指的是用名稱定位一個資源。 即URL 和 URN 是 URI 的子集。 詳細可見引用[4]

在網頁中連結最重要的兩個屬性是rel和href, 前者是Relationship, 指連結目標文件和本文件的關係; 後者表示Hypertext Reference, 指超連結的目標地址. 把握這兩者的對應關係可以更好的理解和使用響應的標籤.

網頁中的連結主要有以下:

link

  1. rel屬性, 不同的功能

link最主要的使用時連結外部資源. 即外部資源類連結. 常見在head標籤中, 進行stylesheet關係的css檔案引用.

<link rel="stylesheet" type="text/css" href="theme.css">

大多情況向link不會顯示在網頁中, 作為元資料的一類, 其設計的目的是為了瀏覽器和搜尋引擎識別. 比如icon資源, 會被瀏覽器識別:

<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">
<!-- 移動端提供不同解析度, 此處的apple開頭rel為ios特有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">

此外指定不同的rel可以有不同的功能, 如preload預載入一些資原始檔( 只是快取, 未執行, 同常加上type屬性宣告MIME型別 ); 使用prerender可以預渲染頁面, 這在確定使用者會接下的頁面中設定, 來訪問可以極大提升使用者體驗.

<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
<link rel="prerender" href="http://example.com/">

as屬性指定載入資源的型別，它的值一般有下面幾種。

  • script
  • style
  • image
  • media
  • document

還有一些其他資訊類的元資料用途, 即提供給搜尋引擎\瀏覽器等, 此類一般為超連結類連結, 當rel指明為:

<!-- 作者資訊 -->
<link rel="author" href="humans.txt">

<!-- 版權資訊 -->
<link rel="license" href="copyright.html">

<!-- 另一個語言的版本, 通常由搜尋引擎判別; 也可由外掛判斷RSS訂閱連結 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">

<!-- 聯絡方式 -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">

<!-- 歷史資料 -->
<link rel="archives" href="http://example.com/archives/">

<!-- 目錄 -->
<link rel="index" href="http://example.com/article/">

<!-- 導航, 主要在分頁瀏覽的業務場景中 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">

<!-- 部分來自wangdoc.com -->

當然有些已經被meta元資料替代.

  1. media屬性, 外部資源生效的媒介條件

    <link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

    和css的媒體查詢類似, 在不同條件下, 載入不同的檔案資源.

  2. 其他屬性

    <link>標籤的其他屬性如下。

    • crossorigin：載入外部資源的跨域設定。
    • href：外部資源的網址。
    • referrerpolicy：載入時Referer頭資訊欄位的處理方法。
    • as：rel="preload"或rel="prefetch"時，設定外部資源的型別。
    • type：外部資源的 MIME 型別，目前僅用於rel="preload"或rel="prefetch"的情況。
    • title：載入樣式表時，用來標識樣式表的名稱。
    • sizes：用來宣告圖示檔案的尺寸，比如載入蘋果手機的圖示檔案。

a

a標籤指anchor, 即錨點, 在網路中定下信標就是a標籤的功能. a標籤於link同樣具有rel和href, 也可充當元資料, 且rel的:

alternate \ author \ help \ license \ next \ prev \ search

與link的語義相同, 不同的是, a會顯示在頁面上, 更多是閱讀用途.

除了常用的連結, 還有幾個比較重要的用法:

  • download屬性, 表示當前連結用於下載, 如下例, 檔名為bar.exe, 也可省略.

    <a href="foo.exe" download="bar.exe">點選下載</a>

    注意，如果連結點選後，伺服器的 HTTP 迴應的頭資訊設定了Content-Disposition欄位，並且該欄位的值與download屬性不一致，那麼該欄位優先，下載時將顯示其設定的檔名。

  • mailto協議, 開啟本機預設的郵件程式傳送郵件

    <a href="mailto:[email protected]">聯絡我們</a>

<!-- 詳細用法可以指定郵件的主題\日期等, 注意需要轉義, %20為空格 -->
<a
  href="mailto:[email protected][email protected]&subject=The%20subject&body=The%20body"
>傳送郵件</a>

<!-- 分享網頁的用法 -->
<a href="mailto:">告訴朋友</a>

script

作為互動的靈魂, script標籤載入指令碼程式碼, 執行JavaScript程式.

最重要的就是type屬性, 一般預設是"text/javascript". 還有下面一些其他屬性，大部分跟 JavaScript 語言有關.

  • async：該屬性指定 JavaScript 程式碼為非同步執行，不是造成阻塞效果，
  • JavaScript 程式碼預設是同步執行。
  • defer：該屬性指定 JavaScript 程式碼不是立即執行，而是頁面解析完成後執行。
  • crossorigin：如果採用這個屬性，就會採用跨域的方式載入外部指令碼，即 HTTP 請求的頭資訊會加上origin欄位。
  • integrity：給出外部指令碼的雜湊值，防止指令碼被篡改。只有雜湊值相符的外部指令碼，才會執行。
  • nonce：一個密碼隨機數，由伺服器在 HTTP 頭資訊裡面給出，每次載入指令碼都不一樣。它相當於給出了內嵌指令碼的白名單，只有在白名單內的指令碼才能執行。
  • referrerpolicy：HTTP 請求的Referer欄位的處理方法。

<noscript>標籤用於瀏覽器不支援或關閉 JavaScript 時，所要顯示的內容. noscript不是一個功能性標籤, 我個人感覺更像是一種人性化的設計, 雖然有些爭議, 但是在某些層面noscript照顧到一部分人的利益. 可以查閱這篇部落格

相關推薦

前端二向箔03-HTML元資料和連結

技術標籤：前端二向箔html5 03 HTML元資料和連結 html元資料即在head標籤中的部分, 主要是描述了網頁的一些重要的資訊和媒體連結. 大多情況下是提供給瀏覽器爬蟲和機器閱讀的. 連結作為網頁的互聯的基石, 在head

元資料和資料元

由於最近在做主資料方面的專案，就去各論壇瞭解了一下有關主資料的姿勢。這次來記錄一下元資料和資料元的區別。

用gorm向mysql插入的時間資料和實際時間不一致問題

在golang中用gorm向mysql插入的時間資料和實際時間不一致問題 問題： 使用下面這段程式碼向資料插入資料。其中CreateTime和ModifyTime是time.Time型別。使用time.Now()生成的時間和電腦本地時間是一致的，但是當這條

Dynamics CRM 2015/2016新特性之二十七：使用Web API查詢元資料

關注本人微信和易信公眾號： 微軟動態CRM專家羅勇 ，回覆210或者20160321可方便獲取本文，同時可以在第一間得到我釋出的最新的博文資訊，follow me！

離線電商數倉（五十九）之元資料管理（七）Ranger （二）安裝

1Ranger的安裝 1.1 環境準備 Ranger2.0要求對應的Hadoop為3.x以上，Hive為3.x以上版本，JDK為1.8以上版本！

前端開發還可以這麼玩？元資料實踐分享

摘要：元資料是業務流中前端和業務側實現共同使用的一種規範，是溝通前後端的橋樑，其通過統一的資料格式進行約束，從而約定前後端傳參。使用元資料，大幅提升了開發效率，又降低了維護及二次開發成本。

Servlet中向前端傳送Gson轉成的json資料，出現中文亂碼

技術標籤：我的Java學習亂碼servletjavajson 一、 問題描述 今天在做servlet的時候遇到了中文亂碼問題，Gson轉成的json出現了中文亂碼但是在控制檯輸出的時候卻是正常顯示

重學前端（5）HTML元資訊類標籤

  　　我們可以先來了解一下什麼是元資訊類標籤。所謂元資訊，是指描述自身的資訊，元資訊類標籤，就是 HTML 用於描述文件自身的一類標籤，它們通常出現在 head

帶你入坑大資料（二） --- HDFS的讀寫流程和一些重要策略

前言 前情回顧 如果說上一篇是在闡述HDFS最基礎的理論知識，這一篇就是HDFS的主要工作流程，和一些較為有用的策略

深入理解MDL元資料鎖

前言：  當你在MySQL中執行一條SQL時，語句並沒有在你預期的時間內執行完成，這時候我們通常會登陸到MySQL資料庫上檢視是不是出了什麼問題，通常會使用的一個命令就是 show processlist，看看有哪些session，這些se

HBase 系列（二）—— HBase 系統架構及資料結構

一、基本概念 一個典型的 Hbase Table 表如下： 1.1 Row Key (行鍵) Row Key 是用來檢索記錄的主鍵。想要訪問 HBase Table 中的資料，只有以下三種方式：

Spring Boot 配置元資料指南

1. 概覽 在編寫 Spring Boot 應用程式時，將配置屬性對映到 Java bean 上是非常有用的。但是，記錄這些屬性的最好方法是什麼呢？

Spring Boot配置元資料方法教程

這篇文章主要介紹了Spring Boot配置元資料方法教程,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

MySQL如何檢視元資料鎖阻塞在哪裡

MySQL如何檢視元資料鎖阻塞在哪裡 操作步驟： 1、session 1 執行： start transaction; select *from t1;

Node.js下向MySQL資料庫插入批量資料的方法

專案(nodejs)中需要一次性插入多筆資料到資料庫，資料庫是mysql的，由於迴圈插入的效能太差，就像使用批量插入的方法提高資料的插入效能。

通過python掃描二維碼/條形碼並列印資料

需提前安裝好pyzbar和opencv-python庫（博主的電腦安裝opencv-python庫比較麻煩，但大部分都不會出現該問題）

java基礎——資料庫元資料

package jsbc; import java.sql.*; public class TestJDBC { public static void main(String[] args) { Connection c = null;

【原理】元資料管理原理和圖資料庫應用

一、背景 大資料挑戰 大資料時代，餓了麼面臨資料管理、資料使用、資料問題等多重挑戰。具體可以參考下圖：

Spark入門（六）Spark SQL shell啟動方式(元資料儲存在mysql)

一、hive配置檔案  在spak/conf目錄新增hive-site.xml配置，設定mysql作為元資料儲存的資料庫

Hive元資料資訊對應MySQL資料庫表

一、VERSION（儲存Hive版本的元資料表） 如果該表出現問題，根本進入不了Hive-Cli。