10 个不常用但你有必要知道的 html 标签

更新日期: 2019-04-03阅读: 1576标签: 标签

概述

html 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

今天我们将介绍您可能不知道的十个 HTML 标签。虽然不常用,但是一旦遇到使用场景使用起来将是非常方便的。

如果您想了解有关 HTML 的更多信息,可以访问 W3Schools 获取更多 HTML 信息。


audio:

<audio> 标签定义声音,比如音乐或其他音频流。目前支持三种文件格式:MP3,WAV 和 OGG。

<audio src="/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

点击此处查看结果


blockquote

<blockquote> 标签定义块引用。 <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

Here comes a long quotation:

<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

请注意,浏览器在 blockquote 元素前后添加了换行,并增加了外边距。

点击此处查看结果


output

<output> 标签定义不同类型的输出,比如脚本的输出。标签包含以下属性 for 规定一个或多个元素的 id 列表,以空格分隔。这些元素描述了计算中使用的元素与计算结果之间的关系。 form 规定 <output> 元素所属的一个或多个表单的 id 列表,以空格分隔。 name 规定 <output> 元素的名称。 Internet Explorer 不支持 <output> 标签。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

点击此处查看结果


picture

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

picture 标签的属性如下:

srcset (必需) - 定义要显示的图像的 URL

media - 接受通常在 css 中定义的任何有效媒体查询( media queries )

例如下面所示

<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

根据浏览器的最小宽度的变化,picture 将显示不同的图片

点击此处查看结果


progress

<progress> 标签标示任务的进度(进程)。用于进度条显示

<progress value="22" max="100">
</progress>

点击此处查看结果


meter

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge (尺度)。也可以用于进度条的显示


<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>

点击此处查看结果


template

<template>标记内的内容本身是对用户隐藏的,通过 JS 可以将其用于重复实例化显示。相当有定义了一个模板,该模板可以通过 JS 重复被调用展示。

例如下面定义模板:

<template>
    <img src=” icon.jpg ”>
</template>

在 JS 中可以通过 cloneNode() 方法,来重复实例化显示该模板中的内容:

const template = document.querySelecor(‘ template ’);
const templateClone = myTemplate.content.cloneNode(true);
document.body.appendChild(templateClone);


time

<time> 标签定义公历的时间( 24 小时制)或日期,时间和时区偏移是可选的。

time 主要作用在于可以方便的被爬虫抓取,从而获得相应的数据

time 本身对页面布局没有任何影响

例如:

<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>


video

与<audio>相对应,<video> 标签定义视频,比如电影片段或其他视频流。


<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

点击此处查看结果


wbr

wbr 是 Word Break Opportunity 的简写,规定在文本中的何处适合添加换行符。

例如下面的对于较长的单词 XMLHttpRequest 希望在换行时候能够截断换行而不是整个换行的情况下可以使用,下面的代码在换行的时候截断成 XML Http Request 分别进行换行,而不是 XMLHttpRequest 整个进行换行。

<p>
如果想学习 AJAX,那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>

点击此处查看结果


本文是由葡萄城技术开发团队发布,转载请注明出处:葡萄城官网

链接: https://www.fly63.com/article/detial/2705

Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

a标签是我们常用的一个标签之一,这篇文章主要讲解如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。

web标签语义化的理解_web语义化是什么意思

Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容

HTML中<base>标签的正确使用

<base> 标签必须位于 <head> 元素内部,在一个文档中,最多能使用一个 <base> 标签,使用了<base>标签的链接后,其他链接必须在<base>标签的链接里面,不然将无法找到。

使用Map标签指定点击区域时的兼容性问题

因为map标签用的较少,而常用的label标签中的for属性,是不需要加#的,加上了反而会有错。当然,label和map中的用法也不同,不论如何,引以为戒

html 标签优化_如何优化网站HTML标签代码优化

如何优化网站HTML标签代码优化?选用合适的标签、htm5提供了很多类型的input的type类型、使用html5语义化标签等

js动态添加html标签和属性_手动插入meta、script、div、img等标签

web网页是由 html标签一层层组成的,js也可以动态添加对应的标签,比如mate标签、script标签、div标签、img标签等,动态创建的方法基本都差不多,下面将简单介绍下如何实现

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

<script>标签的属性

src定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。

html的title和alt的区别

alt标签是html标签的属性,而title即使标签,又是标签的属性。 当title作为属性时,用来为元素提供额外的说明信息。当鼠标移入变迁内会显示title的内容,以达到补充说明或提示的效果。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!