5 вещей, которые вы не знали, вы можете сделать с HTML

Sep 11, 2025

Инструкции

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

В каком-либо типе разработки программного обеспечения модульность - король, когда речь идет о построении ремонтопригодного кода. В результате вы захотите держать тесный глаз на веб-компонентах. Поддержка браузера не велика, но если вы схватите себя полифилл , вы можете опередить кривую и начать воспользоваться пользовательскими элементами для структурирования вашего кода сразу. Этот стиль развития - это будущее, так что оно того стоит узнать с ним.

Keep code streamlined for clearer understanding — Держите код, упорядоченный для более понятного понимания

Сам HTML5 представил ряд новых элементов (и устарел несколько), чтобы помочь поощрять хорошие практики кодирования. Возможно, вы слышали о семантической разметке, который относится к использованию описательных элементов HTML5, таких как & lt; статья & GT; и & lt; Рисунок и GT; указать тип содержимого, который они содержат.

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

Это также поможет, если вы используете преимущества новейших стандартов JavaScript. JavaScript также может стать грязным, но становится намного проще работать в последние годы. Синтаксис ES6 широко поддерживается в браузерах, а функции, такие как функции стрелки и классы, могут сделать вашу жизнь намного проще - однако многие разработчики либо незнакомы или не хватают их использования.

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

01. Распознать и синтезировать речь

The sound of things to come — Звук вещей, чтобы прийти (Образ кредита: Фотография Джейсона Роунвелла на Unsplash)

Это когда-то были сложные функции, требующие специализированного программного обеспечения, но теперь их строятся непосредственно в браузеры. У Web Relect API имеет компоненты, которые поддерживают текст-речь и речь и текст. Последние из них либо используют онлайн-сервис (Chrome использует API Google Cloud Relect API) или нативную службу распознавания речи. Ожидайте увидеть, что это широко используется на мобильных устройствах в будущем.

02. Показать сборщик цветов

Choosing the right colour — Выбор правильного цвета (Кредит на изображение: фото Scott Webb на Unsplash)

Тривиальный, как это может звучать, это отличный пример того, как HTML5 упрощает общие задачи, которые ранее потребовали бы на заказ кодировкой довольно сложного компонента пользовательского интерфейса. & lt; входной тип = "цвет" & gt; Понадобится Visual Picker Color при щелчке, используя сборку цвета, родом на устройстве. Это может быть особенно полезно с HTML Canvas. Он широко поддерживается за исключением Safari на мобильном.

03. RecoRour Browser UI

Colour themes for browsers — Цветные темы для браузеров (Образ кредита: фото Марко Блажевич на Unspplash)

Это может предложить хорошее эстетическое прикосновение на мобильных платформах. & lt; meta name = "Тема-цвет" content = "# FFFFFFF" / & gt; Предназначен, чтобы проинструктировать браузеру перекосить панель инструментов при просмотре вашего сайта. К сожалению, это немного нестандартизировано, поэтому пока "Тема-цвет" Работает с Chrome, Firefox и Opera, на iOS вам понадобится "Apple-Mobile-Web-App-app-статус-бар-стиль" (работает только в полноэкранном режиме).

04. Различные изображения для разных экранов

Specifying the image and the resolution — Указание изображения и разрешения (Image Credit: Фото Tran Mau Tri Tam на Unsplash)

Надеюсь, вы уже реализуете отзывчивый дизайн, и в этом случае ваши изображения будут разместиться в соответствии со просмотра просмотра. Это не идеально, поскольку вы будете принуждать пользователю загружать самую большую версию изображения, затем переключаться. Введите HTML5 & lt; picture & gt; Элемент, который позволяет указывать различные изображения, которые будут отображаться в зависимости от разрешения экрана, на котором рассматривается сайт.

05. Вибрировать свой телефон

Shakin' all over — Shakin 'по всему (Образ кредита: фото Gilles Lambert на Unsplash)

Однозначно названные вибрации API обнажает одну функцию, вибрацию (), которая сделает именно то, что он говорит на устройствах, которые его поддерживают. Функция принимает список, описывающую шаблон вибрации в качестве аргумента. Он будет работать на Chrome, Firefox и Opera, хотя вам повезет на краю или сафари. Сообщается, что некоторые объявления используют это, чтобы привлечь внимание пользователя, поэтому жюри на самом деле о том, действительно ли это хорошая идея.

Эта статья изначально появилась в Веб-дизайнер Выпуск 266. Купить это здесь Отказ

Статьи по Теме:

10 лучших дизайнов шаблонов HTML5
20 HTML-шаблоны, чтобы дать вашему веб-дизайну проекты
Пригласите свой HTML с этим читным листом

5 вещей, которые вы не знали, вы можете сделать с HTML

01. Распознать и синтезировать речь

02. Показать сборщик цветов

03. RecoRour Browser UI

04. Различные изображения для разных экранов

05. Вибрировать свой телефон

Инструкции - Самые популярные статьи

Создайте клиентский портал WordPress

10 способов построить лучшую среду World World

Как нарисовать человека

Создайте 3D-ландшафт в 6 простых шагах

Начните с HTML Canvas

Как использовать Markdown в веб-разработке

Как улучшить производительность сайтов электронной коммерции

Как лепить и позировать голову мультфильма в Zbrush

Категории