欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML（2/2）

程序员文章站 2022-05-15 20:54:39
...

HTML第二天目标

能够利用表格、列表和表单完成注册页面的综合案例
能出说表格用来做什么的
能说出列表用来做什么的
能说出表单用来做什么的
HTML（2/2）

表格

表格现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。
HTML（2/2）
表格中只有行标签与单元格

表格属性

HTML（2/2）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 
</head>
<body>
 <!-- 表格没有列的概念，由table tr（行） td(列)组成-->
 <!-- 表格属性border：边框  width height align
 (设置表格在网页中的水平对齐方式)cellspacing单元格之间的间距（默认2），cellpadding单元格与单元内容间的间距（默认1） -->
 <table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="10">
  <caption>我是表格标题</caption>
  <!-- 表头单元格标签，一般作用雨第一行或者第一列，用th 代替相应的td,使文本居中加粗 -->
  <tr> 
  <th>姓名</th>
  <th>年龄</th>
  <th>性别</th>
  </tr>
  <tr> 
  <td>姓名</td>
  <td>年龄</td>
  <td>性别</td>
  </tr>
  <tr> 
  <td>张三</td>
  <td>18</td>
  <td>男</td>
  </tr>
  <tr> 
  <td>里斯</td>
  <td>19</td>
  <td>男</td>
  </tr>
 </table>
</body>
</html>

合并单元格的两种方式

1.跨行合并 rowspan=“合并单元格的个数”
2.跨列合并 colspan=“合并单元格的个数”
HTML（2/2）合并单元格的步骤：
1.先确定是跨行合并还是跨列合并
2.按照从上到下或者从左到右找到要合并的单元格，写上合并方式以及合并的个数
3.删掉多余的单元格

表格划分

标签 thead用于定义表格的头部。用来放标题之类的东西。thead内部必须拥有tr标签！
tbody用于tbody定义表格的主体。放数据本体 。
tfoot放表格的脚注之类。
以上标签都是放到table标签中。

列表

表格是用来显示数据的，那么列表就是用来布局的。 因为非常整齐和*
容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表。
列表最大的特点就是 整齐 、整洁、 有序，跟表格类似，但是他可组合*度会更高。
列表分为三种：
1.无序列表

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

2.有序列表

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

3.自定义列表
自定义列表常用于对术语或名词进行解释和描述

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

上课自己写的代码例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>列表</title>
</head>
<body>
 <h2>1.无序列表</h2>
 <!-- 无序列表没有顺序，ul里面有且只有li,li只是个容器可以放所有东西 -->
 你喜欢的水果是什么，
 <ul>
  <li>
   香蕉
  </li>
  <li>
   苹果
  </li>
  <li>
   草莓
  </li>
 </ul>
 <h2>2.有序列表</h2>
 <!-- 有序列表有顺序，ol里面有且只有li,li只是个容器可以放所有东西 -->
 奥运金牌榜
 <ol>
  <li>
   美国
  </li>
  <li>
   英国
  </li>
  <li>
   中国
  </li>
 </ol>
 <h2>3.自定义列表</h2>
 <!-- 自定义列表用于对名词的解释和描述，dt+名词，dd+解释 -->
 地区，
 <dl>
  <dt>中国</dt>
  <dd>llll</dd>
  <dd>569</dd>
  <dt>美国</dt>
  <dd>l6l</dd>
  <dd>569</dd>
 </dl>
</body>
</html>

表单

表单目的是为了收集用户信息。在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。
表单通常由表单控件提示信息和表单域三部分组成
HTML（2/2）

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息： 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件

HTML（2/2）

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>表单</title>
</head>
<body>
 <!-- form 里面的是表单域 action是提交的地址 -->
 <!-- method 有get post 有两种提交方式 -->
 <form action="" method="post" name="">
  <!-- type=text  文本框  value：默认的文本值 name可以让后台区分出不同的表单
  可自定义输入 -->
 用户名：<input type="text" name="user" value="请输入用户名"><br />
 昵称：<input type="text" name="昵称" value="请输入用户名"><br />
 <!-- type=password  密码框 -->
 密码：<input type="password" name="pass"><br>
 <!-- type=radio  单选框   通过相同的name使得只可以选一个 -->
 <!-- checked表示默认选中 -->
 性别： 男<input type="radio" name="sex" checked="checked">
      女<input type="radio" name="sex"><br>
 <!-- type =checkbox  复选框 -->
 爱好：
  睡觉<input type="checkbox" name="aihao">
  也是睡觉<input type="checkbox" name="aihao"><br>
 <!-- type file 文件与上传文件 -->
 上传头像：<input type="file" name=""><br>
 <!-- type button 普通按钮 submit提交按钮  reset重置按钮 -->
 <input type="button" name="" value="这是一个普通按钮 "><br>
 <input type="submit" name="" value="这是一个提交按钮 "><br>
 <input type="reset" name="" value="这是一个重置按钮 "><br>
 <!-- type image  图片形式的按钮 -->
 <input type="image" src="btn.png" name="">
 </form>
</body>
</html>

label标签

可以提高用户体验，当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面
有两种方法可以实现：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <h3>label第一种用法，直接包含表单</h3>
 <label>
  用户名：<input type="text" name="user" value="请输入用户名">
 </label><br />
 <h3>第二种方法通过for和id</h3>
 <label for="昵称">昵称：</label>
 <input type="text" name="昵称" value="请输入用户名" id="昵称"><br />
</body>
</html>

文本域

文本域与text不同的是文本域可以实现输入多行文本，类似留言板

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>文本域</title>
</head>
<body>
 <!-- 实际开发不用cols rows 与txt的区别是文本域可以显示多行文本 -->
 留言板：<textarea cols="100" rows="5"></textarea>
 
</body>
</html>

select下拉列表

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <!-- 开发用的不多 -->
 国家：
 <select>
  <!-- selected="selected表示默认选中项，否则第一个 -->
  <option selected="selected">请选择国家</option>
  <option>中国</option>
  <option>美国</option>
  <option>英国</option>
  <option>法国</option>
 </select>
</body>
</html>

form表单域

在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

method有 post与get两种

最终小案例

写了一个注册页面，代码不难

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>世纪佳缘</title>
</head>
<body>
 <table border="0" width="600" align="center">
  <caption><h4>青春不常在抓紧谈恋爱</h4></caption>
  <tr height="40">
   <td>性别</td>
   <td>
    <input type="radio" name="sex"><img src="images/man.jpg" />男
    <input type="radio" name="sex"><img src="images/women.jpg" />女
   </td>
  </tr>
  <tr height="40">
   <td>
    生日
   </td>
   <td>
    <select>
     <option>请选择年</option>
     <option>1997</option>
     <option>1998</option>
    </select>
    <select>
     <option>请选择月</option>
     <option>1997</option>
     <option>1998</option>
    </select>
    <select>
     <option>请选择日</option>
     <option>1997</option>
     <option>1998</option>
    </select>
   </td>
  </tr>
  <tr height="40">
   <td>所在地区</td>
   <td>
    <input type="txt" name="area" value="北京">
   </td>
  </tr>
  <tr height="40">
   <td>婚姻状况</td>
   <td>
    <input type="radio" name="hunyin">未婚
    <input type="radio" name="hunyin">离异
    <input type="radio" name="hunyin">丧偶
   </td>
  </tr>
  <tr height="40">
   <td>学历</td>
   <td>
    <input type="txt" name="xueli" value="">
   </td>
  </tr>
  <tr height="40">
   <td>月薪</td>
   <td>
    <input type="txt" name="yuexin" value="">
   </td>
  </tr>
  <tr height="40">
   <td>手机号</td>
   <td>
    <input type="txt" name="phone" value="">
   </td>
  </tr>
  <tr height="40">
   <td>喜欢的类型</td>
   <td>
    <input type="checkbox" name="leixing">妩媚
    <input type="checkbox" name="leixing">甜美
    <input type="checkbox" name="leixing">御姐
   </td>
  </tr>
  <tr height="40">
   <td>自我介绍</td>
   <td>
    <textarea ></textarea>
   </td>
  </tr>
  <tr height="40">
   <td></td>
   <td>
    <input type="image" src="images/btn(1).png">
   </td>
  </tr>
  <tr height="40">
   <td></td>
   <td>
    <input type="radio" checked="checked">
    <a href="#" target="_self">我同意注册条款和会员加入标准</a>
   </td>
  </tr>
  <tr height="40">
            <td></td>
            <td>
                <a href="login.html" target="_blank">我是会员，立即登录</a>
            </td>
        </tr>
        <tr height="40">
            <td></td>
            <td>
                <h3> 我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
 </table>
 
</body>
</html>
相关标签： 我的前端小白之路

上一篇： 离线安装MySQL缺少libaio.so.1文件——并离线安装libaio.so.1

下一篇： 基于DragonBord410C的智能遥控

推荐阅读