Мета-теги всегда использовались для SEO-оптимизации и настройки тегов окна просмотра, однако, просматривая интерфейсные коды таких веб-сайтов, как Taobao, JD.com и Suning, я обнаружил, что метатеги используются по-разному Я всегда недооценивал метатеги. Я написал эту статью после прочтения внешнего кода нескольких других крупных сайтов и изучения соответствующих материалов.Если в статье есть какая-либо ошибка, пожалуйста, укажите на нее и немедленно исправьте.
http-equiv
http-equivЭто очень важная часть содержимого метатега. Буквально он связан с HTTP. По сути, значением содержимого этого атрибута является определенный HTTP-заголовок. Этот атрибут взаимодействует с сервером и браузером для отображения содержимого веб-сайте.Точные и своевременные.
в этой собственностиcontent-type、content-language和set-cookieбыло отменено, а такие вещи, какcleartype、imagetoolbarЭта категория не входит в рамки стандарта HTML и не будет здесь описываться.
content-security-policy
Из соображений безопасности политика браузера в отношении одного и того же источника в определенной степени защищает безопасность пользователей, но, как иscript、link、imgНа такие теги не распространяется политика одного и того же происхождения, и эти факторы будут представлять угрозу безопасности для наших пользователей.В настоящее время этот атрибут вступает в игру.
В браузерах XSS-атаки можно уменьшить, установив это свойство, чтобы объявить, какие динамические ресурсы разрешено загружать. Содержимое этого атрибута включает в себяscript、style、font、mediaКонтроль других статических ресурсов из-за их чрезмерного содержания здесь повторяться не будет.
Чтобы узнать больше об этом, прочитайтеContent Security Policy Reference.
кеш-контроль, Прагма, Истекает
Эти три свойства перечислены рядом, поскольку они имеют те же свойства, что и заголовки HTTP. Буквально добавление соответствующего атрибута позволяет браузеру кэшировать соответствующий html-контент, поэтому на некоторых веб-сайтах (включая крупные веб-сайты) вы можете увидеть следующее содержимое метатега.
<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
Однако реальность жестока, эти теги часто не действуют, даже в спецификации HTML5 атрибуты в http-equiv не включают эти три, если нам нужно выполнить управление кешем, или Скрепите свои надежды с помощью заголовков HTTP.
x-dns-prefetch-control
Хотя настройка кеша в метатеге недействительна, мы можем настроить метатег для выполнения разрешения DNS заранее, чтобы повысить производительность веб-сайта. Тег a на HTML-странице автоматически включит расширенное разрешение DNS, но не удастся использовать HTTPS. В настоящее время настала очередь появления этого атрибута.
установив<meta http-equiv="x-dns-prefetch-control" content="on" />Это позволяет тегу выполнять предварительное разрешение DNS в среде HTTPS.
refresh
Значение этого свойства можно использовать для перехода между страницами, и его действие такое же, как и у следующей функции.
setTimeout(function(){
window.location.href = "https://www.example.com"
},time)
Его обычное использование выглядит следующим образом:
//当前页面每一秒后刷新一下
<meta http-equiv="refresh" content="1">
//当前页面一秒后跳转到首页
<meta http-equiv="refresh" content="0;url='/'">
/当前页面一秒后跳转到百度
<meta http-equiv="refresh" content="0;url='https://www.baidu.com'">
Следует отметить, что в некоторых браузерах (Firefox) пользователю необходимо вручную включить автообновление, и при этом оно выполняется относительно JS, и переход нужно ждать слишком долго.
default-style
Это свойство указывает предпочтительную таблицу стилей для использования на странице. Свойство содержимого должно содержать<link>Заголовок элемента, атрибут href связан с таблицей стилей CSS или содержит таблицу стилей CSS.<style>Название элемента.
name
nameявляется наиболее часто используемым атрибутом в нашей повседневной жизни, среди которыхauthor、keywords、description、robots、viewportЗначение часто используется в повседневной жизни, поэтому здесь мы не будем его объяснять.
Ниже перечислены некоторые из наиболее полезных значений в приложении.
/*保留历史记录以及动画效果*/
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
/*是否启用 WebApp 全屏模式*/
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置状态栏的背景颜色,只有在 “apple-mobile-web-app-capable” content=”yes” 时生效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
/*添加到主屏后的标题*/
<meta name="apple-mobile-web-app-title" content="App Title">
/*在网页上方显示一个app banner，提供app store下载*/
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"
/*启用360浏览器的极速模式(webkit)*/
<meta name="renderer" content="webkit">
/*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">
/*禁止自动探测并格式化手机号码*/
<meta name="format-detection" content="telephone=no">
Разнообразный
На самом деле роль метатегов гораздо больше, многие сайты (google, baidu, sogou, twitter) имеют свой набор спецификаций, для совместимости разработчики естественно добавляют соответствующие атрибуты. Соответствующие метатеги здесь объясняться не будут.