文献种类:专题技术文献;
<caption>标签、<center>标签、<datalist>标签 以及 <details>标签
开发工具与关键技术:VS/HTML/JS
作者:吴泽锋
撰写时间:2019年6月8日
3、<caption>标签:定义表格标题。
该标签必须紧随 table 标签之后。使用者只能对每个表格定义一个标题。
通常这个标题会被居中于表格之上。
3、<center>标签:对其所包括的文本进行水平居中。
HTML 与 XHTML 之间的差异:
在 HTML 4.01 中,center 元素不被赞成使用。
在 XHTML 1.0 Strict DTD 中,center 元素不被支持。
提示:建议使用 css 样式来实现文本居中效果;
3、<cite>标签:引用、斜体标签:引用的文本将以斜体显示。
该标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
用 <cite> 标签把指向其他文档的引用分离出来,尤其是分离那些传统媒体中的文档,
如书籍、杂志、期刊,等等。如果引用的这些文档有联机版本,还应该把引用包括在一个 <a> 标签中,
从而把一个超链接指向该联机版本。
该标签还有一个隐藏的功能:
它可以使你或者其他人从文档中自动摘录参考书目。
我们可以很容易地想象一个浏览器,它能够自动整理引用表格,
并把它们作为脚注或者独立的文档来显示。
<cite> 标签的语义已经远远超过了改变它所包含的文本外观的作用;
它使浏览器能够以各种实用的方式来向用户表达文档的内容。
4、<datalist>标签:定义选项列表;
需要与 input 元素配合使用该元素,来定义 input 可能的值;
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表;
且需要使用 input 元素的 list属性来绑定 datalist。
例:一个 input 元素,datalist 中描述了其可能的值:
<input list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
浏览器支持:
所有主流浏览器都支持 <datalist> 标签,除了 Internet Explorer 和 Safari。
4、<details>标签:用于描述文档或文档某个部分的细节。
浏览器支持:目前只有 Chrome(谷歌浏览器) 和 Safari 6 支持 <details>标签。
提示:一般与 <summary> 标签 配合使用可以为 details 定义标题。
标题是可见的,用户点击标题时,会显示出 details。
例:关于文档的细节:
details前
<details style="height:30px; width:100px; line-height:30px; padding-left:10px;">
<p>p标签1</p>
纯文本
<p>p标签2</p>
</details>
details后
打开前:
打开后:
在打开后,里面的内容将会置于更低一层
HTML DOM Details对象
Details对象:Details 对象表示 HTML <details> 元素。
例:通过使用 getElementById() 来访问 <details> 元素:
details标签前
<details id="myDetails">Some additional details...</details>
details标签后
<br>点击按钮来显示隐藏额外的细节。<br>
<button onclick="myFunction()">点一下</button>
<script>
function myFunction()
{ var x = document.getElementById("myDetails");
if (x.open == false) { x.open = true; }
else if (x.open == true) { x.open = false; }
}
</script>
里面的文本不会与 details 标签后面文本重叠;
创建 Details对象:可以通过使用 document.createElement() 方法来创建 <details> 元素:
例:演示如何创建 details元素:
<p>点击按钮来创建 details 元素。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{ var x = document.createElement("details"); details大小写都一样;
var t = document.createTextNode("Some additional details...");
x.appendChild(t); document.body.appendChild(x);
}
</script>
每次点击都可创建一个元素,无数量限制,但是被创建的元素每一个都占一行,
除非更改被创建元素宽度;
1开始:
2创建:
3打开:
属性 值 描述
open open 规定在 HTML 页面上 details 应该是可见的。
语法:< details open="open">
例:把 <details> 标签里面隐匿的 <p> 标签显示,再次点击 <details>标签 时 <p> 标签将隐匿;
<details open="open">
<p>All pages …</p>
</details>
借鉴于W3CSchool文档;