是时候提升你的 HTML 技能了！🔋

2025-05-28

是时候提升你的 HTML 技能了！🔋

是啊，我知道。我知道你了解所有热门的 Web 技术，无论是 Angular、Ionic、Deno、Node、Django 还是其他什么！真是太棒了。

但问题是，你懂HTML吗？没错，就是那个超文本标记语言（HyperText Markup Language）？哎呀！再说一次，我知道你懂HTML，而且用这种语言写网站简直是神来之笔，但是……你知道怎么给你的HTML游戏加点料吗？

好吧，我到底在说什么！？往下拉就能看到一些非常棒的 HTML 功能（尤其是 HTML 5），它们能为标记游戏带来巨大的提升。⚡

提升 GIF

我们开始吧！

1️⃣ HTML 5 API🔌

HTML 地理位置 API [文档 📃 ]

如果您的网站需要检索用户的位置信息（例如导航或使用地图），那么地理位置 API 可以为您提供帮助。

可以通过调用来访问，navigator.geolocation通过调用它会向用户的浏览器添加一个提示，询问他们是否允许访问他们的位置数据。

例子：

function getLocation() {
  // Check for the geolocation service
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  } else {
    el.innerHTML = "Geolocation is not supported.";
  }
}
function showPosition(position) {
  el.innerHTML = "Latitude: " + position.coords.latitude +
  "<br>Longitude: " + position.coords.longitude;
}
Enter fullscreen mode Exit fullscreen mode

HTML Web Workers API [文档 📃 ]

Web Worker 是一个在后台运行的独立脚本，不会影响页面加载时的性能。

Worker 可以通过向创建它的 JavaScript 代码指定的事件处理程序发送消息来发送消息。它使用Worker()构造函数来执行此类操作。

例子：

// 1. CHECK FOR WEB WORKER SUPPORT
if (typeof(Worker) !== "undefined") {
  // Supported!
} else {
  // Not supported :(
}

// 2. CREATING A WEB WORKER OBJECT
if (typeof(w) == "undefined") {
  w = new Worker("worker_file.js");
}

// 3. SEND A MESSAGE FROM WORKER
w.onmessage = function(event){
  document.getElementById("workerdiv").innerHTML = event.data;
};
Enter fullscreen mode Exit fullscreen mode

HTML SSE API [文档 📃 ]

SSE 代表服务器发送事件。当网页自动从服务器获取更新时，会触发此事件。

该API包含在EventSource接口中。

例子：

// 1. CHECK SUPPORT
if(typeof(EventSource) !== "undefined") {
  // Supported
} else {
  // No server-sent events supported :(
}

// 2. RECIEVE EVENTS FROM SERVER
var source = new EventSource("myserver.php");
source.onmessage = function(event) {
  document.getElementById("serverresult").innerHTML += event.data + "<hr>";
};
Enter fullscreen mode Exit fullscreen mode

HTML Web 存储 API [文档 📃 ]

使用此 API，Web 应用程序可以在用户浏览器本地存储数据。它同时包含localStorage和sessionStorage。

另一种选择是创建 cookie，但网络存储更好，因为它更安全，而且可以存储大量数据。

例子：

// 1. CHECK SUPPORT
if (typeof(Storage) !== "undefined") {
  // supported!
} else {
  // No Web Storage support :(
}

// 2. USING LOCALSTORAGE

// Store
localStorage.setItem("name", "Vaibhav");

// Retrieve
document.getElementById("namediv").innerHTML = localStorage.getItem("name");

// 2. USING SESSIONSTORAGE
sessionStorage.setItem('myName', 'Vaibhav');
Enter fullscreen mode Exit fullscreen mode

2️⃣ HTML 事件属性🖱

以下是您应该在 DOM 中开始使用的一些属性：

您可以通过单击每个属性来转到其 MDN 文档！
活动编号 属性 描述 例子
1. onerror 发生错误时运行的脚本 <img src="image.gif" onerror="error()">
2. onload 页面加载完成后触发 <body onload="load()">
3. onresize 当浏览器窗口调整大小时触发 <body onresize="resize()">
4. onblur 当元素失去焦点时触发 <input type="text" onblur="blur()">
5. onsearch 当用户在搜索字段中输入内容时触发 <input type="search" onsearch="search()">
6. ondblclick 鼠标双击元素时触发 <button ondblclick="clicked()">Double-click</button>
7. onscroll 当元素的滚动条滚动时运行的脚本 <div onscroll="scroll()">
8. oncopy 当用户复制元素内容时触发 <input type="text" oncopy="copy()" value="Copy this tex">
9. oncanplay 当文件准备好开始播放时运行的脚本 <video oncanplay="canPlay()">
10. ontoggle 当用户打开或关闭<details>元素时触发 <details ontoggle="toggleDetail()">

3️⃣ 不常见的 HTML 标签🤪

为什么不呢！告诉我，你用过它们吗？

标签号 标签 描述 例子
1. <datalist> 具有预定义选项的数据列表（连接到元素） MDN 示例
2. <optgroup> <optgroup>使用标签对相关选项进行分组 MDN 示例
3. <ins> 删除了部分内容并插入了新内容的文本 MDN 示例
4. <wbr> 具有断词功能的文本 MDN 示例
5. <cite> 用于描述对所引用的创意作品的引用 MDN 示例

在这里阅读更多荒谬的 HTML 标签：

克里斯托弗·卡德

值得了解的不常见 HTML 标签

Christopher Kade ・ 19年5月28日

#webdev #html #a11y #beginners

4️⃣ HTML 5 属性😋

查看以下很酷的属性并确保通过单击它们访问其文档：

▶ accesskey：这是一个全局属性，它指定激活/聚焦元素的快捷键。

例子：

<a href="https://mailchi.mp/f59beeac6b9b/devupdates" accesskey="d">
Subscribe to Dev Weekly newsletter</a>
Enter fullscreen mode Exit fullscreen mode

▶ draggable：另一个全局属性，指定元素是否可拖动。

例子：

<p draggable="true">This is a draggable paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

▶ itemprop：此项可让您为物品添加属性。您可以轻松地使用此属性对物品进行分组。

例子：

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director:
    <span itemprop="director">James Cameron</span>
    (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html"
    itemprop="trailer">Trailer</a>
</div>
Enter fullscreen mode Exit fullscreen mode

▶ spellcheck：指定是否检查元素的拼写和语法。

例子：

<p spellcheck="true">This is a paragraph with spell check on.</p>
Enter fullscreen mode Exit fullscreen mode

▶ hidden：布尔属性，指定元素尚不相关或不再相关。

例子：

<p hidden>This paragraph should be hidden.</p>
Enter fullscreen mode Exit fullscreen mode

下一步去哪里？🤔

我建议你在项目中练习这些标签/API/属性，或者在下次使用 CodePen 时测试一下。以下是一些你可能会喜欢的链接：

谢谢阅读，我非常感激！祝你拥有美好的一天。(✿◕‿◕✿)

这间厕所的提交历史让我们大家都丢脸！你的 Git 也变得更环保了吗？😝

图片来源：https://t.co/HEzYrUa6Ol #DevHumour #Git #WFH pic.twitter.com/GWu5YFhCml

— 英国微软开发者 (@msdevUK) 2020 年 9 月 1 日

📫 订阅我的每周开发者新闻通讯 📫

附言：从今年开始，我决定在 DEV Community 上写作。之前，我在 Medium 上写作。如果有人想看看我的文章，可以看看我的 Medium 个人资料。
文章来源：https://dev.to/vaibhavkhulbe/it-s-time-to-supercharge-your-html-skills-5b6k
Devto 翻译
PREV
图论 — BaseCS 视频系列
NEXT
Framer Motion - 为 React 打造精美的动画和交互。🤤 什么是 Framer Motion？🤔 我们将要做什么？😏