web渗透安全学习笔记：2、HTML基础知识

目录

前言

HTML的标题

段落链接与插入图片

HTML元素

HTML属性

HTML头部

HTML与CSS

HTML与JavaScript

表格与列表

HTML区块

布局

HTML表单

HTML与数据库

音频与视频

HTML事件

前言

HTML的标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>csdn(csdn.net)</title>
</head>
<body><h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6></body>
</html>

运行效果： 

——————————————————————————————————————————— 

——————————————————————————————————————————— 

段落链接与插入图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body><a href="https://www.baidu.com">点我去百度</a></body>
</html>

运行效果： 

———————————————————————————————————————————

 

———————————————————————————————————————————

<img src="图片url" width="200" height="100" />

HTML元素

HTML元素是指HTML代码中的一部分，由起始标签、结束标签和内容组成，用来描述网页的结构和内容。

HTML 元素语法：

  • HTML 元素以<元素>开始
  • HTML 元素以</元素>结束
  • 元素的内容是开始标签与结束标签之间的内容
  • 元素可以具有空内容
  • 大多数 HTML 元素可拥有属性

 也就是说，我们前面所学的段落<p></p>是一个元素，而段落内容就是元素的内容。元素之间可以存在包含关系，例如body元素中就可以包含段落（p）元素。

HTML属性

    刚刚我们提到了多数 HTML 元素可拥有属性，HTML属性是用来为HTML元素提供附加信息的。属性通常包含在HTML元素的起始标签中，以键值对的形式表示。属性可以包括元素的ID、类、样式、标签、事件等。

常见的HTML属性：

  • class：定义元素的一个或多个类名
  • id：定义元素的唯一ID
  • style：定义元素的样式
  • src：定义图像或媒体元素的源文件路径
  • href：定义链接的目标URL
  • alt：定义图像的替代文本
  • width：定义元素的宽度
  • height：定义元素的高度
  • target：定义链接在何处打开
  • onclick：定义元素的点击事件处理程序
  • disabled：定义元素是否禁用等。

属性定义HTML元素的示例如下：

定义<img>元素：

<img src="image.jpg" alt="Image" width="500" height="300">

其中，src属性指定图像的 URL，alt属性指定当图像无法显示时的替代文本，width和height属性指定图像的宽度和高度。

定义<a>元素：

<a href="https://www.example.com" target="_blank">Visit Website</a>

其中，href属性指定链接的 URL，target属性指定链接在新标签页中打开。

定义<input>元素：

<input type="text" name="username" placeholder="Enter your username">

其中，type属性指定输入字段的类型为文本，name属性指定字段的名称，placeholder属性指定在输入字段为空时显示的提示文本。

定义<video>元素：

<video src="video.mp4" width="640" height="360" controls>Your browser does not support the video tag.
</video>

其中，src属性指定视频的 URL，width和height属性指定视频的宽度和高度，controls属性指定浏览器显示视频播放器的控件。

HTML头部

    HTML头部（<head>元素）是HTML文档的一部分，包含了一些不会直接在网页上显示的内容，如网页的标题、样式表、脚本等。当然，表格中的参数并不是都是必须的，只需要填写前四个。如果只是在编辑器上运行的话不编写头部也完全可以运行成功。

HTML头部组成
<!DOCTYPE>声明文档类型，用于告诉浏览器使用哪个HTML版本进行解析。
<html>HTML文档的根元素，表示开始和结束的整个HTML文档。
<head>

头部元素，用于包含文档的元数据，不会在浏览器中显示。

<title>标题元素，用于定义网页的标题，将显示在浏览器的标题栏或标签页上。
<meta>元数据元素，用于提供关于文档的一些元信息，如字符编码、关键字、描述等。
<link>链接元素，用于引入外部样式表、图标等。
<style>样式元素，用于定义文档的样式规则。
<style>脚本元素，用于引入JavaScript脚本。
<base>基准元素，用于指定基础URL或默认目标。

HTML与CSS

    CSS是层叠样式表，它用于控制网页的样式和布局。通过CSS，我们可以设置网页的字体、颜色、背景、边距、定位等属性，让网页呈现出我们想要的外观。

HTML和CSS的联合使用可以实现更丰富的网页设计和交互效果。通过在HTML文档中嵌入CSS样式，我们可以对网页的各个元素进行样式设置，从而改变网页的外观和布局。

在HTML文档中，我们可以使用<style>标签来嵌入CSS样式，也可以使用<link>标签引用外部的CSS文件。CSS样式可以通过选择器来选择HTML元素，并为其设置样式属性。

下面是一个简单的HTML实例，我们使用CSS样式设置标题和段落的颜色和字体大小：

<!DOCTYPE html>
<html>
<head><title>HTML与CSS联合使用</title><style>h1 {color: blue;font-size: 24px;}p {color: red;font-size: 16px;}</style>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落</p>
</body>
</html>

这里我们在HTML头部中定义了h1元素与p元素的颜色和字体大小，在下面的body部分，h1元素与p元素的内容就会呈现我们设置的效果。篇幅原因，我们会在之后的文章中详细地讲解css。

HTML与JavaScript

    JavaScript是一种用于添加动态功能和交互性的脚本语言。它可以嵌入到HTML中，并在网页加载时执行。JavaScript可以用来处理用户输入、操作网页元素、验证表单数据、创建动画效果等。它还可以与后端服务器进行通信，获取或发送数据。

在HTML中，可以使用<script>标签将JavaScript代码嵌入到网页中：

<script type="text/javascript">/*添加内容*/
</script>

表格与列表

    在HTML中添加表格，可以使用&lt;table>标签。表格由一系列的行和列组成。每行由&lt;tr>标签定义，每列由&lt;td>标签定义。

以下是一个简单的表格示例：

<table><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr>
</table>

在HTML中添加列表，可以使用&lt;ul>（无序列表）或&lt;ol>（有序列表）标签。每个列表项由&lt;li>标签定义。

以下是一个无序列表和有序列表的示例：

<ul><li>项目1</li><li>项目2</li><li>项目3</li>
</ul><ol><li>项目1</li><li>项目2</li><li>项目3</li>
</ol>

我们还可以在列表中嵌套其他列表，来创建更复杂的结构。例如：

<ul><li>项目1</li><li>项目2<ul><li>子项目1</li><li>子项目2</li></ul></li><li>项目3</li>
</ul>

HTML区块

    HTML区块是指在HTML文档中对内容进行分组或定义的一种方法。HTML区块可以用来组织和结构化页面的内容，使其更易于阅读、维护和修改。

常见的HTML区块标签包括：

  • &lt;div>：定义一个通用的区块，用于将内容分组。
  • &lt;section>：定义文档中的一个独立区块。
  • &lt;article>：定义独立的文章内容，如新闻文章、博客文章等。
  • &lt;header>：定义页面或区块的头部。
  • &lt;footer>：定义页面或区块的底部。
  • &lt;nav>：定义导航链接的区块。
  • &lt;aside>：定义页面或文章的附加内容。

使用HTML区块标签可以使页面的结构更加清晰，方便样式和脚本的应用，并提高页面的语义化。下面是一个HTML区块的实例：

<!DOCTYPE html>
<html>
<head>
<title>HTML区块实例</title>
<style>
.block {background-color: lightblue;padding: 10px;border: 1px solid blue;
}
</style>
</head>
<body><h1>HTML区块实例</h1><div class="block"><h2>标题</h2><p>这是一个HTML区块的示例内容。</p><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>
</div></body>
</html>

在上面的示例中，我们使用<div>元素创建了一个名为block的HTML区块。该区块具有自定义的样式，包括背景颜色、内边距和边框。在区块中，我们可以放置其他HTML元素，如标题、段落和列表。

通过使用HTML区块，我们可以将相关的内容组织在一起，并应用相同的样式和布局。这在创建网页布局时非常有用。

布局

    HTML布局是指在网页中使用HTML标记语言来创建页面的结构和排列方式的方法。以下是几种常见的HTML布局方法：

表格布局：使用HTML的<table>标签来创建表格布局。可以通过定义表格的行和列来实现页面元素的排列。

<table><tr><td>元素1</td><td>元素2</td></tr><tr><td>元素3</td><td>元素4</td></tr>
</table>

运行结果： 

 

块级元素布局：使用HTML的块级元素（如<div>）来创建布局。通过设置块级元素的宽度、高度和浮动等属性，将元素水平或垂直排列。

<div class="container"><div class="element">元素1</div><div class="element">元素2</div><div class="element">元素3</div><div class="element">元素4</div>
</div>

运行结果： 

 

HTML表单

    HTML 表单是用于收集用户的输入信息的HTML元素。例如文本字段、密码字段、单选按钮、下拉列表等。下面我们来写一个HTML表单，用于收集用户的姓名与邮箱：

<form><label for="name">姓名：</label><input type="text" id="name" name="name"><label for="email">邮箱：</label><input type="email" id="email" name="email"><input type="submit" value="提交">
</form>

示例中，<form> 标签用于包裹表单的内容。<label> 标签用于标识输入字段的标签。<input> 标签用于创建输入字段，通过 type 属性指定不同类型的输入字段。<input type="submit"> 标签用于创建提交按钮。

当用户点击提交按钮时，表单将发送到服务器端进行处理。可以使用HTML的action 属性指定表单提交的目标URL。在服务器端，可以使用不同的编程语言（如PHP、Python等）来处理表单数据。

此外，我们还可以使用HTML的method 属性指定表单提交的方式，例如GET和POST。

接收了数据，我们再来学习HTML是如何处理表单提交的数据的：设置完提交方式之后，我们可以在HTML表单标签中设置action属性，来指定数据提交的目标URL。也可以在服务器端使用合适的编程语言（如PHP、Python、Java等）来处理表单数据。也就是说，HTML无法自己处理表单数据并输出结果。所以我们需要为它写一个服务端来帮助处理，服务器端可以通过访问$_POST或$_GET超全局变量来获取表单数据。以下是一个PHP处理表单的示例:

HTML表单：

<form action="process.php" method="post"><label for="name">Name:</label><input type="text" id="name" name="name"><br><label for="email">Email:</label><input type="email" id="email" name="email"><br><input type="submit" value="Submit">
</form>

PHP处理表单数据（process.php）： 

<?php
$name = $_POST['name'];
$email = $_POST['email'];// 对表单数据进行处理，如保存到数据库或发送邮件等操作// 返回响应，如跳转到另一个页面或返回一个成功消息
?>

当然，如何编写服务端，我们将会在以后的文章中学习，在这里不做重点。

HTML与数据库

    HTML本身并不包含与数据库的交互功能，但可以与其他技术（如服务器端编程语言和数据库）结合使用，实现与数据库的交互。

数据库是一个用于存储、管理和检索数据的工具。常见的数据库系统包括MySQL、Oracle和Microsoft SQL Server等。在一个网页应用程序中，我们可以使用HTML搜集用户输入的数据，并将这些数据传递给服务器端编程语言（如PHP、Python或Java）进行处理。服务器端编程语言可以与数据库进行通信，将数据存储到数据库中，或从数据库中检索数据，并将结果返回给用户。

音频与视频

在HTML中插入音频，可以使用&lt;audio>元素，并在其中指定音频文件的路径：

<audio src="path/to/audio.mp3" controls></audio>

使用src属性指定音频文件的路径。controls属性将为音频添加播放控件。

要在HTML中插入视频，可以使用&lt;video>元素，并在其中指定视频文件的路径：

<video src="path/to/video.mp4" controls></video>

同样，使用src属性指定视频文件的路径。controls属性将为视频添加播放控件。

可以使用其他属性来进一步自定义音频和视频的显示和行为。例如，可以使用autoplay属性指定在加载页面时自动播放音频或视频：

<audio src="path/to/audio.mp3" autoplay></audio>
<video src="path/to/video.mp4" autoplay></video>

这里除了使用本地文件路径，还可以使用完整的URL或嵌入代码来指定音频和视频的源。

HTML事件

    HTML事件是指在HTML文档中发生的各种交互和操作，例如用户点击按钮、输入文字、移动鼠标等。HTML事件可以通过JavaScript来进行响应和处理。

HTML常用事件：

  1. onclick - 当用户点击某个元素时触发事件
  2. onkeydown - 当用户按下键盘上的某个键时触发事件
  3. onkeyup - 当用户释放键盘上的某个键时触发事件
  4. onmouseover - 当用户将鼠标移动到某个元素上时触发事件
  5. onmouseout - 当用户将鼠标移出某个元素时触发事件
  6. onscroll - 当页面滚动时触发事件
  7. onsubmit - 当用户提交表单时触发事件
  8. onchange - 当元素的值发生改变时触发事件
  9. onload - 当页面加载完成时触发事件
  10. onfocus - 当元素获得焦点时触发事件
  11. onblur - 当元素失去焦点时触发事件

这些事件可以通过在HTML标签中添加属性来实现，例如：

 <button onclick="myFunction()">点击我</button>

那么到这里就是今天的全部内容了。如有帮助，不胜荣幸。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/636901.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

yum配置文件及NFS共享

yum配置文件及NFS共享

一 yum配置文件及命令 1 /etc/yum.conf //主配置文件 2 /etc/yum.repos.d/*.repo //yum仓库文件位置 写错一个字母就不行&#xff0c;可以ping www.google.com 测试网络 3 /var/log/yum.log //日志文件 二 yum命令 1 [rootlocalhost ~…
阅读更多...
分布式锁的产生以及使用

分布式锁的产生以及使用

日常开发中&#xff0c;针对一些需要锁定资源的操作&#xff0c;例如商城的订单超卖问题、订单重复提交问题等。 都是为了解决在资源有限的情况限制客户端的访问&#xff0c;对应的是限流。 单节点锁问题 目前针对这种锁资源的情况采取的往往是互斥锁&#xff0c;例如 java 里…
阅读更多...
【LeetCode: 295. 数据流的中位数 + 堆】

【LeetCode: 295. 数据流的中位数 + 堆】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
list列表可编辑状态

list列表可编辑状态

有时候list需要修改或选择属性,mfc自带的只能显示内容,基本上是不可以修改,为了实现这个功能需求,需要完成一下步骤转换. 第一步记录选择的单元格. 第二步创建一个编辑框CComboBox对象, 设置字体,窗口属性. 第三步获取选中单元格的位置信息. 第四步获取单元格内容信息. 第五步…
阅读更多...
Leetcode3005. 最大频率元素计数

Leetcode3005. 最大频率元素计数

Every day a Leetcode 题目来源&#xff1a;3005. 最大频率元素计数 解法1&#xff1a;遍历 哈希 遍历数组 nums&#xff0c;统计各元素 num 的出现次数&#xff0c;存储在哈希表 cnt 中。 初始化 sum 0&#xff0c;max_freq 0。 遍历哈希表 cnt&#xff1a; 如果当前…
阅读更多...
v34.运算符的优先级 和 结合性

v34.运算符的优先级 和 结合性

1.优先级 优先级高的运算符会首先被评估。 2.结合性 当运算符的优先级相同时&#xff0c;结合性就会发挥作用。 3.优先级很重要 &#xff08;&#xff09;的优先级大于&#xff0c;所以操作数fun属于&#xff08;&#xff09; 而不是 &#xff0c;所以这个表达式看做是将函数…
阅读更多...
基于蒙特卡洛模拟的家用电动汽车充电负荷预测(MATLAB实现)

基于蒙特卡洛模拟的家用电动汽车充电负荷预测(MATLAB实现)

采用蒙特卡洛模拟法&#xff0c;对家用电动汽车充电负荷进行预测&#xff0c;电动汽车分为快、中、慢三种充电功率&#xff0c;且分为一天一充、一天两充、一天三充三种类型。全部MATLAB代码在下方给出&#xff0c;可以直接运行。 %%%%%%%%%%%%%%%%%%%%%%%%输入电动汽车相关原…
阅读更多...
Spark读取kafka（流式和批数据）

Spark读取kafka（流式和批数据）

spark读取kafka&#xff08;批数据处理&#xff09; # 按照偏移量读取kafka数据 from pyspark.sql import SparkSessionss SparkSession.builder.getOrCreate()# spark读取kafka options {# 写kafka配置信息# 指定kafka的连接的broker服务节点信息kafka.bootstrap.servers: n…
阅读更多...
集美大学“第15届蓝桥杯大赛(软件类)“校内选拔赛 D矩阵选数

集美大学“第15届蓝桥杯大赛(软件类)“校内选拔赛 D矩阵选数

经典的状态压缩DP int dp[15][(1<<14)10]; int a[15][15]; void solve() {//dp[i][st]考虑到了第i行 并且当前考虑完第i行以后的选择状态是st的所有方案中的最大值for(int i1;i<13;i)for(int j1;j<13;j)cin>>a[i][j];for(int i1;i<13;i){for(int j0;j<…
阅读更多...
宝塔 ftp 服务器发回了不可路由的地址/读取目录列表失败

宝塔 ftp 服务器发回了不可路由的地址/读取目录列表失败

ftp连接不上&#xff1a; 1.注意内网IP和外网IP 2.检查ftp服务是否启动 &#xff08;面板首页即可看到&#xff09; 3.检查防火墙20端口 ftp 21端口及被动端口39000 - 40000是否放行 &#xff08;如是腾讯云/阿里云等还需检查安全组&#xff09; 4.是否主动/被动模式都不能连接…
阅读更多...
相比于 Jira，极狐GitLab 的敏捷项目管理是怎样的？

相比于 Jira，极狐GitLab 的敏捷项目管理是怎样的？

本文作者 极狐GitLab 资深解决方案架构师 尹学峰 简述 写在前面的话 如果你目前没有用任何专门的项目管理软件&#xff0c;只是在使用word、excel之类的通用软件进行项目管理&#xff0c;建议直接阅读本文详述章节&#xff0c;极狐GitLab的项目管理工具将为你带来巨大的效率提…
阅读更多...
logstack 日志技术栈-04-opensource 开源工具 Syslog-ng+Highlight.io

logstack 日志技术栈-04-opensource 开源工具 Syslog-ng+Highlight.io

5. Syslog-ng Syslog-ng 是一个开源的日志管理解决方案&#xff0c;主要用于收集和处理日志数据。它可以从多种源收集日志&#xff0c;包括系统日志、网络设备日志和第三方应用日志。 然后将日志解析、分类、重写和关联到统一格式中&#xff0c;然后将其存储或安全地传输到不同…
阅读更多...
[ tool ] Xpath选择器和selenium工具基本使用

[ tool ] Xpath选择器和selenium工具基本使用

XPath xpath介绍 是一门在XML文档中查找信息的语言 html文档准备 doc <html><head><base hrefhttp://example.com/ /><title>Example website</title></head><body><div idimages><a hrefimage1.html aabb>Name: My…
阅读更多...
JVM工作原理与实战(二十一)：内存管理

JVM工作原理与实战(二十一)：内存管理

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、不同语言的内存管理 1.C/C的内存管理 2.Java的内存管理 二、垃圾回收的对比 1.自动垃圾回收与手动垃圾回收的对比 2.优点与缺点 总结 前言 JVM作为Java程序的运行环境&#…
阅读更多...
区字棋中的最长非0链

区字棋中的最长非0链

一&#xff0c;区字棋 也叫憋死牛棋。 规则&#xff1a; 棋盘一共只有5个点&#xff0c;双方各2个棋子&#xff0c;还有一个空格。 先手必须移动左边的棋子&#xff0c;之后没有限制&#xff0c;2个棋子任意一个移动到空格皆可。 无法移动者判负。 二&#xff0c;不败策略…
阅读更多...
ubuntu20遇到缺少qt4相关库的问题

ubuntu20遇到缺少qt4相关库的问题

最近需要做套接字通讯的工作&#xff0c;最好是有一个网络调试软件能够接受或者发送套接字&#xff0c;测试代码能够正常通讯。windows下有很多&#xff0c;但是linux下比较少&#xff0c;使用广泛的是下面这一款。 1、安装 首先从网盘&#xff08;链接: https://pan.baidu.c…
阅读更多...
String在VS与Linux下的区别

String在VS与Linux下的区别

目录 一、string的成员 1.VS 2.Linux 二、string的扩容机制 1. VS 2.Linux 一、string的成员 string是C标准库中的一个类模板&#xff0c;用于表示和操作字符串 string在 Windows 与 Linux 中的成员不是相同的 1.VS 4个成员&#xff1a;_str , _size , _capacity 和…
阅读更多...
71.工作中redis的常用场景总结

71.工作中redis的常用场景总结

文章目录 一、简介二、统计访问次数三、缓存四、分布式锁五、限流六、排行榜七、作为Session的存储器&#xff0c;存用户登录状态八、位统计九、生成全局ID 一、简介 Redis作为一种优秀的基于key/value的缓存&#xff0c;有非常不错的性能和稳定性&#xff0c;无论是在工作中&…
阅读更多...
【ARM Cortex-M 系列 1.1 -- Cortex-M33 与 M4 差异 详细介绍】

【ARM Cortex-M 系列 1.1 -- Cortex-M33 与 M4 差异 详细介绍】

请阅读【嵌入式开发学习必备专栏 之 Cortex-Mx 专栏】 文章目录 背景Cortex-M33 与 M4 差异Cortex-M33Cortex-M4关系和差异举例说明 背景 在移植 RT-Thread 到 瑞萨RA4M2&#xff08;Cortex-M33&#xff09;上时&#xff0c;遇到了hardfault 问题&#xff0c;最后使用了Cortex…
阅读更多...
大数据开发之kafka（完整版）

大数据开发之kafka（完整版）

第 1 章&#xff1a;Kafka概述 1.1 定义 Kafka是一个分布式的基于发布/订阅模式的消息队列&#xff0c;主要应用于大数据实时处理领域。 发布/订阅&#xff1a;消息的发布者不会将消息直接发送给特定的订阅者&#xff0c;而是将发布的消息分为不同的类别&#xff0c;订阅者只…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023