Приветствую, Хабр! Представляю вашему вниманию перевод статьи »9 Extremely Useful HTML Tricks» автора Klaus.
У HTML есть много практических секретов, которые могут вам пригодиться.
Но я хочу убедиться, что сайт работает в Internet Explorer и других браузерах.
Я использую Endtest для создания автоматизированных тестов и выполнения их в кросс-браузерном облаке.
Netflix использует ту же платформу для тестирования своих веб-приложений.
Умение обращаться с Endtest даже входит в список необходимых навыков для некоторых их рабочих вакансий.
У Endtest есть несколько действительно полезных функций, таких как:
• Кросс-браузерная сетка, работающая на компьютерах с Windows и MacOS • Редактор без кода для автоматических тестов • Поддержка веб-приложений • Поддержка как собственных, так и гибридных приложений для Android и iOS • Неограниченное количество видеозаписей для выполнения ваших тестов • Сравнение скриншотов • Геолокация • Оператор if • Циклы • Загрузка файлов в ваши тесты • API Endtest, для легкой интеграции с вашей системой CI / CD • Расширенные утверждения • Мобильные тесты на мобильных устройствах • Тестирование электронной почты с помощью Endtest Mailbox
Вы можете просмотреть документы.
Ниже приведены 9 чрезвычайно полезных трюков HTML. 1. Тег «figure»
Его можно использовать для разметки фотографии.
Элемент «figure» также может содержать «figcaption»:
Fig.1 - SWAT Kats
И вот как это будет выглядеть:
Fig.1 — SWAT Kats
2. Тег «video»
Он позволяет встроить медиаплеер для воспроизведения видео.
Например, вы можете загрузить свое видео на AWS S3 и использовать тег «video», чтобы вставить его на свой веб-сайт.
Использование YouTube для этого может показаться непрофессиональным.
И Vimeo не позволяет вам вставлять свои видео без оплаты.
Вы можете указать определенные характеристики, как ширина, высота, автозапуск, цикл, элементы управления и т. д.
И вот как это будет выглядеть:
Your browser does not support HTML5 video.
Вы также можете встроить прямой эфир, используя getUserMedia () или WebRTC
3. Тег «picture»
Этот тег помогает отображать изображения в общедоступном виде, показывая альтернативную версию изображения для небольших окон просмотра.
Он должен содержать один или несколько тегов «source» и один тег «img».
Тег «img» будет использоваться только в случае, если окно просмотра не соответствует ни одному из тегов «source» или если не поддерживается браузером.
4. Тег «progress»
Тег «progress» отображает ход выполнения задачи.
Этот тег не следует путать с тегом «meter» (который представляет собой датчик).
Вот как это выглядит:
5. Тег «meter»
Вы можете использовать тег «meter» для измерения данных в заданном диапазоне (датчик).
Результат может быть установлен через минимальные и максимальные значения или в процентах.
2 out of 10
60%
И вот они: 6. Тег «map»
Тег «map» используется для определения клиентской карты изображений.
Карта изображения — это изображение с интерактивными областями.
Все, что вам нужно сделать, это ввести координаты X и Y в элементах из «map».
Это означает, что вы создаете карту нашей Солнечной системы, определяете область для каждой планеты и перенаправляете посетителей на отдельную страницу для каждой планеты, которую они выбрали кликом.
7. Атрибут contenteditable
Этот атрибут указывает, является ли содержимое элемента доступным для редактирования.
This is an editable paragraph.
8. Предложения по вводу
Надеюсь, вы не возражаете, что я не добавил разнообразные стили.
Я предпочитаю оформлять примеры по своему вкусу, как можно красивее.
9. Тег «noscript»
Содержимое внутри элемента «noscript» отображается браузером, только если отключён JavaScript.
Это обеспечивает запасной механизм для компонентов, которые перестанут работать без JavaScript.
Я думаю, это действительно круто, что вы ищете трюки HTML, но уверены ли вы, что ваше веб-приложение работает правильно на всех браузерах и устройствах?
Вы можете использовать Endtest для быстрого создания автоматических тестов и их выполнения в кросс-браузерном облаке.
