Web基础：HTML快速入门

HTML基础语法

HTML（超文本标记语言） 是用于创建网页内容的 标记语言，通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。

超文本（Hypertext） 是一种通过 链接（Hyperlinks） 将不同文本、图像、视频等内容关联起来的信息组织形式，其核心特点是 非线性 和 可扩展性。

为什么需要掌握HTML？

学习Web渗透需要掌握HTML，因为HTML是网页内容的结构语言，渗透测试的核心目标是发现并利用网站漏洞。通过HTML标签（如<form>、<input>、<a>）可以：

分析页面逻辑：快速定位漏洞入口（如登录表单、上传功能）；
构造恶意请求：直接篡改HTML参数（如SQL注入、XSS攻击）或绕过前端验证；
绕过安全防护：利用HTML结构识别WAF规则盲区或隐藏接口；

html代码编辑方式

文本编辑器

HTML代码的编辑方式多种多样，可以根据需求、场景和技术水平选择不同的工具或方法。

Visual Studio Code（推荐，功能强大且免费）
Sublime Text（轻量高效）

在线编辑器

JSFiddle
CodeSandbox

我建议从CodePen开始。它用户友好，非常适合初学者。

让我们编写我们的第一个HTML代码！这里有一个简单的例子：

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
          <meta charset="UTF-8">
         <title>我的第一个网页</title>
    </head>

    <body>
          <h1>你好，世界！</h1>
          <p>这是我的第一个HTML页面。</p>
    </body>

</html>

代码含义如下：

<!DOCTYPE html> 告诉浏览器这是一个HTML5文档。
<html> 是HTML页面的根元素。
<head> 包含关于文档的元信息。
<title> 指定页面的标题（显示在浏览器的标题栏中）。
<body> 定义文档的正文，其中包含可见内容。
<h1> 定义一个大标题。
<p> 定义一个段落。

在Codepen中查看代码效果：

HTML元素

HTML使用“元素”来构建内容结构。以下是一些常见的HTML元素：

让我们看看一些实际的例子：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
      <meta charset="UTF-8">
      <title>我的第一个网页</title>
</head>

<h1>我最喜欢的动物</h1>
    <p>以下是我最喜欢的三种动物：</p>
        <ol>
                <li>猫</li>
                <li>狗</li>
                <li>昆</li>
        </ol>
    <p>了解更多关于<a href="https://www.baidu.com">动物</a>的信息。</p>

</html>

这段代码创建了一个标题、一个段落、一个动物的有序列表和一个指向百度的链接，以了解更多关于动物的信息。效果如下：

网络浏览器就像是HTML的翻译。它们读取HTML代码并将其渲染成我们看到的视觉网页。不同的浏览器可能会稍微不同地渲染相同的HTML，这就是为什么要在多个浏览器上测试你

HTML标签、属性和元素

HTML由三个关键组件组成：

标签：这些是HTML的构建块。它们总是被包含在尖括号中，比如<p>代表段落。
属性：这些提供了关于元素的额外信息。它们总是在开始标签中指定。
元素：一个元素是从开始标签到结束标签的所有内容

如上述代码中提到的例子：

<a href="https://www.baidu.com" title="访问百度">动物</a>

在这个例子中：

<a>是标签（代表超链接）
href和title是属性
整行是一个元素

基本HTML结构

下面是一个代码片段，展示你可能在这些编辑器之一中设置的基本HTML结构：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我惊人的网站</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header>
    <h1>欢迎来到我惊人的网站</h1>
    <nav>
      <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于</a></li>
        <li><a href="#contact">联系方式</a></li>
      </ul>
    </nav>
  </header>
  <main>        
    <section id="home">
      <h2>首页</h2>
      <p>欢迎来到我的网站！随意探索。</p>
    </section>
    <!-- 更多部分将在这里 -->
  </main>
  <footer>
    <p>&copy; 2023 我惊人的网站。保留所有权利。</p>
  </footer>
  <script src="script.js"></script>
</body>

</html>

这段代码为网站设置了一个基本结构，包括页头、导航菜单、主要内容区域和页脚。

<nav> 是 HTML5 引入的语义化标签，用于定义页面的导航部分。

HTML基础标签

现在，让我们探索一些最常用的HTML标签。我会为每个标签提供示例和解释。

1. 标题

HTML提供了六级标题，从 <h1>到 <h6>。

<h1>这是一个主标题</h1>
<h2>这是一个次要标题</h2>
<h3>这是一个三级标题</h3>

这些标签不仅使文本变大，还帮助搜索引擎理解你的内容结构。把它们想象成书中的章节标题！

2. 段落

标签用于定义段落。

<p>这是一个段落。它可以包含多个句子，甚至在你HTML代码中跨越多行，但在浏览器中会显示为单一的文本块。</p>

小贴士：总是使用 <p> 标签来定义段落，而不仅仅是用于间距。这有助于提高可访问性和SEO！效果：

3. 链接

链接是使用 <a>（锚点）标签创建的。

<a href="https://www.example.com">点击这里访问Example.com</a>

href 属性指定了链接所指向的页面URL链接就像是网站中的门——它们使用户可以从一个页面导航到另一个页面！

效果：

4. 图像

图像是通过 <img> 标签插入的。

<img src="cat.jpg" alt="一只可爱的小猫坐在窗台上">

src 属性指定了图像文件的路径，而 alt 提供了屏幕阅读器使用或图像加载失败时的替代文本。总是包含描述性的替代文本——这就像是给你们的图像一个声音！

5. 列表

HTML支持有序（编号）列表和无序列表（项目符号）。

无序列表：

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>樱桃</li>
</ul>

有序列表：

<ol>
<li>起床</li>
<li>刷牙</li>
<li>吃早餐</li>
</ol>

列表非常适合组织信息。

6. 强调和重要

使用 <em> 来强调（通常显示为斜体），使用 <strong> 来表示重要（通常显示为粗体）。

<p>我<em>真的</em>喜欢HTML。这对于网页开发是<strong>至关重要</strong>的！</p>

7. 换行和水平线

有时你需要添加一个换行而不开始一个新的段落。这时 <br> 就派上用场了：

<p>玫瑰是红的，<br>紫罗兰是蓝的，<br>HTML很棒，<br>你也是！</p>

要添加一条水平线，使用 <hr> 标签：

<p>玫瑰是红的，<br>紫罗兰是蓝的，<hr><br>HTML很棒，<br>你也是！</p>

把 <br> 想象成键盘上的软回车，而 <hr> 就像是在纸上画一条线来分隔部分。

强制性结束标签

大多数HTML元素都需要一个开始标签和一个结束标签。然而，有些元素是自闭合的。这些元素通常不包含任何内容。下面是一个表格，列出了一些常见元素以及它们是否需要结束标签：

HTML 属性

HTML 属性是用于调整 HTML 元素行为或显示的标记语言的一部分。它总是包含在元素的开始标签中，通常由一个名称和一个值组成。让我们看看一些实际的例子，以更好地理解属性是如何工作的：

1. href 属性

<a href="https://www.example.com">访问 Example.com</a>

在这个例子中，href 是属性。它告诉浏览器点击链接时应该去哪里。

2. src 属性

<img src="cute-puppy.jpg" alt="一只可爱的狗狗">

在这里，有两个属性：

src：指定图像文件的路径。
alt：如果图像无法显示，提供替代文本。

3. style 属性

<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

style 属性允许我们直接向元素添加 CSS。

HTML 全局属性

全局属性可以用于任何 HTML 元素。让我们看看一些最常见的内容：

属性	描述	示例
class	为元素指定一个或多个类名	`<div class="header">`
id	为元素指定一个唯一的 ID	`<p id="intro">`
style	为元素指定一个内联 CSS 样式	`<p style="color:blue;">`
title	为元素指定额外信息	`<abbr title="世界卫生组织">WHO</abbr>`

此时有以下例子：

<a href="https://www.example.com" target="_blank" title="访问 Example.com">点击我！</a>

在这个例子中，我们使用了三个属性：

href：指定链接去的页面的 URL。
target：指定在哪里打开链接的文档。
title：提供关于链接的额外信息。

通用属性

通用属性是可以用于大多数（但不是全部）HTML 元素的属性。它们不像全局属性那样通用，但仍然非常灵活。以下是一些例子：

属性	描述	示例
onclick	指定当元素被点击时运行的脚本	`<button onclick="alert('你好！')">点击我</button>`
tabindex	指定元素的键盘导航顺序	`<input type="text" tabindex="1">`
accesskey	指定激活/聚焦元素的快捷键	`<a href="/" accesskey="h">首页</a>`

HTML - 块级和内联元素

块级元素

想象我们正在用积木建造一座房子，其中一些积木很大，独自占据了一整行。这些就像是HTML中的块级元素。它们从新的一行开始，并占据全部可用的宽度。

常见的块级元素：

<div>我是一个块级元素</div>
<p>我也是一个块级元素</p>
<h1>我也是一个标题，同时也是块级元素！</h1>

运行这段代码时，每个元素都会出现在新的一行上。

下面是一些常见块级元素的表格：

内联元素

现在，让我们想象一下那些可以并排放在同一行上的积木部件。这些就像是HTML中的内联元素。它们只占据必要的宽度，并且不会从新的一行开始。

这里有一个例子：

<span>我是一个内联元素</span>
<a href="#">我是一个链接，同时也是内联的</a>
<strong>我是加粗的，也是内联的！</strong>

这些元素都会出现在同一行上（如果有足够的空间）。

下面是一些常见内联元素的表格：

使用 `<span>` 标签分组

<span> 标签就像是一个小而透明的容器，你可以用来分组内联元素，甚至是在块级元素内的文本部分。

这里有一个例子：

<p>
我喜欢 <span style="color: blue;">蓝色</span> 和
<span style="color: green;">绿色</span> 颜色。
</p>

在这个例子中，我们使用了 <span> 来将不同的颜色应用到段落中的特定单词。

记住，<div> 是用来分组块级元素（或创建块级分组）的，而 <span> 是用来分组内联元素或文本部分的。

Iframe：通往其他世界的窗口

Iframe，全称“inline frame”，是一个HTML元素，允许你在当前HTML文档中嵌入另一个HTML文档。它就像在网页上创建了一个小窗口，展示了互联网上其他地方的内容。

语法

Iframe的基本语法出奇地简单：

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

在这里，src是一个属性，用于指定你想嵌入的页面的URL。

iframes的示例

让我们通过一些实际示例来更好地理解iframes。

1. 基础Iframe

<iframe src="http://www.bilibili.com" height="1000" width="800"></iframe>

这段代码将嵌入"url"的内容到你的网页中。

我们设置了一个宽为800，高为1000显示文档为b站（也可以选择本地html文档）的内联框架。

如果我们把链接换成www.baidu.com, 就会受到策略限制,无法正常显示:

这是因为百度使用了 X-Frame-Options 响应头来限制其在 iframe 中的嵌套。X-Frame-Options 是一种安全策略，可以由网站的服务器设置，用于控制页面是否允许在 iframe 中嵌套。当网站设置了 X-Frame-Options 为 DENY 或 SAMEORIGIN，浏览器将不允许将该页面在 iframe 中加载，以防止点击劫持等安全问题。

除此之外iframe的使用有其他需要注意的地方，可以参考如下文章：

https://juejin.cn/post/7261808673035075643

表单：交互式网页的门户

HTML表单的功能

想象你在一个咖啡店里，你想点你最喜欢的拿铁。你需要告诉咖啡师你想要什么，对吧？HTML表单就像是这种对话的数字版本。它们允许用户输入信息并将其发送到网页服务器进行处理。

表单是网页上用户交互的支柱。它们用于：

收集用户数据（如订阅新闻通讯）
登录网站
搜索信息
进行在线购买
提交反馈或评论

没有表单，网页将是一个相当无聊的单向信息通道。表单使网页变得交互和动态！

创建表单

让我们创建一个基本的HTML表单

<form action="/submit-form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>

<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required>

<input type="submit" value="提交">
</form>

让我们分解一下：

<form> 标签是我们所有表单元素的容器。
action="/submit-form" 告诉浏览器在表单提交时将数据发送到哪里。
method="post" 指定如何发送数据（在这个例子中，数据以HTTP POST请求的形式发送）。
<label> 标签为我们的输入字段提供描述。
<input> 标签创建实际的输入字段。
<input> 中的 type 属性指定输入的类型（文本、电子邮件等）。
required 属性使字段成为必填项。
最后一个 <input> 的 type="submit" 创建了一个提交按钮。

一个简单的搜索表单

<form action="/search" method="get">
<input type="text" name="query" placeholder="搜索...">
<input type="submit" value="搜索">
</form>

这个表单创建了一个简单的搜索框和一个提交按钮。当用户输入查询并点击“搜索”时，它会发送一个GET请求到“/search”，并将查询作为参数。

一个联系表单

<form action="/search" method="get">
<input type="text" name="query" placeholder="搜索...">
<input type="submit" value="搜索">
</form>

这个表单包括一个文本区域，用于撰写较长的消息，非常适合联系页面！

HTML表单元素

表单不仅仅只是文本输入。有一整套工具箱中的元素可以用来创建丰富、交互式的表单。让我们探索一些：

每个元素都有自己独特的属性和用例。随着你在网页开发旅程中的进步，你将发现自己会在创造性的组合中使用这些元素来构建复杂且用户友好的表单。

HTML表单属性

属性就像是我们给表单元素的特殊指令。它们帮助控制表单的行为以及它与用户的交互。以下是一些重要的属性：

当正确使用时，这些属性可以非常强大。例如，在包含敏感信息的表单上设置 autocomplete="off" 可以通过防止浏览器存储输入数据来增强安全性。

HTML表单示例代码

现在，让我们将所有内容放在一起，展示一个比较复杂的注册表单示例：

<form action="/register" method="post">
<fieldset>
<legend>个人信息</legend>

<label for="fullname">全名：</label>
<input type="text" id="fullname" name="fullname" required>

<label for="email">电子邮件：</label>
<input type="email" id="email" name="email" required>

<label for="birthdate">出生日期：</label>
<input type="date" id="birthdate" name="birthdate">

<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="">选择...</option>
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">其他</option>
</select>
</fieldset>

<fieldset>
<legend>账户详情</legend>

<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>

<label for="password">密码：</label>
<input type="password" id="password" name="password" required>

<label for="confirmpassword">确认密码：</label>
<input type="password" id="confirmpassword" name="confirmpassword" required>
</fieldset>

<fieldset>
<legend>偏好设置</legend>

<label>
<input type="checkbox" name="newsletter" value="yes"> 订阅新闻通讯
</label>

<p>喜欢的颜色：</p>
<label>
<input type="radio" name="color" value="red"> 红色
</label>
<label>
<input type="radio" name="color" value="blue"> 蓝色
</label>
<label>
<input type="radio" name="color" value="green"> 绿色
</label>
</fieldset>

<input type="submit" value="注册">
</form>

这个表单展示了我们讨论的各种表单元素和属性的使用。它被组织成三个字段集：个人信息、账户详情和偏好设置。每个字段集将相关的输入分组，使表单更加有序且易于理解。