你需要这些 HTML5 标签
你需要这些 HTML5 标签
HTML5 有可能影响您的页面的 SEO,无论好坏。这是由于语义标签。不过,不要害怕语义标签,因为它们可以让我们的生活和用户的生活 1000% 更轻松。
本文基于 Bhawesh Ravat 长篇 文章 .
语义标签为网页添加了真正的含义,使人类和搜索引擎能够轻松区分网站的不同部分。因此,为了获得好处,您应该知道可以用来增强您的网站的 HTML5 标签。
️ 这 <abbr>
标签
- 显示您在博客中使用的缩写的完整形式。
- 如果你写一篇关于智能家居产品的文章,它也具有一些人工智能功能,可以帮助读者了解“人工智能”的含义。
如何 <abbr>
标签作品
- 如果你正在写博客,你必须用 title 属性包裹缩写词,该属性将包含该词的定义或完整形式。
- 正确完成后,当用户将鼠标悬停在显示“标题”属性所包含内容的缩写上时,将出现一个工具提示。
️ 这 <details>
标签
- 创建一个交互式容器框,当用户单击时可以扩展和收缩,同时包含所有内容。
如何 <details>
标签作品
- 声明一个新标签,让我们看看它是如何包装的
标签和您希望用户在需要时看到的常用内容 - 可以是任何东西——表格、表格、段落或图像
- 'details open' 属性允许容器在页面加载时打开文章
️ <optgroup>
标签
- 在您构建的表单中对下拉列表的选项进行分类。用户不必经历所有选项。相反,他们可以导航到他们需要的类别。
如何 <optgroup>
标签作品
- 声明“optgroup”标签并将所有类似的选项包装在其中
️ 如何 <base>
标签作品
- 用户只需要在 head 标签内声明这个标签,现在文档中的所有相对 URL 都会以新的 URL 作为其基础。
- 例子:<base href=”https://bhaveshrawat.pages.dev/assets/">
- <body> <figure style=”max-width: 480px;”> <img style=”width: 100%;” src=”netflix-planform.webp”> </figure>
与 <base>
标签
- 它不适用于像.
️ 这 <map>
标签
- 此标签可让您指定图像上的区域——它可以是矩形、圆形或多边形(基本上是任何不规则形状)——并根据图像的特定不规则形状及其周围区域将它们映射到不同的链接。
如何 <map>
标签作品
- 首先,指定一个带有“usemap”属性的标签,该属性与标签的名称属性具有相同的值。它必须相同,因为它将负责将地图坐标链接到图像。
- 然后,声明一个包含 shape、coords、alt 和 href 属性的标签,并用 'shape'、'coords、'alt 和 & href 包裹标签。
️ 'Oncontextmenu' 是一个属性,可以帮助您为您的应用程序构建自定义上下文菜单。
- 该属性的值为 默认为真 .当给定一个 false 值时,上下文菜单将不会出现。
- 这意味着 您正在禁用本机上下文菜单 b 因为您的用户不需要它。
如果您读到这里,请发表评论或给予一些爱
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明