Hello everyone, I am quick-frozen fish 🐟, a river front πŸ’¦, like the garish πŸ’, continuous sand sculpture 🌲 Welcome friends to add my wechat: Sudongyuer pull you into the group, discuss together, looking forward to growing together with everyone

Read this article πŸ¦€

You’ll learn about 11 very useful single lines of code that can help you do a lot of things, don’t underestimate HTML!!

Preface 🌡

HTML and CSS are the backbone of the front-end development world. While mastery of CSS and JavaScript is critical to creating great websites, people often underestimate how much you can accomplish with just a plain old HTML file. From lazily loading images to captioning videos, HTML can do a lot of things that most developers don’t fully understand. Here are 11 single lines of HTML that you can use immediately

The text 🦁

1.Tooltip

Adding simple tooltips to HTML elements does not require CSS or JavaScript. Using the title attribute, you can easily add tooltips to provide additional information to the user.

<body>
<p>
<abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</p>
<p title="Free Web tutorials">W3Schools</p>
</body>
Copy the code

2.Download

The download property is useful when you want users to download links rather than navigate to files. In addition, you can set the name of the file that the user will download

<a href="/images/myw3schoolsimage.jpg" download>
Copy the code
<a href="link/to/your/file" download="filename">Download link</a>
Copy the code

3. Word Break Opportunity

No one likes HTML to interrupt text where it shouldn’t. With < WBR >, you can easily find points (opportunities) where you can break words. This is useful when the word is too long and there is a good chance the browser will interrupt it in the wrong place.

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>
Copy the code

4. Text direction

With DIR = “AUTO,” the browser will change the text alignment based on the language of the content. This is useful when you’re dealing with languages that don’t follow the left-hand side. The potential place to use this property is a social media chat application.

<p dir="auto">This text is following dir=auto</p>
Copy the code

5. Basic Accordion

By using detail and summary semantic elements, you can create a very basic but easy accordion. Wrap the Accordion element with the Details element, and the title uses the summary element. Finally, use the P paragraph element to write the main content of the accordion.

<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>
Copy the code

6. Content Editable

You can make any content editable by setting the Contentteditable property to true. Whether it’s div or P, it’s editable. In addition, you can use the isContentEditable property to find out if an element is editable.

<p contenteditable='true'>This is a paragraph. Click the button to make me editable.</p>
Copy the code

7.Add Captions

Using HTML alone, you can add captions to video files using the <track> element. Use the SRC attribute to point to the subtitle file, and use the Srclang attribute setting language.

<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>
Copy the code

8.Lazy loading

You can load images on demand (also known as lazy loading) by setting the load attribute to “lazy”. This is a simple but very effective optimization technique that loads only what is visible to the user and the rest of the image is later loaded according to the user’s needs.

<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">
Copy the code

9. Base URL

If you call a public domain multiple times on your site, you can use the **** element to set up a base URL, as shown in the code snippet provided below. Now, the SRC image elements in the actual value is “www.w3schools.com/images/stic… If you’ve ever worked with a library like Axios, setting the base URL is a very common practice.

<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>
Copy the code

10. Controlling Context Menu and Paste

You can listen to events using the right click, or you can try pasting content and handling these events using the OnContextMenu and OnPaste properties. If you don’t want the user to be able to paste into certain fields, such as a password, you can write Onpaste = “Return false” on that input field, and the user will not be able to paste there. Similarly, onContextMenu fires when the user right-clicks on the element.

<input type="text" onpaste="return false" value="Paste something in here">
<div oncontextmenu="myFunction()" contextmenu="mymenu">
Copy the code

11.Spellcheck

When set to true, the spell-checking property tells the browser that it must check for grammar and spelling errors entered by the user in this element. This is a convenient property that helps users write content that is correct.

<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change the text.</p>
Copy the code

References πŸ“š

  • medium

Conclusion 🍁

How’s that？ Please give me a thumbs up πŸ‘ or add me wx: Sudongyuer, invite you to join my WX group, thank you ~

Conclusion 🌞

The purpose of this article is actually very simple, it is a summary and output of daily work, and output something useful to you. It is not important whether you like it or not, but I love πŸ”₯, I hope you can like my article, I really put my heart into writing. Also hope to know more like-minded friends through this article, if you also like to toss, welcome to add my friend, sand sculpture, progress together.

Making πŸ€– : sudongyu

Personal blog πŸ‘¨πŸ’»: Frozen fish blog

Vx πŸ‘¦ : sudongyuer

Write in the last

Guys, if you like my words, give 🐟🐟 a thumbs up πŸ‘ or follow βž• to support me the most.

Add me on wechat: Sudongyuer, invite you to join the group, learn front end together, become a better engineer ~ (group QR code here -> front end to go to bed early, qr code expired to see the link in the boiling point of the comments, I will put the latest QR code in the comment section, of course, you can also add my wechat I pull you into the group, after all, I am also interesting front end, It’s not bad to know me 🌟 ~ PS: the company is in the front of recruitment recently, welcome friends to consult, coordinates chengdu, my VX: Sudongyuer, or direct delivery mailbox [[email protected]]