Hello，各位小伙伴，这篇文章主要给大家浅浅的介绍一些关于HTML的一些标签，并不会非常的深入的进行系统性学习，毕竟我们后面更多的功夫是要花在后端的技术知识上进行探究~~~
1.标题标签
2.段落标签
3.换行标签
4.图片标签
5.超链接
6.表格标签
7.表单标签
在学习各种标签之前，我们先对HTML的格式进行了解：
首先是一个双标签<html></html>，这个也是HTML的骨架
然后在HTML中，还有头，还有正文，也是双标签，就和我们的人的身体一样，有头和身体~~~
head就是标题，body就是HTML的相关内容
1.标题标签
一共有六个,从h1 - h6.数字越大,则字体越小.！！！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> </body> </html>2.段落标签
当我们直接在body中，编写一段文章的时候，当我们不适用段落标签的时候，即使我们有手动分段落的话，在浏览器显示出来，仍然是一段，浏览器是不会按照我们手动划分的段落进行分段的
p标签描述的段落,前面没有缩进的~~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla, facere eum cum quis repellat obcaecati. Vel, quisquam? Illo officia porro eveniet quis recusandae eum eius voluptates at, itaque temporibus. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi ut laboriosam, doloremque eum est maiores officiis labore cum sunt aspernatur totam. Non assumenda accusantium inventore ex consectetur nesciunt adipisci molestias?lo Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit voluptatem, odio eaque dolores optio hic! In totam facilis minus aliquam quod corrupti ducimus </body> </html>当我们使用标签段落的时候，显示到浏览器上就会按照我们的预期进行显示
标签段落也是一个双标签<p></p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum nulla, facere eum cum quis repellat obcaecati. Vel, quisquam? Illo officia porro eveniet quis recusandae eum eius voluptates at, itaque temporibus.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi ut laboriosam, doloremque eum est maiores officiis labore cum sunt aspernatur totam. Non assumenda accusantium inventore ex consectetur nesciunt adipisci molestias?lo</p> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit voluptatem, odio eaque dolores optio hic! In totam facilis minus aliquam quod corrupti ducimus</p> </body> </html>3.换行标签
和上面我们讲到的，如果我们写了文章，当我们进行手动分段落的话，浏览器是无法显示出来的，我们可以使用换行标签，对文章进行换行
换行标签是一个单标签</br>
但是！！！换行标签和段落标签还是有区别的，换行标签，换行之后间隔是比段落标签小的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur itaque doloremque praesentium culpa possimus dolorem expedita quaerat delectus. Rerum laboriosam maiores similique architecto, itaque ab sequi harum mollitia minima quas.<br/> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad assumenda quis quae quidem perferendis sit voluptatibus minus officia est neque iure delectus consequatur nisi, beatae nesciunt animi quaerat facilis impedit? </body> </html>4.图片标签
<img src="" width="" height="" border="" alt="">
图片标签有五个属性：
src --- 图片的所在地址（可以使用绝对路径，也可以使用相对路径）
width --- 图片的宽度
height --- 图片的高度
border --- 图片边框大小
alt --- 当图片加载失败后显示的文字
那我当前电脑为例，我的图片在本项目下，所以使用相对路径即可，设置的宽度为600px，高度为500px，边框为2px，当图片加载失败后显示：图片加载失败
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> <img src="./喜洋洋与灰太狼.png" width="600px" height="500px" border="2px" alt="图片加载失败"> </body> </html>图片正确加载：
当我们对图片路径进行错误修改时，图片就会加载失败
5.超链接
超链接我们随处课件，就比如哔哩哔哩为例：
当我们点击这些按钮的时候，就会跳转到另外一个页面，这就是超链接
超链接属性：
href --- 跳转对应网页的地址
target --- 默认是在当前页面跳转，我们可以选择_blank，重新打开新的页面跳转
name --- 超链接的名字
<a href=" " target="_blank">name</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> <a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a> </body> </html>当我们点击哔哩哔哩后，就会跳转到哔哩哔哩的官方页面
6.表格标签
<table> --- 表格
<tr> --- 行
<td> </td>---表格单元（可以理解为列）
</tr>
</table>
cellspacing --- 是控制表格和单元格边框的距离
cellpadding --- 单元格内容与边框的距离
align --- 表格居中，是整个表格，不是表格的内容！！！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> <table border="1px" cellspacing="0px" cellpadding="10px" align="center"> <tr> <td>aaa</td> <td>bbb</td> </tr> <tr> <td>ccc</td> <td>ddd</td> </tr> <tr> <td>eee</td> <td>kkk</td> </tr> </table> </body> </html>7.表单标签
表单标签使用到的标签名是input，属性名是type（可以选择各种类型）
1.）text --- 单行文本输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> 账号：<input type="text"><br/> </body> </html>2.）password --- 密码输入框
当我们输入内容的时候，会自动帮我们隐藏密码文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> 密码: <input type="password"><br/> </body> </html>3.）radio --- 单选框
当我们在注册软件的时候，就会让我们选择性别男or女，这就是使用到了单选框
我们让俩个单选框的name相同，是为了防止俩个单选框都是选上的问题
我们让id不同，是为了让label中的for可以和我们的单选框匹配，这时当我们点击字体男or女的时候，也可以勾选上单选框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> 性别：<input type="radio" name="gender" id="male"> <label for="male">男</label> <input type="radio" name="gender" id="female"> <label for="female">女</label><br/> </body> </html>4.）checkbook --- 复选框
在我们首次使用一些软件，比较微博，小红书，哔哩哔哩的时候，就会让你选择你的喜好，然后他们就会根据你的喜好给你推送相应的数据，这时他们会给你很多个数据给你选择，你可以选择一个或者多个，这时使用到的就是复选框~~~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> 爱好：<input type="checkbox" name="hobby">Java <input type="checkbox" name="hobby">Linux <input type="checkbox" name="hobby">Python <input type="checkbox" name="hobby">C++ <input type="checkbox" name="hobby">Go </body> </html>5.）select
在注册的时候，有一些软件会让我们选择生日，城市啥的，就会列出很多的条件给我们选择
我们在广东这个选项中填写selected，是刚开始默认广东这个选项（也可以是热门选项）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> 城市：<select> <option>哈尔滨</option> <option >大东北</option> <option >内蒙古</option> <option selected>广东</option> </select><br/> </body> </html>6.）textarea--- 文本编辑框
一般在个人设置那里，可以填写个人的介绍，个人的爱好等等，这个就是使用到了文本编辑框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> 个人简介：<textarea row="10" col="200">八嘎八嘎，巴拉巴拉！！！</textarea><br/> </body> </html>7.）button --- 按钮
这个我们是最常见的，在登录网站或者软件时候，就会有登录，注册等等按钮！！！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML_Demo1</title> </head> <body> <input type="button" value="注册"> <input type="button" value="登录"> </body> </html>
