5 个技巧让你真正成为 HTML 大师 表单验证 音频图片 完美预格式化文本输入专业版 总结 感谢阅读

2025-05-26

5 个技巧助你成为真正的 HTML 大师

表单验证

声音的

完美画面

预格式化文本

输入专业版

总结

感谢阅读

HTML是一门人人皆知的语言，但真正了解的人却寥寥无几。说实话，刚开始学习的时候，你只需要掌握HTML的基础知识就可以了，但从长远来看，不了解这门语言的精髓会对你的应用程序造成很大的损害。

让我们开始吧！

表单验证

最常用的表单验证技术利用JavaScript：

function validateForm() {
  const inputText = document.forms["form-name"]["input-name"].value;
  if (!inputText) {
    // handle input empty
  } else {
    // handle input filled
  }
}
Enter fullscreen mode Exit fullscreen mode

对于大多数基本情况（例如上述示例），HTML附带了几个强大的验证器。上述代码只需一个参数即可替换：required

<form>
  <input required="true" />
</form>
Enter fullscreen mode Exit fullscreen mode

一些适用于 HTML 的标准验证器：

范围 使用 例子
必需的 强制填写给定的输入 <input required="true">
图案 根据给定的正则表达式验证输入 <input pattern="^\d{10}$">
类型 声明输入类型并兼作验证器 <input type="number">或者<input type="email">
分钟 检查输入值是否大于或等于给定值。适用于数字输入。 <input type="number" min="0">
最大限度 检查输入的值是否小于或等于给定值。适用于数字输入。 <input type="number" max="5">
步 指定输入值的合法数字间隔。适用于数字输入。 <input type="number" step="1" >

声音的

音频是现代用户体验 (UX)的重要方面之一。任何应用程序都离不开音频，但添加一些交互声音，你的网站吸引力就会瞬间飙升。

<audio id="click-audio">
  <source src="button-click.mp3" type="audio/mpeg">
</audio>
Enter fullscreen mode Exit fullscreen mode 
const audio = document.querySelector("#click-audio")
document.querySelectorAll("button")
  .forEach((button) => {
    button.onclick = () => audio.play()
  })
Enter fullscreen mode Exit fullscreen mode

完美画面

艺术指导是一种出色的优化技术，它通过根据一些媒体查询加载最佳尺寸的图像来节省大量带宽。

<picture>
    <source media="(max-width: 1200px)" srcSet="link-to-img">
    <source media="(max-width: 2560px)" srcSet="link-to-img@2x">
    <source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
    <img src="link-to-img@3x">
</picture>
Enter fullscreen mode Exit fullscreen mode

另一个与图片相关的工具是map。该map标签用于定义客户端图像映射，使您能够创建令人惊叹的用户体验。

图像地图是带有可点击区域的图像。您只需在 元素中输入X和Y 坐标<map>即可！

看看这个例子：

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
Enter fullscreen mode Exit fullscreen mode

预格式化文本

有时您会碰到格式奇怪的情况，您需要保留它，但HTML似乎会覆盖它？

头痛

pre标签来帮忙！元素中的文本将以等宽字体pre显示，并且保留空格和换行符。文本将完全按照HTML源代码中的格式显示。

<pre>
Lorem
  Ipsum   dolor sit             amet.
</pre>
Enter fullscreen mode Exit fullscreen mode

输入专业版

在HTML中，几乎任何元素都可以使用进行编辑contenteditable="true"。只需使用一些JavaScript事件处理程序，您就可以轻松创建一个精彩的富文本编辑器！

<p contenteditable="true">This is an editable paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

另一项有价值的技能是无需使用任何其他库甚至JavaScript即可添加输入建议！

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>
Enter fullscreen mode Exit fullscreen mode

总结

在本文中，我们讲解了一些技巧，助您提升HTML 水平。掌握这些技巧，您现在也可以成为HTML 大师了！

快乐开发！

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

  1. 我是初学者，该如何学习前端 Web 开发？
    可以参考以下文章：

    1. 前端流行语
    2. 前端开发路线图
    3. 前端项目构想
    4. 从初学者过渡到中级前端开发人员

  2. 你能指导我吗？

    抱歉，我工作已经很忙了，没时间指导任何人。

文章来源：https://dev.to/ruppysuppy/5-tricks-to-truly-call-yourself-html-master-2abk
Devto 翻译
PREV
成为更优秀前端开发人员的 5 个 UI 技巧 1. 保持一致的对齐方式 2. 内容之间的空间分配 3. 颜色和对比度 4. 排版 5. 视觉层次结构 结论 感谢阅读
NEXT
每个 React 开发者都应该知道的 5 个技巧 1. 延迟加载 2. 自定义 Hooks 3. React Fragments 4. 开发工具 5. 高阶组件 (HOC) 总结 感谢阅读