一、HTML开始
简介：
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
初始网页：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>你好，前端</title>
</head>
<body>
<h1>我的HTML学习开始</h1>
</body>
</html>
基本结构：
- <!DOCTYPE html> 声明为 HTML5 文档
- <html> 元素是 HTML 页面的根元素
- <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
- <title> 元素描述了文档的标题
- <body> 元素包含了可见的页面内容
二、常用标签
HTML 不是一种编程语言，而是一种标记语言，说白了就是使用一个个标签来表示网页，下面列举了一些常用的标签，帮助大家速成HTML。
1.div标签
div标签主要用于对内容分组，并且会在其内容前后产生换行，使用非常频繁
<div>
<div>
Hello HTML
</div>
<div>
Hello World
</div>
</div>演示结果：
2.span标签
span标签主要用于行内分组，分组内容显示在同一行，使用也非常频繁。
<div>
<div>
<span>HTML</span>
<span>CSS</span>
<span>javascript</span>
</div>
<div>
<span>SpringBoot</span>
<span>Mybatis</span>
<span>Vue</span>
</div>
</div>
演示结果：
3.h1-h6标签
h1-h6定义标题，h1最大，h6最小
<div>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>
</div>演示结果：
4.strong标签
用来将文本加粗
<div>
你好，HTML
</div>
<div>
<strong>你好，HTML</strong>
</div>演示结果：
5.a标签
用来设置超文本链接
<div>
<a href="https://www.csdn.net/">CSDN社区</a>
</div>演示结果：
6.img标签
在网页中设置图片
<div>
<div>图片</div>
<img src="./img/img.png" alt="世界末日">
</div>
演示结果：
7.video标签
在网页中插入视频
<div>
<div>视频</div>
<video src="./video/海滨.mp4" controls></video> <!-- controls表示播放控件，否则无法播放 -->
</div>
演示结果：
8.input标签
表单标签，显示一个输入框，可改变“type”类型，即可可输入多种内容
<div>
<div>表单</div>
<div>账号<input type="text"></div>
<div>密码<input type="password"></div>
</div>演示结果：
9.textarea标签
多行表单标签，当我们需要输入多行内容时，就可以使用该标签，该表单还可以拖动然后就可以变大变宽。
<div>
<div>多行表单</div>
<textarea></textarea>
</div>演示结果：
10.button标签
按钮标签，显示一个按钮，可以点击
<div><button>登录</button></div>演示结果
三、练习
欢迎大家根据下面图片练习HTML
附上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<div>
<h1>进军网络人生</h1>
<div>
<a href="https://www.csdn.net/">CSDN</a>是中国最大的IT社区和服务平台、为中国的软件开发者和IT从业者提供广泛的知识分享、 技术交流、职业发展机会以及最新的行业动态。
该平台上包含了大量的技术博客、教程、论坛、问答、资源下载等内容，涵盖了软件开发、数据库、云计算、大数据、人工智能、物联网等
多个技术领域。用户可以在这里学习新知识、解决技术问题、分享自己的经验，并与其他开发者进行交流与合作。
</div>
<div>
<a href="https://www.csdn.net/"><img src="./img/CSDN.png" alt="CSDN"></a>
</div>
<div>
<div><h3>欢迎登录</h3></div>
<div>账号<input type="text"></div>
<div>密码<input type="password"></div>
<div><input type="submit"></div>
</div>
<div>
<div><h3>欢迎留言</h3></div>
<textarea></textarea>
<div><button>留言提交</button></div>
</div>
</div>
</body>
</html>
四、总结
看完博客，相信你对HTML的常用内容学习的差不多了。长路漫漫，编程之路渐行渐远，相信不少小伙伴对未来计算机发展道路还很迷茫，这里给大家推荐一本计算机专业就业宝典，扫码就可以领取，特别是对有出国意向的同学，时不我待，码上领取吧。
