html5 新增的页面 元素
2024-09-05 23:26:31
figure 和 figcaption元素
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<form>
<figure>
<img src="海豚.png" alt="海豚"></img>
<img src="火烈鸟.png" alt="火烈鸟"></img>
<img src="鹿鹿.png" alt="鹿鹿"></img>
<figcaption>动物</figcaption>
</figure>
</form>
</body>
</html>
图片
效果:
detail和summary元素
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<script>
function detail_onclick(detail) {
var p=document.getElementById("p");
if(detail.open) {
p.style.visibility='hidden';
}else {
p.style.visibility="visible";
} } </script>
<details id="detail" onclick="detail_onclick(this)">
<summary>战狼2</summary>
<p id="p" style="visibility:hidden ">吴京自导自演的电影,是一部红遍全国的动作片,广受国人的好评,央视多次报道</p>
</details>
</body>
</html>
效果:
mark元素
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<p>这是用来测试<mark>mark</mark>元素的例子</p>
</body>
</html>
效果:
meter
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head> <body>
<meter value="" min="" max="" low="" high="" optimum=""> </meter>
</body>
</html>
效果:
2017-09-03 12:18:15
最新文章
- linux下vi命令
- C4.5决策树算法概念学习
- SVN的使用(转载)
- 文档学习 - UILabel - 属性详解
- Android iOS Dribbble风格边栏菜单实现
- WM_PAINT在微软官方定义中,wParam和lParam都没有使用,所以就被Delphi给重定义了这个消息,还增加了DC(Delphi可任意改写消息的结构)
- C++编程练习(11)----“图的最短路径问题“(Dijkstra算法、Floyd算法)
- 【Java框架型项目从入门到装逼】第十五节 - jdbc模糊查询实现(附带详细调试过程)
- CENTOS6.6上搭建单实例ORACLE12C
- MySQL 表名区分大小写设置
- Docker安装部署redis
- springboot 整合swagger-ui
- 3-D crustal model transfer to cdl format
- Javascript中的垃圾回收机制
- Tomcat server.xml 配置虚拟目录
- ASCII码表(0-127 ) C中的转义字符
- extends和implements区别
- MVC文件上传03-使用Request.Files上传多个文件
- Design and Architectural Goals
- EF Code-First 学习之旅