摘要:本篇教程探讨了Html5零基础学习(1),希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了Html5零基础学习(1),希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
1、figure\figcaption||detail\summary||mark学习笔记
效果图
代码为:
复制代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<figure>
<img src="0fb2bcd14fd7aa2d7b046fe48e566f7a.jpg" alt="zhongguo" style="width:25%" />
<img src="4fdd3cb901efc1f921892a6c1b4469b4.jpg" alt="nanhai" style="width:25%" />
<img src="ec25e5957e76f3e5ed9d3d02191841bd.jpg" alt="beijing" style="width:25%" />
<figcaption>中国南海</figcaption>
</figure>
<script>
function showorhide(detail)
{
var p = document.getElementById("p");
if(detail.open)
{
p.style.visibility = "hidden";
}
else
{
p.style.visibility = "visible";
}
}
</script>
<details id="detail" onclick="showorhide(this)">
<summary>中国南海</summary>
<p id="p"><mark>中国南海是神圣的.</mark></p>
</details>
</body>
</html>
复制代码
2、progress\meter\indeterminate\image
效果图
代码如下:
复制代码
复制代码
复制代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script>
function btn() {
var i = 0;
function thread() {
if (i <= 100) {
i++;
updateprogress(i);
}
}
setInterval(thread, 100);
}
function updateprogress(newvalue)
{
var progerss = document.getElementById("p")
p.value = newvalue;
p.getElementsByTagName("span")[0].textContent = newvalue;
}
</script>
<section>
<h2>progress元素的使用</h2>
<p>完成的百分比<progress id="p" style="background-color:burlywood" max="100"><span>0</span>%</progress></p>
<input type="button" onclick="btn()" value="dianji" />
</section>
<meter value="90" min="0" max="100" low="10" high="80"></meter>
</br>
</br>
<input type="checkbox" indeterminate id="checkboxtext" />
<script>
var check = document.getElementById("checkboxtext");
check.indeterminate=true
</script>
</br>
</br>
<input type="image" src="4d33fe553927af2855ed237c93369706.jpg" alt="test" width="50" height="50"/>
</body>
</html>
复制代码
其中indeterminate属性可以控制checkbox处于选中和非选中之间,在图中是一个横线,image主要展示了width和height属性,可以控制图片的宽度和高度.
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号