Maison > interface Web > tutoriel HTML > le corps du texte

Quelles sont les utilisations de la balise head HTML ?

php中世界最好的语言
Libérer: 2018-01-26 09:49:45
original
1956 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser la balise HTML head. Quelles sont les précautions lors de l'utilisation de la balise HTML head. Ce qui suit est un cas pratique, jetons un coup d'œil.

HTML head Il existe de nombreuses balises et éléments dans la partie head, qui impliquent le rendu des pages Web par le navigateur, le référencement, etc. Chaque noyau de navigateur et chaque fabricant de navigateur national ont leurs propres éléments de balise. beaucoup de différences. À l'ère de l'Internet mobile, la structure principale et les méta-éléments des terminaux mobiles sont encore plus importants. Comprendre la signification de chaque balise et rédiger une balise head qui répond à vos propres besoins est le but de cet article. Cet article est basé sur l'article de Yishi et fournit un résumé détaillé pour présenter la signification et les scénarios d'utilisation de chaque balise et élément dans les en-têtes couramment utilisés.
DOCTYPE
DOCTYPE(Document Type), cette déclaration se situe au début du document, avant la balise html. Cette balise indique au navigateur quelle spécification HTML ou XHTML le document utilise.
La déclaration DTD (Document Type Definition) commence par , n'est pas sensible à la casse et n'a aucun contenu devant. S'il y a d'autres contenus (à l'exception des espaces), le navigateur activera le mode bizarreries sous IE. . Rendre la page Web. DTD publique, le format du nom est enregistrement // organisation // balise de type // langue, l'enregistrement indique si l'organisation est enregistrée auprès de l'Organisation internationale de normalisation (ISO), + signifie oui, - signifie non. Organisation est le nom de l'organisation, tel que : W3C. Le type est généralement DTD. Une balise spécifie une description du texte public, c'est-à-dire un nom descriptif unique pour le texte public référencé, qui peut être suivi d'un numéro de version. La langue finale est l'identifiant de langue ISO 639 de la langue DTD, tel que : EN pour l'anglais, ZH pour le chinois. XHTML 1.0 peut déclarer trois types de DTD. Représente respectivement la version stricte, la version de transition et le document HTML basé sur un cadre.

QuantityHTML 4.01 strict

XML/HTML Copier le contenu du code dans le presse-papiers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Copier après la connexion

QuantityHTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Copier après la connexion

● HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Copier après la connexion

● Le dernier HTML5 introduit une écriture plus concise. Il est compatible vers l'avant et vers l'arrière et son utilisation est recommandée.

<!doctype html>
Copier après la connexion

Le doctype a deux objectifs principaux en HTML.

● Vérifier la validité des documents.

Il indique à l'agent utilisateur et au validateur selon quelle DTD ce document est écrit. Cette action est passive. Chaque fois que la page est chargée, le navigateur ne télécharge pas la DTD et ne vérifie pas la validité. Elle n'est activée que lorsque la page est vérifiée manuellement.

Quantity Déterminez le mode de rendu du navigateur

Pour les opérations réelles, indiquez au navigateur quel algorithme d'analyse utiliser lors de la lecture du document. S'il n'est pas écrit, le navigateur analysera le code selon ses propres règles, ce qui peut sérieusement affecter la présentation HTML. Les navigateurs disposent de trois méthodes pour analyser les documents HTML.

● Mode non étrange (standard)
● Mode étrange
● Mode partiellement étrange (presque standard) À propos du mode document, du mode navigateur et du mode strict du navigateur IE , mode bizarre, balise DOCTYPE, mode verbeux ? standard! contenu.

charset

déclare le codage de caractères utilisé dans le document,

<meta charset="utf-8">
Copier après la connexion

html5 avant que la page Web n'écrive comme ceci :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Copier après la connexion

Ces deux éléments sont équivalents, veuillez lire étape par étape : vs , il est donc recommandé d'en utiliser un plus court, qui est plus facile à retenir.

attribut lang

Chinois simplifié

<html lang="zh-cmn-Hans">
Copier après la connexion

Chinois traditionnel

<html lang="zh-cmn-Hant">
Copier après la connexion

Pourquoi pas ce que nous écrivons habituellement, veuillez lire : La déclaration à la l'en-tête de la page doit utiliser ou.

Donner la priorité à l'utilisation de la dernière version d'IE et de Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Copier après la connexion

 360 Utiliser Google Chrome Frame

<meta name="renderer" content="webkit">
Copier après la connexion

 360 Le navigateur lira immédiatement cette balise. noyau de vitesse correspondant. De plus, par souci d'assurance, ajoutez

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Copier après la connexion

L'effet qui peut être obtenu en écrivant de cette façon est que si Google Chrome Frame est installé, GCF sera utilisé pour rendre la page si GCF l'est. non installé, la version la plus élevée du noyau IE sera utilisée pour le rendu.

Liens connexes : Documentation sur les balises méta de contrôle du noyau du navigateur

Baidu interdit le transcodage

Lorsque vous ouvrez une page Web via un téléphone mobile Baidu, Baidu peut transcoder votre page Web et enlever vos vêtements et mettez des publicités en plâtre de peau de chien sur votre corps. À cet effet, vous pouvez ajouter

<meta http-equiv="Cache-Control" content="no-siteapp" />
Copier après la connexion

dans l'en-tête : Déclaration de transcodage de SiteApp

Section d'optimisation SEO
<🎜. > Balise Titre de la page (l'en-tête est obligatoire)

<title>your title</title>
Copier après la connexion
Mots-clés de la page Mots-clés

<meta name="keywords" content="your keywords">
Copier après la connexion
Description de la page Description du contenu

<meta name="description" content="your description">
Copier après la connexion
Définir le Web auteur de la page

<meta name="author" content="author,email address">
Copier après la connexion
Définir la méthode d'indexation du moteur de recherche Web. Robotterms est un ensemble de valeurs séparées par des virgules anglaises ",". Il a généralement les valeurs suivantes : none, noindex, nofollow, all,. indexer et suivre.


<meta name="robots" content="index,follow">
Copier après la connexion
Liens associés : WEB1038 - La balise contient une valeur non valide



viewport

  viewport 可以让布局在移动浏览器上显示的更好。 通常会写

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Copier après la connexion

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

content 参数:

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
Copier après la connexion

而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。

<meta name="viewport" content="width=device-width,user-scalable=yes">
Copier après la connexion

相关链接:非响应式设计的viewport

  适配 iPhone 6 和 iPhone 6plus 则需要写:

<meta name="viewport" content="width=375">  
<meta name="viewport" content="width=414">
Copier après la connexion

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,iPhone 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,iPhone 6 plus 上是 414px。
  ios 设备
  添加到主屏后的标题(iOS 6 新增)

<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题(iOS 6 新增) -->
Copier après la connexion

是否启用 WebApp 全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 -->
Copier après la connexion

设置状态栏的背景颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />    
<!-- 设置状态栏的背景颜色,只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
Copier après la connexion

只有在 "apple-mobile-web-app-capable" content="yes" 时生效

  content 参数:

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 -->
Copier après la connexion

iOS 图标

  rel 参数: apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果,直接显示设计原图。 iPhone 和 iTouch,默认 57x57 像素,必须有

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
Copier après la connexion

  iPad,72x72 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad,72x72 像素,可以没有,但推荐有 -->
Copier après la connexion

  Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
Copier après la connexion

  Retina iPad,144x144 像素,可以没有,但推荐有

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
Copier après la connexion

  IOS 图标大小在iPhone 6 plus上是180×180,iPhone 6 是120x120。 适配iPhone 6 plus,则需要在中加上这段

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
Copier après la connexion

iOS 启动画面

官方文档:https://developer.apple.com/library/ios/qa/qa1686/_index.html
参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

  iPad 竖屏 768 x 1004(标准分辨率)

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004(标准分辨率) -->
Copier après la connexion

  iPad 竖屏 1536x2008(Retina)

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008(Retina) -->
Copier après la connexion

  iPad 横屏 1024x748(标准分辨率)

复制代码代码如下:

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748(标准分辨率) -->
Copier après la connexion

  iPad 横屏 2048x1496(Retina)

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496(Retina) -->
Copier après la connexion

  iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

  iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

  iPhone/iPod Touch 竖屏 640x960 (Retina)

<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
Copier après la connexion

  iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
Copier après la connexion

  添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
Copier après la connexion

  iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
Copier après la connexion

Windows 8
  Windows 8 磁贴颜色

复制代码代码如下:

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
Copier après la connexion

  Windows 8 磁贴图标

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
Copier après la connexion

  rss订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->
  favicon icon
Copier après la connexion
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->
Copier après la connexion

比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet

移动端的meta

  
  
  
  
  
  
  
  
  
<meta name="renderer" content="webkit">  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
Copier après la connexion

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

html怎样使用style添加属性

a标签href属性与onclick事件应该如何使用

html文件中include文件内容应该如何使用

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!