Да Да, Я знаю. 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.
▶ скрытый
: Булевой атрибут, который указывает, что элемент еще не является, либо больше не актуален.
Пример:
This paragraph should be hidden.
Где дальше? 🤔
Я рекомендую вам практиковать эти теги/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”