Добейтесь большего с помощью простого HTML.
HTML и CSS — это хлеб с маслом в мире фронтенд-разработки.
Хотя знание CSS и JavaScript жизненно важно для создания потрясающих веб-сайтов, люди часто недооценивают работу, которую можно выполнить с помощью простого старого HTML-файла.
От ленивой загрузки изображений до добавления подписей к видео, HTML способен на множество вещей, о которых большинство разработчиков не до конца осведомлены.
Ниже приведены 11 однострочников HTML, которые вы можете использовать прямо сейчас:
№1. Подсказка
<body> <p> <abbr title="World Health Organization">WHO</abbr> was founded in 1948. </p> <p title="Free Web tutorials">W3Schools</p> </body>
Для добавления простой всплывающей подсказки к элементам HTML не требуется CSS или JavaScript.
С помощью атрибута title вы можете легко добавить всплывающую подсказку, чтобы предоставить дополнительную информацию своим пользователям.
№ 2. Скачать
<a href="/images/myw3schoolsimage.jpg" download>
Атрибут download невероятно полезен, когда вы хотите, чтобы ваши пользователи загружали ссылку, а не переходили к файлу.
Кроме того, вы также можете установить имя файла, который будет загружать ваш пользователь.
<a href="link/to/your/file" download="filename">Download link</a>№3. Возможность разрыва слов
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
Никому не нравится, когда HTML разбивает слова там, где этого не должно быть.
Используя <wbr> , вы можете легко указать точки (возможности), где можно разбивать слова.
Это полезно, когда слово слишком длинное и есть большая вероятность, что браузер может сломать его в неправильном месте.
№ 4. Направление текста
<p dir="auto">This text is following dir=auto</p>
С dir=”auto” браузер изменит выравнивание текста в соответствии с языком контента.
Это невероятно полезно, когда вы имеете дело с языками, которые не следуют слева направо, как английский.
Потенциальное место для использования этого атрибута — приложения для чата в социальных сетях.
№ 5. Базовый аккордеон
<details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details>
Вы можете создать очень простой, но простой аккордеон, используя семантические элементы details и summary.
Оберните элемент аккордеона элементом details, а для заголовка используйте элемент summary. Наконец, используйте элемент абзаца p, чтобы написать основное содержимое аккордеона.
№ 6. Редактируемый контент
<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>
Вы можете сделать любой контент редактируемым, установив для атрибута contenteditable значение true.
Неважно, div или p, он станет редактируемым.
Кроме того, вы также можете использовать свойство isContentEditable, чтобы узнать, доступен ли определенный элемент для редактирования или нет.
№ 7. Добавить подписи
<video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video>
Используя только HTML, вы можете добавлять подписи к своим видеофайлам, используя элемент <track>.
Используйте атрибут src, чтобы указать на файл субтитров, и используйте атрибут srclang, чтобы установить язык.
№8. Ленивая загрузка
<img src="/w3images/wedding.jpg" alt="Wedding" style="width:100%"> <img src="/w3images/rocks.jpg" alt="Rocks" style="width:100%"> <!-- off-screen images --> <img src="/w3images/paris.jpg" alt="Paris" style="width:100%" loading="lazy"> <img src="/w3images/nature.jpg" alt="Nature" style="width:100%" loading="lazy"> <img src="/w3images/underwater.jpg" alt="Underwater" style="width:100%" loading="lazy"> <img src="/w3images/ocean.jpg" alt="Ocean" style="width:100%" loading="lazy"> <img src="/w3images/mountainskies.jpg" alt="Mountains" style="width:100%" loading="lazy">
Вы можете загружать изображения по требованию (это также называется отложенной загрузкой), установив для атрибута loading значение «ленивый».
Это простой, но очень эффективный метод оптимизации, который загружает только тот раздел, который виден пользователю, а другие изображения загружаются позже, в соответствии с потребностями пользователя.
№ 9. Базовый URL
<head> <base href="https://www.w3schools.com/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a> </body>
Если вы несколько раз обращаетесь к общему домену на своем веб-сайте, вы можете использовать элемент <base> для установки базового URL-адреса, как показано в приведенном выше фрагменте кода.
Теперь фактическое значение src в элементе изображения — «https://www.w3schools.com/images/stickman.gif».
Очень распространена практика установки базового URL-адреса, если вы использовали такие библиотеки, как Axios.
№10. Управление контекстным меню и вставкой
<input type="text" onpaste="return false" value="Paste something in here"> <div oncontextmenu="myFunction()" contextmenu="mymenu">
Вы можете прослушивать события, например, когда они используют щелчок правой кнопкой мыши, или пытаться вставить содержимое и обрабатывать эти события с помощью атрибутов oncontextmenu и onpaste.
Если вы не хотите, чтобы пользователи могли вставлять данные в какое-либо поле, например пароль, вы можете написать onpaste=”return false” в этом поле ввода, и пользователи не смогут вставлять туда данные.
Точно так же oncontextmenu срабатывает всякий раз, когда пользователь щелкает правой кнопкой мыши на этом элементе.
№ 11. Проверка орфографии
<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change the text.</p>
Атрибут spellcheck, если он установлен в значение true, сообщает браузеру, что пользовательский ввод в этом элементе должен быть проверен на наличие грамматических и орфографических ошибок.
Это удобный атрибут, который помогает пользователям писать правильный и безошибочный контент.
Последние мысли…
В то время как HTML определяет структуру данных, CSS стилизует их и делает презентабельными.
Однако HTML обладает гораздо большими возможностями, чем просто настройка структуры данных.
С помощью этих мощных однострочных атрибутов вы можете делать гораздо больше прямо из HTML-файла.
Если вам понравилось читать эту статью, рассмотрите возможность использования моей реферальной ссылки, чтобы получить неограниченный доступ к моим блогам, а также к блогам других авторов, нажав здесь.
Если вы используете браузер Chrome, не стесняйтесь проверить мой недавний блог о расширениях Chrome, о которых я хотел бы знать раньше.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку здесь.
