Каждый стандарт содержит HTML-документ<head>В части заголовка, помимо основных функций объявления типа документа, метода кодирования и названия документа, а также введения внешних ресурсов, заголовок может делать много очень полезных вещей.Эта статья систематизирует некоторые лучшие практики, признанные автором, и пишет это вот с вами поделитесь.
язык
существуетhtmlчерез этикеткуlangЧеткое объявление языка атрибута поможет переводу.Значения атрибута для веб-страниц на английском, упрощенном китайском и традиционном китайском языках следующие:
<html lang="en">
<html lang="zh-Hans">
<html lang="zh-Hant">кодирование
пожалуйста в<head>Первая линия в едином использованииutf-8Заявление о кодировании.
<meta charset="utf-8">Базовый элемент
попробуй не использовать<base>Элементы, абсолютные адреса и URL-адреса лучше подходят для разработчиков и пользователей.
<!-- Bad -->
<base href="/blog/">
<link href="hello-world" rel="canonical">
<!-- Good -->
<link href="/blog/hello-world" rel="canonical">Viewport
настраиватьviewportШирина устройства — это ширина устройства, коэффициент масштабирования по умолчанию равен 1 (позволяет пользователю масштабировать), установитеviewport-fit=coverСовместим с полноэкранным дисплеем iPhone X с «челкой».
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">Предварительная выборка DNS
Предварительная выборка DNS — это функция, которая позволяет браузерам активно выполнять разрешение доменных имен, и ее область действия включает все ссылки в текущем документе, что может уменьшить задержку, когда пользователи щелкают ссылки.
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//fonts.googleapis.com">Предварительная загрузка
Указывает браузеру предварительно запрашивать ключевые ресурсы, необходимые для текущей страницы.
<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/js/main.js" as="script">предварительный запрос
Указывает браузеру предварительно запрашивать ключевые ресурсы, необходимые странице, которую пользователь собирается просмотреть.
<link rel="prefetch" href="/img/css-sprite.png">
<link rel="prefetch" href="/fonts/icons.woff2">Предпочтение рендеринга
Для различных отечественных двухъядерных браузеров, установивrendererзаголовки требуют, чтобы они использовали ядро webkit; для IE, установивIE=edgeТребуйте, чтобы он использовал последнюю версию; для мошеннической практики принудительного перекодирования поиска Baidu передайтеno-transformОтключите его автоматическое перекодирование; проинструктируйте браузеры не мудрить с идентификацией таких вещей, как телефонные звонки, электронные письма или адреса (мобильные).
<meta name="renderer" content="webkit"> <!-- 用在360中 -->
<meta name="force-rendering" content="webkit"> <!-- 用在其它 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对 IE 浏览器 -->
<meta http-equiv="Cache-Control" content="no-transform"> <!-- 针对百度搜索 -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">Документация
Некоторые HTML-документы с метаданными, в том числе: автор, описание и инструменты генерации ключевых слов; настройкиrobotsдляindex,followСообщите сканерам поисковых систем, что страницу необходимо проиндексировать и что все ссылки на странице должны продолжать переходить; установитьreferrerдляorigin-when-cross-originУказывает, что когда браузер выполняет междоменный переход, егоreferrerЗначения будут объединены в доменные имена, а не в конкретные URL-адреса.
<meta name="author" content="米老朱">
<meta name="description" content="米老朱的个人博客">
<meta name="keywords" content="米老朱,极客,博客,WEB,开发,产品设计">
<meta name="generator" content="Hugo 0.32">
<meta name="robots" content="index,follow">
<meta name="referrer" content="origin-when-cross-origin">Icons
Хотя все браузеры по-прежнему поддерживают устаревший формат favicon.ico, в эпоху HTML5 нам следует использовать лучшую иконку PNG со схемой размеров. В то же время, для совместимости со старыми браузерами, мы можем поместить сгенерированный файл favicon.ico в корневой каталог веб-сайта, обычно браузер автоматически запрашивает и загружает его, и его не нужно импортировать. через тег ссылки.
<meta name="theme-color" content="#db5945"> <!-- 主题颜色 -->
<meta name="application-name" content="米老朱的博客"> <!-- 应用名称 -->
<meta name="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="米老朱的博客"> <!-- iOS 下的应用名称 -->
<meta name="msapplication-tooltip" content="米老朱的博客"> <!-- Hover 的提示信息 -->
<meta name="msapplication-TileColor" content="#db5945"> <!-- 磁贴背景颜色 -->
<meta name="msapplication-TileImage" content="/img/logo-144.png"> <!-- 磁贴图标 -->
<meta name="msapplication-config" content="/browserconfig.xml"> <!-- 磁贴配置文件 -->
<link rel="icon" type="image/png" href="/img/logo-16.png" sizes="16x16"> <!-- Browser Favicon -->
<link rel="icon" type="image/png" href="/img/logo-32.png" sizes="32x32"> <!-- Taskbar Shortcut -->
<link rel="icon" type="image/png" href="/img/logo-96.png" sizes="96x96"> <!-- Desktop Shortcut -->
<link rel="icon" type="image/png" href="/img/logo-128.png" sizes="128x128"> <!-- Chrome Web Store -->
<link rel="icon" type="image/png" href="/img/logo-196.png" sizes="196x196"> <!-- Chrome for Android Home Screen -->
<link rel="icon" type="image/png" href="/img/logo-228.png" sizes="228x228"> <!-- Opera Coast Icon -->
<link rel="apple-touch-icon" href="/img/logo-120.png"> <!-- iPhone -->
<link rel="apple-touch-icon" href="/img/logo-152.png" sizes="152x152"> <!-- iPad -->
<link rel="apple-touch-icon" href="/img/logo-180.png" sizes="180x180"> <!-- iPhone Plus -->
<link rel="apple-touch-icon" href="/img/logo-167.png" sizes="167x167"> <!-- iPad Pro -->
<link rel="mask-icon" href="/img/logo.svg" color="green"> <!-- Safari Pinned Tab Icon -->Чтобы интерфейс Metro выглядел лучше, Microsoft представилаbrowserconfig.xmlфайл, который в основном используется для настройки значка и цвета фона фиксированного магнита на веб-сайте.Его формат выглядит следующим образом:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/img/logo-70.png"/>
<square150x150logo src="/img/logo-150.png"/>
<wide310x150logo src="/img/logo-310x150.png"/>
<square310x310logo src="/img/logo-310.png"/>
<TileImage src="/img/logo-144.png"/>
<TileColor>#db5945</TileColor>
</tile>
</msapplication>
</browserconfig>favicon.ico на самом деле является контейнером изображений, который должен содержать как минимум изображения PNG размером 16x16, 32x32, 48x48, мы можем использоватьImageMagickИнструмент генерирует непосредственно локально (изображение png необходимо сжать, чтобы уменьшить размер перед генерацией).
$ convert favicon-16.png favicon-32.png favicon-64.png favicon.icoПримечание. Строка состояния по умолчанию стиля apple-mobile-web-app-status-bar-style белого цвета, для которого можно установить значение black (черный) или black-translucent (серый полупрозрачный); файл svg, импортированный с помощью mask-icon, должен иметь только один слой изображения иviewBoxСвойство должно быть "0 0 16 16".
Twitter Cards
Карточки Twitter используются для более элегантного и красивого обмена контентом веб-сайта.twitter.comСайт по форме делится на четыре формы: резюме, резюме_большое_изображение, приложение, плеер, обычно нашему сайту нужна только форма резюме.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@melaozhu">
<meta name="twitter:title" content="此处为分享标题">
<meta name="twitter:description" content="此处为分享描述">
<meta name="twitter:image" content="此处为分享配图">После того, как конфигурация подключена к сети, вы можете передать этоCard validatorПроверка инструмента отображается корректно.
Facebook Open Graph
Open GraphЭто набор открытых протоколов маркировки веб-страниц, маркирующий тип веб-страниц с помощью метатегов, в основном продвигаемый Facebook, и ставший стандартом де-факто в области обмена в социальных сетях. Вам следует добавить эти метатеги, если вы хотите явно указать социальным сетям или поисковым системам тип вашей страницы.
<meta property="og:type" content="article">
<meta property="og:title" content="此处为分享标题">
<meta property="og:description" content="此处为分享描述">
<meta property="og:image" content="此处为分享配图">
<meta property="og:url" content="此处为分享的链接地址">Постоянная ссылка
Для документа с несколькими URL-адресами передайтеrel="canonical"Укажите уникальную постоянную ссылку.
<link rel="canonical" href="https://laozhu.me/">RSS-ссылка
Для страниц, поддерживающих подписку на RSS, для читателей RSS доступны подписные каналы.
<link rel="alternative" href="/index.xml" title="米老朱的博客" type="application/atom+xml">Polyfill
Решение Polyfill может быть введено специально для старого браузера IE. Например, чтобы позволить браузерам IE6-IE8 использовать теги HTML5 и функции Media Query, нам нужно ввестиhtml5shivа такжеresponse.jsэти две библиотеки.
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->Аналогично пишутся и другие схемы Polyfill.
распечатать таблицу стилей
Для печатных страниц (например, страниц статей) может быть предоставлена таблица стилей для конкретного принтера, чтобы пользователи веб-сайта могли распечатать статью для чтения.
<link rel="stylesheet" href="/css/print.css" media="print">Альтернативная таблица стилей
При определении альтернативной таблицы стилей укажите ееtitleчтобы облегчить пользователям выбор альтернативных стилей в соответствии с их именами в браузере.Таблицы альтернативных стилей в основном используются на сайтах с несколькими темами.
<link href="default.css" rel="stylesheet">
<link href="high-contrast.css" rel="alternate stylesheet" title="High contrast">использованная литература
- HTML Best Practices
- Favicon Cheatsheet
- Предварительная выборка DNS
- Prefetching, preloading, prebrowsing
- Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?
- Вот все, что вам нужно знать о фавиконках в 2017 году
- Configuring Web Applications
- Creating Pinned Tab Icons
- «Выемка» и CSS
- Alternative style sheets