HTML 是网页结构的基础，标签定义了内容和结构
一、HTML 的父子嵌套关系
HTML 标签可以互相嵌套，形成父子关系，最大父标签为 <html></html>，子标签可以嵌套在 <html> 内部，框架：
<html> <head> <title>我的第一个页面</title> <meta charset="utf-8"> </head> <body> 整个浏览器的大空白 demo </body></html>嵌套规则
父标签可以包含多个子标签。子标签可以继承父标签的某些样式。二、vscode几个常用快捷键
感叹号生成基本结构：在 VSCode 中输入!，按回车键即可生成基本 HTML 框架。注释快捷键：Ctrl + /（有问号的那个/），可快速为选中的代码添加或取消注释。HTML 元素直接输入元素名 操作：不需要加 < 和 >，输入元素名后直接生成完整标签。
示例：输入 div，按回车后自动生成 <div></div>。
{} 包含文本块 操作：在 {} 中书写的内容会直接在 HTML 标签内生成文本。
示例：输入 div{hello} 会生成 <div>hello</div>。
div*20，回车后生成 20 个 <div> 标签。内嵌标签生成： 使用 > 表示父子关系，例如： div>span+a<div> <span></span><a href=""></a></div>span#111<span id="111"></span> span.55 <span class="55"></span>三、HTML常用基本标签--用于展示
<span> </span> 文本标签
<span style="color:red;font-size:50px">demo1</span> <span style="color:yelllow;font-size:40px">demo2</span> <h1> - <h6> 标题标签
<h1> 是最高层次，<h6> 是最低层次。标题标签默认竖向布局，通常用于结构化文章的层次。 <body > <h1>文章的标题</h1> <h2>文章的标题</h2> <h3>文章的标题</h3> <h4>文章的标题</h4> <h5>文章的标题</h5> <h6>文章的标题</h6> </body><div> </div> 标签
<br> 标签
<p> </p> 段落标签
<a> 超链接标签
href: 指定链接地址，可以是外部链接或内部锚点。target: 设置链接的打开方式，如 _self（默认，在当前窗口打开）、_blank（在新窗口打开）。 <a href="https://yiyan.baidu.com/chat/4604914391">点击跳转 </a> <!-- <a href=" 要跳转链接的地址" target ="打开方式"> </a> -->herf可以写锚点（name值，表示跳转到锚点的位置），前面要加#
<a name="cc"></a> <!--预埋锚点，可以调到p标签前-->后面代码可以添加超链接点击跳转锚点位置
<a href="#cc">点击跳转 p标签</a><img> 图片标签
src: 图片的路径，可以是绝对路径或相对路径。alt: 当图片加载失败时显示的替代文本。width 和 height: 用于设置图片的宽高，设置其中一个会进行等比例缩放。 <img src="图片的路径" alt="一些描述性语言" width=" 100px"height="400px"> </img>绝对路径：被访问资源在磁盘中的位置
相对路径：相对于当前文件所在位置的路径，它不需要从根目录开始写，只需要指定从当前文件到目标文件的路径。
. 表示当前目录。.. 表示上一级目录 ../返回上一目录
无序列表 (<ul>)：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li></ul><li> 标签，每个 <li> 标签会被自动标记一个圆点或其他符号。 有序列表 (<ol>)：
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li></ol>type 属性指定，如 type="A" 会用大写字母表示列表项。 <table>表格标签 用于创建结构化的表格，表格可以展示数据的行与列。
语法：<table border="1" cellpadding="20px"> <tr> <th>id</th> <!--表示单元格--> <th>name</th> <th>age</th><!--th相对于td有居住和加粗的功能--> </tr> <tr> <td >20515</td> <!--表示单元格--> <td>张三</td> <td>11</td> </tr> <tr></tr> <td >20515585</td> <!--表示单元格--> <td>李四</td> <td colspan="2">12</td> </tr> </table><table>：定义一个表格。<tr>：定义表格中的一行。<th>：定义表格头部的单元格，通常显示为加粗且居中。<td>：定义表格中的普通单元格，存储数据。 常见属性：
border：设置表格边框的宽度（像素）。
cellpadding：定义单元格内容与单元格边框之间的距离，增加内部的填充。
cellspacing：定义单元格之间的间距。0 表示没有间距。
一些操作：
行合并 (rowspan)：用于让某个单元格跨越多行。 语法： <td rowspan="2">合并的单元格</td>colspan)：用于让某个单元格跨越多列。 语法： <td colspan="3">合并的单元格</td><iframe> 内联框架 <iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>用于嵌入外部网页到当前页面，src 定义嵌入网页的 URL，width 和 height 定义框架的宽高。
<!--插入窗口--> <br> <a href="https://www.bilibili.com/" target="aa">点击跳转bilibil</a> <iframe src="http://cloud.tencent.com/act/campus" name="aa" frameborder="0" width="1000px"height="600px"> </iframe> <!--在herf里面用target时候，可以让target==窗口名name，然后打开对应的窗口-->四、基本标签--用于收集用户信息
表单标签
- `<form>`: 定义表单
- `<input type="text">`: 单行文本框
- `<input type="password">`: 密码框
- `<input type="number" min="10" max="100" value="50" step="2">`: 数字选择框
- `<input type="radio" name="sex">`: 单选框
- `<input type="checkbox">`: 多选框
- `<input type="file">`: 文件选择器
- `<input type="color">`: 颜色拾取器
- `<input type="date">`: 日期选择器
- `<input type="datetime-local">`: 日期时间选择器
- `<input type="week">`: 周选择器
- `<input type="range" min="0" max="100" value="10">`: 滑块
- `<select>`: 下拉框
- `<option value="">`: 下拉选项
- `<textarea cols="40" rows="5"></textarea>`: 多行文本框
- `<input type="button" value="普通按钮">`: 普通按钮
- `<input type="submit" value="提交按钮">`: 提交按钮
- `<input type="reset" value="重置按钮">`: 重置按钮
媒体标签
- `<audio src="路径" controls></audio>`: 音频标签
- `<video src="路径" controls width="500px"></video>`: 视频标签
属性说明
- `controls`: 显示播放控制
`autoplay`: 自动播放
-`loop`: 循环播放
<!-- 收集用户信息的标签--><form> <input type="text">单行文本框<br><br> <input type="password">密码框<br><br> <input type="number"min="10"max="100"value="50"step="2">数字选择框<!--value表示刚进入页面显示的数字,step为步长--> <input type="radio" name="sex">男生 <input type="radio"name="sex">女生 <!--单选框，name为属性--> <input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">羽毛球<!--多选框 不用Name属性--> <input type="file">文件选择器<br><br> <input type="color">颜色拾取器<br><br> <input type="date">日期选择器<br><br> <input type="datetime-local">日期时间选择器<br><br> <input type="week">周选择器<br><br> <input type="range" min="0" max="100"value="10">滑块<br><!--value表示当前值--> <!--下拉框--> <select > <option value="">数学</option> <option value="">语文</option> <option value="">英语</option> </select>下拉框<br><br> <textarea cols="40" row="5"></textarea>多行文本（超过40行5列时出下滚动条） <input type="button" value="普通按钮"> <input type="submit" value="提交按钮"> <input type="reset" value="重置按钮"><!--要想button起作用需要将前面的组件放到form表单中--></form> <!--音频标签mp3、mp4的--> <audio src="material/眼泪的错觉.mp3"controls></audio> <!--controls表示手动控制播放--> <audio src="路径信息"autoplay></audio><!--自动播放进入就播放，页面没有组件当做背景音乐--> <audio src="***" loop></audio><!--loop表示循环播放--> <br> <!--视频标签mp3、mp4的--> <!--g高和宽只代表窗口大小，不会改变原视频大小--> <video src="material/大山森林航拍_爱给网_aigei_com.mp4"controls width="500px" ></audio> <!--controls表示手动控制播放--> <video src="路径信息"autoplay></audio><!--自动播放进入就播放，页面没有组件当做背景音乐--> <video src="***" loop></audio><!--loop表示循环播放--> 【html其实就是一些标签的组合，比较简单，用vscode的快捷键写代码效率真的嘎嘎高】