1.HTML基本结构标签
在Visual Studio Code中，使用！+回车就可以创建一个HTML的基本结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>| 标签 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主题 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
html标签显示的范围：是整个页面的范围
head显示的范围：红色方框的范围
title显示的范围：
body显示的范围：
在整体的html框架中，存在父子和兄弟关系
html和head，body存在父子关系
head和body存在兄弟关系
head和title存在父子关系
1.1文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>这句代码的意思是：当前页面采取的是HTML5版本来显示网页
注意：
1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。
2.<!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签。
1.2 lang语言种类
用来定义当前文档显示的语言
1.en定义语言为英文
2.zh-CN定义语言为中文
1.3字符集
字符集是多个字符的集合，以便计算机能够识别和存储各种文字
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8">charset常用的值有：GB2312、BIG5、GBK和UTF-8,其中UTF-8也被称为万国码，基本包含了全世界所有国家所用到的字符
2.HTML中常用的标签
2.1标题标签
<h1></h1>~~~<h6></h6>
h1~h6分别代表1到6级标题，标题只能一行显示，随着标题级数的增大，标题的大小逐渐变小,总共只有6个标题标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
2.2段落标签和换行标签
段落标签：<p></p>
换行标签:<br/>
使用段落标签，两个段落之间的空隙比较大；
使用换行标签，两行之间的空隙比较小
2.3文本格式化标签
| 语义 | 标签 | 说明 |
| 加粗 | <strong></trong>或者<b></b> | 推荐使用<strong>标签加粗，语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签倾斜，语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签删除线，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签下划线,语义更强烈 |
多个标签可以一起对同一段文字进行使用
<del><strong><em>hello</em></strong></del>2.4 div标签和span标签
div可以理解为一个大盒子，span可以理解为一个小盒子
在一个网页里面，分别标记里大盒子和小盒子，小盒子是用span来标记的，大盒子使用div来标记的
一个大盒子独占一行，多个小盒子可以共同占一行
<div>大盒子</div>1234
在大盒子后面写上1234，1234是不会与大盒子在一行显示的
<div><span>小盒子1</span><span>小盒子2</span><span>小盒子3</span></div>
在大盒子里面写上多个小盒子，那是可以在一行显示的
2.5图像标签
图像标签：<img>
<img src="" alt="">src后面写图片路径，alt后面写替换文本
当图片显示不出来是，就显示替换文本
<img src="" title="">src后面同样是图片路径，title后面是提示文本，当鼠标移动到图片上就会提示文本信息
2.6路径
相对路径：
打个比方:当前你在白云区，./后面就可以跟与你同一级目录的其他，比如南明区，乌当区
../就表示贵阳市这一级目录
相对路径是相对于当前文件来说的，./代表当前目录，后面跟当前目录下的路径；
../是当前目录的上一级目录，可以../../../回到上上上级目录
绝对路径：
写快递地址时，为了让快递送到你手中，就会填写能找到你的地址，如：中国/贵州省/贵阳市/xx县/xx镇/xx村
而对于电脑来说：就犹如下面这条路径：
D:\C++\gitee\java-learning\java-learning\html\red.jpg
网络路径：
网络路径，就是在浏览器中找到一张图片，他的路径就是网络路径
就比如我们单击右键点击百度的图标，在新标签页中打开图像，然后得到的一个网址就是这张图片的网络路径
2.7超链接标签
<a href=""></a>href后面跟去到哪里的路径
不设置target默认是_self当前窗口打开
<a href="" >点击的文字或图片跳转到指定页面</a><a href="https://www.baidu.com/">百度</a>
<a href="https://www.baidu.com/" ><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""></a>
点击文字或者图片均可跳转到百度的页面
空连接：当我们不知道要去哪时，就可以将路径用#号代替
<a href="#"></a>下载链接：当链接的路径是指向压缩包时，点击链接就可以在浏览器里面下载这个压缩包了
锚点连接：在一篇电子文章中，通常会有目录，当我们点击这个目录的某一章节时，就会跳转到这个章节，对应的在我们的网页中，我们要快速找到当前页面的某一个主题的内容，点击锚点连接就可以跳转到当前页面特定的位置
设置锚点链接主要分两步：
<a href="#daydream">霸道总裁爱上我</a>
<h3 id="daydream"></h3>第一步：在需要跳转的地方加上一个链接，这个链接由#开头，写上一个标记
第二步：在目的标签的地方加上一个id，然后将标记写上去
2.8注释标签和特殊字符
注释标签：
快捷键：Ctrl+/
<!-- -->特殊字符：
在HTML中一些特殊字符很难或不方便使用
HTML特殊符号大全_html特殊字符-CSDN博客
3.表格标签
table：标签表示整个表格
•tr：表示表格中的一行
•td：表示一个单元格
•th：表示表头单元格，比普通的单元格会加粗居中显示
•thead:表格的头部区域
•tbody:表格的主体区域
table包含tr，tr包含td和th
表格标签有一些属性，可以用于设置大小边框等，但是一般使用CSS来进行设置
这些属性都要放在table标签里面
•align是表格相对于周围元素的对齐方式.align="center/left/right"（居中对齐，左对齐，右对齐）
•border表示边框，1表示有边框(数字越大,边框越粗),""表示没边框.
•cellpadding:内容距离边框的距离,默认1像素
•cellspacing:单元格之间的距离.默认为2像素
•width/height:设置尺寸.
注意：这几个属性,vscode都提示不出来.
通过这个快捷方式可以快速的创建多行多单元格的表格
示例代码：
<table align="center" border="5" cellpadding="2" cellspacing="3"><tr><th>姓名</th><th>年龄</th><th>工作</th></tr><tr><td>孙悟空</td><td>8888888</td><td>打手</td></tr><tr><td>杀生</td><td>565645</td><td>苦力</td></tr>
</table>>
一张表格又可以划分为头部区域（使用thead标签）和主题区域（使用tbody标签）
1.<thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般位于第一行
2.<tbody></tbody>:用于定义表格的主体，主要用于放数据本体
合并单元格：
1.跨行合并：rowspan=“合并单元格的个数”
2.跨列合并：colspan=“合并单元格的个数”
目标单元格：
1.跨行：最上侧单元格为目标单元格，写合并代码
2.跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲：
第一步：创建一个未合并的表
<table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
</table>
这里创建的是一个3*3的表格，我们将右上角和左下角的单元格分别进行跨列合并与跨行合并
第二步：按从左到右，从上到下的顺序找到需要合并的第一个单元格
在td后面写上跨行合并与跨列合并的语句，合并几行，数字就写几
<table><tr><td></td><td colspan="2"></td><td></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
</table>第三步：删除多余的单元格
<table border="2" width="800" height="280"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr>
</table>
这样就完成了合并单元格的工作
4.列表标签
4.1无序列表
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
基本语法格式如下：
同样也可使用：ul>li*3>这种方式来快速创建
<ul><li>列表1</li><li>列表2</li><li>列表3</li>
</ul>1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
3.<li></li>之间相当于一个容器，可以容纳所有元素
4.2有序列表
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项
语法格式如下：
<ol><li>列表1</li><li>列表2</li><li>列表3</li>
</ol><ol><li>中国</li><li>俄罗斯</li><li>美国</li>
</ol>
有序列表会按照顺序给内容添加序号
有序列表的注意事项和无序列表一样
4.3自定义列表
自定义列表通常可以理解为一个大哥带着一群小弟
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
语法格式：
<dl><dt><dl></dl><dl></dl><dl></dl></dt>
</dl>1.<dl></dl>里面只能包含<dt>和<dd>
2.<dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>
5.表单标签
在日常生活中，我们使用手机电脑，各种登录注册，输入密码，账户等都会用到表单标签
qq登录中被框起来的这三个都是表单标签
在HTML中，一个完整的表单通常由表单域，表单控件（也称表单元素）和提示信息3个部分构成
5.1表单域
上面这个qq的登录界面可以看成一个表单域，当我们输入密码后，点击登录，就可以将我们输入的消息输送给后台
表单域是一个包含表单元素的区域
在HTML标签中，<from>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
语法格式：
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>常用属性：
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式，其值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
5.2<input>表单元素
在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）
语法格式：
<input type="属性">1.<input>标签为单标签
2.type属性设置不同的属性值用来指定不同的控件类型
type属性的属性值及其描述如下：
| 属性值 | 描述 |
| button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其输入文本，默认宽度为20个字符 |
文本框和密码框：
用户名：<input type="text"> <br>
密码： <input type="password">
单选按钮和复选框：
性别：<input type="radio">男 <input type="radio">女 <input type="radio">保密 <br>
爱好：<input type="checkbox"> 睡觉<input type="checkbox">学习 <input type="checkbox">跑步
我们会发现在单选框中，可以选择多个性别，而我们需要将他设置为只能选择一个，这时，我们还需要对input设置其他属性
<input>的其他属性
| 属性 | 属性值 | 描述 |
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
name属性可以解决单选按钮的问题：
性别：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex">保密 
由于单选框表示的是同一个属性，所以我们将每一个性别的每一个单选框的name属性都设置为相同的名字，这样就可以解决问题了
value属性：
有时候我们在登录账号时，文本框中会提示“请输入用户名：”这样的提示信息，我们就可以通过value属性对其进行设置
用户名：<input type="text" value="请输入用户名："> 
1.name和value是每个表单元素都有的属性值，主要给后台人员使用
2.name表单元素的名字，要求单选按钮和复选框要有相同的name值
3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素。
4.maxlength是用户可以在表单元素输入的最大字符输，一般较少使用
提交和重置按钮：
提交按钮（submit），点击提交按钮，就可以将表单域中所有表单元素的值提交给后台
<form action="xxx.php" method="get">
用户名：<input type="text" name="name" value="请输入用户名："> <br>
密码： <input type="password" name="psw" value="请输入密码："> <br>
性别：<input type="radio" name="sex" value="男">男 <input type="radio" name="sex" value="女">女 <input type="radio" name="sex" value="保密">保密 <br>
爱好：<input type="checkbox" name="hobby" value="睡觉"> 睡觉<input type="checkbox" name="hobby" value="学习">学习 <input type="checkbox" name="hobby" value="跑步">跑步
<br>
<input type="submit" value="提交">
</form>
当我们点击提交后，就会跳转到一个页面
然后页面的网址就会和我们的表单元素的值有关
重置按钮（reset）：重置按钮可以还原表单元素，默认不写value是“重置”
<input type="reset">
普通按钮和文件域：
普通按钮（button）：点击按钮，实现一定的功能，需要搭配js来使用
<input type="button" value="获取验证码">
文件域（file）：
点击此按钮可以上传文件，比如上传qq头像
<input type="file" value=上传头像>
点击文件域按钮，就可以跳出文件夹
5.3 <label>标签
<label>标签为input元素定义标注
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本是，浏览器就会自动将焦点（光标）转到或者对应的表单元素上，用来增加用户体验
<input type="radio" name="sex" value="男" id="nan"> <label for="nan">男</label>
当我点击男时，就会选择男这个表单元素
核心：标签的for属性应当与相关元素的id属性相同
5.4<select>（下拉菜单）
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表
语法：
<select><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option>
</select>籍贯：<select><option>月球</option><option>火星</option><option>冥王星</option><option>土星</option>
</select>
1.<select>中至少包含一对<option>
2.在<option>中定义selected="selected"时，当前项即为默认选中项
5.5<textarea>文本域标签
当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签
在表单元素中，<textarea>标签是用于定义多行文本输入的控件
基本语法：
<textarea rows="" cols="">文本内容
</textarea>
