|
|
51CTO旗下网站
|
|
移动端

10 个你不知道的 HTML 元素

今天我们将发觉 10 个你可能不知道存在的 HTML 元素,希望你可以创建易访问、结构更健全的 web 应用程序。

作者:前端小智来源:今日头条|2019-11-29 16:49

我听过 “HTML很容易” 这种情绪的次数比我想象的要多。 虽然我同意 HTML 可能比其他编程语言更容易学习,但你不应该认为它是理所当然的。

HTML 是一种功能强大的标记语言,可用于为我们的 web 应用程序提供结构并提供强大的可访问性优势,但只有在适当使用时才能使用。

因此,今天我们将发觉 10 个你可能不知道存在的 HTML 元素,希望你可以创建易访问、结构更健全的 web 应用程序。

如果你想了解更多关于 HTML 的知识,可以访问W3Schools以获得更多的 HTML 元素。

Audio

标签可以播放一个音频,例如音乐或其他音频流。目前支持三种文件格式:MP3、WAV 和 OGG。

运行效果:

Blockquote

标签指定从另一个源引用的部分。

运行效果:

Output

标签表示一个计算的结果。你可以使用加号和等号来指定应该将第一个和第二个输入值输出到输出标记;可以使用包含要合并的两个元素的 ID 的 for 属性来表示这一点。

运行效果:

Picture

通过包含零或多个 元素和一个  元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 元素,如果没有匹配的,就选择  元素的 src 属性中的URL。然后,所选图像呈现在元素占据的空间中。

source 元素具有以下属性:

  • srcset(必填):定义要显示的图像的URL
  • media:media 属性允许你提供一个用于给用户代理作为选择 元素的依据的媒体条件(media condition)(类似于媒体查询)。如果这个媒体条件匹配结果为 false,那么这个 元素会被跳过。
  • sizes: 定义单个宽度值,具有宽度值的单个媒体查询,或具有宽度值的逗号分隔的媒体查询列表
  • type:type 属性允许你为 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型,那么这个 元素会被跳过。

如果浏览器不支持该元素,或者所有标签都不匹配,则使用标签提供向后兼容性。

Progress

标签表示任务的进度。

标签不能替代标签,因此指示磁盘空间使用情况或查询结果相关性的组件应该使用标签。

运行效果:

Meter

标签定义了一个定义范围内的标量度量,或者一个分数值。你还可以通过名称gauge引用此标记。

你可以使用标签来显示磁盘使用情况统计数据,或者指示搜索结果的相关性。

不应该使用标签来指示任务的进度;这些类型的组件应该由元素定义。

运行效果:

Template

HTML内容模板()元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现,但随后可以在运行时使用JavaScript实例化。

使用 JavaScript,你可以使用cloneNode()方法渲染此内容。

Time

标签定义了人类可读的日期或时间。 这可以用于以机器可读方式编码日期和时间,以便用户代理可以将生日提醒或预定事件添加到用户的日历。 此外,这允许搜索引擎产生“更智能”的搜索结果。

运行效果:

Video

标签指定一个影片剪辑或视频流。支持的格式包括MP4、WebM和Ogg。

运行效果:

Word Break Opportunity

如果你有一个很长的文本块,或者一个很长的单词,你可以使用标签来指定文本主体中最理想的分割位置。这是一种确保浏览器在调整大小时不会在奇怪的位置中断文本的方法。

运行效果:

【编辑推荐】

  1. 给新手 Java 开发者的 7 点提示
  2. 快速掌握前端开发中的常见错误
  3. 给新手Java开发者的7点提示
  4. 2019,.Net开发者的高光时刻
  5. 敏捷开发:中国十八年目睹之怪现状
【责任编辑:赵宁宁 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

骨干网与数据中心建设案例

骨干网与数据中心建设案例

高级网工必会
共20章 | 捷哥CCIE

398人订阅学习

中间件安全防护攻略

中间件安全防护攻略

4类安全防护
共4章 | hack_man

149人订阅学习

CentOS 8 全新学习术

CentOS 8 全新学习术

CentOS 8 正式发布
共16章 | UbuntuServer

291人订阅学习

读 书 +更多

精通ASP.NET 2.0+XML+CSS网络开发混合编程

本书以最新的ASP.NET 2.0为基础,详细阐述了当前网络开发的经典架构ASP.NET 2.0+XML+CSS的各个知识点,以及SQL Server 2005的相关知识。全...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微