20课：HTML基础-15679

技术分享 · 2025-5-28 11:20:13

一、课程标题：HTML基础

二、课程内容：HTML语言
前端语言，打开F12可以直接显示
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
HTML 段落是通过标签 <p> 来定义的。
HTML 链接是通过标签 <a> 来定义的。
HTML 图像是通过标签 <img> 来定义的.

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子：

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<label> 元素用于为表单元素添加标签，提高可访问性。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项
WEB渗透测试工程师系统班
2
5
0303
期
第20节课作业

1. 什么是HTML？
HTML（HyperText Markup Language，超文本标记语言）是用于创建和设计网页的标准标记语言。它通过一系列标签（tags）定义网页的结构和内容，是构建互联网的基础技术之一。
2. HTML和CSS、JavaScript的区别、联系是什么？
HTML：骨架（定义内容结构）。
CSS：外观（控制颜色、布局等样式）。
JavaScript：行为（实现动态交互，如点击事件）。
3.按下图所示编写HTML前端代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册表单</title>
<style>
      body {
         font-family: Arial, sans-serif;
         max-width: 500px;
         margin: 0 auto;
         padding: 20px;
      }
      .form-group {
         margin-bottom: 15px;
      }
      label {
         display: block;
         margin-bottom: 5px;
         font-weight: bold;
      }
      input[type="text"],
      input[type="password"],
      input[type="email"],
      textarea {
         width: 100%;
         padding: 8px;
         border: 1px solid #ddd;
         border-radius: 4px;
         box-sizing: border-box;
      }
      textarea {
         height: 100px;
      }
      .radio-group, .checkbox-group {
         margin: 10px 0;
      }
      .radio-group label, .checkbox-group label {
         display: inline-block;
         font-weight: normal;
         margin-right: 15px;
      }
      .submit-btn {
         background-color: #4CAF50;
         color: white;
         padding: 10px 15px;
         border: none;
         border-radius: 4px;
         cursor: pointer;
         font-size: 16px;
      }
      .submit-btn:hover {
         background-color: #45a049;
      }
      .file-upload {
         margin-top: 5px;
      }
</style>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
      <div class="form-group">
         <label for="nickname">昵称：</label>
         <input type="text" id="nickname" name="nickname" required>
      </div>

      <div class="form-group">
         <label for="password">密码：</label>
         <input type="password" id="password" name="password" required>
      </div>

      <div class="form-group">
         <label for="email">邮箱：</label>
         <input type="email" id="email" name="email" required>
      </div>

      <div class="form-group">
         <label>性别：</label>
         <div class="radio-group">
            <label><input type="radio" name="gender" value="male" checked> 男</label>
            <label><input type="radio" name="gender" value="female"> 女</label>
         </div>
      </div>

      <div class="form-group">
         <label>爱好：</label>
         <div class="checkbox-group">
            <label><input type="checkbox" name="hobby" value="travel"> 旅游</label>
            <label><input type="checkbox" name="hobby" value="photography"> 摄影</label>
            <label><input type="checkbox" name="hobby" value="sports"> 运动</label>
         </div>
      </div>

      <div class="form-group">
         <label for="bio">个人简介：</label>
         <textarea id="bio" name="bio"></textarea>
      </div>

      <div class="form-group">
         <label>上传个人照片：</label>
         <div class="file-upload">
            <input type="file" id="photo" name="photo">
            <span>未选择任何文件</span>
         </div>
      </div>

      <div class="form-group">
         <button type="submit" class="submit-btn">立即提交</button>
      </div>
</form>
</body>
</html>

		自动登录	找回密码
密码			立即注册

分享 20课：HTML基础-15679

免责声明：