html tips 2021-06-21

最新推荐文章于 2023-07-31 18:02:45 发布

bug我来写

最新推荐文章于 2023-07-31 18:02:45 发布

阅读量182

点赞数

文章标签： html

原文链接：https://markodenic.com/html-tips/

版权

HTML tips

from Marko Denic

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

`loading="lazy"` 属性

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

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

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

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>

有序列表`start`属性。

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

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

`<progress>` 标签

您可以使用<progress>来标示任务的进度（进程）。

<progress></progress>
<progress value="22" max="100"></progress>

`<meter>` 元素

您可以使用该<meter>元素来显示数量。不需要 JavaScript/CSS。

<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 原生输入建议

<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>

`<Fieldset>` 元素

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

<form>
  <fieldset>
    <legend>Choose your favorite language</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://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>

`base` 元素

如果要在新选项卡中打开文档中的所有链接，可以使用<base>element：

<head>
   <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/">
    Free Code Tools
  </a>

  <p>
    Read more: <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" />

10.spellcheck属性
使用该spellcheck属性来定义是否可以检查元素的拼写错误。

<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">`

您可以使用<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">

<script>
    const volume = document.getElementById('volume');
    const result = document.getElementById('result');
    result.value = volume.value;

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

HTML 展开面板

您可以使用该details元素来创建原生 HTML 展开面板。

<details>
    <summary>
      Click me to see more details
    </summary>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
    </p>
  </details>

`<mark>` 标签

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

<p>Don't forget to be <mark>awesome</mark> today</p>

Don't forget to be awesome today

标记标签实现

`download`属性

您可以使用download链接中的属性来下载文件，而不是导航到该文件。

<a href='path/to/file' download>
  Download
</a>

`<picture>`搭配`.webp`图像

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

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture>

视频缩略图

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

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

输入框 `type="search"`

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

<form>
    <label for="text">Input Type Text</label>
    <input type="text" id="text" name="text">
    
    <label for="search">Input Type Search</label>
    <input type="search" id="search" name="search">
</form>

bug我来写

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html tips 2021-06-21

HTML tipsfrom Marko DenicHTML (超文本标记语言) 是设计用于在 Web 浏览器中显示的文档的标准标记语言。它可以借助层CSS (叠样式表) 等技术和 JavaScript 等脚本语言来辅助。loading="lazy" 属性性能提示。您可以使用该loading=lazy属性来推迟图像的加载，直到用户滚动到它们为止。<img src='image.jpg' loading='lazy' alt='Alternative Text'>电子邮件、电话和短信
复制链接

扫一扫