|
标签 |
说明 |
|
<data> |
添加给定内容的机器可读翻译。 |
|
<bdi> |
允许您设置一段文本，使其脱离其父元素的文本方向设置。 在发布用户评论或其他您无法完全控制的内容时，该标签很有用 |
|
<template> |
定义用作容纳页面加载时隐藏内容的容器。 |
机器可读翻译 <data>
- <data> 元素将一个指定内容和机器可读的翻译联系在一起
|
属性 |
描述 |
|
value |
该属性指定元素内容所对应的数据，或者说 “机器可读的翻译”。 |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p>新产品</p> <ul> <li><data value="398">迷你番茄酱</data></li> <li><data value="399">巨无霸番茄酱</data></li> <li><data value="400">超级巨无霸番茄酱</data></li> </ul> </body>
</html>
浏览器运行结果如下： |
双向隔离标签 <bdi>
- <bdi> 标签告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
|
属性 |
描述 |
|
dir |
如同其他 HTML 元素一样，它包含全局属性 (en-US)，但是有一些语义上的细微差别：dir属性不继承父元素。如果没有设置，默认值即为 auto，以便浏览器根据元素内容决定元素内容的方向 |
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p> </body>
</html> |
浏览器运行结果如下：
内容模板 <template>
- <template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。
- 将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template> 元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
实例
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head>
<body> <button onclick="showContent()">显示隐藏的内容</button>
<template> <div class="myClass">我喜欢：</div> </template>
<script> var myArr = ["奥迪", "宝马", "奔驰", "大众", "捷豹", "沃尔沃"];
function showContent() { var temp, item, a, i; temp = document.getElementsByTagName("template")[0]; item = temp.content.querySelector("div"); for (i = 0; i < myArr.length; i++) { a = document.importNode(item, true); a.textContent += myArr[i]; document.body.appendChild(a); } } </script> </body>
</html> |
浏览器运行结果如下：
