[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学习笔 ...
随机推荐
- JS传递到后台中文 出现乱码问题
js 异步传递中文字符,后台接收出现乱码问题 function showFirSelect(a){ var b = encodeURI(a); var secUrl = "<%=bas ...
- java中try 与catch的使用
(2011-10-08 17:08:43) 转载▼ 标签: 杂谈 分类: Java try{//代码区}catch(Exception e){//异常处理}代码区如果有错误,就会返回所写异常的处理. ...
- Openlayers修改矢量要素
将以下代码放到demo下examples中即可运行 <!DOCTYPE html><html> <head> <meta http-equiv="C ...
- Frequent Distribution sorted by frequency
import nltk def freq_sorted(text,ranklimit): fd=nltk.FreqDist(text) cumulative = 0.0 for rank, (word ...
- Arduino线程库ProtoThreads
参考: Arduino线程库ProtoThreads 一个“蝇量级” C 语言协程库
- InnoDB的行溢出数据,Char的行结构存储
行溢出数据 InnoDB存储引擎可以将一条记录中的某些数据存储在真正的数据页面之外,即作为行溢出数据.一般认为BLOB.LOB这类的大对象列类型的存储会把数据存放在数据页面之外.但是,这个理解有点偏差 ...
- Spring 工作原理
1.spring原理 内部最核心的就是IOC了,动态注入,让一个对象的创建不用new了,可以自动的生产,这其实就是利用java里的反射,反射其实就是在运行时动态的去创建.调用对象,Spring就是在运 ...
- css布局-多行文字垂直居中
方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...
- iOS Socket第三方开源类库 ----AsyncSocket 分类： ios相关 ios技术 2015-03-11 22:14 59人阅读 评论(0) 收藏
假如你也是一个java程序员,而你又不是很懂Socket. 下面我的这篇文章也许能帮助你一些. http://xiva.iteye.com/blog/993336 首先我们写好上面文章中的server ...
- CCArray
CCArray也是cocos2d-x自己写的类.它相当于是objc的NSArray.在cocos2d-x中是没有NSArray的概念的(NSArray和NSMutableArray的唯一区别就是一个不 ...