WEB安全HTML基础

0x001 HTML简介

什么是HTML?

  • HTML 是用来描述网页的一种语言。
  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

0x002 HTML页面架构

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

charset常用编码：gbk、gbk2312、utf-8

0x003 HTML常见标签

1.meta标签

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
设置网站关键字

<meta name="keywords" content="网络安全，WEB 渗透"/>

<link> 标签定义文档与外部资源的关系。
<script> 引入 js 文件

注释

<!--这是一段注释。注释不会在浏览器中显示。-->
<p>这是一段普通的段落。</p>

2.标题标签

由大到小

<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

</br> 换行标签
<hr> 换行线标签

3.文本属性

<strong>加粗</strong>
<b></b> 加粗
<i></i> 斜体
<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标
<del></del> 删除线
<pre></pre> 代码样式原样输出
<font></font> 规定字体属性
size 字体的大小
color 字体颜色

4.form表单

form 表单：规定当提交表单时向何处发送表单数据

method 提交的方法有：get、post

规定在发送表单数据之前对其进行编码。

enctype 属性可能的值：

application/x-www-form-urlencoded
multipart/form-data
text/plain

input标签

  • name：同样是表示的该文本输入框名称。
  • size：输入框的长度大小。
  • maxlength：输入框中允许输入字符的最大数。
  • value：输入框中的默认值
  • readonly：表示该框中只能显示，不能添加修改。

input类型

  • type=password 密码输入框
  • type=file 文件上传
  • type=hidden 隐藏域
  • button 按钮
  • checkbox 复选框
  • radio 单选框
  • type=submit 提交按钮
  • type=reset 重置按钮

5.a 标签、img 标签、table 标签

a 标签的作用：就是用于控制界面与页面之间的跳转，默认就是 self

  • self：用于在当前选项卡中跳转，也就是不新建页面跳转
  • _blank ：用于在新的选项卡中跳转，也就是新建页面跳转
<a href="http://www.baidu.com" target="self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
  • _blank 在新窗口中打开被链接文档。
  • _self 默认。在相同的框架中打开被链接文档。
  • _parent 在父框架集中打开被链接文档。
  • _top 在整个窗口中打开被链接文档。

6.锚文本

<a href="#2">锚点</a>
<a name="2">锚点</a>

7.img 标签

  • img 元素向网页中嵌入一幅图像。
<img src="/image/cat.jpg" alt="俺是猫" />
  • alt 规定图像的替代文本。
  • src 规定显示图像的 url
  • width 规定图片的高度
  • height 规定图片的宽度

8.table 表单

<caption>我的标题</caption>表格带标题
  • border 边框
  • width 宽度
  • height 高度
  • colspan 行
  • rowspan 竖
<th></th>
<tr>行</tr>
<td>表格</td>
  • cellpadding 单元边与内容的空白
  • cellspacing 单元格的空白

9.列表标签

无序列表
项目符号 square circle disc

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

有序列表

  • 数字列表 默认 数字
  • 小写字母列表
  • 大写字母列表 A
  • 罗马字母列表 I
  • 小写罗马字母列表 i
<ol type="1"> <!--有序列表-->
    <li></li>
    <li></li>
    <li></li>
</ol>

10.框架的使用

iframe语法:

<iframe src="URL"></iframe>

该URL指向不同的网页。

iframe - 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。

<iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe>

iframe - 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 "0" 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

使用 iframe 来显示目标链接页面
iframe 可以显示一个目标链接的页面

目标链接的属性必须使用 iframe 的属性，如下实例:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a></p>

0x004 更多详细教程

HTML教程

posted @ 2022-11-17 21:08  Cx330Lm  阅读(30)  评论(0)  编辑  收藏  举报