HTML5一些元素的整理

address元素:

定义和用法

<address> 标签定义文档或文章的作者/拥有者的联系信息。

如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。

如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <header>
 9     <h1>HTML5</h1>
10 </header>
11 <footer>
12     <address>
13         <a href="/" title="晨落梦公子">晨落梦公子</a>
14     </address>
15     时间:<time datetime="2016-01-21">2016年1月21日</time>
16 </footer>
17 </body>
18 </html>

address

生成的为:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

details元素:

定义和用法

<details> 标签用于描述文档或文档某个部分的细节。

内含有:summary

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <details>
 9 <!--<details:用于展开和收缩的。貌似不能用ie而打开-->
10     <summary>
11     <!--<summary:展开的标题-->
12         学习需要的动力
13     </summary>
14     <p>
15         <!--以下是折叠的内容-->
16         想一想未来吧
17     </p>
18 </details>
19 </body>
20 </html>

details

生成的为:

里面的倒三角是展开项

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

figure元素:

定义和用法

<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

内容有:figcaption,为图片设置标题。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <figure>
 9 <!--<figure>:插入图片-->
10     <img src="1.jpg" title="死神">
11     <figcaption>死神</figcaption>
12     <!--<figcaption:为图片设置标题-->
13 </figure>
14 </body>
15 </html>

figure

生成的为:

这里不再赘述,just生成个图片。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

mark元素:

定义和用法

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

即是特殊字高亮。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <header>
 9     <h1>以下是<mark>HTML5</mark>的搜索结果</h1>
10 <section>
11     <nav>
12         <ul>
13             <li>
14                 <h2><a href="/"><mark>HTML5 </mark>百度全科</a></h2>
15             </li>
16         </ul>
17     </nav>
18     <figure>
19         <img src="4.jpg" title="HTML5">
20         <aside>
21             <p>
22                 万维网的核心语言、标准通用标记语言下的一个应用超文本
23                 标记语言(<mark>HTML</mark>)的第五次重大修改(这是一
24                 项推荐标准、外语原文:W3C Recommendation、见本处参考资
25                 料原文内容:)。
26             </p>
27         </aside>
28     </figure>
29 </section>
30     <footer>
31         <a href="\">发展历程</a>
32         <a href="\">新元素</a>
33         <a href="\">技术要点</a>
34     </footer>
35 </header>
36 </body>
37 </html>

mark

生成的为:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

meter元素:

定义和用法

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

例子:磁盘用量、查询结果的相关性,等等。

生成进度条

注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <p>硬盘使用情况:<meter value="30" max="100" min="0">30/100</meter>GB </p>
 9 <!--<meter:生成进度表;value:当前进度;max总进度;min:最低进度-->
10 <p>硬盘使用情况:<meter value="30" max="100" min="0" low="40" high="80" optimum="23"></meter>GB </p>
11 <p>硬盘使用情况:<meter value="30" max="100" min="0" low="40" high="80" optimum="42"></meter>GB </p>
12 <p>硬盘使用情况:<meter value="30" max="100" min="0" low="40" high="80" optimum="83"></meter>GB </p>
13 <!--optium:低于low显示绿色。高于low但是低于high显示黄色。高于high显示红色-->
14 </body>
15 </html>

meter

生成的为:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ol元素:

定义和用法

<ol> 标签定义有序列表。

注:IE不支持。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <ol start="1" type="1" reversed="reversed">
 9 <!--<ol:输出序列,
10 start:设置开始的序号,
11 type:设置类型,如字母型、阿拉伯数字型等,
12 reversed:倒序排列-->
13     <li><a href="address.html">有序列表A</a> </li>
14     <li><a href="detailsDemo.html">有序列表B</a> </li>
15     <li><a href="figureDemo.html">有序列表C</a> </li>
16 </ol>
17 </body>
18 </html>

ol

生成的为:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

progess元素:

定义和用法

<progress> 标签标示任务的进度(进程)。

提示和注释

提示:请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。

注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。

注:Internet Explorer 9 以及更早的版本不支持 <progress> 标签。

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <p>
 9     进度:
10 </p>
11 <progress max="100" value="30"></progress>
12 <!--<progress:生成进度条-->
13 </body>
14 </html>

progess

生成的为:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

时间: 2024-11-04 17:26:15

HTML5一些元素的整理的相关文章

HTML5 audio元素如何使用js与jquery控制其事件

前言: 每一次遇见问题想到的就是怎么解决?最好的方法还是查询网络媒体,更好的办法是让自己记忆,只有自己理解到了才真正是属于自己.要做一个订单提醒功能,没有使用audio相关的插件,虽然插件无数,还是喜欢自己瞎折腾.(来一些隐形的链接,据说有推广效果,本文原创官网地址:www.pushself.com) 听一个写博客的朋友说周末的博客阅读量明显下降,周末大好时光不出去泡妹子的肯定是有难言之隐的.先来重温一下audio标签的基本属性 定义和用法 <audio> 标签定义声音,比如音乐或其他音频流.

HTML5文本元素解析

1.<b>表示关键字和产品名称 <b>HTML5</b> 解释:<b>元素实际作用就是加粗.从语义上来看,就是标记一段文字,但并不是特别强调重要性. 2.<strong>表示重要的文字 <strong>HTML5</strong> 解释:<strong>元素实际作用和<b>一样,就是加粗.从语义上来看,就是强调一段重要的文本. 3.<br>强制换行 <wbr>安全换行 <

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频***,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object 标签,调用第三方软件来加载,如Flash等,如果有些设备不支持Flash,我们对此就束手无策了.但是HTML5的出现让多媒体网页开发变得异常简单,也形成了新的标准. 1. 使用Vide

HTML5 界面元素 Canvas 參考手冊

太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的漂亮人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 界面元素 Canvas 參考手冊HTML Canvas Reference 描写叙述Description The HTML5 <

HTML5 语义元素(一)页面结构

本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.<footer>.<header>.<main>.<nav>.<section>等元素. 目录 1. 语义元素介绍 1.1 何为语义元素 1.2 特点 2. 原先界面布局 3. 页面结构语意元素 3.1 说明 3.2 详细介绍 3.3 示例图 1. 语义元

HTML5&lt;picture&gt;元素

HTML5<picture>元素可以设置多张图片 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src=

HTML5语义元素总结

HTML5语义元素 语义=意义 语义元素=元素的意义 什么事语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义 元素实例:div.span.无需考虑内容. 语义 元素实例:form .table.img清楚地定义了它的内容. 浏览器支持 IE9+.火狐.谷歌,Safari.opera支持语义元素. HTML5新的语义元素 header.nav.section.article.aside.figcaption.figure.footer. section标签定义文档中的节或者区

HTML5 界面元素 Canvas 参考手册

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. HTML5 界面元素 Canvas 参考手册HTML Canvas Reference 描述Description The HTML5 <c

HTML5 template元素

前言 转自http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/ 在单页面应用,我们对页面的无刷新有了更高的要求,HTML不再由后端生成,后端只提供一个REST API,返回JSON数据,模版引擎可以大大方便我们渲染一个视图.而不是吃力的使用 jQeury 去拼接一个DOM. 在现在比较常见的 JS MVC Framework : backbone, emberjs, angularjs 中,模板是非常重要的一个