zoukankan      html  css  js  c++  java
  • 重新走过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> 标签。

      

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

      

      

      

  • 相关阅读:
    notepad++ 编辑器链接地址可点击
    window的cmd窗口运行git
    php update for mac
    sublime打开文件时自动生成并打开.dump文件
    不能设置sublime text 2 为默认编辑器
    sublime text 2 配置文件
    Compass被墙后如何安装安装
    everything搜索工具小技巧
    Ubuntu安装已经下载好的文件包
    Flutter 异步Future与FutureBuilder实用技巧
  • 原文地址:https://www.cnblogs.com/tianjuan/p/5248800.html
Copyright © 2011-2022 走看看