html表格

在html基础中，表格算比较重要的部分，学好表格对于之后css美化页面和js都非常有帮助，那么今天就将我学到的总结在这里。也是让自己对于这标签更加的熟悉。
1.表格的主要作用
表格主要是为了显示，展示数据，因为他可以把数据显示的非常规整，可读性非常好，特别是后台展示数据（并非用来布局页面）。
2.基本语法

 <table>//定义表格标签
            <tr>//定义表格中的行
                <th>（表头单元格）,经常位于表格第一行加粗显示其内容</th>
                <td>单元格内的文字</td>//定义表格中的单元格 table data 数据单元的内容
                </tr>
            </table>

我们知道表格的结构，都是横线和竖线组成的一个个行和列，那么这个标签就代表一整行，就代表这个行中每一个单元格，可以在其中写你想要的内容

还有一种方式来使用这个标签，那就是
和
s

<!-- 表格结构标签
        1.<thead></thead>
        2.<tbody></tbody>
    -->

end
和上述类似，只不过这个更加方便，就是表头，可以使代码更简洁好看，实际使用也更多一些。
然后就是表格的一些常用用法以及语法。
首先我们讲讲单元格的合并(在这里就非常好用，想写表头就省的合并了）。

<!-- 合并单元格 
        1.合并单元格的方式
        跨行合并：rowspan = "合并单元格个数"
        跨列合并：colspan = "合并单元格个数"
        2.目标单元格
        跨行合并：最上侧单元格为目标单元格，写合并代码
        跨列合并：最左侧单元格为目标单元格，写合并代码
        3.合并单元格步骤
        确定是跨行合并还是跨列合并
        找到目标单元格，写上合并方式
        删除多余的单元格
    -->

比如我们要合并这个二行一列和三行一列的表格
，那么就应该这样写：

<!--第一行-->
<tr>
<td rowspan ="2" ></td><td></td>
</tr>
<!--第二行-->
<tr>
<td></td>（最后删除）<td></td>
</tr>
<!--第三行-->
<tr>
<td></td><td></td>
</tr>
<!--第四行-->
<tr>
<td></td><td></td>
</tr>
<!--第五行-->
<tr>
<td></td> <td></td>
</tr>




<!-- 首先是合并（1，1）和（2，1），那么根据这个规则，
就应该先找到上面的单元格，也就是（1，1）然后写合并语法rowspan = "2",
最后再删除多余的单元格，也就是（2，1） --

–	–

end
这样就完成了合并的操作，跨列合并同理。
接着介绍无需标签和有序标签
比如你要列举一下几点内容：
激战江南高级特工穿山甲
征服工农路带恶霸刘华强
如果早知道男生也会被。。
那么我们有如下几种方式来把它表达出来：

• 激战江南高级特工穿山甲
• 征服工农路带恶霸刘华强
• 如果早知道男生也会被。。
  -end

这就是无序列表,可以看到无序列表前方是用一个点来表示的。
那么有序列表是什么效果呢？
1.激战江南高级特工穿山甲
2.征服工农路带恶霸刘华强
3.如果早知道男生也会被。。
这就是有序列表,有序列表前方是用数字123来表示的。
有序列表和无序列表的标签语法如下：

<!-- 无序标签和有序标签 
        无序列表：各个选项之间没有顺序
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        有序列表：各个选项之间有顺序
        <ol>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ol>
        自定义列表：
        <dl>//定义描述列表
            <dt></dt>//定义项目/名字
            <dt>
                <dd>描述每一个项目/名字</dd>
            </dt>
            <dt></dt>
        </dl>
    -->

end
自定义列表较无序和有序更加自由，可以根据实际情况灵活使用。
最后介绍表单标签。
我们遇到过很多页面，比如注册你的某蒸汽账号，他们会让你填写自己的用户名密码性别等信息，那么这些填写框是怎么实现的呢？其实，在html中只需要一句话就可以将这个显示在页面当中了。

<!-- 表单标签
        一个完整的表单由表单控件，表单域，提示信息组成
        表单域：
        <form action = "url地址" method = "提交方式" name = "表单域名称">
            action url地址 用于指定接收并处理把表单数据的服务器程序的url地址
            method get/post 用于设置表单名称，以区分同一个页面中多个表单域
            name 名称 用于设置表单名称，以区分同一个页面中的多个表单格
            <input type = "属性值"  =  />用于收集用户信息
        </form>
    -->

end
以下有几种类型可供我们选择：

text	文本框 用户可以输入任何文字
password	密码框 用户输入的字符被掩码
radio	单选按钮 用户可以实现多选一
submit	提交按钮 将内容提交至后台
checkbox	复选框 用户可以实现多选
maxlength	最长字符限制，规定输入字段中最大长度
reset	重置按钮 还原表单默认状态
button	普通按钮 后期搭配js使用
file	用于传图片
select	下拉列表标签
textarea	文本域标签 可以定义多行文本输入，常见于留言板，评论

以下是这些常见用法的语法：

<form>
    <!-- text 文本框 用户可以输入任何文字 -->
    用户名 <input type="text" value="请输入用户名" /></br>

    <!-- password 密码框 用户输入的字符被掩码 -->
    密码 <input type="password" /></br>
    <!-- radio 单选按钮 用户可以实现多选一 -->

    <!-- name 是表单中元素名字 这里性别按钮必须有相同的名字name 才可以实现多选一 ，主要给后台人员使用 -->

    <!-- value 规定input元素的值，主要给后台人员使用 -->
    性别:男 <input type="radio" name="sex" /> 女 <input type="radio" name="sex" /></br>
    <!-- checkbox 复选框 用户可以实现多选 -->

    <!-- 单选按钮和复选框可以设置checked属性，当页面打开就默认选这个按钮 -->

    <!-- maxlength 最长字符限制，规定输入字段中最大长度 -->
    吃饭<input type="checkbox" />睡觉<input type="checkbox" />打豆豆<input type="checkbox" /></br>
    <!-- submit 提交按钮 将内容提交至后台 -->
    密码 <input type="submit" /></br>
    <!-- reset 重置按钮 还原表单默认状态 -->
    密码 <input type="reset" /></br>
    <!-- button 普通按钮 后期搭配js使用 -->
    密码 <input type="button" /></br>
    <!-- file  用于传图片 -->
    密码 <input type="file" /></br>


    <!-- label 标签 可以绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动选择上，增加了用户体验 -->
    <label>用户名</label> <input type="text" value="请输入用户名" /></br>
    必须设置label for =" 名字" , 后将id改为id = "(和label for 后面相同的名字) "
    性别:<label for="nan">男</label> <input id="nan" type="radio" name="sex" /> 女 <input type="radio" name="sex" /></br>
    <!-- select下拉列表标签 -->
    <select>
        <option>河北</option>
        <option>北京</option>
        <option selected = "selected">火星</option>
    </select>
    <!-- textarea 文本域标签 可以定义多行文本输入，常见于留言板，评论 
        cols 设置列数长度
        rows 设置行数宽度
-->

</form>