重新走过HTML,那些让我amazing 的标签
这一次我用了短暂的时间重新梳理了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 的标签的更多相关文章
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- The Amazing ProgressBar Control(转)
好久没写博客了,今天就先转一篇,随后可以再写些~~~ 直接把原文粘过来,就不再进行翻译和个人说明了,因为效果很COOL~ The Amazing ProgressBar Control A progr ...
- 记录一些在用wcf的过程中走过的泥巴路 【第一篇】
自从转移战场之后,比以前忙多了,博客也没能及时跟上,原本准备继续mvc系列,但是在那边技术比较陈旧还没能用得上,话说有3年没接触这玩意了,东西也 都忘了差不多了,既然再次接触,我也就继续温习温习,记录 ...
- 【jquery】一款不错的音频播放器——Amazing Audio Player
前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器——Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...
- 记一次ftp服务器搭建走过的坑
记一次ftp服务器搭建走过的坑 1.安装 ①下载 wget https://security.appspot.com/downloads/vsftpd-3.0.3.tar.gz #要FQ ②解压 ta ...
- hdu 5774 Where Amazing Happens
Where Amazing Happens 题意: 让你输出各个队名的出现次数. 题解: 打表题,好坑,相同的没有放在一起,需要认真找,否则容易错. 代码: #include<iostream& ...
- Lesson 3: The Amazing New Mobile Web
Lesson 3: The Amazing New Mobile Web Article 1: This is Responsive by Brad Frost 各种响应式网站设计的资源. Artic ...
- [蘑菇街] 搜索、算法团队招募牛人啦-年底了走过路过不要错过 - V2EX
[蘑菇街] 搜索.算法团队招募牛人啦-年底了走过路过不要错过 - V2EX [蘑菇街] 搜索.算法团队招募牛人啦-年底了走过路过不要错过
随机推荐
- jQuery图片轮播特效
效果预览:http://hovertree.com/texiao/jquery/51/ 这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换. 使用的jQuery库版本为1.12.3 , ...
- ICommand相关知识
一般来说,如果类的后缀是Command,则用OnClick方法:如果是Tool,则设置Map的CurrentTool属性为该工具
- log4Net(写入日志文件)
这里就简单介绍下log4Net对写入日志文件的一些了解,写入数据库类似,就不在一一介绍了. 首先去log4net下载. 然后我们新建一个控制台应用程序,并引入log4net.dll程序集,log4ne ...
- 从零开始学Python08作业思路:开发简单的FTP
一,作业要求 开发简单的FTP 1,用户登录 2,上传/下载文件 3,不同用户家目录不同 4,查看当前目录下文件 5,充分使用面向对象 二,程序文件清单 Folder目录:用户上传文件家目录 db目录 ...
- Could not publish server configuration for Tomcat v6.0 Server at localhost.
经常在使用tomcat服务器的时候 总会发生一些莫名其妙的错误. 就像下面这个错误: 在配置文件中存在多个/MyWeb的配置,导致不能发布服务. 错误信息: Could not publish ser ...
- 十一个行为模式之中介者模式(Mediator Pattern)
定义: 用一个中介对象(中介者)来封装一系列的对象交互,使各个对象之间不需要显式地相互引用,从而降低耦合度,而且可以独立地改变他们之间的交互关系. 解耦后: 结构图: Mediator:抽象中介者,定 ...
- js 强转规范解读
js的强转是我们很容易遇到坑的一个地方 比如 == 会产生很有意思的事情(使用===还是最佳实践的) 或者+new Date()一个当前的数字时间戳 这里面都涉及到强转 下面分享下学习强转的过程 ...
- Mvc传值
提到Mvc传值我想大多数人想到的是ViewBag,自3.0之后在控制器与视图之间传值绝大多数传值用到的对象就是ViewBag.对于笔者以前做过的一些小的项目,貌似不需要考虑什么,但对于稍微大些的项目涉 ...
- QuickFlow UI 控件之 NamedFormAttachment
在开发自定义表单时,如果碰到需要按类别上传附件的情况,(比如流程附件分为草稿版,正式版,发布版),比较难处理,需要开发自定义字段控件来实现. QF最新版本(Build131124)提供了NamedFo ...
- addEventListener和attachEvent的区别
addEventListener共有3个参数,如下所示:element.addEventListener(type,listener,useCapture); 参数 参数说明 element 要绑定事 ...