Cette fois, je vais vous montrer comment utiliser la balise méta du HTML. Quelles sont les précautions lors de l'utilisation de la balise méta du HTML. Ce qui suit est un cas pratique, jetons un coup d'œil.
Avant-propos
meta est une balise auxiliaire dans la zone d'en-tête du langage HTML. Peut-être pensez-vous que ce code est inutile. En fait, si vous savez faire bon usage des balises méta, cela vous apportera des effets inattendus. Les fonctions des balises méta sont : l'optimisation des moteurs de recherche (SEO), définir la langue utilisée sur la page, actualiser automatiquement et pointer vers de nouvelles pages, et réaliser la dynamique lors de la conversion de pages Web, contrôler la mise en mémoire tampon des pages, l'évaluation et l'évaluation des pages Web, contrôler la fenêtre d'affichage des pages Web, etc. !
Résumé méta du HTML
Composition de la balise méta : la balise méta a deux attributs, qui sont l'attribut http-equiv et l'attribut name. Différents attributs sont des valeurs de paramètres différentes, ces différentes valeurs de paramètres réalisent différentes fonctions de page Web.
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<!-- iOS 图标 end -->
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<title>标题</title>
</head>Ce qui précède donne quelques attributs méta couramment utilisés, et ce qui suit donne une compréhension de l'utilisation des méta.
meta est une balise auxiliaire dans la zone d'en-tête du langage HTML. Peut-être pensez-vous que ce code est inutile. En fait, si vous savez faire bon usage des balises méta, cela vous apportera des effets inattendus. Les fonctions des balises méta sont : l'optimisation des moteurs de recherche (seo), définir la langue utilisée sur la page, actualiser automatiquement et pointer vers de nouvelles pages, et réaliser la dynamique de conversion des pages Web, contrôler la mise en mémoire tampon des pages, l'évaluation et l'évaluation des pages Web, contrôler la fenêtre d'affichage des pages Web, etc. !
Composition de la balise méta : la balise méta a deux attributs, il s'agit de l'attribut http-equiv et de l'attribut name. Différents attributs ont des valeurs de paramètres différentes. Ces différentes valeurs de paramètres réalisent différentes fonctions de pages Web.
1. Attribut de nom
L'attribut de nom est principalement utilisé pour décrire les pages Web, et la valeur de l'attribut correspondante est le contenu. Le contenu du contenu est principalement utilisé par les robots des moteurs de recherche pour trouver des informations et. classer les informations.
Le format syntaxique de l'attribut name de la balise méta est :
<meta name="参数"content="具体的参数值">。
L'attribut name a principalement les paramètres suivants :
Mots-clés (mots-clés)<. 🎜>
Description : les mots-clés sont utilisés pour indiquer aux moteurs de recherche quels sont les mots-clés de votre page Web. Exemple :<meta name="keywords"content="meta总结,html meta,meta属性,meta跳转">
<meta name="description"content="haorooms博客,html的meta总结，meta是html语言head区的一个辅助性标签。">
<meta name="robots"content="none">
interrogeés ;
Le paramètre d'information est aucun : le fichier ne sera pas récupéré, et les liens sur la page ne peuvent pas être interrogés le paramètre d'information est index : le fichier sera récupéré ;le paramètre d'information est suivant : sur la page Le lien peut être interrogé
le paramètre d'information est noindex : le fichier ne sera pas récupéré, mais le lien sur la page peut être interrogé
le paramètre d'information est nofollow : le fichier sera récupéré, mais la page Les liens sur ne peuvent pas être interrogés Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web php chinois ! Lecture connexe :Comment insérer une vidéo dans une page Web HTML
Comment faire lire une zone de texte HTML -effet uniquement
Comment utiliser HTML+CSS pour afficher la barre de menu secondaire en faisant glisser la souris dessus
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
