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属性,可以控制图片的宽度和高度.

Html5学习笔记(1)的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. HTML5学习笔记(一):HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  5. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  6. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

  7. HTML5 学习笔记(一)——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  8. HTML5 学习笔记--------》HTML5概要与新增标签!

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  9. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

随机推荐

  1. Mac OS X Terminal 101:终端使用初级教程

    Mac OS X Terminal 101:终端使用初级教程 发表于 2012 年 7 月 29 日 由 Renfei Song | 文章目录 1 为什么要使用命令行/如何开启命令行? 2 初识Com ...

  2. javascript不用new关键字创建对象示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. EZGUI下的动态图片的处理

    EZGUI的使用过程中,有时需要使用动态的图片,比如商店里面商品的ICON,好友的头像等,通过使用SimpleSprite可以实现这个功能.   比如一个通过网络显示好友头像: WWW www = n ...

  4. How to create an anonymous IDA PRO database (.IDB)

    Source: http://www.0xebfe.net/blog/2013/01/13/how-to-create-an-anonymous-ida-pro-database-dot-idb/ P ...

  5. ALTER SEQUENCE 修改序列解决唯一约束冲突 unique constraint violated

    背景 自增序列会遇到也会遇到唯一约束冲突吗?是的,最常见的情况就是数据迁移之后,导致数据最大值超过序列值. 软件开发中不遇到些出乎意料的问题,总感觉不太够劲. 修改序列(ALTER SEQUENCE) ...

  6. js日期时间比较函数

    转自:http://www.cnblogs.com/zxjyuan/archive/2010/09/07/1820708.html js日期比较(yyyy-mm-dd) function duibi( ...

  7. NSURLSession与AFNetworking3.0

    下面是用GET方式请求一个页面数据的示例: AFNetworking 2.x NSString *siteUrl = @"http://webinar.ofweek.com/readDemo ...

  8. 关于织梦系统不支持php中GD库的问题

    大多数人在显成的PHP的CMS时,如织梦CMS,安装的时候不支持GD库,就导致整个网站的验证码不显示,以下是个人对此类问题的解决办法: 1.首先找到wamp的安装目录,找到PHP的文件夹,打开php. ...

  9. WCF关于svcutil生成关于绑定出现 元数据包含无法解析的引用的解决方案

    元数据包含无法解析的引用. 没有终结点在侦听可以接受消息的 net.tcp://localhost:8000/service.这通常是由于不正确的地址或者 SOAP 操作导致的.如果存在此情况,请参阅 ...

  10. C++ string 用法详解

    /////////////////////////////////////////////////////////////////////////////////// 任何人对本文进行引用都要标明作者 ...