一、基础

1.meta标签

<meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>

这个网页将在6秒后自动跳转至百度首页

注：在web中一般称搜索引擎为搜索蜘蛛

2.注释

<!---->又叫注释标签。<!--表示注释的开始，-->表示注释的结束。

3.标签简介

1）即使你的页面用了JavaScript，也不是动态页面，除非你还用到了后端技术。

2）在HTML中，我们可以使用“s标签”来实现文本的中划线效果

3）常用文本标签：

small 小号字

big 大号字

em 斜体

strong 粗体

br/ 换行

sup 上标字

sub 下标字

4）可以用hr/标签来实现一条水平线

5）在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。

4.自闭合标签

	定义网页的信息（供搜索引擎查看）
	引入“外部CSS文件”
	换行标签
	水平线标签
	图片标签
	表单标签

5.块元素和行内元素

在浏览器预览效果，有些元素是独占一行的，其他元素不能跟这个元素位于同一行，如p、div、hr等。而有些元素不是独占一行的，其他元素可以跟这个元素位于同一行，如strong、em等。特别注意一下，这里所谓的“独占一行”，并不是在HTML代码里独占一行，而是在浏览器显示效果中独占一行。

块元素

在HTML中，块元素在浏览器显示状态下将占据整一行，并且排斥其他元素与其位于同一行。此外，一般情况下，块元素内部可以容纳其他块元素和行内元素。

块元素	说明
h1~h6	标题元素
p	段落元素
div	div元素
hr	水平线
ol	有序列表
ul	无序列表

★div元素常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。

行内元素

在HTML中，行内元素跟块元素恰恰相反，行内元素是可以与其他行内元素位于同一行的。此外，行内元素内部（标签内部）只可以容纳其他行内元素，不可以容纳块元素。

行内元素	说明
strong	粗体元素
em	斜体元素
a	超链接
span	常用行内元素，结合CSS定义样式

（1）行内元素可以与其他行内元素位于同一行。

（2）行内元素内部可以容纳其他行内元素，但不可以容纳块元素。

6.特殊符号

在网页排版中，为了让段落美观一些，我们都会让每一个段落首行缩进两个字的空格。不过在默认情况下，p标签的段落文字“首行”是不会缩进的

如果想要让每一个段落首行都缩进两个字的距离，我们可能会想通过在代码中按下“space键”来实现。事实上，这是无效的做法。在HTML中，空格也是需要用代码来实现的。这里就需要用到特殊符号

特殊符号	说明	代码 (前加&)
"	双引号（英文）	quot;
‘	左单引号	lsquo;
’	右单引号	rsquo;
×	乘号	times;
÷	除号	divide;
>	大于号	gt;
<	小于号	lt;
&	“与”符号	amp;
—	长破折号	mdash;
|	竖线	#124

特殊符号	说明	代码 (前加&)
§	分节符	sect;
©	版权符	copy;
®	注册商标	reg;
™	商标	trade;
€	欧元	euro;
£	英镑	pound;
¥	日元	yen;
°	度	deg;
	空格	nbsp;

二、列表

在HTML中，列表共有3种：有序列表、无序列表和定义列表。

1.有序列表

在HTML中，有序列表中的各个列表项是有顺序的。有序列表从

1. 开始，到

结束。有序列表的列表项是有先后顺序的，一般采用数字或字母作为顺序，默认是采用数字顺序。

<ol><li>列表项</li><li>列表项</li><li>列表项</li>
</ol>

ol，即ordered list（有序列表）；li，即list（列表项）。理解标签的语义更有利于你记忆。

在该语法中，

1. 和

标志着有序列表的开始和结束，而

• 和
• 标签表示这是一个列表项。一个有序列表可以包含多个列表项。

  注意，ol标签和li标签是配合一起使用，不可以单独使用，而且

  1. 标签的子标签只能是li标签，不能是其他标签。

  type属性

  在HTML中，我们可以使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。

  <ol type="属性值"><li>列表项</li><li>列表项</li><li>列表项</li>
  </ol>
  

  属性值	列表项符号
  1	阿拉伯数字：1、2、3……
  a	小写英文字母：a、b、c……
  A	大写英文字母：A、B、C……
  i	小写罗马数字：i、ii、iii……
  I	大写罗马数字：I、II、III……

  2.无序列表

  无序列表的列表项是没有顺序的。默认情况下，无序列表的列表项符号是●，不过可以通过type属性来改变其样式。

  <ul><li>列表项</li><li>列表项</li><li>列表项</li>
  </ul>
  

  ul，即unordered list（无序列表）。li，即list（列表项）。

  在该语法中，使用

  标签表示一个无序列表的开始和结束，

• 表示这是一个列表项。一个无序列表可以包含多个列表项。

• 注意，ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。这一点跟有序列表是一样的。

  跟有序列表一样，我们也可以使用type属性来定义列表项符号。

  <ul type="属性值"><li>列表项</li><li>列表项</li><li>列表项</li>
  </ul>
  

  属性值	列表项符号
  disc	实心圆●（默认值）
  circle	空心圆○
  square	正方形■

  无序列表是使用最多的列表

  • （1）ul元素的子元素只能是li，不能是其他元素。
  • （2）ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。

  3.定义列表

  在HTML中，定义列表由两部分组成：名词和描述。

  <dl><dt>名词</dt><dd>描述</dd>……
  </dl>
  

  dl即definition list（定义列表）；dt即definition term（定义名词）；而dd即definition description（定义描述）。

  在该语法中，

  标记和

  标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。

  使用这些元素而不是

  是考虑到代码的语义性

  三、表格

  1.基本结构

  在HTML中，一个表格一般会由以下3个部分组成。

  • （1）表格：table标签
  • （2）行：tr标签
  • （3）单元格：td标签

  <table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr>
  </table>
  

  tr，指的是table row（表格行）；td，指的是table data cell（表格单元格）。<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而和表示单元格的开始和结束。在表格中，有多少组“<tr></tr>”，就表示有多少行。
  

  2.完整结构

  一个表格的“完整结构”不仅仅只有table、tr、td，还包括caption、th等。

  表格标题：caption

  <table><caption>表格标题</caption><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr>
  </table>
  

  一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题都是位于整个表格内的第一行。

  表头单元格：th

  在HTML中，单元格其实有两种：表头单元格，使用th标签；表行单元格，使用td标签。

  th，指的是table header cell（表头单元格）。td，指的是table data cell（表行单元格）。

  <table><caption>表格标题</caption><tr><th>表头单元格1</th><th>表头单元格2</th></tr><tr><td>表行单元格1</td><td>表行单元格2</td></tr><tr><td>表行单元格3</td><td>表行单元格4</td></tr>
  </table>
  

  表头通常是表格第一行的单元格

  3.表格语义化

  一个完整的表格包含：table、caption、tr、th、td。为了更深一地对表格进行语义化，HTML引入了thead、tbody和tfoot标签。

  thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

  <table><caption>表格标题</caption><!--表头--><thead><tr><th>表头单元格1</th><th>表头单元格2</th></tr></thead><!--表身--><tbody><tr><td>表行单元格1</td><td>表行单元格2</td></tr><tr><td>表行单元格3</td><td>表行单元格4</td></tr></tbody><!--表脚--><tfoot><tr><td>标准单元格5</td><td>标准单元格6</td></tr></tfoot>
  </table>
  

  表脚（tfoot）往往用于统计数据的。对于thead、tbody和tfoot标签，不一定全部都上，例如tfoot就很少用。一般情况下，我们都是根据实际需要来使用这些标签。

  thead、tbody和tfoot标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚，很多人容易忽略它们。

  此外，thead、tbody和tfoot除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的CSS样式。

  使用这些元素仍然是考虑到代码的语义性

  4.合并行与列

  在HTML中，我们可以使用rowspan属性来合并行。所谓的合并行，指的是将“纵向的N个单元格”合并。

  <td rowspan = "跨越的行数"></td>
  

  在HTML中，我们可以使用colspan属性来合并列。所谓的合并列，指的是将“横向的N个单元格”合并。

  <td colspan = "跨越的列数"></td>
  

  四、图片

  1.图片标签

  在HTML中，我们可以使用img标签来显示一张图片。对于img标签，只需要掌握它的3个属性：src、alt和title。

  src属性

  src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。

  <img src="图片路径" />
  

  所谓的“图片路径”，指的就是“图片地址”，这两个叫法是一样的意思。任何一个图片必须指定src属性才可以显示。也就是说，src是img标签必不可少的属性。

  alt属性

  alt和title都是用于指定图片的提示文字。一般情况下，alt和title的值是相同的。不过两者也有很大的不同。

  <!DOCTYPE html> 
  <html>
  <head><meta charset="utf-8" /><title></title>
  </head>
  <body><img src="img/haizei.png" alt="海贼王之索隆" />
  </body>
  </html>
  

  当我们把“img/haizei.png”去掉（也就是图片无法显示）后，此时可以看到浏览器会显示alt的提示文字

  在有图片的时候就看不到

  title属性

  <!DOCTYPE html> 
  <html>
  <head><meta charset="utf-8" /><title></title>
  </head>
  <body><img src="img/haizei.png" title="海贼王之索隆">
  </body>
  </html>
  

  当我们把鼠标移到图片上时，就会显示title中的提示文字

  在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。

  2.图片路径

  如果想要显示一张图片，就必须设置该图片的路径（即图片地址）。也就是说，我们必须要设置img标签的src属性。在HTML中，路径分为两种：绝对路径和相对路径。

  绝对路径

  <img src="D:/website/img/haizei.png" />
  

  绝对路径，指的是图片在你的电脑中的完整路径。平常我们用电脑都知道，文件夹上方会有一个路径，其实这个就是绝对路径

  相对路径

  <img src="img/haizei.png" />
  

  相对路径，指的是图片相对当前页面的位置

  如果要找到上一级文件夹应该怎么写呢？—— “…/”表示上一级目录

  <img src="../haizei.png" />
  

  在实际开发中，站内文件不管是图片还是超链接等，我们都是使用相对路径，几乎不会使用绝对路径。这是因为如果采用绝对路径，你网站文件一旦移动，则所有的路径都可能会失效。

  不建议使用中文，因为很多服务器是英文操作系统，不能对中文文件名提供很好的支持。所以不管是图片还是文件夹，都建议使用英文名字。

  3.图片格式

  图片格式有两种：一种是“位图”；另外一种是“矢量图”

  位图

  位图，又叫做“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。

  在实际开发中，最常见位图的图片格式有3种（可以从图片后缀名看出来）：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。

  • （1）jpg可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。此外，jpg体积较大，并且不支持透明。
  • （2）png是一种无损格式，可以无损压缩以保证页面打开速度。此外，png体积较小，并且支持透明，不过不适合存储颜色丰富的图片。
  • （3）gif图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。

  这里来总结一下：如果想要展示色彩丰富而高品质图片，可以使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png格式；如果是动画图片，可以使用gif格式。

  此外对于位图，我们可以使用Photoshop这个软件来处理。

  简而言之：jpg图片不支持透明，png图片支持透明，而gif图片可以做动画。

  矢量图

  矢量图，又叫做“向量图”，它是用计算机图形学中点、直线或多边形等表示出来的几何图像。

  矢量图是以一种数学描述的方式来记录内容的图片格式。举个例子，我们可以使用y=kx来绘制一条直线，当k取不同值时就会绘制不同角度的直线，这就是矢量图的构图原理。

  矢量图最大的优点是：图片无论放大、缩小或旋转等都不会失真。最大的缺点是：难以表现色彩丰富的图片效果（非常差）。

  格式：“.ai”、“.cdf”、“.fh”、“.swf”。其中“.swf”格式比较常见，它指的是Flash动画

  位图和矢量图的区别如下所示

  • （1）位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
  • （2）位图组成单位是“像素”，而矢量图组成单位是“数学向量”。
  • （3）网页中的图片绝大多数都是位图，而不是矢量图。

  五、超链接

  超链接，英文名是hyperlink。每一个网站都是由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转。

  1.简介

  a标签

  在HTML中，我们可以使用a标签来实现超链接。

  <a href="链接地址">文本或图片</a>
  

  href表示你想要跳转到那个页面的路径（也就是地址），可以是相对路径，也可以是绝对路径

  超链接的范围非常广，我们可以将文本设置为超链接，这个叫做“文本超链接”。也可以将图片设置为超链接，这个叫做“图片超链接”。

  target属性

  默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。

  <a href="链接地址" target="打开方式"></a>
  

  属性值	说明
  _self	默认值，在原来窗口打开链接
  _blank	在新窗口打开链接
  _parent	在父窗口打开链接
  _top	在顶层窗口打开超链接

  一般情况下，我们只会用到_blank这一个值

  2.内部链接

  在HTML中，超链接有两种：一种是外部链接；另外一种是内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。

  以下是一个内部链接的实例：

  <!DOCTYPE html>
  <html>
  <head><meta charset="utf-8" /><title></title>
  </head>
  <body><a href="page2.html">跳转到页面2</a><a href="test/page3.html">跳转到页面3</a>
  </body>
  </html>
  

  3.锚点链接

  有些页面内容比较多，导致页面过长，此时用户需要不停拖动浏览器上的滚动条才可以看到下面的内容。为了方便用户操作，我们可以使用锚点链接来优化用户体验。

  在HTML中，锚点链接其实是内部链接的一种，它链接地址（也就是href）指向的是当前页面的某个部分。所谓的锚点链接，简单来说，就是点击某一个超链接，然后它就会跳到当前页面的某一部分。

  <!DOCTYPE html>
  <html>
  <head><meta charset="utf-8" /><title></title>
  </head>
  <body><div><a href="#article">推荐文章</a><br /><a href="#music">推荐音乐</a><br /><a href="#movie">推荐电影</a><br /></div>……<br />……<br />……<br />……<br />……<br />……<br />……<br />……<br /><div id="article"><h3>推荐文章</h3><ul><li>朱自清-荷塘月色</li><li>余光中-乡愁</li><li>鲁迅-阿Q正传</li></ul></div>……<br />……<br />……<br />……<br />……<br />……<br />……<br />……<br /><div id="music"><h3>推荐音乐</h3><ul><li>林俊杰-被风吹过的夏天</li><li>曲婉婷-在我的歌声里</li><li>许嵩-灰色头像</li></ul></div>……<br />……<br />……<br />……<br />……<br />……<br />……<br />……<br /><div id="movie"><h3>推荐电影</h3><ul><li>蜘蛛侠系列</li><li>钢铁侠系统</li><li>复仇者联盟</li></ul></div>
  </body>
  </html>
  

  当我们点击“推荐文章”“推荐音乐”“推荐电影”这3个超链接后，页面就会自动滚动到相应的部分。

  id属性就是元素的名称，在同一个页面中，id是唯一的，也就是说一个页面不允许出现相同的id。

  a标签的href属性取值时，需要在id前面加上“#”（井号），以表示这是一个锚点链接。

  六、表单

  使用标签做出来的都是静态页面，动态页面是没办法实现的。如果想要做出一个动态页面，我们就需要借助表单来实现。对于表单，像注册登录、话费充值、发表评论等都用到了，如下图所示。其中，文本框、按钮、下拉菜单等就是常见的表单元素。

  

  1.简介

  如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。

  表单是我们接触动态页面的第一步。其中表单最重要的作用就是：在浏览器端收集用户的信息，然后将数据提交给服务器来处理。学习HTML只需要把效果做出来就可以，不需要管数据处理。

  表单标签

  在HTML中，表单标签有5种：form、input、textarea、select和option。

  从外观上来划分，表单可以分为以下8种。

  • （1）单行文本框
  • （2）密码文本框
  • （3）单选框
  • （4）复选框
  • （5）按钮
  • （6）文件上传
  • （7）多行文本框
  • （8）下拉列表

  2.form标签

  在HTML中，我们都知道表格的行（tr）、单元格（th、td）等都必须放在table标签内部。创建一个表单，跟创建一个表格一样，我们也必须要把所有表单标签放在form标签内部。

  表单跟表格，这是两个完全不一样的概念，。我们常说的表单，指的是文本框、按钮、单选框、复选框、下拉列表等的统称。

  <form>//各种表单标签
  </form>
  

  属性	说明
  name	表单名称
  method	提交方式
  action	提交地址
  target	打开方式
  enctype	编码方式

  name属性

  在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单进行命名。

  <form name="myForm"></form>
  

  method属性

  在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。

  get的安全性较差，而post的安全性较好。所以在实际开发中，使用post比较多。

  <form method="post"></form>
  

  action属性

  在form标签中，action属性用于指定表单数据提交到哪一个地址进行处理。

  <form action="index.php"></form>
  

  target属性

  form标签的target属性跟a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到“_blank”这一个属性值。

  <form target="_blank"></form>
  

  enctype属性

  在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。

  3.input标签

  在HTML中，大多数表单都是使用input标签来实现的。

  <input type="表单类型" />
  

  input是自闭合标签，它是没有结束符号的。其中type属性取值如下表所示。

  

  4.单行文本框

  在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。单行文本框常见于注册登录中。

  <input type="text" />
  

  在HTML中，单行文本框常用属性如下表所示。

  属性	说明
  value	设置文本框的默认值，也就是默认情况下文本框
  size	设置文本框的长度
  maxlength	设置文本框中最多可以输入的字符数

  value属性用于设置单行文本框中默认的文本，如果没有设置，就是空白。

  size属性可以用来设置单行文本框的长度，不过在实际开发中，我们一般不会用到这个属性，而是使用CSS来控制。

  从外观上看不出maxlength加上与不加上有什么区别，不过当我们输入内容后，会发现设置maxlength="5"的单行文本框最多只能输入5个字符

  5.密码文本框

  密码文本框在外观上与单行文本框相似，两者拥有相同的属性（value、size、maxlength等）。不过它们是有着本质上的区别的：在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。

  我们可以把密码文本框看成是一种特殊的单行文本框，它拥有和单行文本框一样的属性。

  <input type="password" />
  

  密码文本框仅仅能使得周围的人看不见你输入的内容是什么，实际上它并不能保证数据的安全。为了保证数据安全，我们需要在浏览器与服务器之间建立一个安全连接，不过这属于后端技术.

  6.单选框

  在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio”。

  <input type="radio" name="组名" value="取值" />
  

  name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。

  如果想要在默认情况下，让第一个单选框选中，可以使用checked属性来实现。

  <input type="radio" name="gender" value="男" checked />男
  <input type="radio" name="gender" value="男" checked="checked" />男
  

  我们可能看到checked属性没有属性值，其实这是HTML5的最新写法。这两句代码其实是等价的，不过一般都是采用缩写形式。

  在实际开发中，对于同一组的单选框，必须要设置一个相同的name，这样才会把这些选项归为同一个组上面，避免单选变多选

  有一点要说明一下的，为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来。

  <label><input type="radio" name="gender" value="男" />男</label>
  <label><input type="radio" name="gender" value="女" />女</label>
  

  7.复选框

  在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。

  <input type="checkbox" name="组名" value="取值" />
  

  name属性表示复选框所在的组名，而value表示复选框的取值。跟单选框一样，这两个属性也必须要设置。

  想在默认情况下，让复选框某几项选中，我们也可以使用checked属性来实现。这一点跟单选框是一样的。

  8.按钮

  在HTML中，常见的按钮有3种：普通按钮（button）；提交按钮（submit）；重置按钮（reset）

  普通按钮（button）

  在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。

  <input type="button" value="取值" />
  

  value的取值就是按钮上的文字。

  提交按钮（submit）

  在HTML中，提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。

  <input type="submit" value="取值" />
  

  重置按钮（reset）

  在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。

  <input type="reset" value="取值" />
  

  重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。提交按钮也是针对当前所在form标签而言的。

  分析：

  3种按钮虽然从外观上看起来是一样的，但是实际功能却是不一样的。最后，我们总结一下普通按钮、提交按钮以及重置按钮的区别。

  • （1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。
  • （2）提交按钮一般都是用来给服务器提交数据的。
  • （3）重置按钮一般用来清除用户在表单中输入的内容。

  button标签

  从上面我们知道，普通按钮、提交按钮以及重置按钮这3种按钮都是使用input标签来实现的。其实还有一种按钮是使用button标签来实现的。

  <button></button>
  

  使用较少，了解即可

  9.文件上传

  在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为file。

  <input type="file" />
  

  10.多行文本框

  单行文本框只能输入一行文本，而多行文本框却可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。

  <textarea rows="行数" cols="列数" value="取值">默认内容</textarea>
  

  多行文本框的默认显示文本是在标签对内部设置，而不是在value属性中设置的。一般情况下，不需要设置默认显示文本。

  分析：

  对于文本框，现在我们可以总结出以下2点。

  • （1）HTML有3种文本框：单行文本框、密码文本框、多行文本框。
  • （2）单行文本框和密码文本框使用的都是input标签，多行文本框使用的是textarea标签。

  11.下拉列表

  在HTML中，下拉列表由select和option这两个标签配合使用来表示的。这一点跟无序列表很像，其中无序列表是由ul和li这两个标签配合使用来表示。为了更好地理解，我们可以把下拉列表看成是一种“特殊的无序列表”。

  <select><option>选项内容</option>……<option>选项内容</option>
  </select>
  

  下拉列表是最节省页面空间的一种方式，因为它在默认情况下只显示一个选项，只有点击后才会看到全部选项。当我们点击下拉列表后，全部选项就会显示出来

  select标签属性

  在HTML中，select标签常用属性有两个，如下表所示。

  属性	说明
  multiple	设置下拉列表可以选择多项
  size	设置下拉列表显示几个列表项，取值为整数

  默认情况下，下拉列表只能选择一项，我们可以通过multiple属性设置下拉列表可以选择多项。想要选取多项，可以使用“Ctrl+鼠标左键”来选取。

  下拉列表的multiple属性没有属性值，这是HTML5的最新写法，这个跟单选框中的checked属性是一样的。

  有些小伙伴将size取值为1、2、3时，会发现Chrome浏览器无效。这是因为Chrome浏览器最低是4个选项，我们只能选取4及以上数字。

  option标签属性

  属性	说明
  selected	是否选中
  value	选项值

  selected属性表示列表项是否被选中，它是没有属性值的，这也是HTML5的最新写法，这个跟单选框中的checked属性也是一样的。

  value属性不再赘述

  表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素就必须放在form标签内才有效。如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。

  七、框架

  在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，说白了，就是在当前页面再嵌入另外一个网页。

  <iframe src="链接地址" width="数值" height="数值"></iframe>
  

  src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。

  iframe实际上就是在当前页面嵌入了另外一个页面，我们也可以同时嵌入多个页面。