重新走过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 [蘑菇街] 搜索.算法团队招募牛人啦-年底了走过路过不要错过
随机推荐
- JS检查是否支持Storage
查看效果:http://hovertree.com/code/html5/q69kvsi6.htm 代码: <!DOCTYPE html> <html> <head> ...
- 针对Asp.net MVC SEO的几点建议
1. 引言 SEO 即搜索引擎优化,很多web开发人员本应该熟悉,至少需要了解的一个知识点.像百度.必应等搜索引擎其实一直都在进化.但是有些优化的技巧可能在短时间内不变. 今天就给大家介绍几个专门针对 ...
- 用户中心mysql数据库表结构的脚本
/* Navicat MySQL Data Transfer Source Server : rm-m5e3xn7k26i026e75o.mysql.rds.aliyuncs.com Source S ...
- ReactNative——打包发布
1.生成一个签名密钥 ‘ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -k ...
- Linux Cmd Tool 系列之—history & search command history
History cmd is for list Bash's log of the historical cmd you typed 1. List last n commands history n ...
- MongoDB固定集合(capped collection)
固定集合指的是事先创建而且大小固定的集合 . 固定集合特性:固定集合很像环形队列,如果空间不足,最早的文档就会被删除,为新的文档腾出空间.一般来说,固定集合适用于任何想要自动淘汰过期属性的场景,没有太 ...
- Apache Lucene(全文检索引擎)—搜索
目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 本项目Demo已上传GitHub,欢迎大家fork下载学习:https://gith ...
- PowerDesigner 逆向工程 Mariadb 失败
作者环境是win8.1 64位置 PowerDesigner 15, Mariadb 10+,在逆向的过程中发生错误,导致只能逆向出表对象,但是表对象中的字段信息确实没有的. 错误信息中的一部分是: ...
- wampserver安装配置
按步骤安装--选择指定浏览器-安装成功后显示绿色图标: 打开浏览器:将文件夹移入wampserver安装路径的www文件夹中:找到电脑IP 在手机端访问 IP/文件夹/demo.html即可
- mysql NOW,CURRENT_TIMESTAMP,SYSDATE 之间的区别
这些函数都可以返回当前的系统时间,但它们之间有什么区别呢??大家先看一下以下这个例子. select NOW(), CURRENT_TIMESTAMP(),SYSDATE(); 从上面的例子可以看出返 ...