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

目录

前言

HTML的标题

段落链接与插入图片

HTML元素

HTML属性

HTML头部

HTML与CSS

HTML与JavaScript

表格与列表

HTML区块

布局

HTML表单

HTML与数据库

音频与视频

HTML事件


前言

HTML的标题





csdn(csdn.net)



标题 1

标题 2

标题 3

标题 4

标题 5
标题 6

运行效果: 

——————————————————————————————————————————— web渗透安全学习笔记:2、HTML基础知识_第1张图片

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

段落链接与插入图片








点我去百度


运行效果: 

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

 web渗透安全学习笔记:2、HTML基础知识_第2张图片

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

HTML元素

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

HTML 元素语法:

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

 也就是说,我们前面所学的段落

是一个元素,而段落内容就是元素的内容。元素之间可以存在包含关系,例如body元素中就可以包含段落(p)元素。

HTML属性

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

常见的HTML属性:

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

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

定义<img>元素:

Image

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

定义<a>元素:

Visit Website

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

定义<input>元素:


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

定义元素:


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

HTML头部

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

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

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

</td> <td style="width:436px;">标题元素,用于定义网页的标题,将显示在浏览器的标题栏或标签页上。</td> </tr> <tr> <td style="width:62px;"><meta></td> <td style="width:436px;">元数据元素,用于提供关于文档的一些元信息,如字符编码、关键字、描述等。</td> </tr> <tr> <td style="width:62px;"><link></td> <td style="width:436px;">链接元素,用于引入外部样式表、图标等。</td> </tr> <tr> <td style="width:62px;"><style></td> <td style="width:436px;">样式元素,用于定义文档的样式规则。</td> </tr> <tr> <td style="width:62px;"><style></td> <td style="width:436px;">脚本元素,用于引入JavaScript脚本。</td> </tr> <tr> <td style="width:62px;"><base></td> <td style="width:436px;">基准元素,用于指定基础URL或默认目标。</td> </tr> </tbody> </table> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3></h3> <h3 style="background-color:transparent;">HTML与CSS</h3> <p>    CSS是层叠样式表,它用于控制网页的样式和布局。通过CSS,我们可以设置网页的字体、颜色、背景、边距、定位等属性,让网页呈现出我们想要的外观。</p> <p>HTML和CSS的联合使用可以实现更丰富的网页设计和交互效果。通过在HTML文档中嵌入CSS样式,我们可以对网页的各个元素进行样式设置,从而改变网页的外观和布局。</p> <p>在HTML文档中,我们可以使用<code><style></code>标签来嵌入CSS样式,也可以使用<code><link></code>标签引用外部的CSS文件。CSS样式可以通过选择器来选择HTML元素,并为其设置样式属性。</p> <p>下面是一个简单的HTML实例,我们使用CSS样式设置标题和段落的颜色和字体大小:</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <title>HTML与CSS联合使用

这是一个标题

这是一个段落

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

HTML与JavaScript

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

在HTML中,可以使用

表格与列表

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

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

单元格1 单元格2 单元格3
单元格4 单元格5 单元格6

在HTML中添加列表,可以使用<ul>(无序列表)或<ol>(有序列表)标签。每个列表项由<li>标签定义。

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

  • 项目1
  • 项目2
  • 项目3
  1. 项目1
  2. 项目2
  3. 项目3

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

  • 项目1
  • 项目2
    • 子项目1
    • 子项目2
  • 项目3

HTML区块

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

常见的HTML区块标签包括:

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

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




HTML区块实例




HTML区块实例

标题

这是一个HTML区块的示例内容。

  • 列表项1
  • 列表项2
  • 列表项3

在上面的示例中,我们使用

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

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

布局

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

表格布局:使用HTML的

标签来创建表格布局。可以通过定义表格的行和列来实现页面元素的排列。

元素1 元素2
元素3 元素4

运行结果: 

web渗透安全学习笔记:2、HTML基础知识_第3张图片 

块级元素布局:使用HTML的块级元素(如

)来创建布局。通过设置块级元素的宽度、高度和浮动等属性,将元素水平或垂直排列。

元素1
元素2
元素3
元素4

运行结果: 

web渗透安全学习笔记:2、HTML基础知识_第4张图片 

HTML表单

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

示例中,

 标签用于包裹表单的内容。 标签用于标识输入字段的标签。 标签用于创建输入字段,通过 type 属性指定不同类型的输入字段。 标签用于创建提交按钮。

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

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

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

HTML表单:


  
  

PHP处理表单数据(process.php): 


 

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

HTML与数据库

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

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

音频与视频

在HTML中插入音频,可以使用<audio>元素,并在其中指定音频文件的路径:


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

要在HTML中插入视频,可以使用<video>元素,并在其中指定视频文件的路径:


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

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



这里除了使用本地文件路径,还可以使用完整的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标签中添加属性来实现,例如:

 

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

你可能感兴趣的:(web渗透安全学习笔记,前端,安全,学习)