什么是HTML？
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建和设计网页的标准标记语言。HTML是Web开发的基础，结合CSS（层叠样式表）和JavaScript（脚本语言），可以创建外观精美且交互丰富的网页。
HTML使用标签（tags）来定义网页的不同部分，如标题、段落、列表、链接、图像等。这些标签帮助浏览器理解和呈现网页内容。HTML标签内可以包含属性（Attributes）。
HTML 标签是由尖括号包围的关键词，例如 <html>
HTML文档的基本结构
一个标准的HTML文档由以下几个主要部分组成：
<!DOCTYPE html>：声明文档类型，告知浏览器使用HTML5标准。<html>：HTML文档的根元素。<head>：包含元数据，如文档标题、字符集声明、样式表和脚本链接等。<title>：设置网页的标题，显示在浏览器标签栏中。<body>：包含网页的主体内容，如文本、图像、链接、表格等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>HTML中的注释
<!-- 这是一个注释 --><h1> ~ <h6>标题标签
独占一行。<h1>表示最大的标题，通常用作表示页面的主要内容或主题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
</body>
</html>
<p>段落标签
独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>这是一个段落</p>
</body>
</html><p>标签不能嵌套使用，也就是说一个<p>标签不能包含另一个<p>标签。
<!-- 不正确的嵌套 -->
<p>这是一个段落。
<p>这是嵌套在段落中的另一个段落。</p>
</p>
<!-- 正确的使用 -->
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
路径
/ 表示进入某一个文件夹里面
. 表示当前文件所在的文件夹
.. 表示当前文件的上一级文件夹
- 使用绝对路径可以避免路径错误，但代码的可移植性较差。
- 使用相对路径可以提高代码的可移植性，但需要确保当前工作目录的正确性。
相对路径
绝对路径从文件系统的根目录开始，指定了文件或文件夹的完整位置。它包括所有目录的名称，直到目标文件或文件夹的具体位置。
Windows 示例: C:\Users\Username\Documents\file.txt绝对路径
相对路径是相对于当前工作目录的路径，指定了文件或文件夹的位置。它不包括根目录，而是从当前目录出发。
Windows 示例: Documents\file.txt（假设当前路径为 C:\Users\Username）<br>换行标签
<br>标签用于实现文本的换行。由于浏览器不能识别代码中的" Enter 键 "换行，所以如果文本需要换行则可以使用换行标签<br>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>这是第一行<br>这是第二行</p>
</body>
</html><hr>水平线标签
<hr>标签用于创建一个水平分隔线。你可以通过CSS来修改<hr>标签的样式，例如改变颜色、宽度、边框样式等。
<pre>预格式化标签
<pre>标签用于表示预格式化文本。在<pre>标签内的文本会按照原样显示，包括空格、制表符和换行符。它通常用于显示代码、编程脚本或其他需要保留格式的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<pre>
春晓
春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。
</pre>
</body>
</html><img>图像标签
<img>标签用于在网页中嵌入图像。
<img>标签的属性有src，用于指定图像文件的路径。alt属性是在图像无法显示时的替代文本。width属性和height属性用于表示图像的宽度和高度，可以用像素(px)或百分比(%)表示。title属性是当用户悬停在图像上时显示的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="/images/img.png" alt="图片" title="图片" width="600px">
<!-- 如果width="50%"，这将设置图像的宽度为其包含元素宽度的50% -->
</body>
</html><a>锚点标签
<a>标签通常用于创建超链接，允许用户从一个页面跳转到另一个页面，或在同一个页面的不同部分之间进行跳转，还可以用于下载文件。
<a>标签最常见的属性是href，用于指定链接的目标URL。title属性用于当用户悬停在链接上时显示文本。target属性用于指定链接的打开方式，常见的值有：
_self：在同一窗口或标签中打开链接（默认）。_blank：在新窗口或标签中打开链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank" title="百度一下，你就知道">百度</a>
</body>
</html>download属性可以指定用户所下载的文件的文件名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="/documents/resource.rar" download="fileName.rar">下载文件</a>
</body>
</html>内部链接：可以使用<a>标签在同一页面的不同部分之间导航。为此，我们需要为目标元素设置id属性，并在<a>标签的href属性中填写#id。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#two">第2集 </a>
<hr>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<hr>
<!-- 目标元素 -->
<p id="two">第2集介绍</p>
</body>
</html><a>标签还可以包含其他HTML元素，如文本、图像等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 点击图片跳转网页 -->
<a href="https://www.baidu.com">
<img src="/images/img.png" alt="图片" title="图片" width="600px">
</a>
</body>
</html><audio>音频标签
<audio>标签用于在网页中嵌入音频内容。它支持多种音频格式，如 MP3、WAV 和 Ogg。
src属性用于指定音频文件的 URL。controls属性用于添加播放、暂停、音量等控件。autoplay属性用于在页面加载时自动播放音频。注意，现代浏览器出于用户体验和隐私考虑，可能会阻止自动播放。loop属性用于使音频播放结束后自动重新播放。muted属性表示默认静音播放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio src="audio_file.mp3" controls autoplay loop></audio>
</body>
</html><video>视频标签
<video>标签用于在网页中嵌入视频内容。包含src, controls, autoplay, loop, muted, width, height等属性。
<video src="#" width="300px" autoplay muted loop controls></video>列表
有序列表
在HTML中，<ol>标签用于定义一个有序列表（ordered list）。有序列表中的列表项会按照特定的顺序显示，通常是数字或字母。每个列表项都使用<li>标签包裹。可以在一个列表项内嵌套另一个<ul>或<ol>标签形成列表的嵌套（多级列表）。
<ol>标签的type属性用于指定列表项的编号类型。start属性用于指定列表的起始编号。reversed属性属性用于将列表项的顺序反转，列表项会从最后一个开始编号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<ol type="A" start="1">
<li>第一项</li>
<li type="1" value="5">第二项</li>
<!-- value属性会改变后面列表项的符号顺序 -->
<!-- type属性不会改变后面列表项的编号类型 -->
<li>第三项</li>
</ol>
</body>
</html>无序列表
在HTML中，<ul>标签用于定义一个无序列表（unordered list）。无序列表中的每个列表项都由<li>标签包裹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</body>
</html>可以在一个列表项内嵌套另一个<ul>或<ol>标签形成列表的嵌套（多级列表）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>胡萝卜</li>
<li>土豆</li>
<li>西红柿</li>
</ul>
</li>
</ul>
</body>
</html>定义列表
在HTML中，<dl>标签用于定义一个定义列表（Definition List）。它由一个或多个定义项组成。定义列表通常用于展示术语和其对应的定义。
<dl>标签：定义列表的容器。<dt>标签：定义列表的标题或术语。<dd>标签：定义列表的描述或定义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>一种脚本语言，用于创建动态网页内容</dd>
</dl>
</body>
</html>定义列表可以嵌套其他列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>
<dl>
<dt>苹果</dt>
<dd>红色的水果</dd>
<dt>香蕉</dt>
<dd>黄色的水果</dd>
</dl>
</dd>
<dt>蔬菜</dt>
<dd>
<dl>
<dt>胡萝卜</dt>
<dd>橙色的蔬菜</dd>
<dt>土豆</dt>
<dd>常见的根茎类蔬菜</dd>
</dl>
</dd>
</dl>
</body>
</html>表格
在HTML中，表格使用<table>标签来定义。表格由行和列组成，用于组织和展示数据。
<table>标签：定义表格的开始和结束。<tr>标签：定义表格中的一行（Table Row）。<th>标签：定义表格中的表头单元格（Table Header），通常用于表格的标题部分。<td>标签：定义表格中的数据单元格（Table Data），用于表格的具体数据。<caption>标签：用于定义表格的标题。
<table>标签中的border属性用于设置表格的边框的粗细。rolspan和colspan属性用于合并行或列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px">
<caption>用户信息表</caption>
<tr>
<th>姓名</th>
<th colspan="2">联系方式</th>
</tr>
<tr>
<td>张三</td>
<td>电话</td>
<td>邮箱</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>电话</td>
<td>邮箱</td>
</tr>
<tr>
<td>手机</td>
<td>微信</td>
</tr>
</table>
</body>
</html><thead>、<tbody> 和 <tfoot> 标签：分别用于定义表格的头部、主体和尾部，便于组织和样式化表格内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">数据来源：某某数据库</td>
</tr>
</tfoot>
</table>
</body>
</html>表单
一个基本的表单结构如下：
<form action="处理地址" method="请求方法">
<!-- 输入控件 -->
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="submit" value="提交">
</form>
文本框：用于输入单行文本。
<input type="text" name="username" placeholder="请输入用户名">密码框：用于输入密码，输入内容会被隐藏。
<input type="password" name="password" placeholder="请输入密码">单选框：允许用户从一组选项中选择一个。
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
多选框：允许用户选择一个或多个选项。
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="game"> 游戏
下拉列表：提供一个下拉菜单供用户选择。
<select name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select>
文本域：用于输入多行文本。
<textarea name="message" rows="4" cols="50"></textarea>
按钮：用于提交表单或执行其他操作。需要配合<form>标签才能实现对应的功能。
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">上传文件：默认情况下，文件上传表单控件只能上传一个文件，如果添加multiple属性则可以实现上传多个文件的功能。
<input type="file" multiple><label> 标签：一般配合<input>标签使用，使得用户点击文字就可以选中想选择的选项（增大点击范围）。当用户点击<label>标签的文本时，浏览器会自动将焦点转到与该标签关联的表单控件上，这使得表单更加易于使用和访问。
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>
<!-- <label>标签通过 for 属性与表单控件的 id 属性进行关联 -->
<label for="username">Username:</label>
<input type="text" id="username" name="username"><button> 标签：是HTML中用于创建按钮的标签，可以用来执行JavaScript代码、提交表单数据等。<button>标签是一个通用的按钮标签，不同于其他类型的按钮（如：<input type="submit">, <input type="button">），它提供了更多的自定义选项和样式控制。
<button type="按钮类型">按钮文本</button>
<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<!-- onclick属性用于定义按钮点击时所执行的JavaScript代码 -->
<button onclick="alert('按钮被点击了！')">点击我</button>以下是一个完整的表单示例：
这个表单包含了多种输入控件，可以收集用户的用户名、密码、性别、爱好、国家和留言内容。提交后，数据将通过POST方法发送到submit.php。<form>标签中的enctype属性用于指定表单数据的编码方式。这个属性对于上传文件尤其重要，因为它决定了数据在提交时的编码格式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="submit.php" method="post" enctype="multipart/form-data">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male"> 男
<input type="radio" id="female" name="gender" value="female"> 女<br><br>
<label for="hobby">爱好:</label>
<input type="checkbox" id="reading" name="hobby" value="reading"> 阅读
<input type="checkbox" id="music" name="hobby" value="music"> 音乐<br><br>
<label for="country">国家:</label>
<select id="country" name="country">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
</select><br><br>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>HTML中的特殊字符
在HTML中，有一些特殊字符在代码中具有特殊意义，因此需要使用特定的方式来表示它们，以避免冲突或错误显示。
| 特殊字符 | 代实体码 | 特殊字符 | 实体代码 |
| 小于号< | < | 版权符号© | © |
| 大于号> | > | 注册商标号® | ® |
| 和号& | & | 乘号× | × |
| 双引号" | " | 除号÷ | ÷ |
| 空格 |   |
文本格式化标签
| 效果 | 标签 |
| 加粗 | <strong> 或 <b> |
| 倾斜 | <em> 或 <i> |
| 下划线 | <ints> 或 <u> |
| <del> 或 <s> |
38万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
