青春..荒唐
青春..荒唐

HTML标签汇总

阅读更多

这里我记录下HTML所有标签，按照参考手册总结记录下：

 

定义注释

定义文档类型

 

按照字母排序

a：

 

                  定义链接（锚）

 

             定义简称或缩写，可以在 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到该元素上时显示出简称/缩写的完整版本，语法：

The PRC was founded in 1949

 

       定义一个首字母缩写，效果与类似。但H5 中不支持 标签，一般使用标签代替，语法：

WWW

 

 

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


Written by Donald Duck.
 
Visit us at:

Example.com

Box 564, Disneyland

USA

 

            定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）,且area 元素总是嵌套在 标签中

 注释： 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系

HTML 与 XHTML 之间的差异：

在 HTML 中， 没有结束标签；在 XHTML 中， 必须正确地关闭

 

       规定独立的自包含内容（H5的新标签）。
元素的潜在来源：论坛帖子，报纸文章，博客条目，用户评论

 

【拓展】 

可选的属性：

target
  • _blank（在新窗口中打开被链接文档）
  • _parent（在父框架集中打开被链接文档）
  • _self（默认。在相同的框架中打开被链接文档）
  • _top（在整个窗口中打开被链接文档）
  • framename（在指定的框架中打开被链接文档）
 在何处打开页面中所有的链接。

 

       可覆盖默认的文本方向，一般常用来改变文本方向语法：

 

Here is some text
 可选属性：dir="rtl"为反向文本，dir="ltr"为正向正向文本
         定义大号文本
           定义文档的主体

                定义简单的折行。空标签（意味着它没有结束标签，因此这是错误的：

）。在 XHTML 中，把结束标签放在开始标签中，也就是
。我们一般写成
 
 
c：
         定义图形，比如图表和其他图像（H5的新标签）。只是图形容器，必须使用脚本来绘制图形
 
caption             定义表格标题。必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上
             定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题
              定义计算机代码文本
              标签规定了 元素内部的每一列的列属性。通过使用 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式
      定义表格中供格式化的列组，语法：                                                                                          


 
 
(runoob.com) 




  
    
    
  
  

    ISBN
    Title
    Price
  

  

    3476896
    My first HTML
    $53
  

  

    5869207
    My first CSS
    $49
 
                        定义选项列表（HTML 5 中的新标签）【IE和Sarafi不支持 标签】
①请与 input 元素配合使用该元素，来定义 input 可能的值。                                                             
②datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。                                                             
③请使用 input 元素的 list 属性来绑定 datalist。
 
                          定义定义列表
 
 
                         定义列表中定义条目的定义部分
 
                           定义了定义列表中的项目（即术语部分） 

   
计算机

   
用来计算的仪器 ... ...

   
显示器

   
以视觉方式显示信息的装置 ... ...
 
 
标签                       定义文档中已被删除的文本，注释：请与 标签配合使用，来描述文档中的更新和修正。
【适用场景：原价格的横划线】 



一打有 3222200是 件 。


大多数浏览器会改写为删除文本和下划线文本。


一些老式的浏览器会把删除文本和下划线文本显示为普通文本。
 
 
                                     规定了用户可见的或者隐藏的需求的补充细节（H5 新标签），内容对用户是不可见的，除非设置了 open 属性。【目前只有 Chrome 和 Safari 6 支持
标签】 

Copyright 2011.

All pages and graphics on this web site are the property of W3School.
 
                                            不赞成使用。定义目录列表。
 
                                              定义文档中的节。
 
                                        定义定义项目。
 
                                         定义对话框或窗口。
 
e:
                                定义嵌入的内容，比如插件
 
                               定义强调文本
 
f：
                               定义围绕表单中元素的边框，将表单内容的一部分打包，生成一组相关表单的字段
当一组表单元素放到
标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
标签没有必需的或唯一的属性。 标签为 fieldset 元素定义标题。 




  

    健康信息
    身高：
    体重：
  



如果表单周围没有边框，说明您的浏览器太老了。
 
 
                            规定独立的流内容（图像、图表、照片、代码等等）
【注释：Internet Explorer 8 以及更早的版本不支持
标签】
 
                  定义 figure 元素的标题
 
                        不赞成使用。规定文本的字体、字体尺寸、字体颜色。在 HTML 4.01 中，font 元素不被赞成使用。
 
                     定义文档或节的页脚，定义 section 或 page 的页脚。（H5新标签）页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个
元素。
【提示：
元素内的联系信息应该位于
标签中】
 
                       定义供用户输入的 HTML 表单（块级元素）
能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。用于向服务器传输数据。
 
                定义框架集， frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。
                     定义框架集的窗口或框架， 标签定义 frameset 中的一个特定的窗口（框架）。
简单的三框架页面：
 
 
h：

to

                      定义 HTML 标题
【注意：

到

封顶】
 
                             定义关于文档的信息
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：, , ,  
适用场景：HTML5的input color系统颜色选择器，例如网页换肤，这个我在后面总结了一下http://570109268.iteye.com/blog/2405609
 
②checkbox与radio单双选，这个已经在文章中总结
 
③Input Date 对象是 HTML5 中的新对象。Input Date 对象表示 HTML 元素。
④Datetime 对象是 HTML5 中的新对象。Datetime 对象表示 HTML 元素。
【Internet Explorer 或 Firefox 不支持  和元素，这个我在后面文章讲到】
拓展：HTML DOM Time 对象

Time 对象是 HTML5 中新增的，表示一个 HTML

用

HTML5新增的还有article、nav、header、footer.....等等等，其实现实效果都是和div一样没有效果，但是合理使用却能让页面结构更加清晰有逻辑

不要被“DIV+CSS”这句哄人的话误导了。当年我也被误导了好几年，以前我做网站从头到尾就只有div，直到后来被一位老人家数落了一顿才觉悟，div是不能滥用的，只能用来做整体的布局，细节部分还是要用其他标签，一方面程序可读性和维护性加强，另一方面，可以用下级选择器来写样式，减少了class和id的命名，可以精简网页的结构；而且语义化结构 有条理才能让搜索引擎更加友好。

 

⑤Email 对象表示 HTML 元素，（H5新标签）

IE9及safari不支持，创建email字段：

演示如何创建 Email 字段


点击按钮来创建 Email 字段。

 

⑥在 HTML 文档中 标签每出现一次，一个 FileUpload 对象就会被创建

 

⑦，Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。

这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话，就是用这种类型的元素（比如接受到的验证码）。

在 HTML 表单中 标签每出现一次，一个 Hidden 对象就会被创建。

 

⑧，Input Image 对象表示 HTML 元素（H5新对象）

创建 Input Image 对象，可以通过使用 document.createElement() 方法来创建 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "image");

 

⑨，Number 对象表示 HTML 元素（H5新对象）

创建方法与image相同

 

⑩，Password 对象代表 HTML 表单中的密码字段

该文本输入字段供用户输入某些敏感的数据，比如密码等。当用户输入的时候，他的输入是被掩盖的（例如使用星号*），以防止旁边的人从他背后看到输入的内容。不过需要注意的是，当表单提交时，输入是用明文发送的。

 

与类型为 "text" 的元素类似，当用户改变显示值时，它会触发 onchange 事件句柄。

 

 

⑪，Input Range 对象表示 HTML 元素（H5新对象）。

Range是HTML5中新出现的滑块控件，也是常见的控件的之一，这个我在后面文章http://570109268.iteye.com/blog/2405849中做了总结

 

⑫ ，Reset 对象代表 HTML 表单中的一个重置按钮。

当重置按钮被点击，包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。

重置按钮在重置表单之前触发 onclick 句柄，并且这个句柄可以通过返回 fasle 来取消。

在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。


姓名：

年龄：

 

 

⑬ ，Input Search 对象表示 HTML 元素（H5新标签）

创建 Input Search 对象：

可以通过使用 document.createElement() 方法来创建 元素：

演示如何创建 Search 字段


点击按钮来创建 Search 字段。

 这个我在后面文章http://570109268.iteye.com/admin/blogs/2405863中做了详细总结

 

⑭，在 HTML 表单中 标签每出现一次，一个 Submit 对象就会被创建。

在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。

 

⑮，该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件句柄。对于掩码文本输入，把 中的 type 设置为 "password"。

【密码的显示隐藏原理即是切换type】

 

⑯，定义包含URL地址的输入域 （H5新对象）。用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异.。详细我在后面文章http://570109268.iteye.com/admin/blogs/2406050中做了总结。

 

 

K：

，表示一个密钥对生成控件。【一个可能是被废弃使用的标签，Chrome 中无法使用了】

会生成公钥和密钥，我们会得到一串串字符串。

当控件所在的表单提交时，私钥将储存在本地密匙库中，公钥将被打包并发送至服务器。

 

l：

 点击标签中的文本，可使多选框聚焦（而这前提是label的for属性的属性值与想要关联的表单控件的id一样）。一种常见的表单控件。它的作用是使用户在填写表单的项目时有更好的体验。

 

例子：
 

 

显示效果如下：

 表单控件都是内联元素所以他俩会在一行显示。在网页中当我们点击E-mai字样或文本框时都会在文本框中出现光标，这个就是label标签的功能了。说白了label标签就是他所关联的表单控件的延伸，即鼠标点击了他，就会出现和点击他所关联的表单控件一样的效果。

 

 

 （译为说明）                                      为 fieldset 元素定义标题

参考W3C上的解释：

fieldset 元素可将表单内的相关元素分组。

标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到

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

标签没有必需的或唯一的属性。 标签为 fieldset 元素定义标题。




登录
username:

passowrd:

 

  •                                              列表标签,可用在有序列表 (
      ) 和无序列表 (