[html5] 学习笔记-html5增强的页面元素
在 HTML5 中，不仅增加了很多表单中的元素，同时也增加和改良了可以应用在整个页面中的元素。重点包含 figure、figcaption、details、summary、mark、progress、meter、ol、dl、cite 、small元素。
1、figure，figcaption元素
figure元素用来表示网页上一块独立的内容，可以是图片、统计图、代码实例。
figcaption元素从属figure元素，表示figure元素的标题；一个figure元素只能放置一个figcaption元素。
<body>
<figure>
<img src="1.jpg" alt="美女">
<img src="2.jpg" alt="美女">
<img src="3.jpg" alt="美女">
<figcaption>美女</figcaption>
</figure>
</body>
2、detail，summary元素
detail元素表示其内部的元素可以被收缩和展开显示，内部可以放置表单、插件、统计图的详细数据等。
summary元素从属于detail元素，用鼠标单击detail元素的内容时，summary元素的内部会被展开；如果detail中没有summary元素，浏览器会提供默认文字，以供单击。
<body>
<script>
function detail_onclick(detail){
var p = document.getElementById("p");
if (detail.open) {
p.style.visibility = "hidden";
}else{
p.style.visibility = "visible";
}
}
</script>
<details id="detail" onclick="detail_onclick(this)">
<summary>速度与激情</summary>
<p id="p" style="visibility: hidden">你好么，这是为保罗打造的电影，看起来激情四射</p>
</details>
</body>
3、mark元素
mark元素表示页面需要突出显示或高亮显示的文字。
<body>
<p>这是一段文字，用来<mark>测试</mark>元素</p>
</body>
4、progress、meter元素
progress元素代表任务完成的进度，这个进度可以是不确定的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<script>
function btn(){
var i = 0;
function thread_one(){
if (i<=100) {
i++;
updateprogress(i);
}
}
setInterval(thread_one,100);
}
function updateprogress(newValue){
var progressBar = document.getElementById("p");
progressBar.value = newValue;
progressBar.getElementsByTagName("span")[0].textContent = newValue;
}
</script>
<section>
<h2>progress元素的使用</h2>
<p>完成百分比<progress style="background-color: #269abc" id = "p" value="0" max="100"><span>0</span>%</progress></p>
<input type="button" value="点击" onclick="btn()"></input>
</section>
</body>
</html>
meter元素表示规定范围内的数值量，属性值有6个，如下例：
<body>
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>
</body>
5、ol、dl、cite 、small元素
在html5中，对ol元素进行了改良，添加了start和reversed属性。
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
<ol start="5">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
<ol start="5" reversed>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
</body>
dl元素在html5中重新定义，表示多个名字的列表项。每一项都包含1条或者多条带有名字的dd元素。
<body>
<dl>
<dt>Hello</dt>
<dd>你好就是hello</dd>
<dt>博客</dt>
<dd>你喜欢看博客吗？</dd>
</dl>
</body>
cite元素，表示作品的标题，可以在页面详细引用，也可以只在页面提一下。
<body>
<h3>cite元素</h3>
<p>我最喜欢的电影是<cite>速度与激情</cite></p>
</body>
small元素，在html5中改良为标识小字印刷体的元素。
<body>
<dl>
<dt>单人间</dt>
<dd>399 元 <small>含早餐，不含税</small></dd>
<dt>双人间</dt>
<dd>599 元 <small>含早餐，不含税</small></dd>
</dl>
</body>
[html5] 学习笔记-html5增强的页面元素的更多相关文章
- [html5] 学习笔记-表单新增的元素与属性（续）
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- HTML5学习笔记（四）语义元素
语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例: <div> 和 <span> - 无需考虑内容. 语义元素实例: <form>, <tab ...
- HTML5学习笔记一：新增主体结构元素
Dreamweaver快捷键: 属性面板:Ctrl+F3 新建文档:Ctrl+N 选择用网页查看:F12 新增的主体结构元素: section元素(例子如下): <!DOCTYPE HTML&g ...
- HTML5学习笔记----html5与传统html区别
一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...
- [html5] 学习笔记-html5音频视频
HTML5 最大的新特色之一就是支持音频和视频.在 HTML5 之前,我们必须使用插件如 Silverlight 或 Flash 来实现这些功能.在 HTML5 中,可以直接使用新标签< au ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5 增强的页面元素
一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = documen ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
随机推荐
- 浅谈web应用的负载均衡、集群、高可用(HA)解决方案（转）
1.熟悉几个组件 1.1.apache —— 它是Apache软件基金会的一个开放源代码的跨平台的网页服务器,属于老牌的web服务器了,支持基于Ip或者域名的虚拟主机,支持代理服务器,支持安 ...
- iOS开发——NSArray中的字典排序
手头上碰到一个项目,需要给数组中的字典中的一个字段排序,想了想,干脆再字典中增加一个字段,用来记录需要排序字段的第一个字符,用它来作为比较的对象,进行排序. - (void)viewDidLoad { ...
- Linux 软件包安装管理
转自:http://www.cnblogs.com/Quains/archive/2012/01/03/2311049.html 本文主要是记录下RedHat系列的软件包管理. 内容分为以下三个部分: ...
- CodeForces 652B z-sort
先对序列排个序. 例如:1 2 3 4 5 6 7 我们把序列分成两半,前一半是1 2 3 4,后一半是5 6 7 然后,我们从前一半取最小的一个,再从后一半取最小的一个..一直操作下去就能构造出答案 ...
- dsp与dmp的cookie mapping
dsp ad.com 在 meijiu.com上部署广告. 假设dmp叫cm.api.taobao.com 建立gid映射表 (1) ad.com在meiju.com的页面上部署,指向dmp ...
- Yii -- framework 目录结构说明
base 底层的类库文件 caching 所有缓存方法 cli 项目生成脚本 collecions 用PHP语言构造传统OO语言的数据存储单元.如队列,栈,哈希等等 console yii控制台 db ...
- 实时 Django 终于来了 —— Django Channels 入门指南
Reference: http://www.oschina.net/translate/in_deep_with_django_channels_the_future_of_real_time_app ...
- 2016——3——16 kmp 7题
1.传送门:http://begin.lydsy.com/JudgeOnline/problem.php?id=2725 题目大意:找一个串在另一个串中出现的次数 题解:kmp(纯裸题) #inclu ...
- UVa 11129 - An antiarithmetic permutation
题目大意:给一个正整数n,构造一个0...n-1的排列,使得这个排列的任何一个长度大于2的子序列都不为等差数列. 把序列按照奇偶位置分成两个序列,这样在两个序列间就不会形成等差数列了,然后再对这两个序 ...
- 直播流怎么存储在Ceph对象存储上？ Linux内存文件系统tmpfs(/dev/shm) 的应用
一./dev/shm理论 默认的Linux发行版中的内核配置都会开启tmpfs,映射到了/dev/下的shm目录.可以通过df 命令查看结果./dev/shm/是linux下一个非常有用的目录,因为这 ...