文檔元素 · Magic_sword2

[TOC] # 簡介說明 原文鏈接： - [HTML5 head meta屬性整理](http://caibaojian.com/mobile-meta.html) - [Meta 標簽與搜索引擎優化](https://www.w3cplus.com/html5/meta-tags-and-seo.html) - [ISO 639-1 語言代碼](https://www.w3school.com.cn/tags/html_ref_language_codes.asp) - [MIME 參考手冊](https://www.w3school.com.cn/media/media_mimeref.asp) ``` 版本：HTML5文檔元素作用：HTML5文檔元素 ``` # 文檔元素 # \<!--...--\> ***** 定義注釋 # \<!DOCTYPE\> ***** DTD定義文檔標準類型 ### 參數說明 str: * 類型：字符串 * 默認值：無 * 描述：定義文檔類型 * 可選值：[ html ] ### 示例內容 1. 舉例說明 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <!DOCTYPE html> ``` # \<html\> ***** 定義 HTML 文檔 ### 參數說明 lang: * 類型：字符串 * 默認值：無 * 描述：定義html文檔的語言 * 可選值：[ zh-ch | en ] # \<base\> ***** 定義頁面中所有鏈接的默認地址或默認目標。 ### 參數說明 href: * 類型：字符串 * 默認值：無 * 描述：所有文檔中沒有特殊定義href屬性的a標簽的href屬性 * 可選值：[ ] # ~~[aba]-\<basefont\>~~ ***** 用來設置文檔的默認字體大小 ### 參數說明 color: * 類型：字符串 * 默認值：無 * 描述：默認的字體顏色 * 可選值：[ ] size: * 類型：字符串 * 默認值：無 * 描述：默認的字體大小 * 可選值：[ ] face: * 類型：字符串 * 默認值：無 * 描述：規定文檔中的默認字體 * 可選值：[ ] # \<head\> ***** 定義關于文檔的信息，html文檔頭部 # \<link\> ***** 定義文檔與外部資源的關系 ### 參數說明 rel: * 類型：字符串 * 默認值：無 * 描述：定義資源關系 * 可選值：[ stylesheet | canonical | alternate | prev | next | author | help | license | search | dns-prefetch | preconnect | prefetch | preload | prerender | modulepreload | pingback | manifest ] type: * 類型：字符串 * 默認值：無 * 描述：定義資源類型，MIME類型 * 可選值：[ type/css ] media: * 類型：字符串 * 默認值：無 * 描述：定義媒體響應調用不同css樣式表 * 可選值：[ all and (orientation:portrait) ] href: * 類型：字符串 * 默認值：無 * 描述：定義資源位置 * 可選值：[ ] # \<meta\> ***** 定義關于 HTML 文檔的元數據信息 ### 示例內容 1. PC端常用屬性 ``` <meta charset="utf-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="full-screen" content="yes"> <meta name="screen-orientation" content="portrait"> <meta name="x5-fullscreen" content="true"> <meta name="x5-orientation" content="portrait"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="keywords" content="關鍵字"/> <meta name="description" content="描述"/> <meta name="robots" content="all"/> <meta name="author" content="SystemLight"/> <meta name="color-scheme" content="dark"> <meta name="theme-color" content="#4285f4"> <meta name="theme-color" media="(prefers-color-scheme: light)" content="white"> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=1"/> viewport-fit 可以設置可視視窗的大小，它有三個屬性值： Auto：默認值。這個值不影響初始布局視窗，整個 Web 頁面是可視的，與Contain表現一致。 Contain：最初的布局視窗和視覺布局視窗被設置為最大的矩形。 Cover：初始布局視窗和視覺布局視窗被設置為設備物理屏幕的限定矩形。 Safari瀏覽器： <meta name="apple-mobile-web-app-title" content="蘋果app標題"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-touch-fullscreen" content="yes"> 關閉自動轉換數字為手機號、郵箱 <meta name="format-detection" content="telephone=no,email=no"> <link rel="apple-touch-icon-precomposed" href=""> <a href="tel:13800138000">13800138000</a> <a href="sms:13800138000">13800138000</a> <a href="mailto:13800138000">發送郵件</a> Referrer Policy(引用策略) <meta name="referrer" content="no-referrer-when-downgrade" /> 告知瀏覽器本頁面屬于什么類型設備的頁面 <meta name="applicable-device" /> 富媒體對象 OG ``` # \<style\> ***** 定義文檔的樣式信息 # \<title\> ***** 定義文檔的標題 # \<body\> ***** 定義文檔的主體