HTML第二天

一、表格

1.主要作用：

以行、列的方式整齐地展示数据。

2. 基本语法：

<table> 
   <tr>
      <td>单元格内容</td>
      ...重复td
   </tr>
   ...重复tr
</table>

3.表格标签

01.表格基本标签：

<table> 表格标签，用于包含多个<tr>;
<tr> 定义表格中的行，用于包含多个<td>;
<td> 定义表格中的单元格，用于存放单元格内容;
注 ：<td>标签是用来存放单元格数据的：<table> 和<tr>是用来搭建表格结构的，不能存放内容。

02.表头单元格标签 <th>：

作用：在大多数表格中，第一行通常用来显示标题而不是实际数据，为了方便用户阅读和理解下方表格的含义。<th>中的内容会被加粗并且居中显示。

03.表格结构标签

<thead> 定义表格的头部（标题行），必须拥有<tr>标签，一般位于第一行；
<tbody> 定义表格的主体，通常包含标题下方的表格数据区域
注：表格结构标签是不能存放单元格内容的，只是用来区分标题行和数据区域。

4.表格属性

属性名	属性值	描述
align	Left、center、right	对齐方式
border	宽度像素值或 " "	表格边框，默认无边框
width	像素值	宽度
height	像素值	高度
cellspacing	像素值	单元格之间的距离
cellpadding	像素值	内容和边框之间的距离

5.合并单元格

给单元格<td>添加，添加完后删除多余单元格。
跨行合并 rowspan =”合并单元格个数” (纵向) 最上侧单元格为目标单元格；
跨列合并 colspan =”合并单元格个数” (横向) 最左侧单元格为目标单元格。

二、 三种列表

列表的主要作用是用来布局，可以整齐、有序的展示数据。

1.无序列表

   <ul> 
       <li>内容</li>
       <li>内容</li>
       <li>内容</li>
           ......
   </ul>

注： <ul>只能包含<li>标签

2.有序列表

<ol>
    <li>内容</li>
    <li>内容</li>
    ...
</ol>

3.自定义列表

<dl>
     <dt></dt>
     <dd></dd>
     <dd></dd>
       ......
</dl>

<dl>只能包含<dt>和<dd>标签
<dt>存放关键字
<dd>存放前面<dt>关键词对应的列表项内容
注：虽然<dl>可以包含多个<dt>,但实际开发中只包含一个<dt>.

三、表单

表单分为三部分：表单域、表单控件、提示信息

1、表单域 <form>

  <form  >
      表单控件
  </form>

表单域属性：

属性	属性值	作用
action	URL地址	用于指定接收并处理表单数据的服务器程序的 URL 地址
method	GET/POST	用于设置表单数据的提交方式，取值为GET、POST等
name	名称	用于指定表单名称，用以区分同一页面的多个表单域

2、表单控件

表单控件分为：<input> 输入 、<select> 选择、<textarea> 文本域

2.1、<input>输入

<input>标签的属性: type、name、value、checked、maxlength

<input>标签基本语法：

<input type=”属性值” />

<input>标签type常用属性值：

属性值	描述
text	输入文本
password	密码
radio	单选框
checkbox	复选框
file	上传文件
button	普通按钮
submit	提交把数据发送给服务器
reset	重置，清空数据

例：

<form >
       用户名:<input type="text"><br>
       密&emsp;码: <input type="password"><br>
       性别：
        <input type="radio" name="sex" value="女">女
        <input type="radio" name="sex" value="男">男<br>
       爱好：
        <input type="checkbox" name="hobby" value="打代码" checked>打代码<!--checked 默认选中 -->
        <input type="checkbox" name="hobby" value="爬山">爬山
        <input type="checkbox" name="hobby" value="下海">下海<br>
       上传头像：
        <input type="file"><!-- 文件域 --> <br>
       籍贯：
        <select name="" id="">
            <option value="土星" selected>土星</option><!--selected默认选中 -->
            <option value="木星">木星</option>
            <option value="火星">火星</option>
        </select><br>
        <input type="button" value="搜索">
        <input type="submit" value="登录">
        <input type="reset" value="重新填写">
</form>

<label>标签
可以和表单中的元素绑定，增加点击范围，提高用户体验
例1：

性别：
<label><input type="radio" name="sex" value="女">女</label>
<label><input type="radio" name="sex" value="男">男</label>

例2

性别：
<input type="radio" name="sex" value="女" id=”nv”><label for=”nv”>女</label>
<input type="radio" name="sex" value="男" id=”nan”><label for=”nan”>男</label>

2.2、<select>下拉表单

<select>
   <option>选项1</option>
   <option>选项2</option>
   <option>选项3</option>
      ......
</select>

2.3 <textarea> 文本域标签

 <textarea cols=”30” rows=”10” >   </textarea>