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页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式.这其中包括两方面,一为整个页面的主旨内容,另外就 ...
随机推荐
- Poj(2236),简单并查集
题目链接:http://poj.org/problem?id=2236 思路很简单,傻逼的我输出写成了FALL,然后遍历的时候for循环写错了,还好很快我就Debug出来了. #include < ...
- node.js 练习3 调用函数
(1)创建n3-1.js,并输入代码 (2)创建User.js ,并输入代码 (3)运行cmd (4)在浏览器上查看 (5) 再次查看cmd
- string find简析
原文链接 #include <string>#include <iostream>using namespace std; void main(){ ////find函数返回类 ...
- C#继承的多态性
C#继承的多态性 当一个类A派生出新类B时,这个基类A在新类B中可以表现为不同的类型:用作它自己的类型.基类型,或者在实现接口时用作接口类型,我们将这种情况称为多态性. C#中的每种类型都是多态性的, ...
- 一些简单的Js代码的封装
1 function getById(id) { 2 3 } 4 5 function getAttr(el, k) { 6 7 } 8 9 function setAttr(el, k, v) { ...
- 一篇SSM框架整合友好的文章（三）
###一.SpringMVC理论 它始终是围绕 handler. 数据模型 model. 页面view进行开发的. 运行流程图: 通过mvc配置文件,配置"中央处理器"dispat ...
- ARC下需要注意的内存问题
之前发了一篇关于图片加载优化的文章,还是引起很多人关注的,不过也有好多人反馈看不太懂,这次谈谈iOS中ARC的一些使用注意事项,相信做iOS开发的不会对ARC陌生啦.这里不是谈ARC的使用,只是介绍下 ...
- 关于Vue 兄弟组件通信
最近项目中遇到希望在操作路由组件里面内容的时候可以影响共用组件Header组件(这个其实就是他的兄弟组件)的操作. 意思就是 router-view指向的router来影响Header组件的信息 首 ...
- JSP页面字符集设置
错误提示: HTTP Status 500 - /test1.jsp (line: 2, column: 1) Page directive must not have multiple occurr ...
- MySQL运行一段时间后自动停止问题的排查
在进入主题前,一定要先吐槽下自己,前段时间购买了一台阿里云服务器,最开始打算只是自己个人用的,就买了一台配置很寒碜的服务器: CPU: 1核 内存: 1 GB 操作系统: CentOS 7.2 64位 ...