重新走过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 [蘑菇街] 搜索.算法团队招募牛人啦-年底了走过路过不要错过
随机推荐
- Web.config配置数据库连接
web.config配置数据库连接 第一种:取连接字符串 string connString = System.Web.Configuration.WebConfigurationManager. ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- 【Java每日一题】20161214
package Dec2016; import java.util.ArrayList; import java.util.List; public class Ques1214 { public s ...
- java中抽象、分装、继承和多态的理解
1.抽象.封装装.继承和多态是java面向对象编程的几大特点. 抽象:所谓抽象就是对某件事务,我们忽略我们不关心不需要的部分,提取我们想要的属性和行为,并且以代码的形式提现出来:例如我们需要对一个学生 ...
- JavaScript中Array类型方法总结
Array类型是ECMAScript中最常用的类型之一,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.ECMAScript数组的每一项可以保存任何类型的数据.这里总结了数组类型的 ...
- SharePoint 2013 定制搜索显示模板(二)
前言 之前一篇博客,简单的介绍了如何定制搜索显示模板,这一次,我们介绍一下如何定制搜索显示时,弹出来的那个页面,相信这个大家也都会遇到的. 1.第一部分就是搜索显示模板的部分,第二部分就是搜索项目详情 ...
- ArcSDE10.2.2使用SQL操作ST_Geometry时报ORA-28579
给esri中国的客服打电话被告知,是一直存在这个bug,arcgis10.2对应的oracle数据库版本要用11.2.0.3及以上的: 1.数据库升级可以用打补丁的当方式. 2.直接重装,我这里是直接 ...
- iOS之微信支付
前言:下面介绍微信支付的开发流程的细节,图文并茂,你可以按照我的随笔流程过一遍代码.包你也学会了微信支付.而且支付也是面试常问的内容. 正文: 1.首先在开始使用微信支付之前,有一些东西是开发者必须要 ...
- java设计模式--策略模式
策略模式属于对象的行为模式.其用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换.策略模式使得算法可以在不影响到客户端的情况下发生变化. 本文地址:http:// ...
- 一个3D ar打飞机的游戏iOS源码
这是国内目前第一款集合了AR实景,3D游戏和人脸识别的射击游戏,通过旋转和改变手机的角度与位置,所有的射击操作都靠手势来完成,目前所有的源码全部都在这里.appStore地址:https://itun ...