20250303 Web渗透系统班第二十课樊子健

技术分享 · 2025-4-27 23:31:19

HTML基础

HTML

标签

元素：位于开始和结束标签之间的参数

属性

属性：位于开始标签⾥⾯的参数

属性名

适⽤元素

说明

id

所有元素

为元素指定唯⼀的标识符。

class

所有元素

为元素指定⼀个或多个类名，⽤于

CSS

或

JavaScript

选择。

style

所有元素

直接在元素上应⽤

CSS

样式。

title

所有元素

为元素提供额外的提示信息，通常在⿏标悬停时

显示。

data-*

所有元素

⽤于存储⾃定义数据，通常通过

JavaScript

访

问。

href

<a>

,

<link>

指定链接的⽬标

URL

。

src

<img>

,

,

指定外部资源（如图⽚、脚本、框架）的

URL

。

alt

<img>

为图像提供替代⽂本，当图像⽆法显示时显示。

type

<input>

,

指定输⼊控件的类型（如

text

,

password

,

checkbox

等）。

value

<input>

,

,

指定元素的初始值。

disabled

表单元素

禁⽤元素，使其不可交互。

checked

,

指定复选框或单选按钮是否被选中。

placeholder

<input>

,

在输⼊框中显示提示⽂本。

target

<a>

,

<form>

指定链接或表单提交的⽬标窗⼝或框架（如

_blank

表示新标签⻚）。

readonly

表单元素

使输⼊框只读。

required

表单元素

指定输⼊字段为必填项。

autoplay

<audio>

,

<video>

⾃动播放媒体。

onclick

所有元素

当⽤户点击元素时触发

JavaScript

事件。

onmouseover

所有元素

当⽤户将⿏标悬停在元素上时触发

JavaScript

事

件。

onchange

表单元素

当元素的值发⽣变化时触发

JavaScript

事件。

课堂源码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>

<h1>这是⼀级标题</h1>
<h2>这是⼆级标题</h2>
<h3>这是三级标题</h3>

<p>这是⼀个段落。</p>
<p>这是另外⼀个段落。</p>

<a href="https://www.baidu.com">百度⼀下</a>

<img src="./baidu.png" width="504" height="186" alt="图⽚异常"/>
<img
src="http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?
w=1024&h=1024" width="280" height="200" />


<p style="color: red; font-size: 14px;" title="你也不差">我很美</p>
<abbr title="HyperText Markup Language">HTML</abbr>
<br>
<br>
<img src="image.jpg" alt="图⽚异常">
<hr>
<b>加粗</b>
<i>斜体</i>
<strong>你好</strong>

<p><a href="https://www.microsoft.com/">本⽂本</a> 是⼀个指向万维⽹上的⻚⾯的链接。</p>

<table>
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead><tbody>
<tr>
<td>⾏1，列1</td>
<td>⾏1，列2</td>
<td>⾏1，列3</td>
</tr>
<tr>
<td>⾏2，列1</td>
<td>⾏2，列2</td>
<td>⾏2，列3</td>
</tr>
</tbody>
</table>
</body>

<form action="/" method="post">
<label for="name">⽤户名:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="pass">密码:</label>
<input type="password" id="pass" name="pass" required>

<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>
<input type="radio" id="xx" name="gender" value="xxxx">
<label for="xx">动物</label>

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>

<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="hk">HK</option>

<input type="submit" value="登录">
</select>
<br>
</form><p hidden="hidden">这是⼀段隐藏的段落。</p>
<p>这是⼀段可⻅的段落。</p>
<div style="color:#0000FF">
<h3 >这是⼀个在 div 元素中的标题。</h3>
<p>这是⼀个在 div 元素中的⽂本。</p>
</div>
<p style="color: red">我的⺟亲有 <span style="color:blue">蓝⾊</span>

的眼睛。</p>
</html>

WEB渗透测试工程师系统班250303期

第20节课作业

1. 什么是HTML？

HTML（超文本标记语言，HyperText Markup Language）是用于创建网页和Web应用程序的标准标记语言。它通过一系列标签（Tags）定义网页的结构和内容，浏览器会解析HTML代码并渲染成用户看到的页面。

2. HTML和CSS、JavaScript的区别、联系是什么？

HTML与CSS和JavaScript配合，CSS 控制页面样式（如颜色、布局），JavaScript 实现动态交互，而HTML负责基础结构。

3. 按下图所示编写HTML前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二十课作业</title>
</head>
<body>
<input 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="mail">邮箱:</label>
<input type="text" id="mail" name="mail" required>
<select id="mail" name="mail">
      <option value="@qq.com">qq.com</option>
      <option value="@123.com">123.com</option>
      <option value="@wangyi.com">wangyi.com</option>

</select>
<br>
<label for="male">性别:</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>
<label for="hobbies">爱好:</label>
<input type="checkbox" id="hobbies" name="hobbies" checked>
<label for="hobbies">旅游</label>
<input type="checkbox" id="hobbies" name="hobbies" checked>
<label for="hobbies">摄影</label>
<input type="checkbox" id="hobbies" name="hobbies" checked>
<label for="hobbies">运动</label>
<br>
<label>个人简介：
<br>
<input type="text" style="width: 30%; height: 100px;" >
</label>
<br>
<label for="photo-link">选择照片:
<input type="text" id="photo-link" name="photoLink" placeholder="选择照片">
<button type="button" onclick="document.getElementById('photo-link').value='上传照片链接'">选择照片</button>
<br>
<input type="submit" value="立即提交">
</label>

</body>
</html>

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

分享 20250303 Web渗透系统班第二十课樊子健

本帖子中包含更多资源

免责声明：

分享 20250303 Web渗透系统班 第二十课 樊子健

本帖子中包含更多资源

免责声明：

分享 20250303 Web渗透系统班第二十课樊子健