Рубрики
Без рубрики

Пришло время надеть навыки HTML! 🔋

Да Да, Я знаю. Я знаю, что вы знаете, что все горячие веб-технологии там. Будь то угловые, Ionic, Deno, N … Tagged с HTML, WebDev, JavaScript, Nowizers.

Да Да, Я знаю. I Знаете, вы знаете Каждая горячая веб-технология там. Будь то угловая, ионная, обожена, узел, Джанго и что нет! Действительно удивительным.

Но вот дело, вы знаете HTML? Да, этот гипертекстовый язык разметки? Упс! Опять же, я знать, что вы знаете HTML и вы святые при кодировании веб-сайта с этим языком Но … Вы знаете, как добавить дополнительные батареи для включения вашей HTML-игры?

Хорошо, что я даже говорю о!? Просто прокрутите вниз, чтобы узнать, что некоторые из действительно потрясающих функций HTML (особенно HTML 5) предлагает надевать игру на разметку. ⚡

1️⃣ HTML 5 API 🔌

HTML Geolocation API [Docs 📃]

Если ваш сайт требует извлечения информации о местоположении пользователя, как в навигации, или использовать карту, API геолокации здесь для вас.

Это доступ к звонке Навигатор. Гейолокация К которому он добавляет приглашение браузера пользователя, просив их разрешения на доступ к их данных о местоположении.

Пример:

function getLocation() {
  // Check for the geolocation service
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    el.innerHTML = "Geolocation is not supported.";
  }
}
function showPosition(position) {
  el.innerHTML = "Latitude: " + position.coords.latitude +
  "
Longitude: " + position.coords.longitude; }

HTML веб-работники API [DOCS 📃]

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

Работник может отправлять сообщения на код JavaScript, который создал его, путем публикации сообщений к обработчику событий, указанным этим кодом. Используется Работник () конструктор для выполнения такого действия.

Пример:

// 1. CHECK FOR WEB WORKER SUPPORT
if (typeof(Worker) !== "undefined") {
  // Supported!
} else {
  // Not supported :(
}

// 2. CREATING A WEB WORKER OBJECT
if (typeof(w) == "undefined") {
  w = new Worker("worker_file.js");
}

// 3. SEND A MESSAGE FROM WORKER
w.onmessage = function(event){
  document.getElementById("workerdiv").innerHTML = event.data;
};

HTML SSE API [Docs 📃]

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

Этот API содержится в События ...| интерфейс.

Пример:

// 1. CHECK SUPPORT
if(typeof(EventSource) !== "undefined") {
  // Supported
} else {
  // No server-sent events supported :(
}

// 2. RECIEVE EVENTS FROM SERVER
var source = new EventSource("myserver.php");
source.onmessage = function(event) {
  document.getElementById("serverresult").innerHTML += event.data + "
"; };

HTML веб-хранилище API [Docs 📃]

С помощью этого API веб-приложения могут хранить данные локально в браузере пользователя. Включает в себя оба LocalStorage и SessionStorage. .

Другой вариант для поезда – создать файлы cookie, но веб-хранилище лучше, так как он более безопасен а также Вы можете хранить большие объемы данных Отказ

Пример:

// 1. CHECK SUPPORT
if (typeof(Storage) !== "undefined") {
  // supported!
} else {
  // No Web Storage support :(
}

// 2. USING LOCALSTORAGE

// Store
localStorage.setItem("name", "Vaibhav");

// Retrieve
document.getElementById("namediv").innerHTML = localStorage.getItem("name");

// 2. USING SESSIONSTORAGE
sessionStorage.setItem('myName', 'Vaibhav');

2️⃣ Атрибуты событий HTML 🖱

Вот некоторые из атрибутов, которые вы должны начать использовать в своем DOM:

Вы можете перейти в документацию MDN каждого из этих атрибутов, нажав на них!
onerror. 1.0 Сценарий для выполнения при возникновении ошибки
в процессе 2.0 Пожары после завершения страницы загрузки
onresize. 3.0 Пожары Когда окно браузера изменяется
вузы 4.0 Пожаровал момент, когда элемент теряет фокус
onsearch. 5.0 Пожали, когда пользователь пишет что-то в поле поиска
Двойной клик ondblclick. 6.0 Пожары на мышь дважды щелкните по элементу
onscroll. 7.0 Сценарий для запуска, когда прокрутка прокрутки элемента элемента прокручивается
oncopy 8.0 Пожары Когда пользователь копирует содержимое элемента
oncanplay 9.0 Сценарий для запуска, когда файл готов начать воспроизведение
находятся на 10.0 Пожали, когда пользователь открывает или закрывает элемент

3️⃣ Необычные теги HTML 🤪

Почему бы нет! Скажи мне, у тебя когда-либо использовал их?

Пример MDN 1.0 ДАТЧИК с заранее определенными вариантами (подключен к элементу)
Пример MDN 2.0 Параметры группы связанные с тегами
Пример MDN 3.0 Текст с удаленной частью и новой, вставленной частью
Пример MDN 4.0 Текст со словом разбить возможности
Пример MDN 5.0 Используется для описания ссылки на цитируемую творческую работу

Читать далее Absurd HTML-теги здесь:

Необычные HTML-теги, которые стоит знать 🧩

Кристофер Кейд · 28 мая ’19 · 3 мин прочитал

4️⃣ HTML 5 атрибуты 😋

Проверьте следующие крутые атрибуты и убедитесь, что вы посещаете их документы, нажав на них:

ключ доступа : Это Глобальный атрибут который указывает ярлык ключа для активации/фокусировки элемента.

Пример :

Перетащить : Другой глобальный атрибут, который указывает, является ли элемент перегружена или нет.

Пример :

This is a draggable paragraph.

itemprop. : Это позволяет добавлять свойства на предмет. Вы можете легко группировать элементы с этим атрибутом.

Пример:

Avatar

Director: James Cameron (born August 16, 1954) Science fiction Trailer

проверка орфографии : Он указывает, будет ли элемент, чтобы проверить свое правописание и грамматику или нет.

Пример:

This is a paragraph with spell check on.

скрытый : Булевой атрибут, который указывает, что элемент еще не является, либо больше не актуален.

Пример:


Где дальше? 🤔

Я рекомендую вам практиковать эти теги/API/атрибуты в ваших проектах или просто проверить его на следующем кодепене. Вот больше ссылок, которые вы можете понравиться:

Спасибо за чтение, я ценю это! Хорошего дня. (✿◕‿◕✿)

Эта ванная комната в истории заставляет нас все выглядеть плохо! Ваш также был Git-Ing Greener? 😝 Источник изображения: https://t.co/hezyrua6ol # Девчушка #Git #Wfh pic.twitter.com/GWu5YFhCml

📫 Подписаться на мой еженедельный рассылку разработчика 📫

PS: С этого года я решил написать здесь на сообществе Dev. Раньше я написал на среднем. Если кто-то хочет взглянуть на мои статьи, вот мой средний профиль.

Оригинал: “https://dev.to/vaibhavkhulbe/it-s-time-to-supercharge-your-html-skills-5b6k”