HTML5标签学习笔记
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Html5Test</title>
<style>
section{
margin: 30px 0;
}
</style>
</head>
<body>
<header>
<hgroup>
<h1>html5Tag</h1>
</hgroup>
</header>
<nav></nav>
<article>
<header></header>
<section>
<command onclick="javascript:alert('hello world')">hello</command>
</section>
<section>
<details>
<summary>总得来说</summary>
<p>总得来说的详细叙述</p>
</details>
</section>
<section>
<input type="text" list="books">
<datalist id="books">
<option value="三生三世十里桃花"></option>
<option value="三生三世枕上书"></option>
<option value="三生三世步生莲"></option>
</datalist>
</section>
<section>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
<p><b>注释：</b>Internet Explorer 不支持 <output> 标签。</p>
</section>
<section>
<input type="month">
<p><b>注释：</b>仅支持chrome内核的浏览器 <month> 标签。</p>
</section>
<section>
<h2>可编辑列表</h2>
<ul contenteditable="true">
<li>这是列表</li>
<li>这是列表</li>
<li>这是列表</li>
<li contenteditable="false">这个<mark>不可</mark>编辑</li>
</ul>
</section>
<section>
<figure>
<img src="#" alt="Image">
<figcaption>图片标题</figcaption>
</figure>
<p><b>注释：</b>figure元素表示的内容通常可以是图片、统计图、代码，也可以是音视频、统计表格等。figcaption表示其标题。</p>
</section>
<section>
<p>
进度为：<progress id="p" value="0"><span>0</span>%</progress>
</p>
<input type="button" value="开始加载进度" onclick="startUpdate();">
<script>
var progressBar = document.getElementById('p');
var si = null;
function startUpdate(){
if(si) {
clearInterval(si);
si = null;
}
progressBar.value = 0;
progressBar.childNodes[0].textContent = 0;
si = setInterval(function(){
var nowV = parseInt(progressBar.textContent);
if (nowV >= 100) {
clearInterval(si);
si = null;
}else{
progressBar.value = ++nowV / 100;
progressBar.childNodes[0].textContent = nowV;
}
}, 100);
}
</script>
</section>
<section>
<p>磁盘使用量：<meter value="40" min="0" max="160">40/160</meter>GB</p>
<p>你的得分是：<meter value='91' min='0' max='100' low='40' high='90' optimum='100'>A+</meter></p>
<!-- 若不使用属性会影响进度条的显示 -->
<meter>80%</meter>
<meter>3/4</meter>
<!-- 可以不在标签内填数值，会以进度条显示 -->
<meter min='0' max='100' value='70'></meter>
</section>
<footer></footer>
</article>
<aside></aside>
<footer></footer>
</body>
</html>
HTML5标签学习笔记的更多相关文章
- HTML5标签总结笔记
HTML5标签笔记 1.格式标签 元素名和属性一般不区分大小写,特殊的如id和class需要区分 格式标签: <acronym> 定义只取首字母的标签 <abbr>定义缩写 & ...
- html5/css学习笔记
请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...
- HTML5硕士学习笔记
如今,该集团经过培训的同事给大家HTML5,他出席了两个5训练日,大概过一次给我们,在一个很形象.同事们更感兴趣的是. 课后共享所有的课件.在热情的新技术,我想工作有一个良好的早晨,我决定重新学习课件 ...
- HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- HTML5+CSS3学习笔记（一） 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- 46.前端html5标签学习
HTML:TR TD TH OL UL LI 这几个标签要区别 一.什么是HTML: 超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用: 是 ...
- HTML5 canvas学习笔记（一）
canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...
- HTML5标签学习之~~~
<article> 标签 article 字面意思为“文章”.在web页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式.这其中包括两方面,一为整个页面的主旨内容,另外就 ...
随机推荐
- 【BZOJ3506】[CQOI2014] 排序机械臂（Splay）
点此看题面 大致题意: 给你\(n\)个数.第一次找到最小值所在位置\(P_1\),翻转\([1,P_1]\),第二次找到剩余数中最小值所在位置\(P_2\),翻转\([2,P_2]\),以此类推.求 ...
- Uva 11078 简单dp
题目链接:http://uva.onlinejudge.org/external/110/11078.pdf a[i] - a[j] 的最大值. 这个题目马毅问了我,O(n^2)超时,记忆化一下当前最 ...
- LCA最近公共祖先(POJ1330)
题目链接:http://poj.org/problem?id=1330 解题报告: 先将一个子节点,深搜每一个根节点,并标记. 然后深索另一个子节点,当发现访问过了,就找到了最近的公共祖先. #inc ...
- c++ 读入和写入文件
读入 #include<ifstream> ifstream infile; infile.open(img_dir); while(getline(infile,tmp)){ } 写入 ...
- 协议:Http Https TCP/IP
Http协议 1.1 Http概述 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则.HTTP就是一个通 ...
- 【例题收藏】◇例题·IV◇ Wooden Sticks
◇例题·IV◇ Wooden Sticks 借鉴了一下 Candy? 大佬的思路 +传送门+ (=^-ω-^=) 来源:+POJ 1065+ ◆ 题目大意 有n个木棍以及一台处理木棍的机器.第i个木棍 ...
- git 常用命令及仓库创建
一.常用命令 1.添加到本地仓库缓存 git add . 2.查看本地仓库状态 git status 3.提交到本地仓库 git commit -am 'project init' 4.连接线上分支 ...
- win7同时安装python2和python3
1.下载python2和python3版本. 2.安装python3 1>选择添加PATH路径到系统. 2>为所有用户安装python. 3.安装python2 1>为所 ...
- PHP 防止 E-mail 注入（ PHP 过滤器）
PHP 防止 E-mail 注入 防止 e-mail 注入的最好方法是对输入进行验证. 下面的代码与上一节类似,不过我们已经增加了检测表单中 email 字段的输入验证程序: <html> ...
- C6748的GPIO口配置使用
2018年1月17日更新: 这几天用了创龙的C6748的库,对于GPIO配置十分不爽,我移植了RK6748的库,用起来十分酸爽,把下面的文件加入到工程中,然后include头文件后就可以使用.非常好使 ...