【web前端】第二天-HTML标签（下）

2022/1/11 23:35:24

编程Tag： 标签 web 表单 表格 元素 html 单元格 列表

本文主要是介绍【web前端】第二天-HTML标签（下），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录

目标

一、表格标签

二、列表标签

三、表单标签

四、案例——注册页面

五、查阅文档

目标

  • 能够书写表格
  • 能够写出无序列表
  • 能够写3~4个常用input表单类型
  • 能够写出下拉列表表单
  • 能够使用表单元素实现注册页面
  • 能够独立查阅W3C文档

一、表格标签

  • 表格的主要作用

主要用于显示，展示数据。

  • 表格的基本语法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的使用</title>
</head>
<body>
    <table align="center" border="2" cellspacing="2" cellpadding="2" width="50%">
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>张三</td><td>男</td><td>18</td></tr>
        <tr><td>李四</td><td>女</td><td>19</td></tr>
        <tr><td>王五</td><td>男</td><td>20</td></tr>
    </table>
</body>
</html>
  1. <table></table>是用于定义表格的标签。
  2. <tr></tr>是用于定义表格中的行，必须嵌套在<table></table>标签中。
  3. <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  4. 字母td指表格数据（table data），即数据单元格的内容。
  • 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分（table head的缩写）

  • 表格属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格的使用</title>
</head>
<body>
    <table>
        <tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>张三</td><td>男</td><td>18</td></tr>
        <tr><td>李四</td><td>女</td><td>19</td></tr>
        <tr><td>王五</td><td>男</td><td>20</td></tr>
    </table>
</body>
</html>

表格标签这部分属性我们实际上开发并不使用，后面通过css来设置

目的有两个：

  1. 记住这些单词，后面css用的到。
  2. 直观感受表格的外观形态。

属性名

属性值

描述

align

left、center、right

规定表格相对周围元素的对齐方式

border

1或者""

规定表格单元是否拥有边框，默认为""，表示没有边框

cellpadding

像素值

规定单元边沿与其内容之间的空白，默认1像素

cellspacing

像素值

规定单元格之间的空白，默认2像素

width

像素值或百分比

规定表格的宽度

  • 案例一——小说排行榜

成品演示：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小说排行榜</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0" cellpadding="0" width="500" height="249">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="down.jpg"></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="down.jpg"></td>
            <td>124</td>
            <td>675432</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="up.jpg"></td>
            <td>212</td>
            <td>7654</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>红楼梦</td>
            <td><img src="up.jpg"></td>
            <td>23</td>
            <td>75645</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="down.jpg"></td>
            <td>121</td>
            <td>7676</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="up.jpg"></td>
            <td>576576</td>
            <td>1231421</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="up.jpg"></td>
            <td>234</td>
            <td>7686</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
    </table>
</body>
</html>
  • 表格结构标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table align="center" border="1" cellspacing="0">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

在表格标签中，分别用：<thead>标签 表示表格的头部区域，<tbody>标签 表示表格的主体区域，这样可以更好的分清表格结构。

注意：

  1. <thead></thead>内部必须有<tr>标签。
  2. <tbody></tbody>用于放数据本体。
  3. 以上标签均放在<table></table>中。
  • 合并单元格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

  • 合并方式
    1. 跨行合并：rowspan="合并单元格的个数"
    2. 跨列合并：colspan="合并单元格的个数"
  • 目标单元格
    1. 跨行：最上侧单元格为目标单元格，写合并代码
    2. 跨列：最左侧单元格为目标单元格，写合并代码
  • 合并步骤
    1. 确定跨行还是跨列
    2. 找到目标单元格，确定合并数量
    3. 删除多余单元格

二、列表标签

  • 列表主要作用

列表就是用来布局的，最大的特点是整齐、有序，它作为布局会更加自由和方便。

  • 列表主要分类

列表可以分为三大类：无序列表、有序列表和自定义列表。

  • 无序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表</title>
</head>
<body>
    <h4>你的家庭成员有？</h4>
    <ul>
        <li>爸爸</li>
        <li>妈妈</li>
        <li>爷爷</li>
        <li>奶奶</li>
        <li>我</li>
    </ul>
</body>
</html>

<ul>标签表示HTML中项目的无序列表，一般会以项目符号呈现表项，而列表项使用<li>标签定义。

注意：

  1. 无序列表之间的数据是并列的。
  2. <ul></ul>中只可以嵌套<li></li>标签，嵌套其他的标签不可以。
  3. <li></li>中可以放任何元素，是一个容器。
  4. 无序列表会带有自己的样式属性，可以更改，但一般用css，无需自己更改。
  • 有序列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表</title>
</head>
<body>
    <h4>价格排行榜</h4>
    <ol>
        <li>a 10000</li>
        <li>b 1000</li>
        <li>c 100</li>
    </ol>
</body>
</html>

<ol>标签表示HTML中项目的有序列表。

注意：

  1. <ol></ol>中只能嵌套<li></li>标签，嵌套其他标签不可以。
  2. <li></li>中可以放任何元素，是一个容器。
  3. 有序列表会带有自己的样式属性，可以更改，但一般用css，无需自己更改。
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表</title>
</head>
<body>
    <dl>
        <dt>项目A</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
        <dt>项目B</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
    </dl>
</body>
</html>

<dl>标签表示HTML中项目的自定义列表，该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用。

注意：

  1. <dl></dl>里面只能包含<dt>和<dd>。
  2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

三、表单标签

  • 为什么需要表单

为了收集用户信息。

跟用户进行交互。

  • 表单的组成

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

  • 表单域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单域(了解)</title>
</head>
<body>
    <form action="demo.php" method="POST" name="name1">

    </form>
</body>
</html>

包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域。

<form>会把它范围内的表单元素信息提交给服务器。

常用属性：

属性

属性值

作用

action

url地址

用于指定接收并处理表单数据的服务器程序的url地址。

method

get/post

用于设置表单数据的提交方式，其值为get或者post。

name

名称

用于指定表单的名称，以区分同一个页面中的多个表单域。

  • 表单控件（表单元素）
    • 分类：
      • input输入表单元素
      • select下拉表单元素
      • textarea文本域元素
    • <input>表单元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷</title>
</head>
<body>
    <!-- 表单元素的使用 -->
    <form action="zhuce.php" method="post" name="注册表">
        <!-- text 输入内容 -->
        <!-- placeholder用于框内提示语 -->
        <!-- maxlength 规定可以输入的最大长度 -->
        用户名：<input type="text" name="username" placeholder="请输入用户名" maxlength="10"> <br />
        <!-- password 输入内容隐藏 -->
        密码：<input type="password" name="password" placeholder="请输入密码" maxlength="6"> <br />
        <!-- radio 单选按钮 -->
        <!-- 只有这里的radio元素拥有相同的name才能实现多选一 -->
        <!-- value 可以根据选择返回相应的值 -->
        <!-- checked 当页面打开时默认勾选的选项 -->
        性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女"> <br />
        <!-- checkbox 复选框 -->
        爱好：吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 打豆豆 <input type="checkbox" name="hobby" value="打豆豆"> <br />
        <!-- submit 提交信息 -->
        <input type="submit" name="submit" value="注册">
        <!-- reset 可以还原到初始默认状态 -->
        <input type="reset" name="reset" value="重新填写">
        <!-- button 普通按钮 后期结合JavaScript搭配使用 -->
        <input type="button" name="button" value="我是按钮"> <br />
        <!-- file 文件域 上传文件使用 -->
        上传头像：<input type="file" name="file">
        </form>
</body>
</html>

<input>标签用于收集用户信息。

在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式。

注意：

  1. <input />标签为单标签。
  2. type属性设置不同的属性值用来指定不同的控件类型。

type属性的属性值及其描述如下：

属性值

描述

button

定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。

checkbox

定义复选框。

file

定义输入字段和"浏览"按钮，供文件上传。

hidden

定义隐藏的输入字段。

image

定义图像形式的提交按钮。

password

定义密码字段，该字段中的字符被掩码。

radio

定义单选按钮（多选一）

reset

定义重置按钮，重置按钮会清除表单中的所有数据。

submit

定义提交按钮，提交按钮会把表单数据发送到服务端。

text

定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。

除了type外，还有其它一些属性：

属性

属性值

描述

name

由用户自定义

定义input元素的名称

value

有用户自定义

规定input元素的值

checked

checked

规定此input元素首次加载时应当被选中

maxlength

正整数

规定输入字段中的字符的最大长度

placeholder

由用户自定义

规定输入字段框内的提示语

  1. name和value是每个表单元素都有的属性值，主要给后台人员使用。
  2. name表单元素的名字，要求单选按钮和复选框要有相同的name值。
  3. checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。
  4. maxlength是用户可以在表单元素输入最大字符数，一般较少使用。
  • <label>标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>label标签的使用</title>
</head>
<body>
    <!-- 有了label标签，可以直接通过点字来进行输入 -->
    <form>
        <label for="username">用户名：</label><input type="text" id="username" placeholder="请输入用户名">
        <br />
        <label for="password">密码：</label><input type="password" id="password" placeholder="请输入密码">
        <br />
        <label for="男">男</label><input type="radio" id="男" name="sex" value="男">
        <label for="女">女</label><input type="radio" id="女" name="sex" value="女">
    </form>
</body>
</html>

<label>标签为input元素定义标注（标签）

<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

核心：<label>标签的for属性应当与相关元素的id属性相同。

  • <select>表单元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>select表单元素使用</title>
</head>
<body>
    <form>
        籍贯：
        <select>
            <option>安徽</option>
            <option>浙江</option>
            <option>江苏</option>
            <option selected="selected">请选择</option>
        </select>
    </form>
</body>
</html>

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

注意：

  1. <select>里面至少包含一对<option>。
  2. 在<option>中定义selected="selected"时，当前项即为默认选项。
  • <Textarea>表单元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>textarea文本域表单元素的使用</title>
</head>
<body>
    <form>
        反馈：
        <textarea name="textarea" id="textarea" rows="5" cols="50" placeholder="请输入内容"></textarea>
    </form>
</body>
</html>

使用场景：在用户输入内容较多的情况下，我们可以使用<textarea>标签。

在表单元素中，<textarea>标签是用于定义多行文本输入的控件。

四、案例——注册页面

  • 效果演示：

  • 代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
    <form>
        <table width="600">
            <h4>青春不常在，抓紧谈恋爱</h4>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="sex" value="nan" id="nan"><label for="nan"><img src="images/man.jpg">男</label>
                    <input type="radio" name="sex" value="nv" id="nv"><label for="nv"><img src="images/woman.jpg">女</label>
                </td>
            </tr>
            <tr>
                <td>生日</td>
                <td>
                    <select>
                        <option selected="selected">--请选择年--</option>
                        <option value="2001">2001</option>
                        <option value="2002">2002</option>
                        <option value="2003">2003</option>
                    </select>
                    <select>
                        <option selected="selected">--请选择月--</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                    <select>
                        <option selected="selected">--请选择日--</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>所在地区</td>
                <td>
                    <input type="text" placeholder="请输入地区">
                </td>
            </tr>
            <tr>
                <td>婚姻状况</td>
                <td>
                    <input type="radio" name="situation" value="未婚" id="未婚"><label for="未婚">未婚</label>
                    <input type="radio" name="situation" value="已婚" id="已婚"><label for="已婚">已婚</label>
                    <input type="radio" name="situation" value="离婚" id="离婚"><label for="离婚">离婚</label>
                </td>
            </tr>
            <tr>
                <td>学历</td>
                <td>
                    <select>
                        <option selected="selected">--请选择学历--</option>
                        <option value="小学">小学</option>
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="大学">大学</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>喜欢的类型</td>
                <td>
                    <input type="checkbox" name="love">妩媚的
                    <input type="checkbox" name="love">可爱的
                    <input type="checkbox" name="love">小鲜肉
                    <input type="checkbox" name="love">老腊肉
                    <input type="checkbox" name="love">都喜欢
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea name="text" placeholder="请输入内容"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="免费注册">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" name="1">我同意注册条款和会员加入标准
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <a href="#">我是会员，立即登录</a>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <h3>我承诺</h3>
                    <ul>
                        <li>年满18岁、单身</li> <br />
                        <li>抱着严谨的态度</li> <br />
                        <li>真诚寻找另一半</li> <br />
                    </ul>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

五、查阅文档

经常查阅文档是一个非常好的学习习惯。



这篇关于【web前端】第二天-HTML标签（下）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程