HTML基础-02

1.表格标签

1.1.表格的主要作用：

• 表格主要用于显示，展示数据，因为它可以让数据显示的非常规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把复杂的数据表现的很有条理。

• 表格主要是用来展示数据的，进而起到了布局页面的效果。

• 注意：表格也是占据一整格：

1.2.表格的基本语法

    <table>
        <tr> <td>列1</td> <td>列2</td> <td>列3</td> </tr>
        <tr> <td>one</td> <td>two</td> <td>three</td> </tr>
        <tr> <td>1</td> <td>2</td> <td>3</td> </tr>
    </table>

• table：用于定义表格的标签。
• tr：定义表格中的行标签。
• td：用于定义行中的单元格标签。

1.3.表头table head单元格标签：< th >

• 也是单元格td，区别在于主要是用来加粗列名：

    <table>
        <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr>
        
        <tr> <td>one</td> <td>two</td> <td>three</td> </tr>
        <tr> <td>1</td> <td>2</td> <td>3</td> </tr>
    </table>

1.4.表格属性：table标签的属性

• 首先，表格的这部分属性在我们实际开发中不常用，后面通过CSS来控制样式。
• 

1.5.展示一下table标签的属性：

• 默认align是left：相对于table所在块，左对齐
  
• align="center"
  
• border="1"：每个单元格的边框。
  
• cellpadding="50"：单元格内容与单元格之间的距离。
  
• cellspacing="0"：单元格和单元格之间的间隙。
  

1.6.表格结构标签：

• 使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头和表格体两大部分。

• <thead>标签：表示整个表格头区域：主要是<th>表头（列名）单元格。

• <tbody>标签：表示表格的主题区域。

  

1.7.合并单元格

特殊情况下，可以把多个单元格合并为一个单元格，暂时在html中只需要会最简单的合并单元格即可。

1.合并单元格方式：

• 跨行合并：rowspan="行数"
• 跨列合并：colspan="列数"
  

2.目标单元格：

• 在目标单元格上写合并的代码；即以目标单元格为参照，进行合并单元格。
• 1.跨行：最上侧单元格为目标单元格，写合并代码。
• 2.跨列：最左侧单元格为目标单元格，写合并代码。
  

3.合并单元格三步曲：

• 1.先确定是跨行合并还是跨列合并。
• 2.找到目标单元格，写上合并代码，比如：<td colspan="2"></td>
• 3.删除多余的单元格：因为合并了，所以会产生多余的单元格。

2.列表标签

2.1.列表的介绍：

1.表格是用来显示数据的，那么列表就是用来布局的。

• 列表的最大特点就是整齐，整洁，有序，他作为布局会更加自由和方便。

• 根据使用场景不同，列表可以分为三大类：无序列表，有序列表和自定义列表。

  

2.2.无序列表：< ul >< /ul >

• <ul>标签表示HTML页面中项目的无序列表，列表项用<li>定义。

• 无序列表的基本语法格式如下：

      <p>无序列表</p>
      <ul>
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
      </ul>
  

  

• 注意：

  1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
  2.<ul></ul>中只能嵌套<li></li>，在<ul></ul>中输入其他标签或者文字的做法是不被允许的。
  3.<li></li>之间相当于一个容器，可以容纳任意元素。
  4.无序列表默认带有自己的样式属性，但在实际使用中，我们一般会用CSS设置。

2.3.有序列表：< ol >< /ol >

1.有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在HTML中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且<li>标签来定义列表项。

2.有序列表的基本语法格式如下：

    <p>有序列表</p>
    <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ol>

3.注意：

• 1.有序列表的各个列表项之间有顺序级别之分。
• 2.<ol></ol>中只能嵌套<li></li>，在<ol></ol>中输入其他标签或者文字的做法是不被允许的。
• 3.<li></li>之间相当于一个容器，可以容纳任意元素。
• 4.有序列表默认带有自己的样式属性，但在实际使用中，我们一般会用CSS设置。

2.4.自定义列表：< dl >< /dl >

1.介绍：自定义列表的使用场景：

• 自定义列表常用于对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号。
  
  2.基本语法：

    <dl>
        <dt>名词1</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
        <dd>名词解释3</dd>
        <dt>名词2</dt>
        <dd>名词解释1</dd>
        <dd>名词解释2</dd>
    </dl>

3.注意事项：

• 1.<dl></dl>里面只能包含<dt></dt>和<dd></dd>
• 2.<dt></dt>和<dd></dd>没有个数限制，里面可以放任何元素，一般是一个<dt></dt>对应多个<dd></dd>
• 3.<dt></dt>和<dd></dd>是并列关系。

3.表单标签

3.1.表单介绍：

1.现实中的表单，我们去银行办理信用卡时会填写表单：

2.网页中的表单：

3.为什么需要表单：

• 使用表单的目的就是为了收集用户信息：在网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

4.表单的3要素：

• 在HTML中，一个完整的表单通常由表单域，表单控件（也称为表单元素）和提示信息3个部分组成。
  

3.2.表单域：

1.表单域是一个包含表单元素元素的区域。
2.在HTML中，<form>标签用于定义表单域，以实现用户信息的手机和传递。
3.<form>会把它范围内的表单元素信息提交给服务器。
4.基本语法：

    <form action="url地址" method="GET" name="表单域名称">
        各种表单元素控件。
    </form>

5.常用属性：

3.3.表单控件（表单元素）之input输入表单

1.在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件，主要有以下三种：

• input输入表单元素
• select下拉表单元素
• textarea文本域元素

2.<input/>表单元素的type属性：

• type属性：根据不同的type属性，可以定义不同的input表单元素控件，比如文本字段，复选框，掩码后的文本控件，单选按钮，按钮等。

• type常见的属性值：

3.单选按钮和复选框：

 <form action="url地址" method="GET" name="表单域名称">
     各种表单元素控件。<br>
     性别：<input type="radio">女 <input type="radio">男 <input type="radio">人妖<br>
     爱好：<input type="checkbox">睡觉<input type="checkbox">吃饭<input type="checkbox">打豆豆
 </form>

• 注意：这里的<input type="radio">并没有实现单选的效果，我们还需要借助<input>表单元素的其他属性来实现。

4.<input>表单元的其他属性

• 1.name属性：为每个表单元素定义一个独一无二的名字。

  <input type="radio">如何实现单选，为每个<input type="radio">都加上一个name属性。因为提交到后台时，一个name只会对应一个值，所以为三个<input type="radio">加上同样的name属性值，就会起到单选的作用。

  <input type="radio" name="sex">女 <input type="radio" name="sex">男 <input type="radio" name="sex">人妖<br>

• 2.value：规定input表单元素的值。主要用在单选按钮和复选框，因为单选按钮和复选框不能输入值。

  用户名：<input type="text" value="请输入用户名">
  性别：<input type="radio" name="sex" value="female">女 <input type="radio" name="sex" value="male">男 <br>
  

  name和value是每个表单元素都有的属性值，主要给后台人员使用。

  name是表单元素的名字，要求单选按钮和复选框要有相同的name值。

• 3.checked属性主要针对于单选按钮和复选框，主要作用是一打开页面，就可以默认选中某个表单元素。

• 4.maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。

3.<input type="submit" value="免费注册">：定义一个提交所在表单域的表单元素按钮。

• 注意：变单元素input必须有name属性，元素值才会被提交。name值作为key
  
  4.<input type="reset" value="重置">：重置按钮，重置整个表单中的表单元素为初始值。

3.4.label标签：

1.使用场景：<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将鼠标光标选择到对应的表单元素上，用来增加用户体验。

2.代码：

    <label for="sex">男</label>
    <input type="radio" id="sex"/>

• 我点击"男"，就可以选中单选框。
• 建立连接：<label>标签的for属性应当与相关元素的id属性相同。

3.5.select下拉表单和textarea文本域元素

1.select下拉表单元素

• 使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间，可以使用<select>标签控件定义下拉列表。
• 语法：

      <select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        <option>选项4</option>
        <option>选项5</option>
    </select>
  

• 注意：
  1.<select>中至少包含一对<option>
  2.在<option>中定义selected="selected"时，当前项即为默认选中项。
  

2.textarea文本域元素

• 使用场景：当用户输入内容较多的情况下，刻意使用textarea标签。
• 属性：cols=每行中的字符数，rows=显示的行数；实际开发中不会使用这两个属性，都是用CSS来改变大小的。

  <form>
      今日反馈：
      <textarea cols="50" rows="5">大很多我还单身大蛇拿客户端去好哇</textarea>
  </form>