10 个你不知道你需要的 HTML 元素

栏目: Html · 发布时间: 5年前

内容简介:我听过 “HTML很容易” 这种情绪的次数比我想象的要多。 虽然我同意 HTML 可能比其他编程语言更容易学习,但你不应该认为它是理所当然的。HTML 是一种功能强大的标记语言,可用于为我们的 web 应用程序提供结构并提供强大的可访问性优势,但只有在适当使用时才能使用。因此,今天我们将发觉 10 个你可能不知道存在的 HTML 元素,希望你可以创建易访问、结构更健全的 web 应用程序。

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

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

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

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

Audio

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

Blockquote

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

Output

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

Picture

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

source 元素具有以下属性:

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

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

10 个你不知道你需要的 HTML 元素

Progress

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

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

Meter

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

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

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

Template

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

10 个你不知道你需要的 HTML 元素

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

10 个你不知道你需要的 HTML 元素

Time

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

Video

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

Word Break Opportunity

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

10 个你不知道你需要的 HTML 元素

运行效果:

10 个你不知道你需要的 HTML 元素

查看示例

希望这十个HTML元素为你提供了一些构建出色应用程序的新工具。

你的点赞是我持续分享好东西的动力,欢迎点赞!

欢迎加入前端大家庭,里面会经常分享一些技术资源。

10 个你不知道你需要的 HTML 元素


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Domain-Driven Design

Domain-Driven Design

Eric Evans / Addison-Wesley Professional / 2003-8-30 / USD 74.99

"Eric Evans has written a fantastic book on how you can make the design of your software match your mental model of the problem domain you are addressing. "His book is very compatible with XP. It is n......一起来看看 《Domain-Driven Design》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具