Когда я открывал веб-страницу в 1998 году, мне всегда было интересно, из чего она сделана. С моего рождения до сегодняшнего дня мне всегда было интересно, что все изменения в Интернете произошли в моем возрасте, произошли так быстро. Но независимо от того, насколько сильно изменился Интернет, подход к структуре сайта был одинаковым с момента первого использования JavaScript на сайте. Мы сосредоточимся в основном на базовой структурной реализации любой веб-страницы, независимо от ее содержания. Для лучшего понимания тема разделена на следующие темы:

  • Декларация
  • Базовые элементы HTML
  • Основные теги заголовка
  • Ответная реакция
  • Реализация CSS
  • Приложение JavaScript
  • SEO
  • Макет
  • Доступность
  • Совместимость
  • Оптимизация
  • Автономный режим
  • Конечный результат

Декларация

В HTML 4.01 есть три разных объявления. В HTML5 только один.

Это DTD содержит все элементы и атрибуты HTML, но НЕ ВКЛЮЧАЕТ презентационные или устаревшие элементы (например, шрифт). Наборы фреймов не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Это DTD содержит все элементы и атрибуты HTML, ВКЛЮЧАЯ презентационные и устаревшие элементы (например, шрифт). Наборы фреймов не допускаются.

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

Этот DTD аналогичен HTML 4.01 Transitional, но позволяет использовать содержимое набора фреймов.

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

Основные элементы html, которые всегда присутствуют, даже если вы загружаете пустой документ, это html, заголовок и тег body. Тег head не вносит видимого содержимого сайта, в отличие от body. Ниже приведен простой вывод пустого документа.

<html> 
  <head></head>
  <body></body>
</html>

Основные теги заголовка

Заголовок

Самый простой - это тег заголовка, метка которого отображается в строке заголовка окна в старом поколении или на вкладках современного браузера. Он адаптируется к изменениям. Обычно оно начинается с темы и заканчивается названием компании с разделителем между ними.

<title>Sample Site - Brand Name</title>

Кодировка Мета

Атрибут charset определяет кодировку символов для документа HTML.

Описание Мета

Определяет описание сайта, подходит для SEO.

<meta name="description" content="Some description for the sample page would be lovely.">

Фавикон

Это небольшой логотип, который находится перед посещенным URL-адресом, его можно увидеть в адресной строке и использовать для продвижения компании или товарного знака. С другой стороны, это полезно для пользователя, так как он может быстро найти URL-адрес, который он хочет щелкнуть, на своих сайтах, отмеченных закладками. Это может быть 16 × 16, 32 × 32, 48 × 48, 64 × 64 или 128 × 128 пикселей.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Ответная реакция

Основная отзывчивость веб-страницы достигается за счет использования метатега области просмотра. Область просмотра браузера - это область окна, в которой можно просматривать веб-контент.

Обычный тег

<meta name="viewport" content="width=device-width, initial-scale=1">

Нет тега Zoom

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

Реализация CSS

Каскадная таблица стилей - это основа для оформления всего пустого холста HTML. Он может быть написан встроенным с атрибутом стиля, внутренним с тегом стиля или внешним с тегом ссылки. За исключением PWA, рекомендуется всегда использовать внешний файл с тегом ссылки. вариант тега ссылки приведен ниже

Нормальный

<link rel="stylesheet" type="text/css" href="style.css">

Распечатать

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Приложение JavaScript

Как правило, есть два места, где можно разместить скрипт, связанный с javascript. Первый находится перед концом тега заголовка, вызываемого тегом загрузки до DOM, а второй - перед концом тега тела, обозначенного тегом загрузки после DOM. Обычно HTML-страница загружается сверху вниз, предварительно и после публикации действительно имеют огромное значение при рендеринге веб-сайта.

тег загрузки pre-DOM - Global Setters

Теги сценария с javascript, которые имеют глобальные переменные для страницы или внешнего файла тег сценария с атрибутом async, могут быть помещены перед тегом заголовка. Атрибут async разрешает синтаксический анализ HTML, и сценарий будет выполнен, как только он будет готов. Лучшим примером такого кода является тег аналитики.

<script> 
  var globalVar = "Hi. I am a global variable."; 
</script> 
<script type="text/javascript" src="analytics.min.js" async></script>

загрузка после DOM - Манипуляторы DOM

Тег script, добавленный перед тегом body, позволяет отображать и обрабатывать содержимое HTML и CSS перед их выполнением в браузере. У вас может быть несколько источников или сторонних поставщиков файлов JavaScript, однако рекомендуется иметь только один файл, чтобы уменьшить количество сценариев ошибок и повысить производительность сайта.

<script type="text/javascript" src="main.js" ></script>

SEO

Большая часть тяжелой нагрузки на SEO ложится на теги title и description. Однако есть дополнительные метатеги, чтобы ваш сайт оставался более актуальным.

Роботы

Мета-тег Robots - это HTML-тег, который предоставляет поисковым роботам инструкции относительно того, следует ли индексировать веб-страницу или нет.

Мета-тег Robots имеет четыре основных значения для поисковых роботов:

FOLLOW - сканер поисковой системы будет переходить по всем ссылкам на этой веб-странице.

ИНДЕКС - сканер поисковой системы проиндексирует всю веб-страницу.

NOFOLLOW - сканер поисковой системы НЕ будет следовать за страницей и любыми ссылками на этой веб-странице.

NOINDEX - сканер поисковой системы НЕ будет индексировать эту веб-страницу.

<meta name=”robots” content=”index, follow”>

Канонический

Реализуя тег Canonical в коде, мы сообщаем поисковым системам, что этот URL-адрес является главной страницей, и избегаем индексации других повторяющихся URL-адресов страниц.

<link rel=”canonical” href=”http://example.com/” />

Социальное

Теги Open Graph: метатеги Open Graph предназначены для содействия интеграции между Facebook, LinkedIn, Google и URL-адресами веб-сайтов, которыми вы поделились на этих платформах.

Карты Twitter. Карты Twitter работают аналогично Open Graph, за исключением того, что вы добавляете эти специальные метатеги только для Twitter. Twitter будет использовать эти теги для улучшения отображения вашей страницы при публикации на своей платформе.

<meta property=”og:type” content=”article” />
<meta property=”og:title” content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />
<meta name="twitter:title" content="TITLE OF POST OR PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name="twitter:image" content="LINK TO IMAGE">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@USERNAME">

Макет

Представление веб-страницы стало очень распространенным с верхним колонтитулом и темным или светлым нижним колонтитулом и основным контентом с любым из трех столбцов.

С момента зарождения Интернета существовало три подхода к расположению основных разделов.

  • Три столбца: это один из старейших макетов, принятых на веб-сайтах. Чаще за ними следуют крупные сайты, такие как aol.com, facebook.com или twitter.com, где есть боковая панель с тегом aside и 2 столбца с адаптивной сеткой.
  • Две колонки: этот макет чаще всего используется в статьях блогов, где на боковой панели представлены параметры, относящиеся к сайту блога. Многие сайты электронной коммерции выбирают этот макет, чтобы отдать предпочтение аффиксу для кнопки «Купить сейчас» или «Добавить в корзину».
  • Сетка из одного столбца: этот макет покрывает весь размер контейнера, а сегментация разделов и карточек выполняется с помощью адаптивной системы сетки, распространенного подхода для домашней страницы электронной коммерции.

Хотя тег заголовка используется не на всех сайтах, заголовок в основном используется на каждом сайте. Насколько я понимаю, использование заголовка наблюдалось с 12 вариантами конструкции. Обычно в разделе заголовка могут быть следующие элементы:

  1. Логотип Бренда
  2. Меню навигации
  3. Окно поиска
  4. Быстрые ссылки или заголовок

До отзывчивости существовал только один контейнер размером предположительно с шириной экрана менее 1024 пикселей, основанный на ЭЛТ-мониторах. Раньше их обозначали оберткой или оберткой страницы. С революцией ЖК-панелей стандартное разрешение сместилось в сторону ширины 1366 пикселей для лучшей видимости. В то время фреймворк CSS принял размер контейнера, который отвечал требованиям такого разрешения. Кроме того, в то время стало популярным использование мобильных устройств с разрешением 320 пикселей. Сегодня размер экрана достигает нового разрешения, увеличиваясь до 8K. Однако стандарт 1920 пикселей стал более популярным как удовлетворительное разрешение для рабочей станции. Следовательно, размеры контейнеров выбираются следующим образом, чтобы удовлетворить требования как пользователей, так и владельцев сайтов. Ниже описаны разновидности контейнеров, которые эволюционировали со временем.

  • Контейнеры фиксированной ширины точки останова: эти контейнеры стандартно включаются в большинство фреймворков CSS. Для мобильных устройств ширина экрана составляет 100%, в то время как в остальных случаях размер контейнера немного меньше, чем соответствующий размер точки останова.
  • Гладкий контейнер: этот контейнер имеет начальную первую фиксированную ширину, и всякий раз, когда размер экрана опускается ниже значения фиксированной ширины, они переключаются на контейнер со 100% шириной.
  • Контейнеры жидкости: эти контейнеры представляют собой заполнение на основе мелких пикселей 100% ширины на обоих концах. Они в основном используются для панелей мониторинга, которые содержат разделение на карты.
  • Гладкий контейнер с процентным заполнением: эти контейнеры являются псевдоконтейнерными жидкостями по своей природе, поскольку фиксированный размер контейнера превышает стандартное разрешение 1366 пикселей. Однако для экрана с разрешением более 1500 пикселей обычно применяется фиксированная ширина около 1500 пикселей с процентным заполнением в определенных случаях. В настоящее время размер контейнера постоянно увеличивается, и его можно увидеть на нескольких сайтах электронной коммерции и корпоративных сайтах, таких как amazon.com и microsoft.com.

Сила Интернета в его универсальности.

Доступ для всех, независимо от инвалидности, является важным аспектом.

- Тим Бернерс-Ли, директор W3C и изобретатель всемирной паутины

Лучший способ предоставить доступ всем на вашем сайте - использовать атрибуты role и aria. Посетите https://www.sitepoint.com/how-to-use-aria-effectively-with-html5/, чтобы узнать больше.

Совместимость

Все последние версии браузеров соответствуют новым стандартам, но есть и старые системы, которые все еще используют Internet Explorer. Поэтому ниже приведены теги совместимости, чтобы наша страница работала и в старых браузерах.

html5shiv: этот сценарий фактически является способом включить использование элементов секционирования HTML5 в устаревшем Internet Explorer.

response.js: быстрый и легкий полифилл для медиа-запросов CSS3 минимальной / максимальной ширины (для IE 6–8 и других).

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Оптимизация

Ролевая игра разработчиков прочно связана с производительностью и оптимизацией сайта. Существует несколько техник манипуляции с DOM, например виртуальный DOM и теневой DOM, чтобы сделать сайт более эффективным. Однако эта тема не в фокусе, поскольку эти предложения сделаны фреймворками JavaScript. Настоящая оптимизация любого сайта зависит от сетевого трафика. Чем меньше трафик, тем выше производительность. Сайт с эффективной структурой HTML обеспечивает лучшую производительность, а также лучший опыт разработки, поскольку он сокращает деревья DOM, а спецификация CSS становится менее громоздкой.

Я бы рекомендовал использовать только один файл CSS и один файл JS для разработки для максимальной производительности.

CSS Минификация

Лучше использовать уменьшенную версию CSS и объединить все CSS от поставщиков (кроме шрифтов) в один файл, чтобы быстро обработать и отобразить желаемую тему. Вы можете найти онлайн-инструменты для минимизации или минимизации их с помощью сборщиков / исполнителей задач.

JavaScript Uglification

Uglify, как следует из названий, используется для уравнивания javascript, т. Е. Удаления пробелов, изменения больших имен переменных на маленькие и сжатия файла, тем самым уменьшая размер файла и улучшая производительность.

Улучшения сервера

Основным изменением на веб-сервере будет включение gzip ресурсов и включение протокола HTTP 2.0 для быстрой доставки ресурсов за один запрос.

Автономный режим

В настоящее время возможности автономного режима все еще развиваются, и их необходимо доработать, прежде чем предлагать их в стандартах. Базовая реализация выглядит так:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js');
}

Образец базовой реализации предоставлен разработчиками Chrome отсюда: https://googlechrome.github.io/samples/service-worker/basic/.

Сайты в стиле PWA в основном используют эту функцию, используя файл с именем service-worker.js. однако вы можете прочитать здесь: https://developers.google.com/web/fundamentals/primers/service-workers/ и http://apress.jensimmons.com/v5/pro-html5-programming/ch12 .html

Конечный результат