文档元素 · 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\> ***** 定义文档的主体