【HTML教学】成为前端大师的入门教学
前言
在本博主上小学的时候第一次接触到互联网，在那时就被那些制作精美的网页所吸引，于是小时候的我就十分的好奇，这些网页都是如何制作出来的，从此就在我的心里埋下了编程的种子，随着学习的不断深入，我渐渐的知道了那些精美的网页是用HTML+CSS+javaScript制作出来的，于是就下定决心去学习这些知识，于是建立在自己的学习基础上，我想通过这篇文章来为大家介绍前端的利器——HTML什么是HTML
简单来说HTML是一种超文本的标记语言
那么为什么会叫它超文本标记语言呢？我们可以将其分为两个方面来解释
- 超文本：例如文本、视频、声音、图片、表格、链接等这种不仅仅局限于文字的东西我们称为超文本
- 标记：HTML语言是由许许多多标签组成的
因此可以这么说，HTML是一种由许许多多标签组成的，可以表示文本、音频、链接等内容的超文本标记语言
环境搭建
工欲善其事必先利其器，我们需要在一个适合的环境当中编写HTML，那么我们应该使用什么样的工具呢？
我在这里为大家推荐vscode集成开发环境，我们可以进入vscode官网下载链接
接下来，我们需要在vscode中安装下面几个插件
- Auto Rename Tag：语法自动补全
- view-in-bowser：在vscode中直接打开html文件，我们写好html文件后单击右键，点击open with live server就可以直接在浏览器中打开页面
- live server：将修改直接刷新到浏览器
HTML结构
HTML代码是由标签组成的，其基本结构如下所示：
我们可以看到，HTML的标签大多数都是双标签，有开始有结尾
- html标签是html文件的根标签
- head标签中编写页面的相关属性
- tile标签中写的是页面的标题
- body标签中写的是页面的内容
- 其中，head和body是兄弟标签，但他们两个都是html的子标签，各个标签之间的关系共同组成了DOM树（Document Object Mode文档）
但是我们每次都要将这个结构写一次吗？答案是否定的，在vscode开发环境当中，我们可以直接按住！+回车就可以快速生成代码框架，如下图所示：
- !DOCTYPE html：称为DTD（文档类型定义），描述的是当前的文件是一个HTML5类型的文件
- html lang="en"：lang属性用来申明当前页面的语言，例如en代表当前页面是一个英语页面，有些浏览器会根据这个页面语言申明来决定是否自动翻译
- meta charset="UTF-8"：描述页面的编码方式，当前的编码方式是UTF-8，没有这一行可能会导致中文乱码
- meta name="viewport" content="width=device-width, initial-scale=1.0"：这个属性在移动端开发尤为重要
- name="viewport"指的是设备屏幕上用来显示页面的那一块区域，也叫视图；
- content="width=device-width, initial-scale=1.0"用来设置可视区域和设备宽度等宽，同时设置页面初始缩放为不缩放
认识HTML的标签
在前面HTML代码框架的认识中，我们已经知道了标签的重要作用，接下来我将带领大家一起学习HTML其他常用的标签， 这些标签共同组成了DOM树，所有的标签都是html的子标签，每一个标签都相当于一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改注释标签
在vscode开发环境当中，我们可以使用ctrl+/快速注释或取消注释
- 注释可以提高代码的可读性
- 我们在写注释时不要传递负能量，因为前端代码是可以被用户看到的
标题标签h
标题标签是h，一共有六级，h1-h6，随着数字的增大，标题的大小逐渐减小
段落标签p
段落标签是p，可以将一长串文字分割为几个段落
换行标签br
换行标签是一个单标签，推荐写成
<br/>，换行之后的间隙比段落之间的间隙要小
格式化标签
- 加粗：strong标签或b标签
- 倾斜：em标签或i标签
- 删除线：del标签或s标签
- 下划线：ins标签或u标签
注：上述标签都是双标签，前者起强调作用，后者可以被爬虫捕捉
img标签和src属性
img标签是一个单标签，必须带src属性，表示图片路径
<img src="图片路径">
- 相对路径：以html文件所在的位置为基准，找到当前图片的位置
- 绝对路径：以磁盘的绝对路径或者网络路径找到图片的位置
img标签的其他属性
- alt属性：表示替换文本，当图片不能正确显示时，会显示这个替换的文字
- tile属性：表示提示信息，当鼠标指向这个图片是会有提示
- width/height：控制图片的高度和宽度，单位是px、一般只需要更改一个，另一个会等比例缩放
- border：表示图片的边框，单位是像素px
注：对于任意一个标签我们都可以定义多个属性，每个属性之间用空格隔开，属性之间不分先后顺序，但要使用键值对的格式来表示
超链接标签a
超链接标签a是一个双标签，必须带有href属性，表示跳转到哪个页面
<a href="链接路径">中间可以写这个链接的替换文字</a>
- target属性：可以指定链接的打开方式，默认是self方式，表示在当前页面打开这个链接；如果是blank则使用新的页面打开，例如：当前文章，表示用新的页面打开当前文章
<a href="https://editor.csdn.net/md?articleId=153989448" target="blank">当前文章</a>超链接使用方式：
- 我们可以引入外部链接，如deepseek、抖音等
- 我们也可以引入内部链接，我们可以在html文件所在的目录下面创建一些链接，然后以相对路径的形式表示这个链接
- 空连接：我们可以使用#在href中占位表示一个空连接，即刷新当前页面，
<a href="#">这是一个空链接</a>，效果如下所示：
这是一个空链接- 我们还可以指定下载链接，
<a href="下载链接名">这是一个下载链接</a>，效果如下所示：
这是一个下载链接- 网页元素链接：我们可以给图片加上一个链接名，这样在我们用鼠标点击这个图片时就可以跳转到这个链接，
<a href="链接名"><img src=“图片路径” alt=""></a>
表格标签
使用方法
当我们需要在HTML文档当中引入表格时，我们就需要使用表格标签table，它的使用方法如下：
例如，我们要创建一个表格，里面包含的内容有姓名、性别、年龄：
- table标签：表示整个表格
- tr标签：表示表格的一行
- td标签：表示一个单元格
- th标签：表示表头单元格，会居中加粗
- thead标签：表格的头部区域
- tbody标签：表格的主体区域
效果如下：
姓名 性别 年龄 张三 男 23 李四 男 31 王五 女 18
表格标签的属性
这些属性都要放在table标签之内，表示对整个表格都有效
- align：表示表格的对齐方式，其后面跟的键值有：center表示居中、 left表示左对齐、right表示右对齐，但是这个属性在HTML4中已经废弃，在HTML5已经不再支持，建议使用CSS来设置表格的对齐方式
- border：表示边框，1表示有边框，边框大小随着数字的增大而增大，”“表示没有边框
- cellpadding：内容距离边框的距离，默认1px
- cellspacing：单元格之间的距离，默认为2px
- width/height：设置表格的尺寸
举个例子，我们设置表格文字为左对齐，边框大小设置为4，内容距边框距离为5，单元格之间的距离设置为0，表格尺寸设置为800：
<table align="left" border=”4“ cellpadding=”5“ cellspacing=”0“ width=”800“ height="800"></table>
合并单元格
- 跨行合并：rowspan
- 跨列合并：colspan
当我们需要合并单元格时，需要先确定是跨行合并还是跨列合并，然后在单元格标签上面添加相关属性，最后删除相关属性，例如：
>
效果如下所示：
姓名 性别 年龄 张三 男 23 李四 31 王五 女 18
列表标签
在我么文章的前面就已经接触过了列表标签，所谓列表就是文段前面的小圆点，我们把这个小圆点叫作无序列表，列表的分类如下所示：
- 无序列表：使用
ul il标签表示- 有序列表：使用
ol li标签表示，标签顺序会按照数字依次递增- 自定义列表：使用
dl dt dd来表示，其中dl表示总标签，dt表示小标题，dd表示标题的说明列表的使用方法如下所示：
<ul><li>这是无序列表</li></ul>
<ol><li>这是有序列表</li></ol>
<dl><dt>这是自定义列表的总标签<dt><dd>这是自定义列表的小标题</dd></dl>
他们的效果如下所示：
- 这是无序列表
- 这是无序列表
这是自定义列表的总标签
- 这是自定义列表的小标题
表单标签
什么是表单
所谓表单简单来说就是可以让用户输入信息，与用户做交互的，同时可以让后端服务器拿到用户的输入
它可以分成两个部分：
- 表单域：包含表单元素的区域
- 表单控件：输入框、提交按钮、复选框等等
表单域的form标签
form标签是用来创建供用户输入的表单
基本用法：<form action="URL" method="GET|POST"></form>
常见的属性有：
- action：指定表单要发送的URL，如果不指定，则默认提交到当前页面
- method：指定发送的表单数据使用的HTTP方法，常见的有GET和POST，表示获取数据和提交数据
- enctype：指定表单数据在发送到服务器端的编码方式
- target：指定在什么地方打开URL，有self在当前页面，blank在新的页面
表单控件的标签
input标签
input是最常见的表单控件标签，常常和form搭配使用，它可以表示：单行文本框、按钮、单选框、复选框等
常见的属性如下所示：
- type：是必须具备的属性，它的键值有许多种，如：text表示文本框、password密码框、radio单选框、checkbox复选框、button普通按钮、sumit提交按钮、reset清空按钮
- name：给input起名字，对于单选框按钮，多个单选框之间的name必须相同
- value：input中的默认值
- checked：默认被选中
- maxlength：设定最大长度
使用方法如下：
文本框：<input type="text">
密码框：<input type="password">
普通按钮：<input type="button" value="在这是一个按钮">
label标签
- 是一个双标签，可以为表单元素定义标签，能够搭配input使用
- for属性：指定当前label和哪个相同id的input标签对应
使用方法如下所示：
<label for="male">男</label> <input id="male" type="radio" name="sex">
select标签
表示下拉表单，通常和option标签搭配使用，在option标签中定义下拉选项，使用方法如下：
<select><option>请选择你的省份</option><option>北京</option><option>上海</option><option>重庆</option></select>
其中，option可以定义selected属性，表示默认选中，如：
<select><option selected="selected">请选择你的省份</option><option>北京</option><option>上海</option><option>重庆</option></select>
textarea标签
是一个多行纯文本编辑控件，常用于用户输入多行文本，如：评论、描述等
主要属性：
- rows：指定行数
- cols：指定列数
- maxlength：设置最大长度
基本用法：
<textarea rows="3" cols="5"></textarea>
无语义标签div和span
div表示分割，span表示跨度，在编写HTML文档时常常使用div和span来分割不同的代码区域
其中，div是独占一行的，span不是独占一行