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页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式.这其中包括两方面,一为整个页面的主旨内容,另外就 ...
随机推荐
- 前端高质量知识(三)-JS变量对象详解
在JavaScript中,我们肯定不可避免的需要声明变量和函数,可是JS解析器是如何找到这些变量的呢?我们还得对执行上下文有一个进一步的了解. 在上一篇文章中,我们已经知道,当调用一个函数时(激活), ...
- 【LOJ6043】「雅礼集训 2017 Day7」蛐蛐国的修墙方案（搜索技巧题）
点此看题面 大致题意: 给你一个长度为\(n\)的排列\(p\),要求构造一个合法的括号序列,使得如果第\(i\)个位置是左括号,则第\(p_i\)个位置一定是右括号. 暴搜 很容易想出一个暴搜. 即 ...
- nodejs使用MYSQL连接池，断线重连
两种方式解决1.你可以配置mysql的连接池 var mysql = require('mysql'); var pool = mysql.createPool({ host: 'localhost' ...
- mayan 游戏真是毒瘤
如题 真坑呀!!! 可算过了 我率先达到了氧气富有化 先是改变时没有fall.40分 然后是fall函数写慢了 tle 50分 . 上代码 #include<cstdio> #includ ...
- mybatis-generator的maven插件使用异常(mybatis-generator-maven-plugin):generate failed: Exception getting JDBC Driver
使用mybatis的代码生成工具:mybatis-generator,在父model中引入了maven插件的依赖,如下: <!-- Mybatis.generator插件 --> < ...
- jquery 表单事件
.blur() 当元素失去焦点的时候触发事件. .blur(handler(eventObject)) handler(eventObject) 每当事件触发时候执行的函数. .blur([event ...
- 【期望dp 质因数分解】cf1139D. Steps to One
有一种组合方向的考虑有没有dalao肯高抬啊? 题目大意 有一个初始为空的数组$a$,按照以下的流程进行操作: 在$1\cdots m$中等概率选出一个数$x$并添加到$a$的末尾 如果$a$中所有元 ...
- 【赛时总结】 ◇赛时·II◇ AtCoder ABC-100
◆赛时·II◆ ABC-100 ■唠叨■ ABC终于超过百场比赛啦(毫不犹豫地参加).然后莫名其妙的好像是人很多,评测慢得不可理喻.然后我就--交了一大发--错误程序--然后B题就没了.最后的D题居然 ...
- oracle数据库 网页管理360浏览器登录不上
使用谷歌浏览器可以登陆,然后在使用360之类的浏览器 就可以登录了
- 爬虫学习（十六）——jsonpath
jsonpath介绍 jsonpath是一种信息抽取类库,是从json文档中抽取指定信息的工具,提供多种语言实现的版本 jsonpath对json来说,就相当于xpath对于xml jsonpath和 ...