<!-- 用于告诉浏览器用什么格式来渲染标签 --><!DOCTYPE html><html lang="zh-CN"> <head>    <!-- 编码是UTF-8 -->    <meta charset="UTF-8">    <!-- 名字叫视窗配置，宽度位设备宽度，初始缩放比例是1.0 -->    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>HTML学习</title></head> <body>    <!-- 这是一个注释-->     <h1>这是一级标题</h1>    <h2>这是二级标题</h2>    <h6>这是六级标题</h6>     <hr /> <!-- 这是一个分割线-->     <p>这是一个段落</p>    <a href="">这是一个连接，hypertext reference：超链接</a>    <p><a href="#top">这是一个锚点</a></p>    <p><a href="mailto:171350650@qq.com">发送邮件</a></p>    <p><a href="tel:12345678901">打电话</a></p>     <hr />     <!-- alt为图片的描述信息，或者说是图片的替代文本，当图片无法显示时，会显示这段文字 -->    <!-- 为了防止图片变形，不要同时设置width和height，只设置其中一个即可 -->    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo" width="200" /> <!-- 这是一个图片 -->    <video src="../resources/video/【原神拜年纪】让风告诉你%20视频.mp4" controls></video> <!-- 这是一个视频-->    <audio src="../resources/audio/【原神拜年纪】让风告诉你%20音频.mp3" controls></audio> <!-- 这是一个音频-->     <hr />     <!-- 这是一个表格-->    <table> <!-- 表格的标题 -->        <thead>            <tr>                <th>姓名</th> <!-- head：头，table header：表头单元格-->                <th>年龄</th>                <th>性别</th>            </tr> <!-- row：行，table row：表格的一行-->        </thead>        <tbody> <!-- 表格的主体 -->            <tr>                <td>张三</td>                <td>20</td>                <td>男</td> <!-- data：数据，table data：表格的数据单元格-->            </tr>            <tr>                <td>李四</td>                <td>21</td>                <td>女</td>            </tr>        </tbody>    </table>    <hr />     <!-- 有序列表-->    <ol>        <li>第一项</li>        <li>第二项</li>        <li>第三项</li>    </ol>    <!-- 无序列表-->    <ul>        <li>第一项</li>        <li>第二项</li>        <li>第三项</li>    </ul>    <!-- 自定义列表-->    <dl>        <dt>第一项</dt>        <dd>第一项的描述</dd>        <dt>第二项</dt>        <dd>第二项的描述</dd>        <dt>第三项</dt>        <dd>第三项的描述</dd>    </dl>     <hr />     <!-- 区块与布局 -->    <!-- 使用 span 包裹行内内容 -->    <p>这是一个段落，其中包含一个 <span style="color:red;">高亮显示</span> 的词。</p>    <p>&lt;span&gt; 是行内元素（inline element），它不会在其前后创建换行。行内元素通常用于包裹文档中的一小部分内容，例如一段文字中的某个词或短语。可以精确的对某段文字进行格式化</p>     <br />    <!-- 使用 div 包裹块级内容 -->    <div class="container">        <p>这是一个块级元素中的段落。</p>        <p>这是另一个段落。</p>        <p>&lt;div&gt; 是块级元素（block-level element），它会在其前后创建换行。块级元素通常用于包裹较大的内容块，例如段落、图像、表格等。用于对文档中的大块内容进行分组或布局</p>    </div>     <hr />     <!-- 表单 -->    <form action="/" method="post">		<!-- post安全，get不安全-->        <!-- 文本输入框 -->        <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> <!-- required：必填项-->         <br>         <!-- 单选按钮 -->        <label>性别:</label>        <!-- radio是单选框是因为radio是收音机的意思，收音机只能调到一个频道 -->        <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> <!-- 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="提交" name="submit" />        <input type="reset" value="重置" name="reset" />    </form>     <hr />     <!-- 内嵌框架 -->    <!-- 用于在网站中内嵌一个网站-->    <iframe src="https://www.bilibili.com" width="100%" height="300"></iframe>     <hr />     <!-- 替换字符 -->    <p>        &lt; 是小于号， &gt; 是大于号， &amp; 是与号， &quot; 是引号， &copy; 是版权符号， &reg; 是注册商标符号    </p> </body> </html>