当前位置：首页 > article >正文

网络安全web基础_HTML基础（扫盲篇）

article 2024/11/15 6:32:32

web基础_HTML扫盲篇

一、什么是 HTML？

二、HTML 的基本特点

三、HTML 基本结构概述

1.文档声明（!DOCTYPE html）

2. html元素

3. head元素

4. body 元素

四、HTML5的主要标签清单

文档结构标签

文本内容标签

链接和锚点标签

表格标签

表单标签

图像和多媒体标签

链接和嵌入标签

脚本和程序控制标签

元信息标签

其他HTML5元素

嵌入式内容标签

Web组件标签

语义化标签

五、简单的html页面示例

1. 效果

2. 示例代码讲解

3. 示例总结

六、输入和表单

1. input 标签

1.1. 常见的类型

1.2. 常用属性

2. form 标签

2.1. 属性

2.2. 常用属性

HTML扫盲篇结语

网络安全与HTML的关系

进一步学习的方向

总结

学习视频泷羽Sec：

黑客基础之html（超文本标记语言）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1tkmbY9Eyv?spm_id_from=333.788.videopod.sections&vd_source=0e1eb78c133fc5f90cf3666ebd4c1a64

web基础_HTML扫盲篇

一、什么是 HTML？

HTML（超文本标记语言，HyperText Markup Language）是一种用于描述网页结构和内容的标记语言。它不是编程语言，而是一种通过标记标签（markup tags）来定义网页各个元素的语言。HTML 主要用于构建和组织网页的内容，如文本、图像、链接、表单等，浏览器会根据 HTML 文件的标记来解析和展示网页。

HTML 文档包含了HTML 标签及文本内容，而HTML文档也叫做 web 页面。

二、HTML 的基本特点

标记语言：HTML 是一种标记语言，通过标记标签(markup tag)来描述网页内容和结构。
不是编程语言：HTML 主要用于描述页面内容的结构，而不涉及逻辑控制和计算。
基于标签：HTML 通过各种标签定义不同的网页元素，如标题、段落、链接、图片等。
结构化内容：HTML 文件由标签和文本组成，标签提供了内容的结构信息。

三、HTML 基本结构概述

一个 HTML 文档（也称为 Web 页面）通常包含以下几个基本部分：

文档声明（<!DOCTYPE html>）
- 用于声明文档类型，告诉浏览器该文档遵循 HTML5 标准。
<html> 元素
- 包含整个 HTML 文档的根元素，所有 HTML 内容都在 <html> 标签内。
<head> 元素
- 定义文档的元数据（例如字符集、文档标题、链接的外部样式表等）。浏览器不会直接显示 <head> 中的内容，但它对页面的渲染和功能至关重要。
<body> 元素
- 包含网页的主要内容，所有用户能在浏览器中看到的内容都放在 <body> 标签内。

1.文档声明（`!DOCTYPE html`）

<!DOCTYPE html>

作用：这是 HTML 文档的第一行，称为文档类型声明（Document Type Declaration，缩写为 DOCTYPE）。它告诉浏览器该文档使用的是 HTML5 标准。这个声明帮助浏览器正确解析和渲染网页。对于 HTML5 文档而言，<!DOCTYPE html> 是唯一需要的文档声明，省去了 HTML 4 和其他版本中复杂的文档类型声明。

说明：

<!DOCTYPE html> 不是 HTML 标签，它仅仅是告诉浏览器要遵循 HTML5 的规则。
这个声明必须是文档的第一行，并且没有任何前导空格或其他字符。

2. `html`元素

<html>
  <!-- 页面的内容 -->
</html>

作用： <html> 是整个 HTML 文档的根元素，包含网页的所有内容。浏览器将从 <html> 元素开始解析直到结束。所有 HTML 页面内容（除了 DOCTYPE 声明）都必须放置在 <html> 元素中。

说明：

<html> 标签内的内容被浏览器解析并渲染。
<html> 元素通常会带有一个 lang 属性来指定文档的语言，例如：<html lang="en"> 表示文档的语言是英语。这样可以帮助搜索引擎和屏幕阅读器等工具正确理解文档的语言。

3. `head`元素

<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

作用： <head> 元素包含网页的元数据（metadata），这些内容不会直接显示给用户，但对网页的加载、功能和优化至关重要。<head> 中的内容影响网页的渲染和与其他资源（如 CSS、JavaScript）的交互。

常见内容：

<meta> 标签：定义网页的字符集、作者、描述、关键字等。最常用的 <meta charset="UTF-8"> 是为了指定文档使用的字符编码为 UTF-8，这样可以支持全球各种字符集。
<title> 标签：定义网页的标题，通常会在浏览器标签页显示。标题对 SEO（搜索引擎优化）和用户体验非常重要。
<link> 标签：用来链接外部资源，最常用的是链接外部样式表（CSS）。例如：<link rel="stylesheet" href="style.css">。
<script> 标签：定义 JavaScript 代码，或者链接外部的 JavaScript 文件。JavaScript 可以放在 <head> 中，也可以放在 <body> 中，具体位置取决于代码执行时机。

说明：

<head> 不会直接渲染到页面上，但它对于页面的 SEO、性能和功能非常重要。
<meta>、<title>、<link> 和 <script> 标签的具体使用是 HTML 页面设计的基础。

4. `body` 元素

<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一个简单的 HTML 页面。</p>
</body>

作用： <body> 元素包含网页的主要内容，这部分是用户在浏览器中看到的所有内容。所有文字、图像、链接、表单等可视元素都应该放在 <body> 元素中。换句话说，<body> 中的内容才是页面的实际展示内容。

常见内容：

文本内容：如标题、段落、列表等。
图像和媒体：使用 <img> 标签插入图像，<audio>、<video> 标签嵌入音频和视频。
链接：使用 <a> 标签创建超链接。
表单：使用 <form> 标签创建表单，提交数据给服务器。
嵌入内容：如 iframe 标签嵌入外部网页或视频。
交互式元素：通过 JavaScript 和 HTML 元素的结合，实现用户交互。

说明：

<body> 内的内容会被浏览器渲染并显示给用户，用户交互也主要发生在 <body> 部分。
通常，JavaScript 和样式（CSS）会影响 <body> 中内容的显示和行为。

四、HTML5的主要标签清单

标签非常的多，我只是罗列出来，不一定需要全部用上，后面会有个简单的示例，重要的标签。

文档结构标签

<html>：定义整个HTML文档。
<head>：定义文档的元数据部分（如字符集、标题、外部文件引用等）。
<title>：定义网页的标题。
<meta>：提供关于文档的元数据（如字符集、页面描述等）。
<base>：设置页面的基本URL。
<link>：定义文档与外部资源的关系，通常用于引入样式表。
<style>：嵌入CSS样式。
<script>：嵌入或引用JavaScript代码。
<noscript>：如果浏览器不支持JavaScript，则显示此内容。

文本内容标签

<body>：定义网页的主体内容部分。
<header>：定义文档或页面的头部区域。
<footer>：定义文档或页面的底部区域。
<nav>：定义导航链接部分。
<article>：定义独立的内容区域（通常是文章）。
<section>：定义文档的一个章节或区域。
<div>：定义一个文档区域或块级容器。
<span>：定义内联文本容器。
<h1>, <h2>, ..., <h6>：定义标题（从大到小的六个级别）。
<p>：定义段落。
<br>：定义换行符。
<hr>：定义水平分隔线。
<blockquote>：定义引用的内容。
<pre>：定义预格式化的文本（保留空格和换行符）。
<code>：定义代码片段。
<em>：表示强调文本（通常是斜体）。
<strong>：表示重要文本（通常是加粗）。
<small>：表示较小的文本。
<mark>：表示被高亮显示的文本。
<del>：表示已删除的文本（通常显示为删除线）。
<ins>：表示插入的文本（通常显示为下划线）。
<sub>：定义下标文本。
<sup>：定义上标文本.
<i>：定义斜体文本。
<b>：定义粗体文本。
<u>：定义下划线文本。
<q>：定义短的引用。

链接和锚点标签

<a>：定义超链接。
<area>：定义图像地图中的区域。
<link>：定义与外部资源的关系，通常用于链接CSS样式表。

表格标签

<table>：定义表格。
<caption>：定义表格标题。
<thead>：定义表格的头部部分。
<tbody>：定义表格的主体部分。
<tfoot>：定义表格的底部部分。
<tr>：定义表格的行。
<th>：定义表格头单元格。
<td>：定义表格数据单元格。
<col>：定义表格列的属性（如宽度）。
<colgroup>：定义表格列的组。

表单标签

<form>：定义表单。
<input>：定义输入控件。
<textarea>：定义多行文本输入区域。
<button>：定义按钮。
<select>：定义下拉列表。
<option>：定义下拉列表的选项。
<optgroup>：定义下拉列表中的选项组。
<label>：定义表单元素的标签。
<fieldset>：定义表单区域。
<legend>：为 <fieldset> 提供标题。
<datalist>：定义输入框可用的预设选项。
<output>：定义输出元素。

图像和多媒体标签

<img>：定义图像。
<audio>：定义音频内容。
<video>：定义视频内容。
<source>：定义多媒体资源（如视频、音频）的来源。
<track>：定义视频或音频的文本轨道（如字幕）。
<picture>：用于响应式图片。

链接和嵌入标签

<iframe>：定义内联框架，嵌入另一个网页。
<embed>：嵌入外部内容（如插件或多媒体）。
<object>：定义嵌入外部资源的容器。
<param>：定义 <object> 标签的参数。
<applet>：嵌入Java小程序（已不推荐使用）。
<embed>：用于嵌入外部内容。

脚本和程序控制标签

<script>：用于嵌入或引用JavaScript代码。
<noscript>：用于显示在禁用JavaScript时的内容。
<template>：定义HTML模板，通常用于JavaScript中。
<slot>：用于Web组件的插槽。

元信息标签

<meta>：定义文档的元数据。
<base>：设置文档的基础URL。
<link>：定义文档与外部资源的关系，通常用于链接CSS样式表。

其他HTML5元素

<progress>：表示任务的进度。
<meter>：表示测量值（如一个量度表的值）。
<mark>：表示高亮的文本。
<bdi>：定义文本的双向隔离（通常用于多语言页面）。
<bdo>：定义文本的双向重写。

嵌入式内容标签

<canvas>：定义绘图区域（通常与JavaScript结合使用）。
<svg>：定义可缩放矢量图形。
<math>：嵌入数学表达式。

Web组件标签

<template>：用于模板内容，在浏览器中不会被渲染。
<slot>：Web组件插槽元素。

语义化标签

<header>：表示文档或部分的头部区域。
<footer>：表示文档或部分的底部区域。
<article>：表示文档中的一篇独立的内容。
<section>：表示文档的一个部分。
<aside>：表示文档的侧边内容。
<main>：表示文档的主要内容部分。
<figure>：表示独立的内容（如图片、视频、图表等）。
<figcaption>：为 <figure> 元素添加标题。

五、简单的html页面示例

这里相当于一共前端的登录框，不过我把前后端交互改成输入账号密码后输出到页面上，请看后面示例讲解。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="登录页面示例">
    <title>登录页面</title>
    <style>
        /* 页面基础样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .login-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 40px;
            width: 300px;
            text-align: center;
        }

        h2 {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
        }

        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        .form-footer {
            text-align: center;
            margin-top: 10px;
        }

        .form-footer a {
            text-decoration: none;
            color: #4CAF50;
            font-size: 14px;
        }

        .output {
            margin-bottom: 20px;
            font-size: 14px;
            color: #333;
        }

        .output span {
            display: block;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>登录</h2>
        <!-- 显示输入内容的区域 -->
        <div class="output" id="output"></div>
        
        <form id="loginForm">
            <label for="username">用户名</label>
            <input type="text" id="username" name="username" required placeholder="请输入用户名">

            <label for="password">密码</label>
            <input type="password" id="password" name="password" required placeholder="请输入密码">

            <button type="submit">登录</button>
        </form>

        <div class="form-footer">
            <p><a href="#">忘记密码?</a></p>
        </div>
    </div>

    <script>
        // 获取表单和输出区域
        const form = document.getElementById("loginForm");
        const output = document.getElementById("output");

        // 表单提交事件
        form.addEventListener("submit", function(event) {
            event.preventDefault(); // 阻止表单提交，避免刷新页面

            // 获取用户名和密码的值
            const username = document.getElementById("username").value;
            const password = document.getElementById("password").value;

            // 在上方输出用户输入的用户名和密码
            output.innerHTML = `
                <span><strong>用户名:</strong> ${username}</span>
                <span><strong>密码:</strong> ${password}</span>
            `;

            // 清空输入框
            document.getElementById("username").value = '';
            document.getElementById("password").value = '';
        });
    </script>
</body>
</html>

1. 效果

2. 示例代码讲解

2.1. <head>

作用：<head>标签包含页面的元数据（metadata），如字符编码、视口设置、标题、描述等，它们通常不直接显示在页面上。

子标签解释：

<meta charset="UTF-8">：定义了页面的字符编码为UTF-8，保证页面能够正确显示中文字符。

<meta name="viewport" content="width=device-width, initial-scale=1.0">：使页面在移动设备上适配，设置页面的宽度为设备的宽度，并将初始缩放比例设为1.0。

<meta name="description" content="登录页面示例">：为页面添加一个描述，通常用于SEO（搜索引擎优化），帮助搜索引擎理解页面内容。

<title>：指定页面的标题，通常会显示在浏览器的标签页上。

2.2. <style>

作用：该标签用来定义页面的CSS样式，控制页面的外观和布局。在上述代码中，它用于设置页面的颜色、字体、间距、按钮样式等。

2.3. <body>

作用：<body>标签包含页面的实际内容，它是用户在浏览器中看到的部分。页面的所有可见内容（如文本、图像、表单、按钮等）都放在<body>标签内。

2.4. <div class="login-container">

作用：<div>标签是一个块级容器，用来将页面元素分组。在这里，它用来包裹整个登录界面的内容，并应用样式类login-container来控制其布局和外观。

2.5. <h2>

作用：<h2>标签定义一个二级标题，通常用来表示页面中的副标题。在这里，它显示了页面的标题“登录”。

2.6. <form id="loginForm">

作用：<form>标签用于定义一个表单，用来收集用户输入的信息（如用户名、密码）。在该代码中，它包含两个输入字段和一个提交按钮。表单的id="loginForm"用于JavaScript中获取该表单并处理提交事件。

2.7. <label>

作用：<label>标签用来为表单控件（如文本框、复选框、单选按钮等）提供可点击的标签，通常与输入控件配合使用，便于用户操作和提高可访问性。在代码中，<label>标签关联到用户名和密码输入框，帮助用户理解每个输入框的用途。

2.8. <input>

作用：<input>标签用于创建不同类型的用户输入控件。这里有两个<input>标签：

type="text"：创建一个文本框，用于输入用户名。

type="password"：创建一个密码框，用于输入密码，密码字符会被隐藏。

2.9. <button>

作用：<button>标签定义一个按钮。点击按钮时，通常会触发表单提交或执行JavaScript函数。在代码中，按钮的文本为“登录”，用户点击后会触发表单提交的JavaScript代码。

2.10. <a>

作用：<a>标签定义一个超链接，可以将用户引导到另一个页面或执行其他动作。在这里，<a href="#">表示一个占位符链接，用户点击时不会跳转，只是作为一个示例或进一步的操作提示（如“忘记密码”）。

2.11. <script>

作用：<script>标签用于在HTML页面中嵌入或引用JavaScript代码。它通常用来实现页面的动态行为，比如处理表单提交、交互事件等。在代码中，<script>标签内包含的JavaScript代码控制了表单的提交事件，获取用户输入的用户名和密码，并将其显示在页面上。

2.12. <span>

作用：<span>标签是一个内联元素，通常用于包装文本或其他元素，以便应用样式或进行动态操作。在该代码中，<span>用于在表单上方显示用户输入的用户名和密码。

3. 示例总结

这些标签结合起来，构成了一个基础的登录页面框架。通过<form>收集用户输入的用户名和密码，通过<button>提交表单，<script>处理用户输入的显示与表单的提交行为。而样式和布局则通过<style>和CSS来控制，确保页面的可用性和美观性。

六、输入和表单

前面也看到了input和form的运用，这种结合可以让用户输入的数据与服务器产生交互，而这种交互就是我们关注的地方。

1. `input` 标签

<input> 标签用于创建用户输入字段。它可以用来获取用户的各种输入数据，如文本、密码、复选框、单选按钮等。<input> 是一个自闭合标签，通常不需要结束标签。

1.1. 常见的类型

<input> 标签有许多不同的类型和属性，常见的一些类型包括：

type="text"：普通文本输入框
type="password"：密码输入框，输入的内容会被隐藏
type="radio"：单选按钮，允许用户从一组选择中选择一个
type="checkbox"：复选框，允许用户选择多个选项
type="email"：电子邮件输入框，浏览器会验证电子邮件格式
type="number"：数字输入框，用户只能输入数字
type="file"：文件选择框，允许用户选择文件上传
type="submit"：提交按钮，用于提交表单
type="button"：普通按钮，可与JavaScript一起使用执行特定动作
type="date"：日期选择框
type="range"：范围选择器，用于选择一个范围值

1.2. 常用属性

name：指定输入字段的名称，通常用于服务器处理表单数据时传递值。
value：指定输入框的初始值，或者按钮、单选框、复选框的显示文本。
placeholder：为输入框提供提示文本，显示在输入框内，当用户开始输入时消失。
required：使输入字段成为必填项，表单提交时如果该字段为空，浏览器会自动提示用户填写。
readonly：使输入框变为只读，用户无法修改内容。
disabled：禁用输入框，用户不能与之交互。
maxlength：限制输入框中可输入的最大字符数。

#示例
htmlCopy Code<!-- 文本输入框 -->
<input type="text" name="username" placeholder="Enter your username">

<!-- 密码输入框 -->
<input type="password" name="password" placeholder="Enter your password">

<!-- 单选按钮 -->
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<!-- 复选框 -->
<input type="checkbox" name="newsletter"> Subscribe to newsletter

<!-- 提交按钮 -->
<input type="submit" value="Submit">

2. `form` 标签

<form> 标签用于创建一个表单，用于将用户输入的数据发送到服务器进行处理。表单包含一个或多个 <input> 元素（以及其他元素，如 <textarea>、<select>、<button> 等）以获取用户输入。

2.1. 属性

action：指定表单提交数据的目标URL，即服务器端接收数据的地址。
method

：指定提交表单数据的方法，常见的有：
- GET：数据通过URL传递，适用于不敏感数据的提交（例如搜索框）。
- POST：数据通过HTTP请求体传递，适用于敏感数据（例如登录或注册表单）。
target

：指定表单数据提交后的响应方式，常见的取值有：
- _self：在当前窗口中加载响应（默认值）。
- _blank：在新窗口中加载响应。
- _parent：在父框架中加载响应。
- _top：在整个浏览器窗口中加载响应。

2.2. 常用属性

action：指定表单数据提交的目标URL。
method：指定数据提交的方法（GET或POST）。
name：为表单指定名称，用于JavaScript访问或与服务器端交互。
enctype：指定表单数据的编码类型，常用于文件上传时。
- 常见的有：
- application/x-www-form-urlencoded：表单的默认编码类型，数据以键值对的方式编码在URL中。
- multipart/form-data：用于文件上传，能够处理二进制数据。
- application/json：将数据以JSON格式提交。

#示例
htmlCopy Code<!-- 创建一个表单 -->
<form action="/submit-form" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br>

  <input type="submit" value="Submit">
</form>

HTML扫盲篇结语

通过本篇的学习，我们深入了解了HTML在网页构建中的基础作用，以及它如何定义网页的结构和内容。作为网络安全的一部分，理解HTML不仅有助于开发高质量的网页，还对保护和提升网站的安全性至关重要。因为许多网络安全漏洞，例如XSS（跨站脚本攻击）和HTML注入，往往都源自于不正确的HTML实现和不安全的网页代码。

网络安全与HTML的关系

HTML的正确使用：安全的HTML代码可以防止诸如跨站脚本（XSS）、HTML注入等攻击。如果你没有正确地处理用户输入，攻击者可能会通过注入恶意HTML代码，导致安全漏洞。
防止XSS攻击：确保所有用户输入的数据在呈现到网页上时都经过适当的过滤和转义，可以有效防止恶意脚本的执行。了解如何使用HTML的属性（如<script>标签）和输入字段的安全性，可以防止潜在的安全威胁。
数据保护：在网页设计时，需要注意HTML中如何处理敏感数据，避免暴露不应公开的信息。例如，通过正确使用HTTP头（如Content-Security-Policy）和SSL/TLS加密，确保用户的个人信息和身份不被泄露。

进一步学习的方向

深入学习Web安全基础：在掌握了HTML的基础后，可以进一步学习Web安全的核心概念，包括防止XSS、SQL注入、CSRF（跨站请求伪造）等常见攻击手法，以及如何通过安全编码实践来防范这些威胁。
后端安全：Web前端与后端的安全性是相辅相成的，理解如何保护服务器端的代码、数据库以及API接口同样重要。通过学习和应用安全框架和技术（如JWT认证、OAuth 2.0等），可以提升Web应用的整体安全性。
安全工具与测试：学习如何使用自动化的安全扫描工具（如OWASP ZAP、Burp Suite等），定期进行Web应用的漏洞扫描与渗透测试，确保网站和应用保持最新的安全状态。

总结

HTML是构建现代Web应用的基础，但它在网络安全中的角色也同样重要。从HTML标签的使用，到输入验证、到数据加密，每一环节都关乎网站的安全。掌握HTML并将其与安全最佳实践结合，是确保网页不被攻击的关键一步。希望通过本篇的学习，你不仅能提升HTML技能，还能具备更强的Web安全意识，为开发更加安全的网页奠定坚实基础。

查看全文

http://www.kler.cn/a/394039.html