HTML与CSS之HTML标签（二）

HTML与CSS之HTML标签（二）

除却前面的一些常用标签以外，还有表格与表单常用的 标签及相关属性

表格 table
thead、tbody、tfoot
tr、th、td

属性：
border   边框
bordercolor   边框颜色
width   宽度
height   高度
align="center"   表格居中
cellspacing="0"    单元格间距（各个单元格之间）为0（只有一条线）
cellpadding="0"    单元格内容与单元格间距
bgcolor   背景颜色
colspan   列合并（左右）
rowspan   行合并（上下）

<table>
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>niha</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>

表格绘制
1. 先将表格按照不合并状态下的行列绘制，然后在使用colspan和rowspan调试合并。这种方式需要注意的就是，当列和行合并之后需要将多余的删除掉。
2. 按照表格样式，一行一行的绘制，在一行中若有一列已被上下合并，则绘制行的时候不考虑该列①在第7行时，第一列存在并合并8行1列，第二列没有合并存在一个td
②在第8行中，第一列已经被合并，第二列没有合并存在一个td，之后的3-8列都被合并，不需要写td
代码如下：

<tr>
    <td rowspan="4" align="center" width="54px" height="120px">7</td>
    <td></td>
    <td colspan="2" rowspan="4" width="252px" height="30px"></td>
    <!-- <td>3</td> -->
    <td rowspan="4"></td>
    <td rowspan="4"></td>
    <td rowspan="4"></td>
    <td rowspan="4"></td>
</tr>
<tr>
    <td></td>
</tr>

表单 form
下面是form表单一般的写法

<form action="" method="">
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
        <select name="" id="">
            <option value="BeiJin">北京</option>
            <option value="ShangHai">上海</option>
            <option value="ChengDu">成都</option>
        </select>
        <textarea name="" id=""></textarea>
</form>

1.input标签

<input type="text">

1.1 type类型
	text					文本框
	password			密码
	radio				单选（必须指定name属性的值，且必须一致）
	checkbox			复选框
	file					文件
	button				提交按钮（没有实际意义）
	submit				提交按钮（数据提交）
	reset				重置（清空）
1.2 重要属性
	placeholder		可以自动消失的文字提示
	value				需手动删除的文字提示（在按钮中为按钮上显示的文字）

关于radio的name：

<input type="radio" name="sex">男
<input type="radio" name="sex">女

  这样写才能实现单选，通俗的来说就是性别只可能是一种

2.select标签（下拉菜单）
需要填写option选项，每一个option为一个选项`

<select name="" id="">
            <option value="BeiJin">北京</option>
            <option value="ShangHai">上海</option>
            <option value="ChengDu">成都</option>
</select>

3.textarea标签（多行文本）
多行输入，可设置文本框大小

<textarea name="" id=""></textarea>

需要注意的是：这里的textare文本框在网页中实现的效果是，用户可以通过右下角对文本框的大小进行改变，这里会涉及到通过css设置文本不可修改

textarea{
    /* 不允许拉伸 */
    resize: none;
    /* 点击时文本框的线不突出显示 */
    outline:none;
}

关于表单的action属性与method属性

  一般在刚接触到HTML与CSS的时候，我们基本上是用不上这两个属性的，简单来说action属性中需要填写的就是我们的目标页面，也就是我们的数据提交的目标页面（即对数据进行处理的页面），这是我们暂时不会涉及到的。

而method包含post和get属性值；
post与get的区别：（不需要深入掌握）

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。
   5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

建议：
1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；
2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；