这一次我用了短暂的时间重新梳理了html的标签(包括html5 新增),发现我以前忽略了很多又轻巧又精美且实用的标签,总结如下:

格式标签:

  <address> 标签: 定义文档或文章的作者/拥有者的联系信息。元素中的文本通常呈现为斜体,大多数浏览器会在 address 元素前后添加折行。

  提示:<address> 元素通常连同其他信息被包含在 <footer> 元素中。

  注意:<address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。  

  <blockquote> 标签:定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,在其左、右两边进行缩进(增加外边距),而且有时会使用斜体。    

  提示: <blockquote> 标签常用于定义块引用,<p>标签常用于标记短的引用 

  <mark>标签:定义带有记号的文本。       

  示例:Do not forget to buy milk today.  (其中 milk 被<mark> 标签修饰)

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

  提示:<meter> 标签不应用于指示进度(在进度条中);如果标记进度条,请使用 <progress> 标签。
  注意:Internet Explorer 不支持 meter 标签。 

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

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

表单标签:

 <filedset> 标签: 将表单内容的一部分打包,生成一组相关表单的字段。(即将表单内的相关元素分组)

           当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

  提示:<legend> 标签为 fieldset 元素定义标题。

   <output> 标签: 定义不同类型的输出,比如脚本的输出。

` <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>  注意:Internet Explorer 8 以及更早的版本不支持 <output> 标签。

图像标签:

  <map> 标签: 定义一个客户端图像映射。 图像映射(image-map)指带有可点击区域的一幅图像(其中的每个区域都是一个超级链接) 。

 提示:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
 注意:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。

  <canvas> 标签: 定义图形,比如图表和其他图像。

 提示:<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
 注意:Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。

  

这些标签因为不常用所以被我淡忘,重新回顾的时候发现可以就用这么一个简单的标签可以很丰富界面的内容。------温故而知新!

  

  

  

重新走过HTML,那些让我amazing 的标签的更多相关文章

  1. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  2. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  3. The Amazing ProgressBar Control(转)

    好久没写博客了,今天就先转一篇,随后可以再写些~~~ 直接把原文粘过来,就不再进行翻译和个人说明了,因为效果很COOL~ The Amazing ProgressBar Control A progr ...

  4. 记录一些在用wcf的过程中走过的泥巴路 【第一篇】

    自从转移战场之后,比以前忙多了,博客也没能及时跟上,原本准备继续mvc系列,但是在那边技术比较陈旧还没能用得上,话说有3年没接触这玩意了,东西也 都忘了差不多了,既然再次接触,我也就继续温习温习,记录 ...

  5. 【jquery】一款不错的音频播放器——Amazing Audio Player

    前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...

  6. 记一次ftp服务器搭建走过的坑

    记一次ftp服务器搭建走过的坑 1.安装 ①下载 wget https://security.appspot.com/downloads/vsftpd-3.0.3.tar.gz #要FQ ②解压 ta ...

  7. hdu 5774 Where Amazing Happens

    Where Amazing Happens 题意: 让你输出各个队名的出现次数. 题解: 打表题,好坑,相同的没有放在一起,需要认真找,否则容易错. 代码: #include<iostream& ...

  8. Lesson 3: The Amazing New Mobile Web

    Lesson 3: The Amazing New Mobile Web Article 1: This is Responsive by Brad Frost 各种响应式网站设计的资源. Artic ...

  9. [蘑菇街] 搜索、算法团队招募牛人啦-年底了走过路过不要错过 - V2EX

    [蘑菇街] 搜索.算法团队招募牛人啦-年底了走过路过不要错过 - V2EX [蘑菇街] 搜索.算法团队招募牛人啦-年底了走过路过不要错过

随机推荐

  1. SqlServer -- char与varchar、nchar、N

    一.char与varchar 带var的表示的是:可变长度,会根据实际存储数据的大小动态重新分配存储空间,相对来说节省存储空间. 不带var的表示的是:固定长度,存储3字符也是要占用10个字节的,会自 ...

  2. WinServer远程部署系统打包批处理文件

    前言 工作中一直在使用一个部署系统WinServer远程部署系统(RDSystem),部署.回滚都很方便.我们一直都是增量发布或者只更新需要更新的文件,每次发布完之后要整理出一个增量更新包,压缩成zi ...

  3. 【C#公共帮助类】DateTimeHelper设置电脑本地时间,实际开发很需要

    关于本文档的说明 本文档主要为了解决实际开发当中,服务器和客户端电脑时间不能相等的问题,纯干货,实际项目这种时间不同步的情况很多很多,时间不相等,到时候把本地的数据提交给服务器,服务器看实际上传时间和 ...

  4. JavaScript - 如果...没有方法

    这篇文章源于我上一周所读的一篇12年的文章.原作者提出了一个问题,如果js没有原生方法Math.round(),我们如何去实现呢? 对此我和我的基友进行了小小探讨,并给出了一些有意思的答案. 本文内容 ...

  5. iOS开发-UI 从入门到精通(一)

    一.UI概述 (1)UI(User Interface)用户界面,用户能看到的各种各样的页面元素: (2)iOS App = 各种各样的UI控件+业务逻辑和算法: (3)想要开发出一款精美的应用程序, ...

  6. IOS开发基础知识--碎片16

    1:Objective-C语法之动态类型(isKindOfClass, isMemberOfClass,id) 对象在运行时获取其类型的能力称为内省.内省可以有多种方法实现. 判断对象类型 -(BOO ...

  7. Android的四大组件之Activity

    Android的四大组件之Activity Activity:是Android组件中最基本也是最为常见用的四大组件(Activity,Service服务,Content Provider内容提供者,B ...

  8. 【原】设置iOS项目BuildVersion自动增加

    一.概念阐述:Build与Version的区别 在iOS中有两种“版本号”,也就是所谓的version号与build号,如下图所示: 我们用最简洁的语言来区分这两个版本号的区别以及用途如下: Vers ...

  9. iOS 学习 - 16.绘制虚线

    //绘制虚线 -(void)set{ UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(, , , )]; [ ...

  10. Python语言Web开发框架web2py

    python开发的强大的网络框架web2py,这个框架需要下载和集成. http://www.web2py.com/examples/static/web2py_src.zip