html 基础标签
HTML（超文本标记语言）是构建网页和网页应用的基础。
一、页面结构
·
<!-- DOCTYPE 表名 本文档属于html5 标准每个html 标准 都会收纳对应的标签声明文档类型和HTML版本-->
<!DOCTYPE html><!-- html 为网页的根标签 嵌套包含所有标签html 下 有 两种标签 head body标签 ： <开始 属性> 内容 </结束> 如：<p> 内容 </p>-->
<html lang="en"><!-- head 头部信息 网页修饰内容 包含了文档的元数据，比如<title>、<link>、<meta>、<script>和<style>
--><head><!-- meat 元标签 没有结束标签 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- title 标题 --><title>Hello World</title>
</head>
<!-- body 身体标签 用于展示内容 交互-->
<body><!-- 各种基础标签 展示内容 -->
</body>
</html>二、基础标签
① 段落 p 水平分割线 hr
# 水平分割线
<hr><p>段落标签。</p> ② 标题 h1~h6 ：定义标题，从<h1>（最重要）到<h6>（最不重要）
<h1> h1标题 </h1><h2> h2标题 </h2><h3> h3标题 </h3><h4> h4标题 </h4><h5> h5标题 </h5><h6> h6标题 </h6>③ 文本格式化
<p>普通<b>粗体</b><strong>粗体</strong><i>斜体</i><em>斜体</em><u>下划线</u><ins>下划线</ins><del>删除线</del><sup>上</sup><sub>下</sub><!-- 换行 --><br><!-- sub 下标 sup 上标 如：H₂CO₃ 中 2 和 3 为下标 上标则是 如同次方一般在右上角 -->H<sub>2</sub>CO<sub>3</sub> = 2H<sup>+</sup> + CO3 <sup>2-</sup></p>
④ 超链接 a：定义超链接 ，用于从一个页面链接到另一个页面
<!-- href: 链接地址 或 某个标签的 id 值--><a href="http://baidu.com">百度</a><!-- 跳转本页面的 该id处 做锚点使用 --><a href="#s666">锚点666</a>⑤ 图像 img 视频 video 声音 audio
<!-- scr 中为 声音或图片 或视频的地址路径声音 视频中 属性 controls 控件 用于显示 开始暂停等操作 --><h1>声音</h1><audio src="audio/fail.mp3" controls></audio><h1>视频</h1><video src="./video/颈椎操_超清.mp4" controls width="300"></video><h1>图片</h1><!-- 属性 alt 当图片加载失败时 显示文本信息--><img src="./img/1.webp" alt="加载失败" width="200"><img src="./img/2.webp" alt="加载失败">
⑥块级元素
<!-- div 盒子元素 控制盒子位置 可整体控制 盒子内所有内容 --><div style="width: 20px; height: 20px; background-color: antiquewhite;"><!-- 用于布局的行内元素，用于对文档的一部分进行标记或分组 --><span>加油 追梦人</span></div>⑦ 表格
<!-- table 定义表格 tr 定义表格中的行 td 定义表格中的列 --><table><tr><th>表头1</th><th>表头2</th></tr><tr><td>数据1</td><td>数据2</td></tr></table>⑧ 列表
<!-- 无序列表 li 为列表项 --><ul><li>列表项1</li><li>列表项2</li></ul><!-- 有序列表 --><ol><li>第一项</li><li>第二项</li></ol>⑨ 表单
<!-- form 定义表单 用于收集用户输入 action 提交至哪里 method 提交方式--><form action="" method=""><!-- 定义输入字段，可以有不同的类型，如text、radio单选、checkbox多选 --><input type="text"><!-- button 按钮 提交 --><button type="submit">提交</button>具体实例：
<!-- 定义表单的开始，action属性指定了表单提交时数据发送到的URL，method属性定义了提交表单时使用的HTTP方法 -->
<form action="https://httpbin.org/post" method="post"><!-- 用户名输入区域 --><div><!-- label标签定义了与input标签的关联，for属性与input的id属性相对应，提高可访问性 --><label for="username">用户名:</label> <!-- input标签定义了文本输入框，required属性表示必须填写，placeholder属性提供了占位符文本 --><input id="username" name="username" required placeholder="输入用户名" type="text"><!-- line break元素，用来换行显示 --><br><!-- 密码输入框，type为password时，输入内容会被隐藏 --><label for="passwd">密码:</label> <input id='passwd' name="passwd" required placeholder="输入密码" type="password"></div><!-- 性别选择区域，使用radio类型，同一组单选按钮name属性相同 --><div><span>性别：</span> <label for="man"> 男 </label><!-- checked属性表示该单选按钮被默认选中 --><input id="mam" value="男" name="sex" checked type="radio"><label for="woman"> 女 </label><input id="woman" value="女" name="sex" type="radio"></div><!-- 爱好选择区域，使用checkbox类型，允许多选 --><div><span>爱好：</span><!-- 每个checkbox的name相同，但value不同，表示不同的选项 --><label for="football">足球</label><input checked id="football" name="football" value="足球" type="checkbox"><label for="basketball">篮球</label><input id="basketball" name="basketball" value="篮球" type="checkbox"><label for="newball">新球</label><input id="newball" name="newball" value="新球" type="checkbox"></div><!-- 年龄选择滑块 --><div><span>年纪：</span><!-- range类型定义了滑块控件，min和max定义了范围，step定义了步长 --><input name="age" type="range" min="0" max="100" step="1"></div><!-- 颜色选择器 --><div><span>喜爱颜色：</span><!-- color类型定义了颜色选择器 --><input name="color" type="color"></div><!-- 文件上传控件 --><div><span>附件：</span><input name="file" type="file"></div><!-- 下拉选择框，用于选择居住地址 --><div><span>居住地址：</span><select name="address"><!-- option标签定义了下拉列表中的选项 --><option value="洛阳">洛阳</option><option value="商丘">商丘</option><!-- selected属性表示该选项被默认选中 --><option selected value="殷墟">殷墟</option></select></div><!-- 多选下拉选择框，用于选择学习的语言 --><div><span>学习语言：</span><select multiple><option selected value="python">python</option><option value="c++">c++</option><option selected value="java">java</option></select></div><!-- 多行文本输入框，用于留言 --><div><span>留言：</span><textarea name="留言" cols="10" rows="3"></textarea></div><!-- 日期选择器 --><div><span>日期：</span><input name="date" type="date"></div><!-- 时间选择器 --><div><span>时间：</span><input name="time" type="time"></div><!-- 日期和时间选择器 --><div><input type="datetime-local"></div><!-- 提交和重置按钮 --><div><!-- submit类型定义了提交按钮，reset类型定义了重置按钮 --><button type="submit">提交</button><button type="reset">重置</button></div>
</form>⑩框架
<!-- 语法 <iframe src="URL"></iframe> --><!-- 在本页面 设置一个 宽 width 高 height 的窗口去显示 src 中地址页面 --><h1>框架标签</h1><iframe src="./2.第一批标签.html" frameborder="0" width="33%"></iframe>