HTML 学习总结 7

1、使用样式来显示边框

　　可以创建级联样式表(CSS)来显示边框，这是最灵活并且一致的方法，我们学习了基于样式的段落边界。我们可以对<table>和<td>标记符使用同样的方法

　　既可以将这些属性应用在整个表格（通过使用<table>标记符或者一条样式规则）,也可以应用在单独的单元格。而且，既可以在起始标记符处单独应用这些属性，也可以在　　　　　<style>区域创建规则来管理一个文档的所有实例，或者在外部样式表中创建规则来管理所有使用该样式表的文件。

2、设置背景填充和前景填充。

　　每个表格、行和单元格都有其独立的区域，都可以有他们自己的背景

　　要给表格设置背景颜色，可以使用我们设置文档时使用的同样的background-color样式规则，例如，要设置某行背景颜色为橘黄色，可以使用下面的语句

　　<tr style="background-color:orange">

　　和文档背景颜色一样，表格背景也可以是图片。表格的任何部分都可以设置background-image属性。例如：要给表格设置图片背景，可以使用下面的语句：

　　<table style="background-image:urlf(image/leaf.gif)">

　　一个背景的前景部分是它的文本。

3、改变单元格填充、间距和对齐

　　（1）设置单元格填充。

　　　　　　要为整个表格设置填充，可以在<table>标记符中使用cellpadding属性（cellpadding属性对单独的行和单元格标记符不起作用）

　　　　　　<table cellpadding="4px">

　　 　　   要为单独的单元格设置填充，在样式表使用padding属性，例如：<td style="padding:4px">

　　    　　注意：不能给行设置填充，因为从技术上来讲，行中没有需要填充的单元格，

　　（2）默认的表格边框看起来像双线，但是这种效果实际上是表格边框和每个单元格边框合起来的效果，双线的效果是单元格之间的边距造成的。

　　　　  如果想在单元格之间设置单实线的边框，可以设置单元格间距为零。

　　　　　<table cellpadding="10px" cellspacing="0px">

　　 (3) 设置水平对齐和垂直对齐

　　　　 单元格的内容有两种对齐方法：垂直（上、中、下）和水平（左、中、右,或者类似)。要用属性来设置对齐，使用align属性来指定水平对齐，使用valign属性来指定垂直对　　　　　齐，如下所示：

　　　　　<td align="center" valign="middle">

　　　　  也可以使用text-align样式来设置水平对齐，vertica-align来指定垂直对齐，如下所示：

　　　　　<td style="text-align:center;vertical-align:middle">

4、创建用户表单

　　 　　表单可以放在HTML文档主题部分的任何位置，表单用两个<from>标记符封装起来：

　　 　　<form method="post">

　　　　　　....

　　　　</form>

　　　　method属性用来定义表单提交后可能发生的情况，几乎所有的表单都使用method=“post”属性，意思是用户输入到表单数据会被收集起来，或者通过电子邮件传递，或　　　　          者直接发送到服务器，服务器端代码获取这些数据并执行一些任务，例如存储数据（到数据库）

　　　　在起始的<form>标记符中，可以指定一个，action属性，它通常是信息需要传送到的电子邮件地址，或者用户提交表单后需要运行的脚本代码的地址（URL）

　　　　　　例如：如果要将表单内容发送给CGI脚本，你可以包含指向存储在服务器上相应的CGI脚本的URL，像下面这样：

　　　　　　<form action="http://www.contoso.com/cgi-bin/feedback.pl">

　　　　可以在起始和结束的<form>标记符中放入不同的标记符来创建表单控件，表单控件包括文本框、按钮、复选框、列表框、列表和/或者命令按钮。命令按钮是执行某个功能　　　　　　的按钮。例如：提交表单或者表单复位。

5、创建文本框

　　　　最基本的控件是文本框。文本框有两种类型：普通文本框（单行）和文本框区域(多行）。

　　　　可以使用type=“text”属性的单面<input>标记符来创建普通文本框，如下所示：<input type="text">

　　　　如果要写XHTML兼容的代码，必须在单标记符结束前加上一个空格和斜杠，如：<input type="text"/>

　　　  每个表单的控件都是唯一的名字，用name属性来标识。例如，要给某个文本框命名为firstname，就可以向下面这样：

　　　　　　<input type="text" name="firstname">

　　　　也可以使用size属性指定文本框的宽度，默认宽度是20个像素，

　　      　　<input type="text" name="phone" size="30">

　　　　也可以指定用户输入到文本框中的文本长度，这和文本框的大小不是一回事，如果指定的长度比文本框的宽度大，文本随着用户的水平滚动，当用户输入达到指定的最大字　　　　符数时，文本不再接受更多的输入向下面这样使用maxlength属性。

　　　　<input type="text" name="phone" size="30" maxlength="100">

　　　　在HTML5中，你可以要求用户在提交表单之前必须天上某些输入字段（仅应用于HTML5兼容的浏览器）。要使一个输入字段是必填的可以像下面这样加上required属性：

　　　　<input  type="text" name="phone" size="30" maxlength="100" required>

6、电子邮件和网址的特殊输入类型

　　　 HTML5支持两种新的输入 input 类型，来支持电子邮件地址和网址。使用属性类型 type=“email” 代替 type=“text”来定义用于收集电子邮件的输入字段，如果浏览器不支　　　持HTML5，这个字段会使用默认的文本类型，所以它不会带来任何风险：

　　　　<input type="email" name="email-address">

　　　同时针对网址也有一个特定的属性类型

　　　　<input type="URL" name="website">

7、创建文本区

　　　通过使用双标记符<textarea>来创建一个多行的文本区域，通过加入属性rows来设定文本框应该包含几行文本，如下面的例子所示：

　　　<textarea name="comments" rows="5"></textarea>

　　　我们也可以加入columns属性来指定文本区域的宽度是多少个字符（每个字符代表一个列），默认情况下是40个字符：

　　　<textarea name="comments" rows="5" cols="60"></textarea>

　　　columns属性只影响文本框的大小，不影响最多能输入的字符总数，可以使用maxlength属性来限定用户能够输入的字符数。

8、创建提交按钮或清除按钮

　　　按钮上默认的文字是Submit，但是可以用value属性在按上显示不同的文本。例如，要使用词语Send（发送）出现在按钮上，就可以向下面这样摄者value的属性。

　　　<input type="submit" value="Send">

　　　也可以在表单中使用包含Reset（重置）按钮，它可以帮助用户清空所有区域。同样，也可以使用value属性改变按钮上的文字。

　　　例如：<input type="Reset" value="Clear">

9、创建默认或占位符文本

　　在默认的情况下，表单中的文本框和文本区域都是空白的，你可以选择在其中放上默认或占位符文本。

　　1）默认文本是普通文本，和其他用户实际输入输入的数据一样，随着表单结果一起提交。

      2）占位符文本是“幻影文本。他们出现在文本框里作为提示，用户在文本框中输入其他信息。如果用户选择让该文本保持空白，那么什么也不会提交。

　　　　对于文本框可以定义默认文本的字符加上value属性，如下所示：

　　　　<input type="text" name="country" value="United States of America">

　　　　对于文本区域，可以将默认文本放在起始和结束<textarea>之间，如下所示：

　　　　<textarea  name="comments" rows="5">Great job !Keep up the good work.</textarea>

　　　　占位符只在兼容HTML5的浏览器中显示，如果要使占位符文本可以增加一个placeholder属性，如下所示：

　　　　<input  type="text" name="country" placeholder="Enter your country here">

10、创建复选框和选择按钮。

　　(1) 对于单独的二元（是/否)问题，我们可以使用复选框，表单可以包含多个复选框，但是每个复选框对于填写表单的用户来说都需要单独决定

　　 要想创建复选框，需要使用<input>标记符的type=”checkbox“属性，如下所示：

　　<input type="checkbox" name="repair">

　　在默认情况下，当复选框被选上时，表单结果中相应值会显示On。对于上例中的复选框，结果显示如下：

　　repair=on；

　　我们可以通过定义value属性来改变默认值。例如，对于复选框，我们可以返回Yes值，如下所示：

　　<input type="checkbox" name="repair" value="Yes">

　　在默认情况下，复选框是不被选上的，用户必须单击摸个复选框来选择它。然而在某些情况下，预先选择复选款，可能有些益处。如果这样做，可以子在标记符后面增加一个　　　　checked=”checked“属性，如下所示：

　　<input type="checkbox" name="newsletter" checked="checked">

　　(2)创建选项按钮（又称为单选按钮）

　　　　来展示一组互斥的选项，如果选择一个选项按钮，同组的其他所有选项按钮都会被排除，

　　　　要想创建一组选项按钮，首先给这个选项组选择一个名称。需要给每个按钮单独在name属性指定同样的名称。使用value属性（这个值对于组内的每一个按钮来说是不同　　　　　的）来定义该组在表单中要传回的值。例如：

　　　　<p><input type="radio" name="category" value="gold" checked="checked" >Gold<br>

　　　　<input type="radio" name="categroy" value="silver" >Silver<br>

　　　　<input type="radio" name="categroy"  value="bronze">Bronze<p>

　　　　当表单结果返回后，这组按钮就像线面这样返回值：

　　　　category=gold