HTML学习归纳2

原创已于 2024-04-01 22:38:12 修改 · 570 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #html #前端

于 2024-03-28 09:43:31 首次发布

本文介绍了HTML中表格、表格元素、合并单元格、列表（有序/无序/自定义）、表单标签（如input、textarea、select等）的使用方法，包括表格结构、表头和内容的划分，以及常见表单控件如文本框、单选/多选框、下拉框等的属性设置和应用实例。

在HTML学习归纳1中，所有的标签都是针对文本进行的。但是只有文字是不够支撑起一个界面的。所以还需要去学习另一系列内容-有关表的标签。

一、表格标签

我们日常所见的表格需要我们在某行某列填写需要的内容。我们用<table><table>作为我们表格的大框架，随后可以<table><table>框架中添加行<tr></tr>，有了行我们只需要在<tr></tr>的内部添加<td></td>，就可以看到行内的元素了。

为了方便调试，可以对table进行一些设置，<table algin="center" border="1" cellpadding="0" cellspacing="0" width="500" height="600">

algin：表示表格在网页中显示的位置。border：边框。cellpadding和cellspacing的区别在于：cellpadding用于设置单元格内容与单元格边框之间的距离；cellspacing用于设置相邻单元格之间的距离。width 和 height 根据表格大小自己设置。

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
    <tr>
      <td> 商品名称</td>
      <td> 单价</td>
      <td> 个数</td>
      <td> 总价</td>
    </tr>
    <tr>
      <td> cola</td>
      <td> 3</td>
      <td> 3</td>
      <td> 9</td>
    </tr>
  </table>

为了使得代码更加有逻辑，看着更清晰，可以使用<thead></thead> 和 <tbody></tbody>将表头和内容分开。

  <table align="center" border="1" cellpadding="20" cellspacing="0" width="500">
    <thead>
      <tr>
        <td> 商品名称</td>
        <td> 单价</td>
        <td> 个数</td>
        <td> 总价</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> cola</td>
        <td> 3</td>
        <td> 3</td>
        <td> 9</td>
      </tr>
    </tbody>
  </table>

二、合并单元格

日常使用中，不是所有的表格都是规律的，我们可能会将某几个单元格进行合并。实践的一个规律是：跨列合并找左，跨行合并找上，再删除。上下之间的单元格行进行合并时，称作跨行合并。左右之间单元格的合并称作跨列合并。千万记住，合并之后，将不用的单元格删除。

colspan="跨列的个数"，rowspan="跨行的个数"

这里原本是一个3*3的列表，修改成如下形式（跑一下看一下，再去理解代码）。

  <table align="center" border="1" cellspacing="0">
    <tr>
      <td colspan="3">1</td>

    </tr>
    <tr>
      <td rowspan="2">4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>

      <td>8</td>
      <td>9</td>
    </tr>
  </table>

三、列表标签

列表主要分3类，有序列表，无序列表，自定义列表

1、有序列表

虽说是有序列表（<ol>+<li>）但只是在每一项前面默认添加了1，2，3...并没有自动排序。

  <ol>
    <li>1000</li>
    <li>1000000000</li>
    <li>55</li>
    <li>1</li>
  </ol>

2、无序列表

使用（<ul>+<li>）表达。

  <ul>
    <li>1、part1</li>
    <li>2、part2</li>
    <li>3、part3</li>
    <li>4、part4</li>
  </ul>

3、自定义列表

使用<dl><dt><dd>三级。dl时大框架，dt时最上方的大标题，dd是大标题下的子内容

  <dl>
    <dt>饭馆里面有什么</dt>
    <dd>辣子鸡</dd>
    <dd>烤鱼</dd>
    <dd>凉拌牛肉</dd>
  </dl>

四、表单标签

表单应该是比较常见的类型，用户的注册界面就是一个表单，现在是对包含的标签继续学习。

1、表单框架

首先知道表单的大框架是<form>,一般要对属性加以设置。其中的action属性用于指定后台的接受处理接口，不确定可以用#占位。method属性分为post和get，如果使用get在地址栏内会显示数据信息。

基本的样式如下：

<form action="#" method="post">
   
</form>

2、表单标签的通用性质

首先，绝大部分的表单标签的使用格式是下面的样式

<form action="#">
    
    <input type=" " name=" " value=" "><br>
    
</form>

因为表单主要是从用户获取信息，所以需要用户输入，所以最大的标签应该是input，其次我们拥有文本类的，单选类的，多选类的，所以需要type去选定。针对每一个小框，我们还可以给它起一个名字name，方便我们自己检查代码，同时对于单选和多选名字是必须的，让系统知道这是一个大任务下的选择框。最后是value，这里有两个用途：1、给文本一个默认提示语 2、让后台知道你选的是什么。

此外，还可以针对的使用checked="checked"，让某个勾选框默认选定。

3、具体的表单标签性质

讲完了表单标签的性质，现在复习常用的表单标签。根据日常使用，用的比较多的是：文本框，单选框，多选框，下拉框，确认框，文本域，提交框，密码框。

3.1文本框

  <form action="#">
    姓名：<input type="text" name="user_name">
  </form>

文本的使用还是相对容易的。

3.2文本域

还有一个和文本框很像的标签是文本域，<textarea>这个标签不使用input进行调用，拥有自己的独立标签。顾名思义文本域是一个较大的区域用于填写内容，因为是一个区域，所以我们可以设置区域的宽和长。

<form action="#">
    姓名：<input type="text" name="user_name"><br>
    自我介绍：<textarea name="introduce" width=100px height=30px cols="15" rows="5"></textarea>
</form>

同时使用cols和rows可以控制每行多少字符以及能看到几行。在实际写代码会发现，长宽设置和行列的设置存在一定的冲突，比如你要求文本域的height为30px，但你又要求显示5行文字，但每个文字的高不止6px，所以会有冲突。

3.3单选框

进行多选一的工作，所以需要让电脑知道你在对哪一类进行内容的选择，这里就需要我们为统一类（也就是多选一里的多）全部添加相同的名字。这里用性别举例

  <form action="#">
    姓名：<input type="text" name="user_name"><br>
    性别：<input type="radio" name="sex" value="nan">男
          <input type="radio" name="sex" value="nv">女<br>
    自我介绍：<textarea name="introduce" width=100px height=30px cols="15" rows="5"></textarea>
  </form>

3.4多选框

进行多选多的工作，这里一样需要让这一类具有相同名字。使用input下的checkbox，当多个checkbox拥有同一name，构成了多选框。

  <form action="#">
    姓名：<input type="text" name="user_name"><br>
    性别：<input type="radio" name="sex" value="nan">男<input type="radio" name="sex" value="nv">女<br>
    爱好：<input type="checkbox" name="hobby">健身
    <input type="checkbox" name="hobby">游泳
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">羽毛球
    <input type="checkbox" name="hobby">乒乓球
    <input type="checkbox" name="hobby" checked="checked">我都会<br>
    自我介绍：<textarea name="introduce" width=100px height=30px cols="15" rows="5"></textarea>
  </form>

这里我们可以使用checked="checked" 这一语句使得某一样成为默认勾选项。

3.5确认框

其实就是checkbox，如果只有一个，那么就实现确认功能。

  <form action="#">
    姓名：<input type="text" name="user_name"><br>
    性别：<input type="radio" name="sex" value="nan">男<input type="radio" name="sex" value="nv">女<br>
    爱好：<input type="checkbox" name="hobby">健身
    <input type="checkbox" name="hobby">游泳
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">羽毛球
    <input type="checkbox" name="hobby">乒乓球
    <input type="checkbox" name="hobby" checked="checked">我都会<br>
    自我介绍：<textarea name="introduce" cols="15" rows="5"></textarea><br>
    <input type="checkbox">我同意注册条款
  </form>

3.6下拉框

下拉框不属于input标签，它拥有自己的格式。select+option标签。

    出生月份：
    <select name="year">
      <option value="JAN">1</option>
      <option value="FEB">2</option>
      <option value="MAR">3</option>
      <option value="APR">4</option>
      <option value="MAY">5</option>
    </select><br>

3.7提交框

使用input调用，可以使用value改变提交框内的值

 <input type="submit" name="submit" value="立即注册">

3.8密码框

看不到内部输入的内容，自动加密。使用input调用即可

密码：<input type="password" name="user_password"><br>

使用刚才的这些就可以做一个基本的框架

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
</head>

<body>
  <form action="#">
    姓名：<input type="text" name="user_name"><br>
    性别：<input type="radio" name="sex" value="nan">男<input type="radio" name="sex" value="nv">女<br>
    密码：<input type="password" name="user_password"><br>
    出生月份：
    <select name="year">
      <option value="JAN">1</option>
      <option value="FEB">2</option>
      <option value="MAR">3</option>
      <option value="APR">4</option>
      <option value="MAY">5</option>
    </select><br>
    爱好：<input type="checkbox" name="hobby">健身
    <input type="checkbox" name="hobby">游泳
    <input type="checkbox" name="hobby">篮球
    <input type="checkbox" name="hobby">羽毛球
    <input type="checkbox" name="hobby">乒乓球
    <input type="checkbox" name="hobby" checked="checked">我都会<br>
    自我介绍：<textarea name="introduce" cols="15" rows="5"></textarea><br>
    <input type="checkbox">我同意注册条款<br>
    <input type="submit" name="submit" value="立即注册">
  </form>
</body>

剩下的可以自己去使用<input type="">去调用查看。