Logo

菜单

发布于 2026-01-06 1 阅读
0

10 个 HTML 小技巧，助您轻松入门

10 个 HTML 小技巧，助您轻松入门

HTML 拥有许多实用的元素和属性，但很多人并不了解。以下技巧和窍门列表可以帮助您更好地使用 HTML。

 

1）颜色选择器

 
你知道吗？你完全可以用HTML创建一个漂亮的颜色选择器！

一探究竟：

<input type="color" id="color-picker" 
name="color-picker" value="#e66465">
<label for="color-picker">Pick a color</label>
Enter fullscreen mode Exit fullscreen mode

 

颜色选择器

 

 

2）进度条

 
您还可以仅使用 HTML 的 `<progressbar>` 元素创建进度条progress。它可以用来显示任务进度，例如文件上传/下载。

<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
Enter fullscreen mode Exit fullscreen mode

 

3）电表标签

 
您可以使用该meter元素显示一定范围内的测量数据，包括最小值/最大值/最低值/最高值，例如温度。

<label for="fuel">Fuel level:</label>
<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>
Enter fullscreen mode Exit fullscreen mode

 

4）输入搜索

 

你可以设置输入框的type属性来search创建一个搜索输入框。这样做的好处是会添加一个“x”按钮，方便用户快速清除输入内容。

<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q"
       aria-label="Search through site content">

<button>Search</button>
Enter fullscreen mode Exit fullscreen mode

 

5) 有序列表中的起始属性

 

你可以使用该start属性来指定有序列表的起始值。

<ol start="79">
  <li>Slowpoke</li>
  <li>Slowbro</li>
  <li>Magnemite</li>
  <li>Magneton</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

 

6）响应式图像

 

使用该picture标签可以根据窗口大小显示不同的图像。
这有助于提高网站的响应速度。

<picture>
    <source media="(min-width:1050px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/006.png">
    <source media="(min-width:750px)" srcset="https://assets.pokemon.com/assets/cms2/img/pokedex/full/005.png">     
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png" alt="Charizard-evolutions" style="width:auto">
  </picture>
Enter fullscreen mode Exit fullscreen mode

 

7）高亮文本

 

使用mark标签可以高亮显示文本。默认颜色为黄色，但您可以通过设置 background-color 属性将其更改为您喜欢的任何其他颜色。

<p>Hi dev friend, this is a 
<mark>highlighted text</mark> 
made with love by simon paix </p>
Enter fullscreen mode Exit fullscreen mode

 

8) 交互式小部件

 
你可以使用details标签创建一个用户可以打开和关闭的原生手风琴。

提示：该summary元素应该是标签的第一个子元素details。

 <details>
   <summary>Click to open </summary>
   <p>Hi stranger! I'm the content hidden inside this accordion ;)</p>
 </details>
Enter fullscreen mode Exit fullscreen mode

 

9) 原生输入建议

 
你可以使用该datalist元素来显示输入元素的建议。

输入的属性list必须等于id。datalist

<label for="fighter">Pick your fighter</label>
<input list="fighters" name="fighter">
  <datalist id="fighters">
    <option value="Sub Zero">
    <option value="Pikachu">
    <option value="Mario">
    <option value="Baraka">
  </datalist>
Enter fullscreen mode Exit fullscreen mode

 

10）在新标签页中打开所有链接

 
您可以将base元素target属性设置为空，这样用户点击链接时，链接始终会在新标签页中打开。如果您想避免用户意外离开某个页面，这将非常有用。

但是，它包含指向您自己域名的链接。如果您只想让指向其他域名的链接在新标签页中打开，则必须使用 JavaScript。

<head>
   <base target="_blank">
</head>

<div>
  All links will open in a new tab: &nbsp;
  <a href="https://learnpine.com/">LearnPine</a>
</div>
Enter fullscreen mode Exit fullscreen mode

 
 

想了解我吗？欢迎联系！👋👩‍💻

 
我热爱学习，也乐于分享我的知识。我在这里 免费直播授课👉 ，也会在我的推特账号上分享编程技巧。如果你想了解更多技巧，欢迎关注我😁
 
 

文章来源：https://dev.to/simonpaix/10-html-tips-and-tricks-to-help-you-48m8
使用 pnpm 创建 React 应用
🎯 HireFlow 增强版：人...