本文详细介绍了HTML的基本概念，包括HTML的标签结构、常见标签的使用，如注释、标题、段落、换行、图片、超链接、表格、列表和表单等。通过实例展示了各标签的功能和属性，帮助理解HTML在前端开发中的作用。
html
html/css文档
html的标签
html是一个前端语言，是一个标签化的语言，即html代码由标签构成，它没有逻辑。
html代码也不需要编译，运行的话在浏览器中就可以直接运行。
下面具体来看一下html代码
<html>
<head>
<title>这是网页标题</title>
</head>
<body>
哈哈哈
</body>
</html>
这是一段html代码，由几个标签组成，称为开始标签，称为结束标签。 大部分标签是成对出现的，但是也有标签是单个出现的，只有开始标签，称为单标签。两个标签中是内容，内容可以是文本，也可以是其他标签。在开始标签中可以存放一些属性，这些属性以键值对来表示。
- html标签是所有标签的根标签
- head标签中存放一些属性
- body标签中存放网页上的内容。
- title标签中是页面的标题
整个html文件根据标签可以看成一个树形结构
✅这棵树称为一个DOM树（document object model）：文档对象模型
整个html文件是一个文档，里面有很多标签（tag），每个标签可以称为是一个元素（element），每个元素对应到一个对象。这些对象中有属性和方法，这些对象都可以在JS中进行操作。对应的来操作这个DOM树的API就是DOM API。
html常见标签
注释标签
<body>
<!-- 这是一个注释 -->
</body>
注释标签是一个单标签，快捷键是 ctrl+/
标题标签
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
1级标题最大，6级标题最小 。快捷键是h1+Tab
段落标签
如果在body标签中直接写一段文字，是不会分段的，要想分段需要使用段落标签。
<body>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate facilis porro magnam? Error delectus facere mollitia earum praesentium molestiae at, dolor consequatur, recusandae debitis quam provident ullam? Pariatur, quam. Excepturi.</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate facilis porro magnam? Error delectus facere mollitia earum praesentium molestiae at, dolor consequatur, recusandae debitis quam provident ullam? Pariatur, quam. Excepturi.</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate facilis porro magnam? Error delectus facere mollitia earum praesentium molestiae at, dolor consequatur, recusandae debitis quam provident ullam? Pariatur, quam. Excepturi.</p>
<p>这是一个段落 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate facilis porro magnam? Error delectus facere mollitia earum praesentium molestiae at, dolor consequatur, recusandae debitis quam provident ullam? Pariatur, quam. Excepturi.</p>
</body>
段落标签快捷键是p+Tab，这样的话标签中的内容就会自成一个段落
用Lroem+Tab可以自动生成一个测试文本。在VSCode中可以列编辑，按住Alt键点击其他行，就会在其他行生成一个光标，进而可以多行编辑。
换行标签
在html中换行并不是\n，而是用标签：
<body>
<p>这是一个段落 <br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate facilis porro magnam? Error delectus facere mollitia earum praesentium molestiae at, dolor consequatur, recusandae debitis quam provident ullam? Pariatur, quam. Excepturi.</p>
</body>
图片标签
使用这个标签可以在网页上显示一个图片
<body>
<img src="2.png" alt="这是蔡徐坤" title="蔡徐坤打球"
width="1200px" height="500px">
</body>
img这个标签是一个单标签，里面有一些属性。
==src：==这代表的文件路径。这个路径可以是本地路径，可以是相对路径也可以是绝对路径，还可以是网络地址。绝对路径是基于工作目录的，当使用浏览器打开这个html文件时，工作目录就是这个html所在的目录，如果图片在当前html文件所在目录的上一级目录，那代码就得写成…/2.png
如果使用绝对路径的话，也是可以的，但是不建议使用绝对路径，因为如果使用相对路径的话，把图片和html文件打包发给别人，别人就可以加载出来图片，但是要是使用绝对路径的话，不能保证别人的这个绝对路径下有这张图片，所以就不一定能加载出来。
然后也可以使用网路路径（URL），这样的话只要对方连着网，就能加载出来图片。
现在代码中写的就是相对路径，html文件和图片在同一个目录下：
==alt：==这是图片无法加载（可能因为路径不对）的时候就，显示的内容。
==title：==这是鼠标放到图片上显示的内容
==width：==这是图片的宽度，单位是像素(px)。
==height：==这是图片的高度，单位是像素(px)。
超链接标签
使用超链接可以跳转到当前页面的某个片段还可以跳转到其他页面。
跳转到百度网站：
<body>
<a href="https://www.baidu.com">跳转到百度</a>
</body>
跳转到其他文件
<body>
<a href="2.html">跳转到2.html</a>
</body>
1.html和2.html当前处于同一路径下，可以使用相对路径跳转。
如果跳转的是html文件，会直接打开html文件，如果不是html文件，而是其他类型文件，比如.txt文件，会触发浏览器的下载功能（不同的浏览器行为不一样，chrome是触发下载），
<body>
<a href="1.html" target="_blank"> 跳转到1.html </a>
</body>
在开始标签中 加入target=“_blank”，则跳转后会打开一个新的页面。
表格标签
<body>
<table border="1px" width="500px" height="300px" cellspacing = "0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>19&
最低0.47元/天 解锁文章
1259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
