Html5 это не новая вещь. Мы использовали несколько функций с момента Первоначальный выпуск (январь 2008 г.) . Как часть #100daysOfCode Инициатива, я снова внимательно посмотрел на список функций HTML5. Видите, что я нашел? Я до сих пор не использовал кучу!
В этой статье я перечисляю десять таких Html5 Особенности, которые я мало что использовал в прошлом, но сейчас нашел их полезными. Я также создал рабочий пример и размещен на NetLify . Надеюсь, вы тоже это полезно.
https://html5-tips.netlify.app/
Отлично, поэтому давайте начнем с объяснения, кода и быстрых советов о каждом из них. Вы можете Следуй за мной в Твиттере Чтобы завоевать мои будущие статьи и работу.
<Сводка> тег используется с
Код
Click Here to get the user details
# Name Location Job 1 Adam Huston UI/UX
Смотрите, что это работает
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/details/index.html
Быстрые советы
Используйте его в GitHub Readme для показа подробной информации о спросе. Вот пример о том, как я спрятал огромный список свойств компонентов React и показывать их только по требованию. Круто, верно?
Довольствоваемое это атрибут, который может быть установлен на элементе, чтобы сделать контент редактируемым. Он работает с такими элементами, как Div, P, UL и т. Д. Вы должны указать это как,
Обратите внимание, когда Довольствоваемое Атрибут не установлен на элементе, он будет унаследован от своего родителя.
Код
Shoppping List(Content Editable)
- 1. Milk
- 2. Bread
- 3. Honey
Смотрите, что это работает
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/content-editable/index.html
Быстрые советы
Элементы SPAN или DIV могут быть редактируемые с ним, и вы можете добавить в него любой богатый контент, используя стиль CSS. Это будет намного лучше, чем обрабатывать его с помощью входных полей. Попробуй!
Тег помогает в определении карты изображений. Карта изображений – это изображение с одной или несколькими кликабельными областями внутри него. Тег карты идет с <область> Теги, чтобы определить кликабельные области. Клиплевые области могут быть либо из этих форм, прямоугольника, круга или полигональной области. Если вы не указываете какую -либо форму, он рассматривает все изображение.
Код
Смотрите, что это работает
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/map/index.html
Советы
Карта изображения имеет свои собственные недостатки, но вы можете использовать его для визуальных презентаций. Как насчет того, чтобы попробовать это с помощью семейного фото и сверла на фотографию человека (возможно, старые, за которыми мы всегда дорожим!).
Используйте Теги для выделения любого текстового содержимого.
Код
Did you know, you can "Highlight something interesting" just with an HTML tag?
Смотрите, что это работает
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/mark/index.html
Советы
Вы всегда можете изменить цвет выделения, используя CSS,
mark {
background-color: green;
color: #FFFFFF;
}
data-* Атрибуты используются для хранения пользовательских данных частными на странице или приложении. Сохраненные данные могут использоваться в коде JavaScript для создания дальнейшего опыта пользователя.
Атрибуты данных-* состоят из двух частей:
- Имя атрибута не должно содержать прописных букв и должно быть хотя бы один символ после префикса “Data-“
- Значение атрибута может быть любой строкой
Код
Know data attribute
I have a hidden secret!
Затем в JavaScript,
function reveal() {
let dataDiv = document.getElementById('data-attr');
let value = dataDiv.dataset['customAttr'];
document.getElementById('msg').innerHTML = `${value}`;
}
Примечание. Для чтения значений этих атрибутов в JavaScript вы можете использовать getAttribute () С их полным HTML-именем (то есть Data-Custom-ATTR), но стандарт определяет более простой способ: использование Набор данных свойство.
Увидеть это в действии
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/data-attribute/index.html
Быстрые советы
Вы можете использовать его для хранения некоторых данных на странице, а затем передать его, используя вызов покоя на сервере. Еще один вариант использования может быть путь, я показываю Количество сообщений уведомлений здесь Анкет
<вывод> Тэг представляет результат расчета. Как правило, этот элемент определяет область, которая будет использоваться для отображения вывода текста из некоторых расчетов.
Код
Увидеть это в действии
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/output/index.html
Советы
Если вы выполняете какие-либо вычисления в JavaScript на стороне клиента и хотите, чтобы результат задумался на странице, используйте <вывод> ярлык. Вам не нужно идти по дополнительным шагам получения элемента с помощью getElementbyId () Анкет
TAG Указывает список предварительно определенных параметров и позволяет пользователю добавить к нему больше. Это обеспечивает автозаполнение Функция, которая позволяет вам получить желаемые варианты с помощью типа.
Код
Увидеть это в действии
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/datalist/index.html
Советы
Чем он отличается от традиционного ярлык? Выберите тег для выбора одного или нескольких элементов из параметров, где вам нужно пройти через список, чтобы выбрать. Datalist это расширенная функция с поддержкой автозаполнения.
Диапазон это тип ввода, учитывая селектор диапазона слайдера.
Код
Увидеть это в действии
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/range/index.html
Советы
Нет ничего под названием слайдер В HTML5!
Используйте
Код
2 out of 10
60%
Увидеть это в действии
Вы можете играть с этим отсюда: https://html5-tips.netlify.app/meter/index.html
Советы
Не используйте <Прогресс> тег от html5 для этого.
Эта часть в основном известна нам с использованием типов вводов, таких как текст, пароль и т. Д. Есть мало особых использования типов ввода,
Код
обязательный
Отметьте поле ввода как обязательное.
Автофокус
Обеспечивает фокус на входном элементе автоматически, поместив на него курсор.
валидация с помощью корпуса
Вы можете указать шаблон с помощью Regex для проверки ввода.
Цветовой сборщик
Простой сборщик цвета.
Color Me!
Ну, я уверен, я оставил несколько полезных. Как насчет того, чтобы заполнить список? Пожалуйста, предоставьте комментарии об этом посте и ваше обучение на HTML5. Увидимся в ближайшее время в моей следующей статье.
О, да, весь код, используемый в этой статье, можно найти в репозиции GIT, упомянутого ниже. Пожалуйста, дайте репо звезду, если вам понравилась работа.
Atapas/html-tips-tricks
Мои любимые советы и хитрости HTML5
Html5 это не новая вещь. Мы использовали несколько функций с момента первоначального выпуска (октябрь 2014 г.). Как часть #100daysOfCode Инициатива, я снова потратил время, чтобы снова вернуться к списку функций. Видите, что я нашел? Я действительно не использовал кучу этого!
В этом репо я перечисляю такие Html5 Особенности, которые я не использовал много, но нашел их полезными. Я также создал рабочий пример и размещен на NetLify. Надеюсь, что вы найдете ее полезной.
https://html5-tips.netlify.app/
Чтобы узнать больше об этом:
10 полезных функций HTML5, которые вы, возможно, не используете
Вам также может понравиться,
- Мои любимые советы и хитрости Javascript
- 10 менее известных веб-API, которые вы можете использовать
- Devtools – мои любимые советы и хитрости
Пожалуйста, не стесняйтесь следить за мной в Твиттере @tapasadhikary Анкет Изображение обложки было построено поверх изображения с Фрипик .
П.с. Я люблю кофе ☕.
Оригинал: “https://dev.to/atapas/10-useful-html5-features-you-may-not-be-using-2bk0”