表格标签

表格的基本语法

<table>
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格内的文字1</td>
            <td>单元格内的文字2</td>
        </tr>
            <tr>
            <td>单元格内的文字3</td>
            <td>单元格内的文字4</td>
        </tr>
    </tbody>
</table>
表头1 表头2
单元格内的文字1 单元格内的文字2
单元格内的文字3 单元格内的文字4
  1. <table>是用于定义表格的标签
  2. <tr>用于定义表格中的行，必须嵌套在<table>标签里
  3. <th>用于定义表格中的表头，必须嵌套在<table>标签里
  4. <td>用于定义表格中的单元格，必须嵌套在<tr>标签里
  5. td指表格数据（table data），即单元格内容
  6. 表格结构标签<theade></thead>和<tbofy></tbofy>。

表格属性

一般是通过CSS设置

属性名 属性值 说明
align left、center、right 表格相对周围元素的对齐方式。
border 1 或 “” 规定表格是否有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认像素1。
cellspacing 像素值 规定单元格之间的空白，默认2像素。
width 像素值或百分比 规定表格宽度。

注意要写到table里

合并单元格

合并单元格的方式

  • 跨行合并：rowspan=”合并单元的个数”
  • 跨列合并 colspan-=”合并单元的个数”

目标单元格（写合并代码的地方）

  • 跨行：最上侧单元格为目标单元格，写合并代码。
  • 跨列：最左侧单元格为目标单元格，写合并单吗。

合并单元格步骤

  1. 确定跨行还是跨列。
  2. 找到目标单元格，写上合并代码，例如：<td colspan="2">合并列</td>和<td rowspan="2">合并行</td>
  3. 删除多余单元格

合并单元格例子

<table align="center" border="1" cellspacing="0" width="500" height="350">
    <thead>
        <tr>
            <th colspan="4="> 表头 </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td rowspan="2">4</td>
        </tr>
        <tr>
            <td>5</td>
            <td colspan="2" rowspan="2">6</td>
        </tr>
        <tr>
            <td>9</td>
            <td>12</td>     
        </tr>
    </tbody>
</table>

列表标签

无序列表

基本语法格式：

<ul>
    <li>列表项1</li>
    <li>列表项2</li> 
    <li>列表项3</li>
</ul>
  • 列表项1
  • 列表项2
  • 列表项3
  1. 无序列表各列表项没有顺序级别之分，是并列的
  2. <ul></ul>中只能嵌套<li></li>标签。
  3. <li></li>直接相当于一个容器，可以容纳所以元素。

有序列表

基本语法格式：

<ol>
    <li>列表项1</li>
    <li>列表项2</li> 
    <li>列表项3</li>
</ol>
  1. 列表项1
  2. 列表项2
  3. 列表项3
  1. 有序列表各列表项没有顺序级别之分，是并列的
  2. <ol></ol>中只能嵌套<li></li>标签。
  3. <li></li>直接相当于一个容器，可以容纳所以元素。

自定义列表

<dl>
    <dt>列表项1</dt>
    <dd>列表项2</dd> 
    <dd>列表项3</dd>
</dl>
列表项1
列表项2
列表项3
  1. <dl></dl>中只能嵌套<dt></dt> <dd></dd>标签。
  2. <dt></dt> <dd></dd>直接相当于一个容器，可以容纳所以元素。
  3. <dt></dt> <dd></dd>没有个数限制，经常是一个<dt></dt>对应多个<dd></dd>
  4. <dt></dt> <dd></dd>直接相当于一个容器，可以容纳所以元素。

表单标签

在HTML中，一个完整的表单有三部分组成

  1. 表单域
  2. 表单控件
  3. 提示信息

表单域

标签：<form></form>用于定义表单域，会把它范围内的表单元素信息提交给服务器。

基本语法：

<form action="URL地址" method="提交方式" name="表单域名称">
    各种表单元素控件···
</form>

<input> 表单元素

type属性的属性值及其描述

属性值 描述
button 定义可点击按钮（多数情况下用js启动脚本）。
checkbox 定义复选框
file 定义输入字段和“浏览”按钮，供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段，该字段中的字符被掩码。
radio 定义单选框
reset 定义重置按钮，重置按钮会把表单中的数据清除。
submit 定义提交按钮，把表单数据发送给服务器。
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20字符。

除了type属性外，<input>标签还有很多其他属性，常用属性如下：

属性 属性值 描述
name 由用户定义 定义input元素的名称
value 由用户定义 规定input元素的值
checked checked 规定input首次加载时应当被选中
maxlength 正整数 规定输入字段的字符的最大长度
  1. name和value是每个表单元素都有的属性，主要给后台人员使用。
  2. name表单元素的名字，要求单选按钮或复选框有同样的值。
  3. checked用于单选框和复选框。

举例:

<form action="test.php" method="GET">
    <!-- text文本框，提示用户输入 -->
    用户名: <input type="text" placeholder="邮箱/手机号码">
    <br />
    密码: <input type="password">
    <br />
    <!-- radio单选框，要求相同的name值 -->
    男: <input type="radio" name="sex" value="男">    女: <input type="radio" name="sex" value="女">    人妖: <input type="radio" name="sex" value="人妖">
    <br />
    <!-- checkbox复选框，要求相同的name值 -->
    吃饭：<input type="checkbox" name="dsm" value="吃饭" checked="checked"> 睡觉：<input type="checkbox" name="dsm" value="睡觉">  打豆豆：<input type="checkbox" name="dsm" value="打豆豆">
    <br /> 
    <input type="button" value="button1">    <input type="button" value="button2">
    <br />
    <input type="file">
    <br />
    <input type="hidden" value="1">
    <br />
    <input type="image" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2258327546,1216840282&fm=26&gp=0.jpg" width="32" height="32">
    <br />
    <input type="reset" value="清空">
    <br />
    <input type="submit" value="提交">
</form>
用户名:
密码:
男: 女: 人妖:
吃饭： 睡觉： 打豆豆：





<label>表单元素

核心：<label>标签的for属性和元素的id属性值相同。

<!-- 不用label标签 -->
<form action="test.php" method="GET">
    男: <input type="radio"  name="sex" value="男">
    <br />
    <!-- 使用label标签 -->
    <label for="sex_womean">女</label>  <input type="radio" name="sex" value="女" id="sex_womean">
</form>

男:

<select>表单元素

下拉列表

  • <select>至少包含一个<option>
  • <option>中定义selected=”selected”时，当前选项为默认选中。

语法：

<select name="se" id="select">
    <option value="1">11</option>
    <option value="2" selected="selected">22</option>
    <option value="3">33</option>
</select>

<textarea>表单元素

定义多行文本输入的控件–文本域。

  • cols定义显示长度
  • rows定义显示行数
    语法：
    <form>
        <textarea cols="50" rows="5">  
        </textarea>
    </form>