|
WEB渗透测试工程师系统班250303期 第20节课作业 1. 什么是HTML？ HTML（HyperText Markup Language，超文本标记语言）是用于创建和设计网页的标准标记语言。它通过一系列标签（Tags）定义网页的结构和内容，并允许嵌入图片、链接、表格、表单等元素。
2. HTML和CSS、JavaScript的区别、联系是什么？ HTML、CSS 和 JavaScript 是前端开发的三大核心技术，它们分别负责结构、样式和交互，共同构建现代网页。 一. 核心职责对比 技术 作用 示例 类比（盖房子） HTML 定义网页的结构和内容 <h1>标题</h1>、<p>段落</p> 房子的钢筋、砖块 CSS 控制网页的样式和布局 color: red;、margin: 10px; 房子的油漆、装修 JavaScript 实现网页的动态行为和交互 alert('Hello')、表单验证 房子的电器、智能系统 二. 区别详解 1.HTML（结构） 静态：仅描述内容，无法直接改变样式或行为。 标签驱动：通过标签（如 <div>、<img>）组织内容。 基础骨架：没有 HTML，CSS 和 JavaScript 无法附着。 2.CSS（样式） 美化页面：控制颜色、字体、间距、动画等。 选择器：通过类（.class）、ID（#id）或标签名定位 HTML 元素。 响应式设计：通过媒体查询适配不同设备（如手机、电脑）。 3.JavaScript（行为） 动态功能：处理用户输入、数据请求、DOM 操作等。 事件驱动：监听点击、滚动等事件（如 onclick）。 跨平台：不仅用于浏览器，还可通过 Node.js 运行在服务端。
三. 联系与协作 1.HTML 是基础 CSS 和 JavaScript 需要依赖 HTML 的标签来定位元素（如通过 id 或 class）。 2.CSS 依赖 HTML 通过选择器修改 HTML 元素的样式： html <p class="text">Hello</p> <style> .text { color: blue; } </style> 3.JavaScript 操作 HTML 和 CSS 动态修改内容或样式： javascript document.querySelector(".text").style.color = "red"; 4.三者协同示例 html <button id="btn">点击我</button> <style> #btn { background: black; color: white; } </style> <script> document.getElementById("btn").onclick = function() { alert("按钮被点击了！"); }; </script>
3. 按下图所示编写HTML前端代码 原码： <form action="/" method="post"> <!-- 文本输入框 --> <label for="name">昵称:</label> <input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 --> <label for="password">密码:</label> <input type="password" id="password" name="password" required>
<br>
<!-- 邮箱输入框 --> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <!-- 下拉列表 --> <select id="email" name="email"> <option value="qq.com">qq.com</option> <option value="163.com">163.com</option> <option value="sohu.com">sohu.com</option> </select>
<br>
<!-- 单选按钮 --> <label>性别:</label> <input type="radio" id="male" name="gender" value="male" checked> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label>
<br>
<!-- 爱好复选框组 --> 爱好: <input type="checkbox" id="hobby_travel" name="hobby" value="旅游"> <label for="hobby_travel">旅游</label>
<input type="checkbox" id="hobby_photo" name="hobby" value="摄影"> <label for="hobby_photo">摄影</label>
<input type="checkbox" id="hobby_sports" name="hobby" value="运动"> <label for="hobby_sports">运动</label>
<br>
个人简介:
<br>
<textarea rows="3" cols="38"> </textarea>
<br>
上传个人照片:
<br>
<input type="button" value="选择文件"> 未选择任何文件
<hr>
<!-- 提交按钮 --> <input type="submit" value="立即提交"> </form>
一、笔记标题：WEB渗透系统班-HTML基础(上)&HTML基础(下)
二、文章内容：
第1. 课程内容概要（简要概括本次课程的主要内容，不需要太详细，但要能快速回忆起本节课的知识点）
主要知识点1：HTML简介 <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。 <title> 元素描述了文档的标题 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落 HTML基础四个实例 1.标题：HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的 2.段落：HTML 段落是通过标签 <p> 来定义的。 3.链接：HTML 链接是通过标签 <a> 来定义的。 4.图像：HTML 图像是通过标签 <img> 来定义的.
主要知识点2：HTML详解 1.HTML元素 语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 2.HTML属性 属性是 HTML 元素提供的附加信息。 属性通常出现在 HTML 标签的开始标签中，用于定义元素的行为、样式、内容或其他特性。 属性总是以 name="value" 的形式写在标签内，name 是属性的名称，value 是属性的值。 3.HTML标题 <hr> 标签在 HTML 页面中创建水平线。 4.HTML段落 如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签： 5.HTML文本格式化 6.HTML 链接 HTML 链接（Anchor）是网页之间跳转的核心部分。 HTML 使用链接与网络上的另一个文档相连。 HTML中的链接是一种用于在不同网页之间导航的元素。 链接通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。 链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。 HTML 链接 通过 <a> 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。 实例： <a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p> <p><a href="https://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p> 7.HTML头部 8.HTML CSS 9.HTML图像 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。 <img src="boat.gif" alt="Big Boat">
主要知识点3：HTML表单 1.用户密码 2.单选 3.复选框 4.下拉列表 5.提交按钮
第2.重点知识与细节
概念解析 概念1： HTML 概念2：元素 概念3：属性 关键步骤 步骤1：暂无
第3.实操练习 和 解析（记录自己实操练习时的思路、解法，以及自己遇到的困难）
见作业，主要是对新概念的理解以及表单的搭建
第4.个人总结
本节课最大的收获是：初步学习了解HTML 仍然存在疑问的地方：暂无 需要课后深入学习的内容：各种场景，HTML关于漏洞方面的知识
| 
