声明：学习视频来自b站up主 泷羽sec，如涉及侵权马上删除文章
感谢泷羽sec 团队的教学
视频地址：黑客基础之html（超文本标记语言）_哔哩哔哩_bilibili
本文主要分享html的基础知识。
一、什么是HTML
HTML（HyperText Markup Language，超文本标记语言）是一种标准的标记语言，用于创建和设计网页。它定义了网页的结构和内容，通过与其他技术（如 CSS 和 JavaScript）结合使用，可以实现复杂的网页设计和交互功能。
二、HTML的特点
- 标记语言：HTML通过标记（标签）定义内容的结构，例如标题、段落、图片、链接等。
- 平台无关性：HTML文档可以在任何支持浏览器的设备上打开。
- 超文本：允许通过超链接将多个网页或资源连接在一起。
三、HTML的基本结构
HTML文档通常由以下基本结构组成：
<!DOCTYPE html> <!-- 文档类型声明 --> <html> <head> <title>网页标题</title> <!-- 网页标题显示在浏览器标签上 --> <meta charset="UTF-8"> <!-- 设置字符编码 --> </head> <body> <h1>这是一个标题</h1> <!-- 一级标题 --> <p>这是一个段落。</p> <!-- 段落 --> <a href="https://example.com">这是一个链接</a> <!-- 超链接 --> <img src="image.jpg" alt="图片描述"> <!-- 图片 -->
</body> </html>结构详细解析
1.文档类型声明
<!DOCTYPE html>- 用于告诉浏览器该文档使用的是 HTML5 标准。
- 这是 HTML 文档的第一行，必须包含。
2.<html> 标签
<html> ... </html>- HTML 文档的根元素，表示整个 HTML 页面。
- 所有 HTML 内容必须包含在
<html>标签内。
3.<head> 部分
<head> ... </head>常见内容：
- 用于包含元信息（meta information），例如网页标题、编码、外部资源（如 CSS、JS）等。
- 不直接显示在网页中，通常为页面提供背景信息。
<meta charset="UTF-8">：声明文档的字符编码为 UTF-8，确保显示中文或其他语言字符时不会乱码。<title>：定义网页标题，显示在浏览器标签上。示例：<title>我的个人网站</title><link>：引入外部 CSS 文件。示例：<link rel="stylesheet" href="styles.css"><script>：引入或编写 JavaScript 脚本。示例：<script src="script.js"></script>
4.<body> 部分
<body> ... </body>常见内容：
1. 标题（<h1> 到 <h6>）
- 功能：用于定义网页中的标题，
<h1>是最大级别的标题，<h6>是最小级别。 - 示例：
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> - 效果： 标题的大小和重要性会逐级递减，搜索引擎优化（SEO）也会根据标题层级判断内容的重要性。
2. 段落（<p>）
- 功能：用于定义正文文本，每个段落会自动换行。
- 示例：
<p>这是一个段落内容。</p> <p>这是另一个段落。</p>
3. 超链接（<a>）
- 功能：创建可以点击的链接，跳转到其他页面或资源。
- 语法示例：
<a href="https://www.4399.com">点击访问 4399游戏 网站</a> - 属性：
- href：指定链接地址。
- target="_blank"：新窗口中打开链接。
4. 图片（<img>）
- 功能：在网页中显示图片。
- 示例：
<img src="qianduan.jpg" alt="前端基础" width="300" height="200"> - 属性：
- src：图片路径。
- alt：图片加载失败时显示的替代文本。
- width 和 height：设置图片的宽度和高度。
5. 列表（<ul> 和 <ol>）
- 功能：用于创建有序或无序列表。
- 示例：
- 无序列表：
<ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> - 有序列表：
<ol> <li>步骤一</li> <li>步骤二</li> <li>步骤三</li> </ol>
- 无序列表：
6. 表单（<form>）
- 功能：创建用户可以输入数据的交互区域，用于登录、搜索、提交信息等。
- 示例：
<form action="/submit" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <button type="submit">提交</button> </form> - 常见控件：
- 文本框（<input type="text">）
- 密码框（<input type="password">）
- 按钮（<button>）
7. 表格（<table>）
- 功能：用于显示数据表格。
- 示例：
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>张三</td><td>25</td> </tr> <tr> <td>李四</td> <td>30</td> </tr> </table> - 主要标签：
- <table>：定义表格。
- <tr>：定义行。
- <th>：定义表头。
- <td>：定义单元格。
8.综合示例
<!DOCTYPE html>
<html><head><title>前端基础</title></head><body><h1>欢迎来到前端基础</h1><p>这是一个段落，介绍什么是HTML。</p><a href="https://www.4399.com">点击访问外部链接</a><img src="https://img0.baidu.com/it/u=3867876040,2711478073&fm=253&fmt=auto&app=138&f=PNG?w=1028&h=500" alt="前端" width="300"><h2>前端三剑客/h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><h2>联系我</h2><form action="/submit" method="post"><label for="email">邮箱：</label><input type="email" id="email" name="email"><button type="submit">提交</button></form><h2>数据表格</h2><table border="1"><tr><th>姓名</th><th>职业</th></tr><tr><td>GGB</td><td>RT</td></tr><tr><td>xzz</td><td>BT</td></tr></table></body>
</html>
四、HTML的主要功能
- 内容结构化：使用标题、段落、列表等标签组织内容。
- 多媒体嵌入：可以嵌入图片、音频、视频等多媒体元素。
- 交互性：通过超链接连接多个页面，通过与 CSS 和 JavaScript 集成实现动态效果。
- 语义化：通过语义化标签（如
<header>、<article>）使网页结构更易于理解和维护。
