黑客基础之html

声明！

学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关，切勿触碰法律底线，否则后果自负！！！！有兴趣的小伙伴可以点击下面连接进入b站主页B站泷羽sec

1.html简介

什么是HTML?

HTML是用来描述网页的一种语言。

HTML指的是超文本标记语言：HyperText Markup Language

HTML

不是一种编程语言，而是一种标记语言

标记语言是一套标记标签，(markup tag)

HTML使用标记标签来描述网页

HTML文档包含了HTML标签及文本内容

HTML文档也叫做web页面

2.标签

<!DOCTYPE html>:
- 这个声明位于文档的第一行，定义了文档类型和版本。对于 HTML5，它简单地告诉浏览器这是一个 HTML5 文档。
<html>:
- 根元素，所有其他 HTML 元素都应该嵌套在 <html> 标签内。它告诉浏览器这是一个 HTML 文档。
- 可以包含属性如 lang 来指定文档的语言。
<head>:
- 包含文档的元数据（meta-information），比如字符集、文档标题、样式表链接、脚本等。这些信息不会显示在页面上，但对浏览器处理页面至关重要。
<title>:
- 定义 HTML 文档的标题，该标题会显示在浏览器的标签页上，并且在书签中使用。每个 HTML 文档应该只有一个 <title> 元素。
<meta>:
- 提供关于 HTML 文档的元数据，例如字符编码 (charset)、描述 (description)、关键词 (keywords)、作者 (author) 和视口设置 (viewport) 等。
- 例如：<meta charset="UTF-8"> 设置文档使用的字符编码为 UTF-8。
<link>:
- 用来定义文档与外部资源之间的关系，最常见的是链接到样式表（CSS 文件）。可以放置在 <head> 内部。
- 例如：<link rel="stylesheet" href="styles.css">
<script>:
- 用来定义客户端脚本，如 JavaScript。可以放在 <head> 或 <body> 中，取决于脚本的作用和执行时机。
- 例如：<script src="script.js"></script>
<body>:
- 包含文档的所有内容，如文本、图片、链接、表格等，这些都是用户可以看到和交互的部分。
<p>:
- 表示段落。用于包裹一段文字，使文本在视觉上有适当的分隔。
<h1> 到 <h6>:
- 表示标题，从最重要的 <h1> 到最不重要的 <h6>。一个页面通常只应有一个 <h1> 作为主标题。
<img>:
- 用于在网页中嵌入图像。需要使用 src 属性来指定图像的位置，并可选地使用 alt 属性提供替代文本。
- 例如：<img src="image.jpg" alt="描述图像的文字">
<a>:
- 创建超链接，允许用户点击或触摸以导航到另一个页面或文件。使用 href 属性指定链接的目标地址。
- 例如：<a href="https://example.com">访问示例网站</a>
<table>:
- 定义表格，用于组织数据。表格由一系列的行（<tr>）、列（通过单元格 <td> 或者头部单元格 <th>）组成。
<tr>:
- 定义表格中的行。每一行可以包含多个单元格。
<td>:
- 定义表格的数据单元格。它可以包含文本或其他 HTML 元素。
<form>:
- 创建一个表单，用户可以通过这个表单输入数据并提交给服务器进行处理。表单可以包含各种类型的输入字段、按钮和其他控件。
<input>:
- 用于收集用户信息。根据其 type 属性的不同，它可以呈现为文本框、密码框、复选框、单选按钮、按钮等。

案例

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的简单HTML网页</title>
    <style>
        body { font-family: Arial, sans-serif; }
        table, th, td { border: 1px solid black; border-collapse: collapse; padding: 5px; }
    </style>
</head>
<body>

<h1>欢迎来到我的网站</h1>
<p>这是一个简单的 HTML 示例页面，展示了如何使用基本的 HTML 标签。</p>
<h2>关于我们</h2>
<p>我们专注于提供高质量的内容和服务。</p>

<h2>联系我们</h2>
<p>如果您有任何问题或建议，请随时通过以下方式联系我们：<a href="mailto:info@example.com">发送邮件</a></p>

<h2>我们的服务</h2>
<table>
    <tr>
        <th>服务名称</th>
        <th>描述</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>设计服务</td>
        <td>网页与图形设计</td>
        <td>￥500</td>
    </tr>
    <tr>
        <td>开发服务</td>
        <td>软件与应用开发</td>
        <td>￥800</td>
    </tr>
</table>

<h2>订阅我们的通讯</h2>
<form action="/submit_subscription" method="post">
    <label for="fname">名字:</label><br>
    <input type="text" id="fname" name="firstname" required><br>
    <label for="email">电子邮件:</label><br>
    <input type="email" id="email" name="email" required><br><br>
    <input type="submit" value="订阅">
</form>

<h2>查看我们的位置</h2>
<p><img src="https://example.com/path/to/image.jpg" alt="公司位置地图"></p>

</body>
</html>

对应页面