Всем привет, я Frozen Fish🐟, передок водной системы💦, люблю прибамбасы💐, и продолжаю лепить из песка🌲
Добро пожаловать, друзья, чтобы добавить меня в WeChat:sudongyuerПрисоединяйтесь к группе, обсуждайте вместе и ждите роста вместе со всеми🥂
Прочтите эту статью 🦀
Вы узнаете об 11 очень полезных однострочниках, которые помогают нам многое сделать, не стоит недооценивать HTML!!!
Предисловие 🌵
HTML и CSS являются основой мира фронтенд-разработки. Хотя знание CSS и JavaScript необходимо для создания отличных веб-сайтов, люди часто недооценивают то, чего можно достичь с помощью простого старого HTML-файла. От ленивой загрузки изображений до добавления титров к видео, HTML может делать много вещей, которые большинство разработчиков не до конца понимают. Вот 11 однострочников HTML, которые вы можете использовать прямо сейчас
тело 🦁
1.Tooltip
Для добавления простых всплывающих подсказок к элементам HTML не требуется CSS или JavaScript. Используя атрибут title, вы можете легко добавлять всплывающие подсказки, чтобы предоставить пользователю дополнительную информацию.
<body>
<p>
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<p title="Free Web tutorials">W3Schools</p>
</body>
2.Download
Атрибут загрузки полезен, когда вы хотите, чтобы пользователи загружали ссылку вместо перехода к файлу. Кроме того, вы можете установить имя файла, который пользователь будет загружать
<a href="/images/myw3schoolsimage.jpg" download>
<a href="link/to/your/file" download="filename">Download link</a>
3. Word Break Opportunity
Никто не любит разрывать текст HTML там, где этого не должно быть. С помощью
вы можете легко найти точки (возможности), где можно разбить слова. Это полезно, когда слово настолько длинное, что есть большая вероятность того, что браузер сломает его в неправильном месте.
<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
4. Text direction
При DIR="AUTO" браузер изменит выравнивание текста в зависимости от языка содержимого. Это полезно, когда вы имеете дело с языками, которые не следуют слева. Потенциальным местом для использования этого свойства являются приложения для чата в социальных сетях.
<p dir="auto">This text is following dir=auto</p>
5. Basic Accordion
Используя детали и абстрактные семантические элементы, вы можете создать очень простой, но простой аккордеон. Упакуйте элемент аккордеона в элемент деталей, а заголовок — в элемент сводки. Наконец, используйте элемент p-paragraph, чтобы написать основное содержимое аккордеона.
<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>
6. Content Editable
Любой контент можно сделать редактируемым, установив для свойства contentteditable значение true. Его можно редактировать, будь то div или p. Кроме того, вы можете использовать свойство isContentEditable, чтобы узнать, доступен ли элемент для редактирования.
<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>
7.Add Captions
Просто используя HTML, вы можете использовать элемент
<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>
8.Lazy loading
Вы можете загружать изображения по требованию (это также называется ленивой загрузкой), установив для свойства загрузки значение «ленивая». Это простой, но очень эффективный метод оптимизации, который загружает только ту часть, которая видна пользователю, остальные изображения загружаются позже в соответствии с потребностями пользователя.
<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">
9. Base URL
Если вы несколько раз вызываете общедоступный домен на своем веб-сайте, вы можете использовать элемент **
** для установки базового URL-адреса, как показано в приведенном ниже фрагменте кода. Теперь фактическое значение src в элементе изображения равно "Оооооо.Я 3schools.com/images/ предложил...Установка базового URL — очень распространенная практика, если вы использовали такую библиотеку, как Axios.
<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>
10. Controlling Context Menu and Paste
Вы можете прослушивать события при щелчке правой кнопкой мыши или попробовать вставить содержимое и обработать эти события с помощью свойств OnContextMenu и OnPaste. Если вы не хотите, чтобы пользователь мог вставлять в некоторые поля, такие как пароль, вы можете написать Onpaste="return false" в этом поле ввода, и пользователь не сможет вставить туда. Аналогично, oncontextmenu срабатывает, когда пользователь щелкает элемент правой кнопкой мыши.
<input type="text" onpaste="return false" value="Paste something in here">
<div oncontextmenu="myFunction()" contextmenu="mymenu">
11.Spellcheck
Если установлено значение true, атрибут проверки орфографии сообщает браузеру, что пользовательский ввод в этот элемент должен быть проверен на наличие грамматических и орфографических ошибок. Это свойство удобства, которое помогает пользователям писать правильный контент.
<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change the text.</p>
Ссылки 📚
Резюме 🍁
как насчет этого? ты чувствуешьHTMLОн по-прежнему очень мощный. Вы можете попробовать его сами. Если вы думаете, что у вас есть что-то, что можно получить, пожалуйста, дайте мне лайк 👍 или добавьте меня.wx:sudongyuer, я приглашаю вас присоединиться к моей группе wx, спасибо~
Вывод 🌞
тогда мой11个非常有用的HTML单行代码🎃Закончилось, цель статьи на самом деле очень простая, то есть для ежедневной работы总结和输出, выведите то, что, по вашему мнению, будет полезно всем,Не важно, готовишь ты или нет, но люби🔥, надеюсь, вам понравится моя статья, я действительно ее пишу, и надеюсь встретить еще друзей-единомышленников через статью, если она вам тоже понравится折腾, добро пожаловать, чтобы добавить меня好友,Вместе沙雕,Вместе进步.
гитхаб🤖:sudongyu
Личный блог 👨💻:блог о замороженной рыбе
vx👦:судонгюэр
写在最后
Друзья, если вам нравится мой口水话Ставьте 🐟🐟 лайк👍 или подписывайтесь➕ это самая большая поддержка для меня.
добавь меня в WeChat:sudongyuer, приглашаем вас присоединиться к группе, вместе изучить интерфейс и стать лучшим инженером~ (QR-код группы находится здесь ->Ложитесь спать рано,Если срок действия QR-кода истек, посмотрите комментарии в точке кипения ссылки.Я размещу последний QR-код в области комментариев.Конечно, вы также можете добавить меня в WeChat и я притяну вас в группу.После все, я тоже интересный фронтенд, и меня не плохо знать 🌟 ~
PS: В настоящее время компания набирает сотрудников, приглашаем друзей проконсультироваться, скоординировать Чэнду, мой vx: sudongyuer или напрямую доставить почтовый ящик [hr@haiyao.io]