HTML基础教程：结构、标签与表单-CSDN博客

本文链接：https://blog.csdn.net/qq_62292176/article/details/124169350

本文介绍了HTML的基础知识，包括结构代码、常见HTML标签如列表和表格，重点讲解了表单标签的使用，如文本输入、选择框、按钮等，以及表单的属性设置如action和method，帮助初学者理解HTML的基本构成和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

超文本标记语言

1.结构代码

<!DOCTYPE html>//文档申明
<html>
    <head>//页头
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>//页身
        网页显示内容
    </body>
</html>

<!--文档声明：html5-->
<!DOCTYPE html>
<!--当前网页的语言是英文，默认不指定是中文=》lang="zh"-->
<html lang=en>
    <head>
        <!--指定网页的编码格式-->
        <meta charset="UTF-8">
        <!--在移动设备浏览网页时，网页不缩放-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--在ie浏览器浏览网页时，使用ie最高版本-->
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        </head>
        <body>
            <!--html语言里的注释快捷键 ：windows：ctrl+/；mac：cmd+/-->
            hello
        </body>
        </html>

2.常见的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>
    <!-- 双标签 -->
    <h1>我是第一级标题</h1>
    <h6>六级标题</h6>
    <div>容器标签</div>
    <P>段落标签</P>
    <!-- 单标签 -->
    <hr>
    <img src="D:\photo\61603884b1db4185bb2202fbf9c7d155.png" alt="图片加载失败会显示">
    <br>
    <hr>
    <!-- 带有属性标签 -->
    <a href="https://www.baidu.com">百度</a>
    <!-- 标签可以嵌套，但不能交叉嵌套 -->
    <div>
        <p>段落标签</p>
    </div>
</body>
</html>

3.资源路径

1.相对路径：从当前目录算起的路径

2.绝对路径：从根目录算起的路径

3.资源路径一般会使用相对路径，更加方便和通用，绝对路径在把工程拷贝给别人以后可能出现资源找不到的问题

4.列表标签

1.列表标签的种类

无序列表标签

有序列表标签

<!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>
     <!--无序列表 -->
     <ul><li>苹果</li>
        <li>鸭梨</li>
     </ul>
     <!-- 有序列表 -->
     <ol>
         <li>first</li>
         <li>second</li>
     </ol>
</body>
</html>

5.表格标签

1.表格的结构

表格是由行和列组成，好比一个excel文件

<!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>
    <!-- border-collapse: collapse 表示表格变线进行合并 -->
    <table style="border: 1px solid black; border-collapse: collapse;">
        <tr>
            <th style="border: 1px solid black;">name</th>
            <th style="border: 1px solid black;">age</th>
        </tr>
        <tr>
            <td style="border: 1px solid black;">zhangsan</td>
            <td style="border: 1px solid black;">22</td>
        </tr>
    </table>
</body>
</html>

6.表单标签

1.表单介绍

表单用于搜集不同类型用户输入（用户输入的数据），然后可以把用户数据提交到web服务器。

2.表单相关标签的使用

1）标签表示表单标签，定义整体表单区域

2）标签表示表单元素的文字标注标签，定义文字标注

3）标签表示表单元素的用户输入标签，定义不同类型的用户输入数据方式

type属性

type=“text”定义单行文本输入框
type=“password”定义密码输入框
type=“radio”定义单选框
type=“checkbox”定义复选框
type=“file”定义上传文件
type=“submit”定义提交按钮
type=“reset”定义重置按钮
type=“button”定义一个普通按钮

4.标签表示表单元素的多行文本输入框标签定义多行文本输入框

5.标签表示表单元素的下拉列表标签定义下拉列表和配合，定义下拉列表中的选项

<!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>
    <!-- 把数据提交给web服务器需要使用表单标签 -->
    <form>
        <p>
            <!-- 根据id名给指定id的标签设置光标 -->
            <label for="name">用户名：</label>
            <input type="text" id="name">
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="text" id="password">
        </p>
        <p>
            <label>性别：</label>
            <input type="radio">男
            <input type="radio">女
        </p>
        <p>
            <label>爱好：</label>
            <input type="checkbox">打游戏
            <input type="checkbox">睡觉
            <input type="checkbox">学习
        </p>
        <p>
            <label>玉照：</label>
            <input type="file">
        <p>
            <label>个人描述：</label>
            <textarea></textarea>
        </p>
        <p>
            <label>籍贯：</label>
            <select>
                <option>北京</option>
                <option>上海</option>
                <option>深圳</option>
                <option>成都</option>
                <option>贵阳</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="submit" value="重置">
            <input type="button" value="按钮">
        </p>
    </form>
</body>
</html>

7.表单提交

1.表单属性设置

action属性设置表单数据提交地址
method属性设置表单提交方式，一般有“GET”方式和“POST”方式，不区分大小写

2.表单元素属性设置

name属性设置表单元素名称，该名称是提交数据时的参数名
value属性设置表单元素的值，该值是提交数据时参数名所对应的值

<!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>
    <!-- 把数据提交给web服务器需要使用表单标签 -->
    <!-- <form action="https://www.baidu.com" method="get">
        get方式提交数据到web服务器以地址栏的方式提交给服务器，不安全，
        能看到提交的数据严谨的来说时以查询参数的方式提交给web服务器 -->
    <form action="https://www.baidu.com" method="post">
        <!-- post方式提交数据表单数据会放到请求体里面 -->
        <p>
            <!-- 根据id名给指定id的标签设置光标 -->
            <label for="name">用户名：</label>
            <input type="text" id="name" name="username">
        </p>
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="sex" value="0">男
            <input type="radio" name="sex" value="1">女
        </p>
        <p>
            <label>爱好：</label>
            <input type="checkbox" name="hoby" value="打游戏">打游戏
            <input type="checkbox" name="hoby" value="睡觉">睡觉
            <input type="checkbox" name="hoby" value="学习">学习
        </p>
        <p>
            <label>玉照：</label>
            <input type="file" name="photo">
        <p>
            <label>个人描述：</label>
            <textarea name="intrduction"></textarea>
        </p>
        <p>
            <label>籍贯：</label>
            <select name="position">
                <option value="1">北京</option>
                <option value="2">上海</option>
                <option value="3">深圳</option>
                <option value="3">成都</option>
                <option value="4">贵阳</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="submit" value="重置">
            <input type="button" value="按钮">
        </p>
        <!-- get和post方式提交表单数据都以http协议的方式提交数据给web服务器 -->
    </form>
</body>
</html>