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页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式.这其中包括两方面,一为整个页面的主旨内容,另外就 ...
随机推荐
- 关于Content-Type: multipart/form-data的支持
关于Content-Type: multipart/form-data的支持 发布于 537天前 作者 yzhang226 303 次浏览 复制 上一个帖子 下一个帖子 标签: 无 今天 ...
- Uva 11806 拉拉队
题目链接:https://uva.onlinejudge.org/external/118/11806.pdf 题意: n行m列的矩阵上放k个棋子,其中要求第一行,最后一行,第一列,最后一列必须要有. ...
- iOS 有些库只能在真机上运行，不能在模拟器上运行的解决方式
在开发中,多少肯定会用到第三方的东西,或许大家也和我一样遇到到这样的情况,有些库正好适合自己的需求,但是这个库却只支持真机上运行,在模拟器上编译却不通过, 一般情况下,.a静态包,你刚刚导入的时候,不 ...
- 2017.9.14 HTML学习总结---超链接标签图片标签
2.4 超链接标签 定义:它是指从一个对象指向另一个对象的指针,它可以是网页中的一段文字 也可以是一张图片,以实现从一个页面到另一个页面的跳转. 格式:<a href="url&qu ...
- 2017.11.24 算法分析与设计------Gay格雷码
1. 格雷码问题: 对于给定的正整数n,格雷码为满足如下条件的一个编码序列: (1) 序列由2n个编码组成,每个编码都是长度为n的二进制位串. (2) 序列中无相同的编码. (3) 序列中位置相邻的两 ...
- An error occurred at line: 1 in the generated java file问题处理
tomcat6启动后,加载jsp页面报错,提示无法将jsp编译为class文件,主要报错信息如下: An error occurred at line: 1 in the generated java ...
- 前端框架之bootstrap及相关技术网站
1.web框架之bootstrap bootstrap来源Twitter,是一个CSS/HTML框架,它是基于HTML,CSS,JavaScript下的,使用简洁,当中提供了很多HTML和CSS 如用 ...
- wm_concat()函数
工作中遇到这样一个问题,一张数据库表中有一个字段file_id,还有一个主键f_id(唯一),而file_id不唯一,我想把file_id=‘123456789’的记录中的f_id(主键)连接成一个字 ...
- linux系统中 redis 保存数据的5种形式 linux后端模式启动 jedis无法通过IP地址和端口号访问如何修改linux防火墙
vim修改redis.conf配置文件(我的已经复制到虚拟机的/usr/local/redis/bin目录下)为daemonize yes, 以后端模式启动 ./redis-server redis. ...
- 基于 win7下虚拟机的 GNSS-SDR安装过程
最近在安装 GNSS-SDR软件时,遇到了很多问题,这里回顾了我的安装过程,罗列了所遇到的问题和解决办法.希望后来者不要再踩这些坑了! 首先,在官方文档中看到,GNSS-SDR目前并不支持直接在 Wi ...