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前端学习情况