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

Web基础1 -- HTML（超文本标记语言）

article 2024/11/16 10:55:53

声明：
本文的学习内容来源于B站up主“泷羽sec”视频“黑客基础之html（超文本标记语言）”的公开分享，所有内容仅限于网络安全技术的交流学习，不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题，请联系本人，我将立即删除相关内容。
本文旨在帮助网络安全爱好者提升自身安全技能，并严格遵守国家法律法规。任何人利用本文中的信息从事违法活动，均与本文作者和“泷羽sec”无关。请读者自觉遵纪守法，合理合法使用相关知识。

1 html简介

HTML 是一种用于描述网页的标记语言，其全称是超文本标记语言（HyperText Markup Language）。不同于编程语言，HTML 通过一套标记标签（markup tag）来结构化网页内容。HTML 文档包含各种标签和文本内容，这些标签用于定义网页的不同元素，使浏览器能够正确显示网页。HTML 文档通常被称为 web 页面。

2 HTML 基本结构概述

HTML（超文本标记语言）网页有一个标准的结构，主要由以下几个关键部分组成：文档类型声明、HTML 根元素、头部（head）和主体（body）部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架。

3 文档类型声明（DOCTYPE）

<!DOCTYPE html>：这是 HTML5 的文档类型声明。它必须位于 HTML 文件的第一行，作用是告知浏览器文档所遵循的 HTML 版本，以便浏览器能够正确地渲染页面。对于 HTML5 来说，这个声明简洁明了，统一了 HTML 文档类型的标准，取代了以往复杂的 DTD（文档类型定义）声明。

4 HTML 根元素（<html>）

<html>：作为 HTML 文档的根标签，所有其他的 HTML 元素都被包含在它里面。它有开始标签 <html> 和结束标签 </html>。这个标签界定了整个 HTML 文档的范围，浏览器会识别其中特定内容为有效的 HTML 代码。

5 头部部分（<head>）

<head>：此部分包含了关于网页的元数据，这些信息对浏览器的渲染和网页的展示特性有重要作用，但不会直接在网页的可见区域显示。

<title>：用于定义网页的标题，标题内容会显示在浏览器的标题栏或标签页上。例如：<title>精彩网页世界</title>。这是用户识别网页的重要标识，同时也对搜索引擎优化（SEO）有一定影响。
<meta>：用于提供多种类型的元数据。常见的有字符编码设置，如 <meta charset="UTF-8">，它确保浏览器能够正确解析和显示网页中的各种字符，支持多种语言的字符集。另外，还可用于设置页面描述、关键词等信息，如 <meta name="description" content="这是一个充满趣味的网页"> 用于向搜索引擎描述网页内容，<meta name="keywords" content="网页, 趣味, 示例">可设置关键词帮助搜索引擎索引网页。
<link>：主要用于链接外部资源，最常见的是连接 CSS 样式表。例如：<link rel="stylesheet" href="styles.css">，其中 rel="stylesheet" 表明这是一个样式表链接，href 属性性指定了 CSS 文件的路径。通过这种方式，可以实现网页内容与样式的分离，方便网页设计和维护。
<script>：可用于在 HTML 文档中嵌入 JavaScript 代码或引用外部的 JavaScript 文件。如果是嵌入代码，可以这样写：<script>alert('欢迎来到我的网页');</script>。若引用外部文件，则是 <script src="script.js"></script>，这里 src 属性性指定了 JavaScript 文件的路径。脚本可以为网页添加交互功能。

6 主体部分（<body>）

<body>：包含了所有在网页中可见的内容，如文本、图像、超链接、表格、表单等各种网页元素。

文本元素：可以使用段落标签 <p> 来组织文本，如 <p>这是一段普通的文本内容。</p>。
标题标签 <h1> - <h6> 可用于创建不同级别的标题，<h1> 表示最高级别的标题，重要性依次递减，例如 <h1>主标题</h1>, <h2>副标题</h2>。
图像元素：使用 <img> 标签来插入图像，如 <img src="image.jpg" alt="图像描述">，src 属性性指定图像的来源路径，alt 属性在图像无法正常显示时提供替代文本，对于可访问性和 SEO 都很重要。
超链接元素：通过 <a> 标签创建超链接，如 <a href="https://www.example.com">点击这里</a>，href 属性定义了链接的目标 URL，标签内的文本是用户看到的可点击的链接内容。
表格元素：使用 <table> 标签创建表格，<tr> 表示表格行，<td> 表示表格单元格，例如：

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

表单元素：用于收集用户输入信息，例如 <form> 标签包含表单内容，<input> 标签用于创建各种输入框，如 <input type="text" placeholder="请输入用户名"> 用于创建一个文本输入框，type 属性性指定输入类型，placeholder 属性性显示提示文本。

以下是一个完整的简单 HTML 网页示例：

<!DOCTYPE html>
<html>
<head>
  <title>示例网页</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>欢迎来到示例网页</h1>
  <p>这是网页的主要内容部分，这里可以展示各种信息。</p>
  <img src="example.jpg" alt="示例图片">
  <a href="https://www.example.com">访问示例网站</a>
</body>
</html>