【HTML操作指南】
使用工具：VSCode
目录
关于HTML的更多内容，参考以下文档：MDN HTML文档：HTML（超文本标记语言） | MD
一、快速生成HTML模板
输入！，并且按Tab，就可以生成一组默认的页面模板
二、在浏览器观察页面的基本结构
按F12，打开开发者工具~
通过修改title标签修改网页标题，boby标签内部为浏览器内容，此处文章内容为hello world~，页面标题为Test。
三、添加注释
注释是：<!-- -->
可以直接通过ctrl + / 来切换注释~~
可以看出，类似于IDEA，注释并不起到什么实质性的作业，网页中并不显示注释的内容~~~
注意：注释不能嵌套~
四、标题标签
h1-h6
数字越大，里面的内容，就越粗越大
数字越小，里面的内容，就越细细越小
输入标签名，按Tab就可以快速生成一对标签
五、段落标签
附加操作：每个段落首行缩进两个汉字：
HTML无法实现，需要搭配CSS来实现
六、标签，换行~
在HTML中，换行会被直接忽略，要想内容中换行，需要使用<br>标签。
<br>标签是一个单标签，只有开始标签，没有结束标签。
在此处同时存在一个问题，HTML也会忽而略空格。会把多个相邻的空格，合并成一个空格。
如果想要使用多个空格，就需要使用转义字符。
除了空格之外，像<>&等这些特殊符号，就需要使用转义字符~
常见的几个转义字符：
几个空格，就几个转义字符~
七、几种格式化标签
页面效果如下：
这几个格式化标签，不是独占一行的，如果想要换行，就需要使用<br>标签~
八、img图片标签
下面对这些标签内的属性进行描述：
src：通过这个属性来指定一个具体的图片资源，写法格式参考文件操作时的文件路径选择~
alt：如果这个图片发生错误，则要描述一个内容，表示这个图片曾经存在过~
titile：光标放到图片之后，有一个小小的提示框~
width：表示宽度~
height：表示高度~
border：给图片加上边框~
下面来看页面效果：
九、超链接标签
<a href=""></a>
href属性：双引号内部是是一个网页的网址。
标签内容：可以在页面中点击标签的内容进行页面跳转，从初始页面转到双引号内部的页面
页面如下：
此时可以点击这个超链接跳转至百度页面~
我们点击之后可以发现，跳转的页面覆盖了原有画面，而有时候我们实际上并不想让跳转页面覆盖原有界面，而是想让它重新创建一个新页面，此时我们可以对上述标签做如下操作：
在原有标签的基础上添加一个属性，target=“_blank”，表示想新开一个标签页~
注意：a标签这里的链接地址，可以有多种不同的写法：
1.直接写一个完整的URL（外面的网站）
2.也可以写一个相对路径（本地的内容）
此时我们点击超链接，就可以跳转至本地网页test2.html中~
3.写作“#”，表示不跳转
十、表格标签
表格标签可以用于在网页中绘制一个表格，主要有一下几种分类：
1.table标签：表示整个表格
2.tr标签：表示表格中的一行
3.td标签：表示一行中的一个单元格
4.th标签：表示表头单元格
5.thead标签：表格的头部区域
6.tbody标签：表格的主体区域~
其中table、th、td、tr关系如图所示：
此时我们利用上述几个标签以及一些扩展知识来构造一个表格：
我们接下来分析上面的标签的使用规则：
table标签嵌套在外部表示这是一个表格；
tr标签表示为一行；
th标签表示每一列的属性（表头单元格）；
td标签表示一行中某个单元格的内容。
table标签内含有四个字段：分别代表，表格宽度，表格高度，表格边框，两个单元格之间的空隙大小，此处为0。
另外，我们加上了一个align属性，设置了对齐方式：align属性是控制table标签来到页面的居中位置，如果要控制单元格内的内容文字的居中对齐，需要另外使用CSS~
十一、列表标签
列表标签总体分为三类：
1.无序列表标签。ul（整个无序列表）和li（列表项，一个列表中包含多个表项）
2.有序列表标签。ol（整个有序列表）和li（列表项，一个列表中包含多个表项）
3.自定义列表标签。dl（整个列表）dt（小标题）dd（标题里的内容）
十二、表单标签
表单就相当于是让用户“填表”，此处的填表并不一定是我们日常中使用WPS填表那样在表格中填写。但同样的也是让用户输入一些信息~
通过表单，就能够让用户和服务器之间进行一些基本的交互~
表单标签并且一种，而是由多种标签组合使用而成，统称为表单~
基本有以下几种：
form标签：表示整个表单；
input标签，能够表示一些具体的输入控件，例如输入框、提交按钮、上传文件按钮...
textarea标签：表示一个多行文本框；
select标签：下拉框\下拉菜单；
label标签：label标签主要搭配input使用。
通过一个例子进行描述以上这些标签的具体使用规则：
input最核心的属性，叫做type。type不同的取值就能表示不同的控件类型~
1.单行文本框
只能保存一行内容，不能换行~
2.密码框
密码框内输入的内容会自动变成小圆点~
表示密码时，一般使用密码框。
小技巧：如果一个网页默认保存了密码，此时又忘记了密码，可以通过开发者工具，把input的type改了，就能够看到里面的内容。
3.单选框
往往需要把多个input type=“radio”关联起来，起到“N选一”的效果。
使用name属性把多个单选框通过name来关联起来，此时倘若多个单选框的name相同，那么就只能取其中之一~
使用checked属性来表示默认被选中的值。
4.复选框
可以选择多个选项
5.普通按钮
value属性表示此按钮键所表达的意思。
此处先不介绍onclick属性的含义~
6.提交按钮
提交按钮就是把当前表单里用户输入的数据，包装成一个http请求发送给服务器~
form标签内的action位置表示服务器的url
7.清空按钮
把当前表单中用户输入的内容全部清除~
8.选择文件
一般在上传文件的时候会用到
9.label标签
上面我们说到了label标签要搭配input来使用，那么它的具体作用是什么呢？
我们使用新的例子来看：
在前面例子中，我们必须点击按钮的小圆圈才能够进行选择，实际生活中，用户往往希望能够也通过点击标签的内容进行勾选~因此，换句话说，label标签就是为了方便用户使用而存在的一种标签~
此时我们可以点击“男”字就可以勾选男这个选项，而并非只能通过点击“男”字前面的小圆圈才能够勾选~
通过这个for属性就表示当前label要和哪个input标签关联起来，这个时候就需要给对应的input标签起一个唯一的身份标识~
10.select标签
下拉框/下拉菜单
select是标识下拉框本身，里面的选项是一个个的option标签。option标签表示的是一个个选项内容~
可以通过selected属性来指定默认选中哪个选项，如果没有指定，则默认选中第一项~
11.textarea多行编辑框
cols属性表示一行显示的最大列数，rows属性表示一列显示的最大行数~
如果超出限制，则会出现滚动条进行上下滑动或者左右滑动，同时也可以通过右下角的拉伸使编辑框变大缩小~
十三、无语义标签
上面的标签，都是带有语义的标签（语义是指这个标签是用来干什么）
加下来介绍无语义标签
div和span就是无语义标签——这个标签没有没有专门的用途
div和span往往是用来针对页面结构进行布局的：div可以视为是一个独占一行的“大盒子”；
span可以视为是一个不独占一行的“小盒子”。盒子里面又可以装其他的标签，或者盒子里面也可以再装盒子。
如果要表示的某个内容，在html中没有合适的标签来表示，就可以使用div和span~极端情况下，整个页面都是div和span~
可以通过div来指定一行，同时使用span可以指定每一列~