HTML小技巧

在本文中,我将与您分享一些非常有用的HTML 技巧

但首先,什么是 HTML?

超文本标记语言 (HTML) 是设计用于在 Web 浏览器中显示的文档的标准标记语言。它可以借助级联样式表 (CSS) 等技术和 JavaScript 等脚本语言来辅助。
开始吧!

loading=lazy 属性

性能提示。您可以使用该loading=lazy属性来推迟图像的加载,直到用户滚动到它们为止。

<img src='image.jpg' loading='lazy' alt='Alternative Text'> 

电子邮件、电话和短信链接

<a href="mailto:{email地址}?subject={主题}&body={内容}">
给我发送邮件
</a>

<a href="tel:{电话号码}">
  打给我
</a>

<a href="sms:{电话号码}?body={短信内容}">
给我发短信
</a>           

有序列表start属性

使用该start属性更改有序列表的起点。

<ol start="11">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Go</li>
</ol>

meter 元素

您可以使用该<meter>元素来显示数量。不需要 JavaScript/CSS。
meter进度会根据value值不同而改变颜色

<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>

<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>

<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>

HTML 原生搜索

输入框的list属性可以在用户输入时自动弹出提示。
目前firefox android不支持这个属性(2021-06-20)

<div class="wrapper">
  <h1>
    Native HTML Search
  </h1>
  
  <input list="items">
  
  <datalist id="items">
    <option value="Marko Denic">
    <option value="FreeCodeCamp">
    <option value="FreeCodeTools">
    <option value="Web Development">
    <option value="Web Developer">
  </datalist>
</div>

fieldset元素

您可以使用该<fieldset>元素对Web 表单中的多个控件和标签 (<label>)进行分组。

<form>
  <fieldset>
    <legend>选择你喜欢的语言</legend>

    <input type="radio" id="javascript" name="language">
    <label for="javascript">JavaScript</label><br/>

    <input type="radio" id="python" name="language">
    <label for="python">Python</label><br/>

    <input type="radio" id="java" name="language">
    <label for="java">Java</label>
  </fieldset>
</form>

Window.opener

属性target="_blank"的页面允许新页面访问原始页面window.opener。这可能会对安全和性能产生影响。使用rel="noopener"rel="noreferrer"可以防止这种情况发生。

<a href="https://cnfczn.com/" target="_blank" rel="noopener">
	小猿的网站
</a> 

base属性

如果要在新选项卡中打开文档中的所有链接,可以使用<base>元素:

<head>
   <base target="_blank">
</head>
<!-- 这个连接将在新窗口打开 -->
<div class="wrapper">
  这个链接将在新窗口打开: &nbsp;
  <a href="https://cnfczn.com/">
    小猿的网站
  </a>

  <p>
    了解更多: <br><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
    MDN Documentation
    </a>
  </p>
</div>

Favicon 缓存破坏

要刷新您网站的图标,您可以通过添加?v=2到文件名来强制浏览器下载新版本。
这在生产中特别有用,可以确保用户获得新版本。

<link rel="icon" href="/favicon.ico?v=2" />

spellcheck属性

spellcheck 属性规定是否对元素进行拼写和语法检查。包括以下几种:

  • input 元素中的文本值(非密码)
  • textarea 元素中的文本
  • 可编辑元素中的文本
<label for="input1">spellcheck="true"</label>
<input type="text" id="input1" spellcheck="true">

<label for="input2">spellcheck="false"</label>
<input type="text" id="input2" spellcheck="false">

原生 HTML 滑块

可以使用它<input type="range">来创建滑块。

<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">

<label for="result">Your choice: </label>
<input type="number" id="result" name="result">
const volume = document.getElementById('volume');
const result = document.getElementById('result');
result.value = volume.value;

volume.addEventListener('change', () => {
  result.value = volume.value;
});

HTML 折叠标签

您可以使用details元素来创建原生 HTML 折叠标签。

<div class="wrapper">
  <details>
    <summary>
     单击查看详细信息 
    </summary>
    <pre>
       山居秋暝
        王维(唐)
    空山新雨后,天气晚来秋。
    明月松间照,清泉石上流。
    竹喧归浣女,莲动下渔舟。
    随意春芳歇,王孙自可留。
    </pre>
  </details>
</div>

mark标签

可以使用<mark>标签来突出显示文本。

<p>我最喜欢吃<mark>苹果</mark>了。</p>

download属性

可以在a元素中使用download属性来下载文件,而不是跳转到该文件。

<a href='文件路径' download>
  下载
</a> 

性能提示

使用.webp图像格式缩小图像并提高网站的性能。

<picture>
  <!-- 如果支持webp格式 -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 备选 如果浏览器不支持.webp格式或者<picture>标签 -->
  <img src="logo.png" alt="logo">
</picture>           

视频缩略图

使用该poster属性指定要在视频下载时或在用户点击播放按钮之前显示的图像。

<video poster="path/to/image">

文本框type="search"属性

type="search"用于您的搜索输入,您将免费获得“清除”按钮。

<form>
  <label for="text">请输入文字</label>
  <input type="text" id="text" name="text">
  
  <label for="search">请输入文字</label>
  <input type="search" id="text" name="text">
</form>

本文转自marko html tips