<!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标签学习笔记的更多相关文章

  1. HTML5标签总结笔记

    HTML5标签笔记 1.格式标签 元素名和属性一般不区分大小写,特殊的如id和class需要区分 格式标签: <acronym> 定义只取首字母的标签 <abbr>定义缩写 & ...

  2. html5/css学习笔记

    请始终将正斜杠添加到子文件夹.假如这样书写链接:href="http://www.w3cschool.cc/html",就会向服务器产生两次 HTTP 请求.这是因为服务器会添加正 ...

  3. HTML5硕士学习笔记

    如今,该集团经过培训的同事给大家HTML5,他出席了两个5训练日,大概过一次给我们,在一个很形象.同事们更感兴趣的是. 课后共享所有的课件.在热情的新技术,我想工作有一个良好的早晨,我决定重新学习课件 ...

  4. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  5. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  6. HTML5+CSS3学习笔记（一） 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

  7. 46.前端html5标签学习

    HTML:TR  TD  TH  OL  UL  LI 这几个标签要区别 一.什么是HTML: 超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用: 是 ...

  8. HTML5 canvas学习笔记（一）

    canvas是HTML5中新增的标签,下面是各浏览器的支持程度: canvas的默认大小为:宽-300px,高-150px(注意:画布的大小作为canvas标签的行内样式设置,而且是没有“px”单位的 ...

  9. HTML5标签学习之~~~

    <article> 标签 article 字面意思为“文章”.在web页面中表现为独立的内容,如一篇新闻,一篇评论,一段名言,一段联系方式.这其中包括两方面,一为整个页面的主旨内容,另外就 ...

随机推荐

  1. LA 2957 最大流，最短时间，输出路径

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=1 ...

  2. NYOJ(42)欧拉图

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=42 我是参考了红黑联盟的结题报告了的.但是有一个位置,应该是红黑联盟写错了吧,就是那个连通 ...

  3. P1089 津津的储蓄计划

    题目描述 津津的零花钱一直都是自己管理.每个月的月初妈妈给津津300300元钱,津津会预算这个月的花销,并且总能做到实际花销和预算的相同. 为了让津津学习如何储蓄,妈妈提出,津津可以随时把整百的钱存在 ...

  4. extjs3EmptyText 上传自动清空的问题

    在extjs3表单的操作中,输入框经常有提示性的默认字段,比如: // === 接入单位的Form表单 ====== var jrdwForm = new Ext.form.FormPanel({ b ...

  5. 关于vue中的nextTick深入理解

    定义［nextTick.事件循环］ nextTick的由来: 由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新 ...

  6. macOS Sierra系统偏好设置->安全性和隐私->通用中的“任何来源” 选项开与关

    显示"任何来源"选项在控制台中执行: sudo spctl --master-disable 不显示"任何来源"选项(macOS 10.12默认为不显示)在控制 ...

  7. EAIntroView–高度可定制的iOS应用欢迎页通用解决方案

    简介 高度可定制的应用欢迎页通用解决方案,可高度定制,不要仅限于现有的demo. 项目主页: EAIntroView 最新示例: 点击下载 入门 安装 安装后,引入” EAIntroView.h”并设 ...

  8. 39条常见的Linux系统简单面试题

    39条常见的Linux系统简单面试题 本文主要分享39条常见的Linux系统简单面试题,其中包括如何看当前Linux系统有几颗物理CPU和每颗CPU的核数.如何实时查看网卡流量为多少等等,希望对你有所 ...

  9. Nginx无法加载.woff .eot .svg .ttf等解决办法

    在Nginx的配置文件,加上以下代码即可修复该问题 location ~ \.(eot|otf|ttf|woff|svg)$ { add_header Access-Control-Allow-Ori ...

  10. 【转载】CString,string,char*之间的转换

    本文转自 <> 这三种类型各有各的优点,比如CString比较灵活,是基于MFC常用的类型,安全性也最高,但可移植性最差.string是使用STL时必不可少的类型,所以是做工程时必须熟练掌 ...