9 个极其有用的 HTML 技巧

2025-05-26

9 个极其有用的 HTML 技巧

HTML 有很多可能有用的实用秘密。

但我确实想确保该网站能够在 Internet Explorer 和其他浏览器上运行。

我使用Endtest创建自动化测试并在跨浏览器云上执行它们。

Netflix使用相同的平台来测试他们的网络应用程序。

它甚至被列为某些工作所需的技能。

Endtest确实有一些非常好的功能，例如：
• 跨浏览器网格，可在 Windows 和 macOS 机器上运行
• 用于自动化测试的无代码编辑器
• 支持 Web 应用程序
• 支持原生和混合 Android 和 iOS 应用程序
• 为您的测试运行提供无限视频录制
• 屏幕截图比较
• 地理位置
• If 语句
• 循环
• 在测试中上传文件
• Endtest API，可轻松与您的 CI/CD 系统集成
• 高级断言
• 在真实移动设备上进行移动测试
• 使用 Endtest Mailbox 进行电子邮件测试

您应该查看文档。

以下是 9 个极其有用的 HTML 技巧。

1.<figure>标签

这可用于标记照片。

该<figure>元素还可以包含<figcaption>：

<figure>
  <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%">
  <figcaption>Fig.1 - SWAT Kats</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

它看起来是这样的：

2.<video>标签

这使您可以嵌入媒体播放器来播放视频。

例如，您可以在 AWS S3 上上传您的视频并使用<video>标签将其嵌入到您的网站。

使用 YouTube 进行此类活动可能会显得不专业。

而且 Vimeo 不允许你在不付费的情况下嵌入你的视频。☹️

您可以指定某些属性，例如宽度、高度、自动播放、循环、控件等。

<video autoplay="" loop="" controls="" width="640" height="480">
<source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4">
</video>
Enter fullscreen mode Exit fullscreen mode

它看起来是这样的：

您还可以使用getUserMedia()或WebRTC嵌入直播

3.<picture>标签

此标签通过为较小的视口显示替代图像版本，帮助您以响应的方式显示图像。

它需要包含一个或多个<source>标签和一个<img>标签。

<img>仅当视口与任何标签不匹配<source>或浏览器不支持该标签时，才会使用该标签。

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>
Enter fullscreen mode Exit fullscreen mode

4.<progress>标签

标签<progress>代表任务的进度。

<progress>不要将该标签与标签<meter>（代表量规）混淆。

<progress value="63" max="100">
</progress>
Enter fullscreen mode Exit fullscreen mode

它看起来是这样的：

5.<meter>标签

您可以使用该meter元素来测量给定范围内的数据（量规）。

这可以通过最小值和最大值或百分比来实现。

<meter value="2" min="0" max="10">2 out of 10</meter>
Enter fullscreen mode Exit fullscreen mode 
<meter value="0.6">60%</meter>
Enter fullscreen mode Exit fullscreen mode

以下是它们：

6.<map>标签

该<map>标签用于定义客户端图像地图。

图像地图是具有可点击区域的图像。

您所要做的就是在元素中提及 X 和 Y 坐标<map>。

这意味着您创建了我们的太阳系地图并为每个行星定义区域，并将访问者带到他们点击的每个行星的单独页面。

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>
Enter fullscreen mode Exit fullscreen mode

7. contenteditable 属性

此属性指定元素的内容是否可编辑。

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

8.输入建议

<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

我希望你不介意我没有添加任何样式。

我更喜欢在我的例子中尽可能保持事物的原始性。

9.<noscript>标签

<noscript>仅当禁用 JavaScript 时，浏览器才会呈现元素内的内容。

它为没有 JavaScript 就会停止工作的组件提供了一种回退机制。

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
Enter fullscreen mode Exit fullscreen mode

我认为您正在寻找 HTML 技巧真的很酷，但是您确定您的 Web 应用程序在所有浏览器和设备上都能正常运行吗？

您可以使用Endtest快速创建自动化测试并在跨浏览器云上执行它们。

您甚至不需要编写代码就可以使用它。

认真地讲，只需阅读文档。

文章来源：https://dev.to/razgandeanu/9-extremely-useful-html-tricks-463a
Devto 翻译
PREV
请停止使用本地存储
NEXT
JavaScipt Hack 9 个极其强大的 JavaScript Hacks