button    定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。    checkbox    定义复选框。    color    定义拾色器。    date    定义 date 控件（包括年、月、日，不包括时间）。    datetime    定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。    datetime-local    定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。    email    定义用于 e-mail 地址的字段。    file    定义文件选择字段和 "浏览..." 按钮，供文件上传。    hidden    定义隐藏输入字段。    image    定义图像作为提交按钮。    month    定义 month 和 year 控件（不带时区）。    number    定义用于输入数字的字段。    password    定义密码字段（字段中的字符会被遮蔽）。    radio    定义单选按钮。    range    定义用于精确值不重要的输入数字的控件（比如 slider 控件）。    reset    定义重置按钮（重置所有的表单值为默认值）。    search    定义用于输入搜索字符串的文本字段。    submit    定义提交按钮。    telNew    定义用于输入电话号码的字段。    text    默认。定义一个单行的文本字段（默认宽度为 20 个字符）。    time    定义用于输入时间的控件（不带时区）。    urlNew    定义用于输入 URL 的字段。    week    定义 week 和 year 控件（不带时区）。 

数字输入框

技术点的解释：

1、input的type属性设置为number,则表示该输入框的类型为数字。

2、数字框只能输入数字，输入其他字符无效。

3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。

4.可以设置最大值max  最小值min

 placeholder属性的使用

有时候需要提示用户输入框需要输入框的内容，那么就会用到我们的占位符

技术点的解释：

1、placeholder属性为输入框占位符,里面可以放提示的输入信息。

2、placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。

3、占位符内容不是输入框真正的内容。

当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。

语法：

<form>
  <input type="text/password" name="名称" value="文本" />
</form>

1、type：

   当type="text"时，输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name：为文本框命名，以备后台程序ASP 、PHP使用。

3、value：为文本输入框设置默认值。(一般起到提示作用)

举例：

<form>
 姓名：
 <input type="text" name="myName">
 <br/>
 密码：
 <input type="password" name="pass">
</form>

<form>创建表单

语法：

<form   method="传送方式"   action="服务器文件">

讲解：

1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。

2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method ： 数据传送的方式（get/post）。

<form    method="post"   action="save.php">
       <label for="username">用户名:</label>
       <input type="text" name="username" id="username" value="" />
       <label for="pass">密码:</label>
       <input type="password" name="pass"  id="pass" value=""/>

       <input type="submit" value="确定" name="submit" />

       <input type="reset" value="重置" name="reset" />

</form>

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的 wiki，里面有详细介绍。

创建表格的三个区域：

thead、tbody、tfoot

我们想实现一个成绩表,各科成绩和总分,效果如下图：

我们表格第一行为表头数据,我们用<thead>标签包裹,中间的科目和分数为表格的主体内容,我们用<tbody>标签包裹,最后的总分我们用<tfoot>标签包裹。

1、<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）

3、<tfoot> 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

4、thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

创建表格的四个元素：table、tr、th、td

1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。

2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。

3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

4、<th>…</th>：表格的头部的一个单元格，表格表头。

5、表格中列的个数，取决于一行中数据单元格的个数。

6、border属性可以为表格添加边框，属性值为数字。

注意：

1、table标签用来定义整个表格，为双标签，必须有结束标签。

2、table标签里面可以放caption标签和tr标签。

3、caption标签用来定义表格的标题。   <caption>前端三剑客</caption>

4、tr标签用来设置表格的行，tr里面只能放th或者td标签，一组tr标签代表一行。

5、th用来设置表格的标题，会加粗居中显示。也就是th标签中的文本默认为粗体并且居中显示。

6、td同来设置表格的列，一组td标签代表一列。

7、table表格在没有添加border属性之前, 在浏览器中显示是没有表格线的。

a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。

比如：

 <a href="www.baidu.com" target="_self">在当前窗口打开百度</a>

 <a href="www.baidu.com" target="_blank">在窗口打开百度</a>

语法：

<a  href="目标网址"  title="鼠标滑过显示的文本">链接显示的文本</a>

例如：

<a  href="http://www.imooc.com"  title="点击进入慕课网">click here!</a>

上面例子作用是单击click here!文字，网页链接到http://www.imooc.com这个网页。

title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好），如右侧案例代码（11-13行）。

注意：还有一个有趣的现象不知道小伙伴们发现了没有，只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）

href="#"，设置一个死地址，使得网页不能跳转

语法：

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

<ol>标签来制作有序列表，展示有前后顺序的信息列表

语法：

<ol>
  <li>信息</li>
  <li>信息</li>
  ......
</ol>

举例：

下面是一个热点课程下载排行榜：

<ol>
  <li>前端开发面试心法 </li>
  <li>零基础学习html</li>
  <li>JavaScript全攻略</li>
</ol>

<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始

ul-li是没有前后顺序的信息列表。无序列表

语法：

<ul>
 <li>信息</li>
 <li>信息</li>
  ......
</ul>

举例：

<ul>
 <li>精彩少年</li>
 <li>美丽突然出现</li>
 <li>触动心灵的旋律</li>
</ul>

语法：

html4.01版本 <hr>

xhtml1.0版本 <hr />

注意：

1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。

3. 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。

&nbsp;空格    分号代表结尾，一点都不能少

语法：

xhtml1.0写法：<br />

html4.01写法：<br>

大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。

      与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。