Готовы ли вы быстро освоить веб-разработку? Приготовьтесь раскрыть сверхсекретные трюки с HTML, которые улучшат ваши способности! С помощью этих эффективных подходов вы сможете создавать красивые веб-сайты, которые удивят как пользователей, так и клиентов.
Приготовьтесь изменить свой код с помощью этих советов по HTML для инсайдеров.
- Метаобновление: автоматическое перенаправление пользователей на другую страницу через указанное время.
<meta http-equiv="refresh" content="5;url=https://example.com">
2. Встроенный SVG: встраивайте изображения SVG непосредственно в HTML.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /> </svg>
3. Элемент изображения с несколькими источниками: укажите несколько источников изображения в зависимости от условий мультимедиа.
<picture> <source srcset="image.webp" type="image/webp"> <source srcset="image.jpg" type="image/jpeg"> <img src="image.jpg" alt="Image"> </picture>
4. Редактируемое содержимое: сделайте элемент доступным для редактирования пользователями.
<div contenteditable="true"> Editable content </div>
5. Атрибут загрузки: укажите загружаемый файл при нажатии на ссылку.
<a href="document.pdf" download>Download PDF</a>
6. Элемент счетчика: отображение индикатора выполнения в определенном диапазоне.
<meter value="75" min="0" max="100">75%</meter>
7. Детали и элементы сводки: создавайте сворачиваемые разделы контента.
<details> <summary>Show more</summary> Additional details here </details>
8. Цвет типа ввода: разрешить пользователям выбирать цвета.
<input type="color" value="#ff0000">
9. Элементы управления аудио и видео. Добавляйте элементы управления к элементам аудио и видео.
<video controls> <source src="video.mp4" type="video/mp4"> </video>
10. Атрибут шаблона: укажите шаблон регулярного выражения для проверки ввода формы
<input type="text" pattern="[A-Za-z]{3}" title="Three-letter word">
11. Политика безопасности контента: определите политику для управления типами контента, которые можно загружать на веб-страницу.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
12. Перетаскивание. Разрешите пользователям перетаскивать элементы.
<div draggable="true">Drag me!</div>
13. Диапазон типов ввода: создайте ползунок.
<input type="range" min="0" max="100" value="50">
14. Геолокация HTML5. Получите информацию о географическом местоположении пользователя.
<button onclick="getLocation()">Get Location</button>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
}
function showPosition(position) {
console.log(position.coords.latitude, position.coords.longitude);
}
</script>
15. Липкий элемент. Создайте элемент, который остается неподвижным на экране при прокрутке.
<div style="position: sticky; top: 0;">Sticky element</div>
16. Адаптивные изображения с исходным кодом и размерами. Предоставьте различные источники изображений в зависимости от возможностей устройства и размера экрана.
<img src="image.jpg" srcset="image.jpg 1x, [email protected] 2x" sizes="(max-width: 600px) 200px, 400px">
17. Хранилище сеанса. Храните данные на стороне клиента, которые сохраняются до завершения сеанса.
<script>
sessionStorage.setItem("key", "value");
var data = sessionStorage.getItem("key");
</script>
18. Локальное хранилище. Храните данные на стороне клиента, которые сохраняются даже после закрытия браузера.
<script>
localStorage.setItem("key", "value");
var data = localStorage.getItem("key");
</script>
19. Атрибут песочницы. Ограничьте возможности iframe для дополнительной безопасности.
<iframe src="https://example.com" sandbox="allow-same-origin allow-scripts"></iframe>
20. Связывание с сетью доставки контента (CDN): ссылка на популярные библиотеки или платформы, размещенные в CDN.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
