HTML中表格和表单的简单构造和样式

现在一般网页上都有表单，也有表格，但是少。

表格

在HTML网页上建立表格需要有<table>标签
<table>标签中有主要标签有<tr>表格行、<th>表格内标题、<td>表格内内容、<caption>表格标签

<table>    <caption>表格标题</caption>   <tr>      <th>标题1</th>      <th>标题2</th>      <th>标题3</th>   </tr>   <tr>      <td rowspan="2">内容1</td>      <td>内容2</td>      <td>内容3</td>   </tr>   <tr>      <td colspan="2">内容5</td>   </tr>    <tr>      <td>内容7</td>      <td>内容8</td>      <td>内容9</td>   </tr></table>

rowspan和colspan是表格跨行跨列的属性，其中rowspan是跨行，colspan是跨列。
如上述代码所述，效果如下（加上了边框，看得清楚些）：

表格标题的样式需要单独变更。
表格中缝隙很大，要变没有可以使用border-collapse:collapse;这个声明。
就像这样：

标题的位置也可以变化：在table中加入caption-side:bottom;声明，可以将标题的位置放到下面。
在对表格的样式有一些样式：

tr:nth-child(2n+1){    background-color: #a0a0a0;}tr:nth-child(2n){    background-color: #fff;}th{    background-color: yellowgreen;}

这个这快捷的方式就牵扯到伪类：
:nth-child(xx)这个伪类属性可以匹配xx状态的元素的样式状态，
比如
:nth-child(even)匹配个数编号为偶数的元素，也可以even改成2n；
:nth-child(odd)匹配个数编号为奇数的元素，也可以odd改成2n+1；
:nth-child(3n)匹配个数编号为3的倍数的元素。

当然还有其他伪类，常见的一些伪类是用在超链接上的，

a元素的伪类样式

a:link 未单击访问时的超链接样式的选择器
a:visited 单击访问后的超链接样式的选择器
a:hover鼠标悬浮在上面的超链接样式的选择器
a:active鼠标单机未释放的超链接样式的选择器
在设置属性的时候要按上面的顺序来进行设置样式。
a:focus 当a元素被作为焦点时，会采用的超链接样式的选择器
一般最常用的伪类有:hover这选择器

表单

表单在网上很常见，一般的网页上的注册啊什么的都是用表单来做的。

 <h1>我是標題</h1>    <form action="处理程序路径" method="post">        <div class="tableRow">            <p>                選擇吧:            </p>            <p>                <select name="xuanze">                     <option value="xuanze1">选择1</option>                     <option value="xuanze2">选择2</option>                     <option value="xuanze3">选择3</option>                     <option value="xuanze4">选择4</option>                </select>            </p>        </div>        <div class="tableRow">            <p>                单选:            </p>            <p>                <input type="radio" name="danxuan" value="danxuan1">单选1<br>                <input type="radio" name="danxuan" value="danxuan2" checked>单选2            </p>        </div>        <div class="tableRow">            <p>数量:</p>            <p><input type="number" name="shulaing" min="1" max="10"></p>        </div>        <div class="tableRow lable">            <p>日期:</p>            <p><input type="date" value="date"></p>        </div>        <div class="tableRow">            <p>                多选:</p>            <p>                <input type="checkbox" name="duoxuan[]" value="duoxuan1">多选1                <br>                <input type="checkbox" name="duoxuan[]" value="duoxuan2" checked>多选2            </p>        </div>        <div class="tableRow">            <p>               文本:</p>            <p><input type="text" name="wenben" placeholder="内部内容，可不写"></p>        </div>        <div class="tableRow">            <p>                密码:</p>            <p><input type="password" name="mima"></p>        </div>        <div class="tableRow">            <p>                电话:</p>            <p><input type="tel" name="phone" value=""></p>        </div>        <div class="tableRow">            <p>文本框:</p>            <p>                <textarea name="wenbenkuang"></textarea>            </p>        </div>        <div class="tableRow">            <p></p>            <p>                <input type="submit">                <input type="reset">                <input type="button" value="自定义按钮">            </p>        </div>    </form>

其中基本包含了表单内容。
建立表单则需要<form>元素，这个元素主要有两个属性需要填写，
1:action属性是填写处理表单的服务器程序路径，比如什么xxx.php，有相对路径和绝对路径。
2:method属性是填写表单数据是如何提交到web服务器上，有两种方法可以选择。

• get方式，表单的数据在链接地址中可以看到，数据不安全；而且提交的内容容量有限，适合相对少的数据传输。
• post方式，表单的数据在链接地址中看不到，数据相对安全，而且提交的内容容量可以很大。

表单元素

<input>元素，其有很多类型，
第一个需要使用type属性，其中常用类型有：
1、text 一个文本框，提供文本输入；
2、password 一个密码框，提供密码输入，输入内容会不可见；
3、number 一个数字框，可以设置最大最小值；
4、submit 提交按钮；
5、reset 重置按钮；
6、button 自定义按钮；
7、date 一个日期选择框，可提供日期选择；
8、radio 选项单选，可以提供多个选项，每一个选项是一个<input>；
9、checkbox 复选框，可以提交多个选择，每一个选项是一个<input>；
10、file 提供一个上传文件的框。
第二个需要填的属性是name，就是将框里填的内容或者选的内容，赋值给name中。比如，type=“text” name=“mingzi” 就是将text文本框里填写的内容赋个mingzi，后台处理程序看到mingzi后就知道文本框输入什么内容了。
第三个可能需要填写的属性为value，这个的话用在按钮上就是按钮显示的值；用在单选和多选时，则表示所选内容是什么值，然后赋值与name属性。
HTML5中还提供了更多的类型。

下拉列表选项<select>，需要一个name属性，
每一个下拉列表选项需要一个<option>，每一个选项都需要一个value值，来给name属性赋值。选择项的内容则写在<option></option>中。

大型文本框<textarea>，需要一个name属性来储存文本域中的内容。

当然，表单元素还有很多，而且也还有很多元素属性和值，详见W3school的HTML的表单
比如required必填属性，placeholder文本框信息提示 ，checked已被选择等等。

有一种标签使说明和文本框紧密连接，就是<lable>标签，为 input 元素定义标注（标记），但是需要for和id绑定。

<form>        <lable for="text">文本框输入</lable>        <input type="text" name="name" id="text"></form>

还有一个比较骚气的标签<fieldset>,将一些表单归为一类汇总。

<form>  <fieldset>    <legend>Personalia:</legend>    Name: <input type="text"><br>    Email: <input type="text"><br>    Date of birth: <input type="text">  </fieldset></form>

本博客仅用于记录web前端学习情况