HTML5 其他常用标记

Posted 2020-06-20

html5 其他常用标记

浮动框架 <iframe> 元素

可以在一个浏览器窗口中同时显示多个页面文档，可以通过设置 <iframe> 元素的 src 属性，指向其他页面的 URL。

语法：

• 开始标记：必需
• 内容：可以添加文本描述，当浏览器不支持 <iframe> 元素时，将显示该文本描述信息
• 结束标记：必需

主要属性：

• src：浮动框架中的网页的 url
• height：高度
• width：宽度

浮动框架<iframe src="frame1.html"></iframe>

摘要与细节

网页上经常需要将部分信息进行展开或者收缩。

<details> 元素用于定义细节

可以在此元素里添加文本或者图像等元素

需要与<summary> 元素配合使用

<summary> 元素用来包含 <details> 元素的标题

必须包含在 <details> 元素中

作为 <details> 元素的第一个子元素

目前只有 Chrome 支持

<details>
    <summary>发表信息</summary>
    <div>
        发票抬头：<input /><br />
        发票内容：<input />
    </div>
</details>

度量元素 <meter>

<meter> 元素用于定义度量衡。

比如用于表示投票人数比例、磁盘的使用量或者统计比例等。

常用于静态比例的显示(已知最大和最小值)

语法：<meter> 文本 </meter>

主要属性：

• min：范围的最小值，默认为 0
• max：范围的最大值，默认为 1
• value：度量值，默认为 0

设备1：
<meter value="10" min="0" max="100" title="50%"></meter>%<br />
设备2：
<meter value="50" min="0" max="100" title="10%"></meter>%<br />
设备3：
<meter value="90" min="0" max="100" title="90%"></meter>%<br />

时间元素 <time>

<time> 元素用来定义公历的时间(24小时制)或日期

并不能为页面带来页面显示效果上的变化

常用于对网页添加与时间相关的附加信息

语法：<time> 文本 </time>

主要属性：

datetime：规定日期/时间，日期与时间之间用 "T" 文字分隔。

<time datetime="2011-7-11T0:35">凌晨0点35分</time>

高亮文本显示 <mark> 元素

<mark> 元素用于定义页面中带有记号的文本。

• 常用于需要突出显示的文本
• 被 <mark> 元素包围的文本会显示额外的背景色

<h2>搜索"<mark>HTML5</mark>"：</h2>
<p><mark>HTML5</mark>是标记语言</p>