figure与figcaption
figure用作文档中插图的图像。figcaption用作figure的标题。
<html>
<head>
<meta charset="UTF-8">
<title>
figure demo
</title>
</head>
<body>
<!--header：一个内容区块的标题，可容纳数据表格，搜索表单，logo图片等-->
<header>图片</header>
<!--一块独立内容-->
<figure>
<img src="E:\照片\big.jpg">
</figure>
<!--figure的标题-->
<figcaption>01</figcaption>
<!--footer：区域底部，一般承载作者姓名，版权信息等-->
<footer>
<small>作者：废废_siri</small>
<small>Posted by:jianshu</small>
<small>© www.mmp.com 京ICP备13141314号</small>
</footer>
</body>
</html>
ditails与summary
summary包含于details中(从属关系)，关于文档的细节(展开/收缩内容)。
<html>
<head>
<meta charset="UTF-8">
<title>
details demo
</title>
</head>
<body>
<!--details：展开/收缩内容，可在details添加open属性，设置其属性值为open，则打开时为展开，否则为收缩-->
<details>
<summary>一出好戏</summary>
<p>
该片讲述了公司员工团建出游遭遇海难，众人流落在荒岛之上，为了生存他们共同生活，并面对一系列人性问题的寓言故事。
</p>
</details>
</body>
</html>
mark
高亮显示(加黄色底纹)。
<html>
<head>
<meta charset="UTF-8">
<title>
mark demo
</title>
</head>
<body>
<!--mark：高亮显示-->
<p>你喜欢看一部叫做<mark>名侦探柯南</mark>的动漫吗？</p>
</body>
</html>
progress
进度条。
<html>
<head>
<meta charset="UTF-8">
<title>
progress demo
</title>
</head>
<body>
<!--progress：完成事情的进度，没有value表明进度条完成的进度是不确定的-->
<progress max="100"></progress>
<progress max="100" value="50"></progress>
<section>
<h1>progress进度条</h1>
<p>
完成的百分比
<progress id="p" max="100" style="background-color:blueviolet;"></progress>
<input type="text" id="text" style="width: 21.5px;border: 0px;">%
</p>
<input type="button" value="click me!" onclick="btn()">
</section>
<script>
function btn(){
var i=0; //全局变量i
function other(){
if(i<100)
{
i++;
updateprogress(i);
}
}
//setIntervar：按照指定的周期(以ms为单位)调用函数或者表达式
setInterval(other,100);
}
function updateprogress(newValue){
var proBar = document.getElementById("p");
proBar.value = newValue;
var text = document.getElementById("text");
text.value = newValue;
}
</script>
</body>
</html>
meter
度量给定范围内的数据。
<html>
<head>
<meta charset="UTF-8">
<title>
meter demo
</title>
</head>
<body>
<!--max：最大值,min：最小值,low：下限,high：上限,optimum：最佳值,value：默认值-->
<meter max="100" min="30" low="10" high="90" optimum="50" value="50"></meter>
</body>
</html>
ol元素
有序列表。
<html>
<head>
<meta charset="UTF-8">
<title>
ol demo
</title>
</head>
<body>
<!--ol：有序列表， start可设置开始编号，如下：2，reversed：倒序-->
<ol start="2" reversed>
<li>汉语</li>
<li>英语</li>
<li>德语</li>
</ol>
</body>
</html>
dl元素
dl定义列表项目，dd描述列表项目。
<html>
<head>
<meta charset="UTF-8">
<title>
dl demo
</title>
</head>
<body>
<dl>
<dt>computer</dt>
<!--dd：对dt做名词解释-->
<dd>电脑，可以查阅资料，打游戏等。</dd>
<dt>apple</dt>
<dd>苹果，一种可以食用的水果。</dd>
</dl>
</body>
</html>
cite元素
常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。斜体显示。
<html>
<head>
<meta charset="UTF-8">
<title>
cite demo
</title>
</head>
<body>
<!--cite：标题，斜体显示-->
<p>有趣的<cite>《福尔摩斯探案集》</cite></p>
</body>
</html>
small
承载声明、注意事项、法律规范、版权等。
<html>
<head>
<meta charset="UTF-8">
<title>
small demo
</title>
</head>
<body>
<!--small：承载声明，注意事项，法律规范，版权等-->
<small>注：版权归xxx所有</small>
</body>
</html>
网友评论