问候，哈勃！ 我向您介绍
Klaus撰写的文章
“ 9个极其有用的HTML技巧”的翻译。
HTML有许多实用的秘密，您可能会发现它们有用。
来自作者但是，我想确保该站点可以在Internet Explorer和其他浏览器中运行。
我使用
Endtest创建自动化测试，并在跨浏览器的云中运行它们。
Netflix使用相同的平台来测试其Web应用程序。
最终测试的技能甚至在某些
职位空缺所需的技能列表中。
Endtest具有一些非常有用的功能，例如：
•在装有Windows和MacOS的计算机上运行的跨浏览器网络
•用于自动测试的无代码编辑器
•Web应用程序支持
•支持适用于Android和iOS的本机和混合应用程序
•无限视频进行测试
•比较
屏幕截图
•地理位置
•如果声明
•周期
•将文件上传到您的测试
•最终测试API，可轻松与CI / CD系统集成
•扩展声明
•在移动设备上进行移动测试
•使用Endtest邮箱进行电子邮件测试
您可以查看
文档 。
以下是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>
这是它的外观：
图1-特警猫
2.标签“视频”它允许您嵌入媒体播放器以播放视频。
例如，您可以将视频上传到AWS S3，然后使用“视频”标签将其嵌入到您的网站中。
为此使用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>
这是它的外观：
您也可以使用
getUserMedia（）或
WebRTC嵌入直播
3.标签“图片”此标签有助于以公共形式显示图像，为较小的查看窗口显示图像的替代版本。
它必须包含一个或多个
“源”标签和一个
“ img”标签。
仅当视口
与任何源标记都不匹配或浏览器不支持
img标记时，才使用
img标记。
<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>
4.标签“ progress”进度标签显示任务的进度。
此标签不应与标签
“ meter” （传感器）混淆。
<progress value="63" max="100"> </progress>
看起来是这样的：
5.标记“仪表”您可以使用
“仪表”标签来测量给定范围内的数据（传感器）。
可以通过最小值和最大值或百分比来设置结果。
<meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter>
它们是：
6.标记“地图”map标签用于定义客户图像地图。
图像图是具有交互区域的图像。
您要做的就是
在地图的元素中输入X和Y坐标。
这意味着您要创建我们的太阳系地图，为每个行星定义一个区域，并将访问者重定向到他们单击的每个行星的单独页面。
<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>
7. Contenteditable属性此属性指示项目的内容是否可编辑。
<p contenteditable="true">This is an editable paragraph.</p>
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>
希望您不要介意我没有添加各种样式。
我喜欢按自己的喜好设计示例，并尽可能地美观。
9.标签“ noscript”仅当禁用JavaScript时，浏览器才会显示
noscript元素内
的内容。
这为没有JavaScript即可停止工作的组件提供了一个后备机制。
<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>
我认为您正在寻找HTML技巧真的很酷，但是您确定Web应用程序在所有浏览器和设备上都能正常运行吗？
您可以使用
Endtest快速创建自动化测试，并在跨浏览器的云中运行它们。
您甚至不需要使用它的代码。
认真地，只要阅读
文档 。