HTML（二）
div标记
div全称为division，意为“区分”。
1 | <div> |
div标记的属性
1 | <div id="value" aliggn="value" class="value" style="value"> |
id：div标记的id也可以说是它的名字，常和CSS样式结合，实现对网页中任何元素的控制。
align：用于控制div标记中的元素的对齐方式，其value值可以是left、center和right，分别用于设置元素的居左、居中和居右对齐。
class：用于设置div标记中的元素的样式，其value值为CSS样式中的class选择符。
style：用于设置div标记中的元素的样式，其value值为CSS属性值，各属性值间应用分号分隔。
下面介绍div标记的属性以及对其相关的描述，如表所示。
下面是div标记的几个主要常用的属性的介绍。
1.align 属性
通过设置属性align，可以改变div标记的水平对齐方式。align可选值为center，left，right
2.id 属性
id 属性用于定义一个元素的独特样式，即设置标记的标识。
3.class 属性
class 属性用于指定元素属于何种样式的类，即设置标记的类。
下面介绍id属性和class属性的区别。
从概念上说，两者是不一样的。
(1)id属性是先找到结构/内容，再给它定义样式。id属性通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时（比如说通常一个页面都是由一个页眉，一个报头masthead，一个内容区域和一个页脚等组成），一般使用id比较理想，因为一个id在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。
(2)class属性是先定义好一种样式，再套给多个结构/内容。class属性是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本：一个class可以定义剧本中每个人物的故事线，可以通过CSS、JavaScript等来使用这个类。因此可以在一个页面上使用class=”Frodo”、class=”Gandalf”、class=”Aragorn”来区分不同的故事线。还有一点非常重要的是，可以在一个文档中使用任意次数的Class。
总而言之，class属性可以反复，使用而id属性在一个页面中仅能被使用一次。有可能在很大部分浏览器中反复使用同一个id不会出现问题，但在标准上这绝对是错误的使用，而且很可能导致某些浏览器的现实问题。
还有一个区别，在一个结构文档中，可以多处使用同一个class名，而id名必须是唯一的。
4.style 属性
style 属性用于设置对象的内嵌样式。
style属性的常用参数如表所示。
（1）position 属性
style 属性最常用的功能之一就是进行div标记的定位，其对应的属性为position 属性。
1 | position:static|absolute|relative |
static：无特殊定位，对象遵循HTML定位规则。
absolute ：将对象从文档流中拖出，使用left、right、top、bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。
relative：对象不可层叠，但将依据left、right、top、bottom等属性在正常文档流中偏移位置。
其中，具体的属性值可以通过表所示的参数进行设置。
（2）display属性
style属性的另一个常用功能是控制div标记的display属性，用于设置元素的浮动特征，当display被设置为block（块）时，容器中所有元素都将会被当作一个单独的块放入到页面中；将display设置为inline，将使其行为和元素inline一样，即使是普通的块元素它也会被组合成像span那样的输出流输出到页面上；将display设置为none，div元素就像从页面中被移走一样，它下面的所有元素都会被自动向上填充。
display属性是用来设置或检索对象是否及如何显示。
1 | display:block|none |
display属性的参数取值如表所示。
（3）display和visibility的对比
visibility属性用来确定元素是显示还是隐藏，这用visibility=”visible|hidden”来表示，visible表示显示，hidden表示隐藏。当visibility被设置为hidden时，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
span标记
span标记和div标记的区别如下：div（division）是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而span是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。
从功能角度来说，div标记一般用来做布局，而span标记用来做文字的效果，尤其是标题和链接的效果。
不过，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素便成为内嵌元素；同样，给内嵌元素定义display:block后，内嵌元素便成为块元素。block和inline的区别主要有内容模型（Content model）、格式（formatting）和Directionality（如何处理两种语言混合在一起的unicode码）。
iframe标记
iframe标记，又叫浮动帧标记，可以利用iframe标记将一个HTML文档嵌入一个HTML中显示。使用iframe标记，能够拖入外部文件，这样可以更好地管理内容，并且提供了一种在不同位置包含内容的机制。
iframe标记可以构成一种特殊的框架结构，被称为浮动框架。它是在浏览的窗口中嵌套另外的网页文件。
1 | <iframe> |
iframe标记的属性
iframe标记是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示子页面的内容。
1 | <iframe src="文件" height="数值" width="数值" name="框架名称" scrolling="值" frameborder="值"> |
iframe标记拥有自己的属性，如表所示。
（1）浮动框架的文件路径属性src
1 | <iframe src="file_name"> |
file_name：指明浮动框架文件的文件名或者其他超链接的网址。
（2）浮动框架的名称属性name
1 | <iframe src="file_name" name="frame_name"> |
frame_name：定义的浮动框架名称。
（3）浮动框架的对齐属性align
1 | <iframe src="file_name" align="left/center/right"> |
left：居左对齐。
center：居中对齐。
right：居右对齐。
（4）浮动框架的宽度和高度属性width、height
1 | <iframe src="file_name" width="value" height="value"> |
width：浮动框架的宽度。height：浮动框架的高度。
（5）浮动框架滚动条显示属性scrolling
1 | <iframe src="file_name" scrolling="value"> |
value 有以下3个取值。
yes：显示滚动条。
no：不显示滚动条。
auto：根据窗口内容决定是否有滚动条。
（6）浮动框架边框属性frameborder
1 | <iframe src="file_name" frameborder="value"> |
value：值为yes 代表显示框架边框，值为no 代表隐藏框架边框。
（7）浮动框架边缘的宽度和高度属性marginwidth、marginheight
1 | <iframe src="file_name" marginwidth="value" marginheight="value"> |
marginwidth：设定浮动框架左右边缘与边框的宽度。
marginheight：设定浮动框架上下边缘与边框的高度。
表单标记
表单是网页上的一个特定区域。这个区域是由一对form标记定义的。在form与/form>之间的一切都属于表单的内容。每个表单元素开始于form元素，可以包含所有的表单控件，还有任何必需的伴随数据，如控件的标记、处理数据的脚本或程序的位置等。在表单的form标记中，还可以设置表单的基本属性，包括表单的名称、处理程序、传送方式等。一般情况下，表单的处理程序action和传送方法method是必不可少的参数。
处理程序——action
真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或脚本的一个完整URL。
1 | <form action="表单的处理程序"> |
在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址，例如发送E-mail等。
表单名称——name
名称属性name 用于给表单命名。这一属性不是表单的必需属性，但是为了防止表单信息在提交到后台处理程序时出现混乱，一般要设置一个与表单功能符合的名称，例如登录的表单可以命名为login。不同的表单尽量不用相同的名称，以避免混乱。
1 | <form name="表单名称"> |
表单名称中不能包含特殊符号和空格。
传送方法——method
表单的method属性用来定义处理程序从表单中获得信息的方式，可取值为get或post，它决定了表单中已收集的数据是用什么方法发送给服务器的。
1 | <form method="传送方式"> |
传送方式的值只有两种选择，即get或post。
method=get：使用这个设置时，表单数据会被视为CGI 或ASP 的参数发送，也就是来访者输入的数据会附加在URL 之后，由用户端直接发送至服务器，所以速度会比post快，但缺点是数据长度不能够太长。在没有指定method 的情形下，一般都会视get为默认值。
method=post：使用这种设置时，表单数据是与URL 分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度会比get慢。
编码方式——enctype
表单中的enctype 参数用于设置表单信息提交的编码方式。
1 | <form enctype="编码方式“> |
enctype属性为表单定义了MIME编码方式，编码方式的取值如表所示。
目标显示方式——target
target 属性用来指定目标窗口的打开方式。表单的目标窗口往往用来显示表单的返回信息，例如，是否成功提交了表单的内容、是否出错等。
1 | <form target="目标窗口的打开方式"> |
目标窗口的打开方式包含4个取值：_blank、_parent、_self和_top。其中_blank是指将返回的信息显示在新打开的窗口中；_parent是指将返回信息显示在父级的浏览器窗口中；_self表示将返回信息显示在当前浏览器窗口；_top表示将返回信息显示在顶级浏览器窗口中。
添加控件
按照控件的填写方式可以分为输入类和菜单列表类。输入类的控件一般以input标记开始，说明这一控件需要由用户输入；而菜单列表类则以select标记开始，表示需要用户选择。按照控件的表现形式则可以将控件分为文本类、选项按钮、菜单等几种。
在HTML表单中，input参数是最常用的控件标记，包括最常见的文本域、按钮都采用这个标记。
1 | <form> |
在这里，“控件名称”是为了便于程序对不同控件的区分，而type参数则是确定了这一个控件域的类型。在HTML中，input参数所包含的控件类型如表所示。
文字字段——text
text属性值用来设定在表单的文本域中输入任何类型的文本、数字或字母，输入的内容以单行显示。
1 | <input type="text" name="控件名称" size="控件的长度" maxlength="最大字符数" value="文字字段的默认取值"/> |
在该语法中包含了很多参数，它们的含义和取值方法不同，如表所示。其中name、size、maxlength参数一般是不会省略的参数。
密码域——password
在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号*或圆点显示。
1 | <input type="password" name="控件名称" size="控件的长度" maxlength="最大字符数" value="文字字段的默认取值"/> |
在该语法中包含了很多参数，它们的含义和取值如表所示。其中name、size、maxlength参数一般是不会省略的参数。
单选按钮——radio
在网页中，单选按钮用来让浏览者进行单一选择，在页面中以圆框表示。在单选控件中必须设置参数value的值。而对于一个选择中的单选按钮来说，往往要设定同样的名称，这样在传递时才能更好地对某一个选择内容的取值进行判断。
1 | <input type="radio" value="单选按钮的取值" name="单选按钮名称" checked="checked"/> |
在该语法中，checked 属性表示这一单选按钮默认被选中，而在一个单选按钮组中只能有一项单选按钮控件被设置为checked。value 则用来设置用户选中该项目后，传送到处理程序中的值。
复选框——checkbox
浏览者填写表单时，有一些内容可以通过让浏览者进行选择的形式来实现。例如常见的网上调查，首先提出调查的问题，然后让浏览者在若干个选项中进行选择。又如收集个人信息时，要求在个人爱好的选项中进行选择等。复选框能够进行项目的多项选择，以一个方框表示。
1 | <input type="checkbox" value="复选框的值" name="名称" checked="checked"/> |
在该语法中，checked参数表示该选项在默认情况下已经被选中，一个选择中可以有多个复选框被选中。
普通按钮——button
在网页中按钮很常见，在提交页面、恢复选项时常常用到。普通按钮一般情况下要配合脚本来进行表单处理。
1 | <input type="button" value="按钮的取值" name="按钮名" onclick="处理程序"/> |
value 是按钮上面的文字，而在button 中可以通过添加onclink 参数来实现一些特殊的功能，onclick 参数是设置当鼠标按下按钮时所进行的处理。
提交按钮——submit
提交按钮是一种特殊的按钮，不需要设置onclick参数，在单击该类按钮时可以实现将表单的内容进行提交。
1 | <input type="submit" name="按钮名" value="按钮的取值"/> |
在该语法中，value 同样用来设置按钮上显示的文字。
重置按钮——reset
单击重置按钮后，可以清除表单的内容，恢复默认的表单内容设定。
1 | <input type="reset" name="按钮名" value="按钮的取值"/> |
在该语法中，value 同样用来设置按钮上显示的文字。
图像域——image
图像域是指可以用在提交按钮位置上的图像，这幅图像具有按钮的功能。使用默认的按钮形式往往会让人觉得单调。如果网页使用了较为丰富的色彩，或稍微复杂的设计，再使用表单默认的按钮甚至会破坏整体的美感。这时，可以使用图像域，创建和网页整体效果相统一的图像提交按钮。
1 | <input type="image" src="图像地址" name="图像域的名称"/> |
在该语法中，图像地址可以是绝对地址或相对地址。
隐藏域——hidden
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以便于被处理表单的程序所使用。浏览者单击“发送”按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
1 | <input type="hidden" name="隐藏域名称" value="提交的值"/> |
文件域——file
文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。在设置电子邮件的邮件、上传头像、发送文件时常常会看到这一控件。
1 | <input type="file" name="文件域名称"/> |
菜单列表类标记
菜单列表类的控件主要用来进行选择给定答案中的一种，这类选择往往答案比较多，使用单选按钮比较浪费空间。可以说，菜单列表类的控件主要是为了节省页面空间而设计的。菜单和列表都是通过select和option标记来实现的。
菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。
列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。
1 | <select name="下拉菜单的名称"> |
这些属性的含义如表所示。
文本域标记textarea
在HTML中还有一种特殊定义的文本样式，称为文字域或文本域。它与文字字段的区别在于可以添加多行文字，从而可以输入更多的文本。这类控件在一些留言板中最为常见。
1 | <textarea name="文本域名称" value="文本域默认值" rows="行数" cols="列数"> |
语法中各属性的含义如表所示。
id标记
在HTML的表单元素中，还有一个id标记。这一标记是一个较为特殊的标记，它主要用于标示一个唯一的元素。这个元素可以是文字字段，可以是密码域，也可以是其他的表单元素，甚至也可以定义一幅图像、一个表格。但是在实际应用中，表单是使用id标记最多的一类元素。
1 | <id="元素的名称"> |
在HTML 中，由于id用来标识页面的唯一元素，因此在定义标识名时最好要根据其含义进行命名。