🌟博主主页：我是一只海绵派大星
📚专栏分类：前端
📚参考教程：菜鸟教程
❤️感谢大家点赞👍收藏⭐评论✍️
目录
一、HTML 简介
1、什么是 HTML
2、实例解析
3、HTML 网页结构
4、 声明
5、中文编码
6、元素类型
二、HTML 基础
1、HTML 标题
2、HTML 段落
3、HTML 链接
4、HTML 图像
5、HTML 属性
6、HTML 水平线
7、HTML 注释
8、HTML 折行
9、HTML 文本格式化
10、HTML 表格
11、HTML 列表
12、HTML 表单和输入
一、HTML 简介
1、什么是 HTML
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
2、实例解析
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
- <h1> 元素定义一个大标题
- <p> 元素定义一个段落
3、HTML 网页结构
4、<!DOCTYPE> 声明
<!DOCTYPE>声明有助于浏览器中正确显示网页。
doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>5、中文编码
目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>6、元素类型
在HTML中，有两种主要的元素类型：块级元素（block-level elements）和行内元素（inline elements）。
块级元素是指那些在页面上创建一个独立的块的元素，它们会独占一行，并在其前后生成换行。块级元素可以包含其他块级元素和行内元素。常见的块级元素有：
- <div>：用于创建一个通用的容器，用于组织和布局内容。
- <p>：用于定义一个段落。
- <h1> 到 <h6>：用于定义标题，从最重要的 <h1>到最不重要的 <h6>。
- <ul>：用于创建一个无序列表。
- <ol>：用于创建一个有序列表。
- <li>：用于创建列表项，可以是 <ul>或 <ol> 的子元素。
- <table>：用于创建一个表格。
- <form>：用于创建一个表单。
行内元素是指那些在页面上不会创建一个独立的块的元素，它们只会在当前行内生成内容。行内元素通常用于对文本或其他行内元素进行样式化或应用特殊功能。常见的行内元素有：
- <span>：用于创建一个通用的行内容器，用于组织和样式化文本或其他行内元素。
- <a>：用于创建一个超链接。
- <strong>：用于定义一个加粗的文本。
- <em>：用于定义一个斜体文本。
- <img>：用于插入一个图像。
- <br>：用于插入一个换行符。
- <input>：用于创建一个输入框，通常用于表单中。
了解块级元素和行内元素的区别对于编写有效的HTML和CSS非常重要，因为它们决定了页面上元素的布局和显示方式。
问题：如何区分块级元素和行内元素？
要区分块级元素和行内元素，可以通过以下几点来辨别：
1. 它们在页面上的布局方式：块级元素会独占一行，在其前后生成换行，而行内元素则不会。
2. 它们可以包含的子元素类型：块级元素可以包含其他块级元素和行内元素，而行内元素通常只能包含其他行内元素。
3. 它们的默认CSS `display` 属性值：块级元素的默认 `display` 属性值为 `block`，而行内元素的默认 `display` 属性值为 `inline`。
4. 它们可以应用的样式：块级元素可以应用宽度（width）和高度（height）属性，而行内元素则不能。行内元素的宽度和高度是由其内容自动决定的，不能手动设置。
二、HTML 基础
1、HTML 标题
HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一只海绵派大星</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html> 
2、HTML 段落
HTML 段落是通过标签 <p> 来定义的。
注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body> 
3、HTML 链接
HTML 链接是通过标签 <a> 来定义的。
<body>
<a href="https://www.csdn.net/">我是一只海绵派大星</a>
</body>
提示:在 href 属性中指定链接的地址。
4、HTML 图像
HTML 图像是通过标签 <img> 来定义的.
<body>
<img src="/images/logo.png" width="400" height="400" />
</body>注意： 图像的名称和尺寸是以属性的形式提供的。
HTML 图像- 图像标签（ <img>）和源属性（Src）
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
5、HTML 属性
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我是一只海绵派大星</title>
</head>
<body>
<a href="https://www.csdn.net/">这是一个链接使用了 href 属性</a>
</body>
</html>6、HTML 水平线
<hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
7、HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
<body>
<!--这是一个注释，注释在浏览器中不会显示-->
<p>这是一个段落</p>
</body>8、HTML 折行
在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
<body>
<p>这个<br>段落<br>演示了分行的效果</p>
</body>
9、HTML 文本格式化
<body>
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
</body>
10、HTML 表格
HTML 表格由 <table> 标签来定义。
每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。
- tr：tr 是 table row 的缩写，表示表格的一行。
- td：td 是 table data 的缩写，表示表格的数据单元格。
- th：th 是 table header的缩写，表示表格的表头单元格。
<table border="1">
<thead>
<tr>
<th>列标题1</th>
<th>列标题2</th>
<th>列标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1，列1</td>
<td>行1，列2</td>
<td>行1，列3</td>
</tr>
<tr>
<td>行2，列1</td>
<td>行2，列2</td>
<td>行2，列3</td>
</tr>
</tbody>
</table> 
-
<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"。
-
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格。
11、HTML 列表
<body>
<h4>无序列表:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h4>有序列表:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
12、HTML 表单和输入
HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。
以下是一个简单的HTML表单的例子：
<form>元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。<label>元素用于为表单元素添加标签，提高可访问性。<input>元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type属性定义了输入框的类型，id属性用于关联<label>元素，name属性用于标识表单字段。<select>元素用于创建下拉列表，而<option>元素用于定义下拉列表中的选项。
<body>
<h2>表单</h2>
<form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
</body>
🎁结语：
本次精彩内容已圆满结束！希望各位读者在阅读过程中能够收获满满。在此，特别感谢各位读者的支持与三连赞。如果文章中存在任何问题或不足之处，欢迎在评论区留言，大星必定会认真对待并加以改进，以便为大家呈现更优质的文章。你们的支持与鼓励，将是博主不断前进的最大动力。再次感谢大家的陪伴与支持！
