注:学习笔记基于小甲鱼学习视频,官方论坛:https://fishc.com.cn/forum.php
官方资料
鱼C课程案例库:https://ilovefishc.com/html5/
html5速查手册:https://man.ilovefishc.com/html5/
css速查手册:https://man.ilovefishc.com/css3/
学习正文
iframe标签:https://man.ilovefishc.com/pageHTML5/iframe.html
meter标签:https://man.ilovefishc.com/pageHTML5/meter.html
progress标签:https://man.ilovefishc.com/pageHTML5/progress.html
使用 iframe 标签嵌套网页:
<!DOCTYPE html>
<html>
<head>
<title>嵌入一个网页</title>
<meta charset="utf-8">
</head>
<body>
<iframe src="https://fishc.com.cn/" width="1024px" height="800px">抱歉,浏览器不支持iframe。</iframe>
</body>
</html>
iframe 的 sandbox 属性为沙盒设置,会对第三方网站进行限制, sandbox="" 为最高限制,通常只能加载一些静态资源:
meter 标签定义一个范围内的测量值/分数值:
<!DOCTYPE html>
<html>
<head>
<title>使用meter元素显示一个范围内的值</title>
<meta charset="utf-8">
</head>
<body>
<p>你的零花钱还剩下:</p>
<meter id="money" high="0.8" low="0.2" optimum="0.6" value="0.2" min="0" max="1"></meter>
<p>
<button type="button" value="0.1">10%</button>
<button type="button" value="0.6">60%</button>
<button type="button" value="0.9">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
var meter = document.getElementById("money");
for (var i = 0; i < buttons.length; i++){
buttons[i].onclick = function(e){
meter.value = e.target.value;
};
}
</script>
</body>
</html>
使用 progress 标签设置进度条:
<!DOCTYPE html>
<html>
<head>
<title>使用progress元素显示进度条</title>
<meta charset="utf-8">
</head>
<body>
<p>来一个进度条:</p>
<progress max="1" value="0.4"></progress>
</body>
</html>