HTML标签2

辰羽

已于 2022-09-08 14:59:23 修改

阅读量249

点赞数

分类专栏： # 前端文章标签： html5

于 2022-04-15 18:20:39 首次发布

本文链接：https://blog.csdn.net/yuandfeng/article/details/124201038

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中表格、列表和表单的使用方法。包括表格的创建、表头、主体和页脚的设置，列表的有序、无序和定义列表的用法，以及表单的各种输入类型如文本、密码、电子邮件、文件等，还有复选框、单选框、下拉框和按钮等元素的应用。通过实例展示了如何创建交互式的HTML表单。

摘要由CSDN通过智能技术生成

Java知识点总结：想看的可以从这里进入

2.5、表格、列表

2.5.1、表格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
   <table border="1">
       <caption>标题</caption>
       <colgroup>
           <col span="2" style="background-color: aqua">	<!--横跨2列，更改背景颜色 -->
       </colgroup>
       <thead>
           <tr>
               <th>书籍</th>
               <th>价格</th>
               <th>作者</th>
           </tr>
       </thead>
       
       <tbody>
           <tr>
               <td>Java编程思想</td>
               <td>99</td>
               <th>**</th>
           </tr>  
           <tr>
               <td>代码大全</td>
               <td>88</td>
               <th>**</th>
           </tr>  
       </tbody>
       
       <tfoot>
           <tr>
               <th>脚注</th>
               <th>脚注</th>
               <th>脚注</th>
           </tr>
       </tfoot>
       
   </table>
    
</body>
</html>

在这里插入图片描述

2.5.2、列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!--    有序-->
    <ol>
        <li>Java</li>
        <li>Python</li>
        <li>C</li>
        <li>C++</li>
    </ol>
<!--无序-->
    <ul>
        <li>Java</li>
        <li>Python</li>
        <li>C</li>
        <li>C++</li>
    </ul>
<!--    定义列表-->
    <dl>
      <dt>Java</dt>
        <dd>面向对象编程</dd>
        <dd>使用广泛</dd>
      <dt>Python</dt>
        <dd>粘合剂</dd>
</dl>
</body>
</html>

在这里插入图片描述

2.6、表单

2.6.1、表单标签

在这里插入图片描述

2.6.2、内部标签

1、input

input 标签规定了用户可以在其中输入数据的输入字段。通过type属性的不同值来获得各种各样的 input 类标签

文本框text

在这里插入图片描述

密码框password
邮箱框email

在这里插入图片描述

网址框URL

在这里插入图片描述

数字框number

在这里插入图片描述

隐藏框hidden

在这里插入图片描述

选择框datalist
文件file

在这里插入图片描述

复选框checkbox
单选框radio
下拉框select
图片 image

在这里插入图片描述

滑块 range

在这里插入图片描述

按钮button
颜色选择器color

在这里插入图片描述

时间控件

在这里插入图片描述

重置

在这里插入图片描述

2、文本域

在这里插入图片描述

3、按钮

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <form action="" method="post" name="from1">
       请输入账号：<input type="text"/>    
       <br/>
       请输入密码：<input type="password"/> 
       <br/>
       请输入邮箱地址：<input type="email"/> 
       <br/>
       请输入网址：<input type="url"/> 
       <br/>
       请输入数字：<input type="number"/> 
       <br/>
       隐藏框：<input type="hidden" value="1" name="hidden"/> 
       <br/>
       可写可选择的下拉框：<input type="text" list="data" name="a">
                <datalist id="data">
                    <option>浙江</option>
                    <option>山东</option>
                </datalist> 
        <br/>
        文件：<input type="file"/> 
        <br/>
        爱好复选框：
        <input type="checkbox" value="basketball" name="hobby" />打篮球
        <input type="checkbox" value="football" name="hobby"/>踢足球
        <input type="checkbox" value="study" name="hobby"/>学校  
        <br/>
               
        性别单选框：
            男<input type="radio" name="sex" value="male"/>
            女<input type="radio" name="sex" value="female"/>
        
        <br/>
        请选择正确答案下拉框：
            <select name="111">
                <option>aa</option>
                <option>bb</option>
                <option>c</option>
            </select>
        <br/>
        图片按钮:<input type="image" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F12%2F07%2F4b2f458845644982c0bd413fbfdad91e.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652608388&t=66ce80f68a88f97a983c38bb0edc4614" height="30px" width="30px"/>
        <br/>
        滑块：0<input type="range" min="0" max="100" value="10"/>100 
        <br/>
        时间：<input type="time"/>
        <br/>
        文本域：
            <textarea cols="20" rows="20">文本域</textarea>
            <br/>
        按钮：<input type="button" value="提交"/>
        <input type="reset" value="重置">
   </form>
    
</body>
</html>