HTML5常用语义化标签&表单类型&表单属性

HTML5语义化标签

1.<article>
表示包含一个文档、页面、应用程序或网站中的一段独立的内容，也就是说，它能够独立地被发布或重新使用。可适用的地方有：一篇博客、一个论坛帖子、一篇新闻报道、一个用户评论...

2.<header>
一般被放置在页面的顶部，或者页面中某个区块元素的顶部，包含整个页面或某个区块的标题、简介等信息。

一个文档中可以包含多个header标签
header标签不一定只能显示在页面的上方，它的内容决定该地方是否需要使用header标签
可以为body、article、section和aside增加header标签
3.<footer>
一般被放置在页面的底部，或者页面中某个区块元素的底部。

4.<nav>
表示页面的导航，可以通过导航连接到网站的其他页面，或当前页面的其他部分。搜索引擎和屏幕阅读器会根据nav标签确定网站内容，但并不是任何一组超链接都适合放在nav标签中，譬如登录、隐私权政策与使用条款...可实际去一些网站上检查，却发现大多都是使用div，很少用到这些，但新标准新趋势，学习学习没错。

5.<aside>
包含的内容不是页面的主要内容，具有独立性，是对页面内容的补充。可适用的地方有：页面侧边栏、广告、友情链接、文章引语（内容摘要）...

6.<section>
一个主题性的内容分组，通常包含一个头部（header），也有可能包含一个尾部（footer）。

div 和 section 区别

div应用更广泛，如果需要定义一个区域样式即可使用
section包含一个明确的主题，通常含有一个标题

7.<main>
显示页面的主题内容，每个页面只能包含一个main标签，main标签中不包含网站标题、log、主导航、版权声明等信息。

8.<figure>
标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

9.<figcaption>
<figcaption> 标签定义 figure 元素的标题（caption），"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

10.<time>
表示一个日期，或者一个时间，或者同时表示一个日期和时间值。

表单控件：

email：电子邮箱文本框,跟普通的没什么区别

     - 当输入不是邮箱的时候,验证不通过

     - 移动端的键盘会发生变化

  tel：电话号码

  url：网页的URL

  search：搜索引擎

    - chrome下输入文字后，会多出一个关闭的X

  range：特定范围内的数值选择器

    - min、max、step(步数)

    - 例子： 用js来显示当前数值

  number：只能包含数字的输入框

    - 输入框末尾有两个箭头 上为加 下为减

  color：颜色选择器

   - 点击显示颜色版

  datetime：显示完整日期

   - 类似select选择样式

  datetime-local：显示完整日期， 不包含时区

  time：显示时间，不含时区

  date：显示日期{年月日}

  week：显示周{年月日周}

  mouth：显示月{年月}

表单属性

1.   placeholder 属性
    当用户还没有输入值的时候，输入型控件可以通过  placeholder 属性向用户显示描性说明或者提示信息。使用  placeholder属性只需要将说明性文字作为该属性值即可。除了普遍的文本输入框外，email、number、url 等其他类型的输人框也都支持placeholder 属性。

    placeholder 属件的使用方法如下：

   <label> text::  <input  type="text"   placeholder="write  me"></label>
    2、autocomplete 属性
     浏览器通过  autocomplete  属性能够知晓是否应该保存输入值以备将来使用。例如不保存的代码如下：

    <input  type="text"   name="mr"  autocomplete="off"/>

    autocomplete  属性应该用来保护敏感用户数据，避免本地测览器对它们进行不安全地存储。对于  autocomplete 属性，可以指定“on”“off " 与““(不指定) 这三种值。不指定时，使用浏览器的默认值(取决于浏览器的决定)。把该属性值设为on 时，可以显示指定候补输入的数据列表。

    使用  <detailst>标签与  list 属性提供候补输入的数据表，自动完成时，可以将该 <detalist> 标签中的数据作为候补输人的数据在文本框中自动显示。autocomplete 属性的使用方法如下所示：

    <input  type="text"   name="mr"  autocomplete="on"  list="mrs"/>

      3. autofocus 属性
    给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点。目前为止要做到这一点需要使用JavaScript,  autofocus 属当的使用方法如下所示:

    <input  type="text"  autofocus>   

     只有当一个页面是以使用某个控件为主要目的时，才对该控件使用 autofocus 属性。一个页面只能有一个控件有该属性。

     从实际角度来说，不要随便滥用该属性。

    4.  list 属性
    在 HTML5  中，单行文本框增加了一个  list 属性，该属性的值为某个  <datalist>标签的  id。<datalist>标签也是  HTML5中新增标签，该标签类似于选择框( select )，但是当用户想要设置的值不在选择列表之内时，允许其自行输入。该标签本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。

5.  min  和  max 属性
  通过设置 min 和 max 属性，可以将  range  输入框的数值输入范围限定在最低值和最高值之间。这两个特性既可以只设置一个，也可以两个都设置，当然还可以都不设置，输入型控件会根据设置的参数对值范围做出相应调整。

【例】创建一个表示型大小的 range 控件，值的范围为 0%~100%，代码如下：

  <input  id="confidence"  name="mr"   type="range" min="o"  max="100"   value="0">

  上述代码会创建一个最小值为0、最大值为100 的 range 控件。

  默认的 min 为 0,max 为 100。
 
 6.step 属性
    对于输入型控件，设置其  step 特性能够制定输入值递增或递减的梯度。

    例如，按如下方式表示型大小  range 控件的 step 属性设置为 5：

    <input   id="confidence"    name="mr"   type="range"   min="0"  max="100"  step="5"  value="0">
   设置完成后，控件可接受的输入值只能是初始值与 5 的倍数之和。也就是说只能输入0、5、10   …  100， 至于是输入框还是滑动条输人则由浏览器决定。
  step属性的默认值取决于控件的类型，对于range 控件，step默认值为1。

  7.  required 属性
    一旦为某输入型控件设置了 required 属性，那么此项必镇，否则无法提交表单。

    以文本输入框为例，要将其设置为必填项，按照如下方式添加 required  属性即可。

    <input  type="text"  id="firtname"  name="mr‘ reaquired>

    required  属性是最简单的一种表单验证方式。

8. email 输入类型
    email  类型的<input>标签是一种专门用来输人  email  地址的文本框。提交时如果该文本框中内容不是  email  地址格式的文字则不允许提交，但是它并不检查  email  地址是否存在。和所有的输入类型一样用户可能提交带有空字段的表单，除非该字段加上了  required  属性。

    email  类型的文本框具有  multiple 属性，它允许在该文本框中输入一串以逗号隔开的有效  email  地址。当然，这不是要求用户使用该  email  地址列表，浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。    

    email  类型的  <input>标签的使用方法如下：
    <input  type= "email"   name="email"  value=""/>

9. url输入类型
    url  类型的<input>标签是一种专门用来输人  url  地址的文本框。提交时如果该文本框中内容不是  url  地址格式的文字，则不允许提交。
    
    url  类型的<input>标签的使用方法如下:
    <input  name="url" type="url"  value="http://www.baidu.com"/>

10. date类型
     date  类型的 input  标签以日历的形式方便用户输人。
     
    Date类型的<input>标签的使用方法如下:
  <input   name="date1"   type="date"   value="2012 09-25"/>

11. time类型
    time  类现的<input>标签是一种专门用来输入时间的文本框， 并且在提交时会对输入时间的有效性进行检查。

    time 类型的  <input>  标签的使用方法如下：
    <input   name="time1"   type="time"   value="10:00"/>

12. datetime 输入类型
    datetime  类型的  input  标签是一种专门用来输入  UTC  日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

    datetime  类型的  input  标签的使用方法如下：
    <input name="datetime1"   type="datetime"  />

13.   datetime-local  输入类型
    datetime-local  类型的  input  标签是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

    datetime-local 类型的<input> 标签的使用方法如下:
   <input  name="datetime-local"    type="datetime-local"/>

14.   month输入类型
    month  类型的<input>标签是一种专门用来输人月份的文本框， 并且在提交时会对输入的月份的有效性进行检查。
    
    month类型的<input>标签的使用方法如下:
    <input   name="moth1"  type="month"   Value="2012-09"/>

15.   week输入类型
    week  类型的  <input>  标签是一种专门用来输入周号的文本框，并且在提交时会对输入的周号有效性进行检查。它可能是个简单的输入文本框， 允许用户输入一个数字；也可能更复杂。更精确。
 
    week 类型的<input>标签的使用方法如下:
    <input   name="week1"    type="week"   value="2012-w39"/>

 16.  number输入类型
    number 类型的<input>标签是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是否为数字。它与 min、 max、 step 属性能很好地协作。

    number  类型的  <input> 标签的使用方法如下：
   <input   name="number1"   type="number"   value="54"  min="10"  max="100"  step="5"  />

17. range输入类型
    range  类型的  <input>  标签是一种只允许输入一段范围内数值的文本框，它具有  min  属性与  max  属性，可以设定最小值与最大值(默认为0与100)，它还具有step属性，可以指定每次拖动的步幅。

    range 类型的  <input>  标签的使用方法如下：
    <input   nam="range1"    type="range"     value="25"  min="0"  max="100"  step="5"/> 

18. search  输入类型
    search  类型的  <input> 标签是一种专门用来输入搜素关键词的文本核。search类型与  text  类型仅仅在外现上有区别。
    
    可用  css  样式表对文本框外观改写，如下所示：
    input  [type="search"]  { -webkit-appearance:textfield;}
 
  19. tel  输入类型
    tel  类型的<input>标签被设计为用来输入电话号码的专用文本标。它没有特殊的校验规则，它甚至不强调只输入数字，因为很多电话号码常常带有额外的字符，例如 12-89564752  但是在实际开发中可以通过  pattern  属性来指定对于输入的电话号码格式的验证。

  20. color输入类型
    color  类型的 <input>标签用来选取颜色，它提供了一个原色选取器。现在，它只在Black Berry 浏览器中被支持。