[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学习笔 ...
随机推荐
- pthread_join
摘要:pthread_join使一个线程等待另一个线程束. 代码中如果没有pthread_join主线程会很快结束从而使整个进程结束,从而使创建的线程没有机会开始执行就结束了.加入pthread_jo ...
- jquery刷新iframe页面的方法(兼容主流)
1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...
- python遍历字典元素
a={'a':{'b':{'c':{'d':'e'}},'f':'g'},'h':'i'} def show(myMap): for str in myMap.keys(): secondDict=m ...
- Android L（5.0）源码之图形与图像处理之动画——Frame、Tween、属性动画、SurfaceView
工作中暂时还没涉及到,暂时先不总结
- Javascript 页面刷新
Javascript 页面刷新的实现代码收藏 1 2 3 4 5 6 7 8 history.go(0) location.reload() location=location location.as ...
- 使用React Native来撰写跨平台的App
React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...
- Bzoj1479: [Nerrc1997]Puncher打孔机
1479: [Nerrc1997]Puncher打孔机 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 22 Solved: 14[Submit][Sta ...
- AP聚类算法(转)
Affinity Propagation (AP) 聚类是2007年在Science杂志上提出的一种新的聚类算法.它根据N个数据点之间的相似度进行聚类,这些相似度可以是对称的,即两个数据点互相之间的相 ...
- ReactiveCocoa 设置绑定注意事项
要在ViewLoad里面进行绑定,因为在init中还没有初始化界面,所有绑定会无效
- CentOS Linux解决 Device eth0 does not seem to be present
通过OVF部署Linux主机后提示 ringing up interface eth0: Device eth0 does not seem to be present,delaying initi ...